[Dashboards] Export source (serializable state) of a dashboard

package.json

@@ -239,6 +239,7 @@
     "@kbn/content-management-content-editor": "link:src/platform/packages/shared/content-management/content_editor",
     "@kbn/content-management-content-insights-public": "link:src/platform/packages/shared/content-management/content_insights/content_insights_public",
     "@kbn/content-management-content-insights-server": "link:src/platform/packages/shared/content-management/content_insights/content_insights_server",
+    "@kbn/content-management-content-source": "link:src/platform/packages/shared/content-management/content_source",
     "@kbn/content-management-examples-plugin": "link:examples/content_management_examples",
     "@kbn/content-management-favorites-common": "link:src/platform/packages/shared/content-management/favorites/favorites_common",
     "@kbn/content-management-favorites-public": "link:src/platform/packages/shared/content-management/favorites/favorites_public",

src/platform/packages/shared/content-management/content_source/README.md

@@ -0,0 +1,3 @@
+# @kbn/content-management-content-source
+
+A component that opens a flyout containing the source of a content item (such as a dashboard).

src/platform/packages/shared/content-management/content_source/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ContentSourceKibanaProvider, useOpenContentSource } from './src';
+export type { ContentSourceFlyoutProps } from './src';

src/platform/packages/shared/content-management/content_source/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../../../../../..',
+  roots: ['<rootDir>/src/platform/packages/shared/content-management/content_source'],
+};

src/platform/packages/shared/content-management/content_source/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/content-management-content-source",
+  "owner": "@elastic/kibana-presentation",
+  "group": "platform",
+  "visibility": "shared"
+}

src/platform/packages/shared/content-management/content_source/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/content-management-content-source",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}

src/platform/packages/shared/content-management/content_source/src/components/content_flyout.tsx

@@ -0,0 +1,166 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiCodeBlock,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiLoadingSpinner,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+// @ts-expect-error untyped library
+import { saveAs } from '@elastic/filesaver';
+
+const flyoutBodyCss = css`
+  height: 100%;
+  .euiFlyoutBody__overflowContent {
+    height: 100%;
+    padding: 0;
+  }
+`;
+
+export interface ContentSourceFlyoutProps {
+  onClose: () => void;
+  getContent: () => Promise<object>;
+  contentName: string;
+}
+
+export const ContentSourceFlyout: React.FC<ContentSourceFlyoutProps> = ({
+  onClose,
+  getContent,
+  contentName,
+}) => {
+  const [{ content, loading, error }, setContent] = useState<{
+    loading: boolean;
+    content: Awaited<object> | null;
+    error: unknown | null;
+  }>({ loading: true, content: null, error: null });
+
+  const onDownload = useCallback(() => {
+    const blob = new Blob([JSON.stringify(content, null, 2)], {
+      type: 'application/json',
+    });
+    saveAs(blob, 'export.json');
+  }, [content]);
+
+  useEffect(() => {
+    const loadContent = () => {
+      getContent()
+        .then((_content) =>
+          setContent((prevState) => ({
+            ...prevState,
+            loading: false,
+            content: _content,
+          }))
+        )
+        .catch((err) =>
+          setContent((prevState) => ({
+            ...prevState,
+            loading: false,
+            error: err,
+          }))
+        );
+    };
+
+    loadContent();
+  }, [getContent]);
+
+  return (
+    <>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle data-test-subj="flyoutTitle">
+          <h2>
+            <FormattedMessage
+              id="contentManagement.contentSource.flyoutTitle"
+              defaultMessage="Export {contentName} JSON source"
+              values={{
+                contentName,
+              }}
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody css={flyoutBodyCss}>
+        {error ? (
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="contentManagement.contentSource.flyoutError"
+                defaultMessage="An error occurred"
+              />
+            }
+            color="danger"
+            iconType="alert"
+          />
+        ) : (
+          <>
+            {loading ? (
+              <EuiEmptyPrompt
+                data-test-subj="contentManagement.contentSource.loadingIndicator"
+                icon={<EuiLoadingSpinner size="l" />}
+              />
+            ) : (
+              <EuiCodeBlock
+                language="json"
+                lineNumbers
+                isCopyable
+                overflowHeight="100%"
+                isVirtualized
+              >
+                {JSON.stringify(content, null, 2)}
+              </EuiCodeBlock>
+            )}
+          </>
+        )}
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="cross"
+              flush="left"
+              onClick={onClose}
+              data-test-subj="closeFlyoutButton"
+            >
+              <FormattedMessage
+                id="contentManagement.contentSource.flyoutCloseButton"
+                defaultMessage="Close"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              iconType="download"
+              color="primary"
+              fill
+              onClick={onDownload}
+              data-test-subj="downloadButton"
+              disabled={loading}
+            >
+              <FormattedMessage
+                id="contentManagement.contentSource.flyoutDownloadButton"
+                defaultMessage="Download file"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </>
+  );
+};

src/platform/packages/shared/content-management/content_source/src/components/content_flyout_container.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import type { FC } from 'react';
+
+import { ContentSourceFlyout } from './content_flyout';
+import type { ContentSourceFlyoutProps } from './content_flyout';
+
+export type ContentSourceFlyoutContainerProps = ContentSourceFlyoutProps;
+
+export const ContentSourceFlyoutContainer: FC<ContentSourceFlyoutContainerProps> = (props) => {
+  return <ContentSourceFlyout {...props} />;
+};

src/platform/packages/shared/content-management/content_source/src/components/content_source_loader.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader } from '@elastic/eui';
+import type { ContentSourceFlyoutContainerProps } from './content_flyout_container';
+
+const ContentSourceFlyoutContentContainer = React.lazy(() =>
+  import('./content_flyout_container').then(
+    ({ ContentSourceFlyoutContainer: _ContentSourceFlyoutContentContainer }) => ({
+      default: _ContentSourceFlyoutContentContainer,
+    })
+  )
+);
+
+export const ContentSourceLoader: React.FC<ContentSourceFlyoutContainerProps> = (props) => {
+  return (
+    <React.Suspense
+      fallback={
+        <>
+          <EuiFlyoutHeader />
+          <EuiFlyoutBody />
+          <EuiFlyoutFooter />
+        </>
+      }
+    >
+      <ContentSourceFlyoutContentContainer {...props} />
+    </React.Suspense>
+  );
+};

src/platform/packages/shared/content-management/content_source/src/components/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ContentSourceLoader } from './content_source_loader';
+export type { ContentSourceFlyoutProps } from './content_flyout';

src/platform/packages/shared/content-management/content_source/src/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { ContentSourceKibanaProvider } from './services';
+export { useOpenContentSource } from './open_content_source';
+export type { ContentSourceFlyoutProps } from './components';

src/platform/packages/shared/content-management/content_source/src/open_content_source.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback, useRef } from 'react';
+import type { OverlayRef } from '@kbn/core-mount-utils-browser';
+
+import type { ContentSourceFlyoutProps } from './components';
+
+import { ContentSourceLoader } from './components';
+import { useServices } from './services';
+
+export function useOpenContentSource() {
+  const services = useServices();
+  const { openFlyout } = services;
+  const flyout = useRef<OverlayRef | null>(null);
+
+  return useCallback(
+    (args: ContentSourceFlyoutProps) => {
+      const closeFlyout = () => {
+        flyout.current?.close();
+      };
+
+      flyout.current = openFlyout(<ContentSourceLoader {...args} onClose={closeFlyout} />, {
+        maxWidth: 600,
+        size: 'm',
+        ownFocus: true,
+        hideCloseButton: true,
+      });
+
+      return closeFlyout;
+    },
+    [openFlyout]
+  );
+}