[Reporting] Make "ScreenCapturePanel" shareable for Canvas (#100623)

* use ScreenCapturePanel component in Canvas * use smaller state object * add comment about canvas-specific shared component * fix example * fix toast error * fix i18n * fix data-test-subj Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 10, 2021 · 3559d37 · 3559d37
1 parent 274bbdc
commit 3559d37
Show file tree

Hide file tree

Showing 29 changed files with 1,753 additions and 620 deletions.
diff --git a/x-pack/examples/reporting_example/public/components/app.tsx b/x-pack/examples/reporting_example/public/components/app.tsx
@@ -6,8 +6,9 @@
  */
 
 import {
+  EuiButton,
   EuiCard,
-  EuiCode,
+  EuiContextMenu,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -17,7 +18,7 @@ import {
   EuiPageContent,
   EuiPageContentBody,
   EuiPageHeader,
-  EuiPanel,
+  EuiPopover,
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
@@ -50,7 +51,19 @@ export const ReportingExampleApp = ({
   reporting,
   screenshotMode,
 }: ReportingExampleAppDeps) => {
-  const { getDefaultLayoutSelectors, ReportingAPIClient } = reporting;
+  const { getDefaultLayoutSelectors } = reporting;
+
+  // Context Menu
+  const [isPopoverOpen, setPopover] = useState(false);
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopover(false);
+  };
+
+  // Async Logos
   const [logos, setLogos] = useState<string[]>([]);
 
   useEffect(() => {
@@ -61,7 +74,7 @@ export const ReportingExampleApp = ({
       });
   });
 
-  const getPDFJobParams = (): JobParamsPDF => {
+  const getPDFJobParamsDefault = (): JobParamsPDF => {
     return {
       layout: {
         id: constants.LAYOUT_TYPES.PRESERVE_LAYOUT,
@@ -73,7 +86,40 @@ export const ReportingExampleApp = ({
     };
   };
 
-  // Render the application DOM.
+  const panels = [
+    { id: 0, items: [{ name: 'PDF Reports', icon: 'document', panel: 1 }] },
+    {
+      id: 1,
+      initialFocusedItemIndex: 1,
+      title: 'PDF Reports',
+      items: [
+        { name: 'No Layout Option', icon: 'document', panel: 2 },
+        { name: 'Canvas Layout Option', icon: 'canvasApp', panel: 3 },
+      ],
+    },
+    {
+      id: 2,
+      title: 'No Layout Option',
+      content: (
+        <reporting.components.ReportingPanelPDF
+          getJobParams={getPDFJobParamsDefault}
+          onClose={closePopover}
+        />
+      ),
+    },
+    {
+      id: 3,
+      title: 'Canvas Layout Option',
+      content: (
+        <reporting.components.ReportingPanelPDF
+          layoutOption="canvas"
+          getJobParams={getPDFJobParamsDefault}
+          onClose={closePopover}
+        />
+      ),
+    },
+  ];
+
   return (
     <Router basename={basename}>
       <I18nProvider>
@@ -87,34 +133,21 @@ export const ReportingExampleApp = ({
             <EuiPageContent>
               <EuiPageContentBody>
                 <EuiText>
-                  <p>
-                    Use the <EuiCode>ReportingStart.components.ScreenCapturePanel</EuiCode>{' '}
-                    component to add the Reporting panel to your page.
-                  </p>
-
-                  <EuiHorizontalRule />
+                  <p>Example of a Sharing menu using components from Reporting</p>
 
-                  <EuiFlexGroup>
-                    <EuiFlexItem grow={false}>
-                      <EuiPanel>
-                        <reporting.components.ScreenCapturePanel
-                          apiClient={new ReportingAPIClient(http)}
-                          toasts={notifications.toasts}
-                          reportType={constants.PDF_REPORT_TYPE}
-                          getJobParams={getPDFJobParams}
-                          objectId="Visualization:Id:ToEnsure:Visualization:IsSaved"
-                        />
-                      </EuiPanel>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
+                  <EuiPopover
+                    id="contextMenuExample"
+                    button={<EuiButton onClick={onButtonClick}>Share</EuiButton>}
+                    isOpen={isPopoverOpen}
+                    closePopover={closePopover}
+                    panelPaddingSize="none"
+                    anchorPosition="downLeft"
+                  >
+                    <EuiContextMenu initialPanelId={0} panels={panels} />
+                  </EuiPopover>
 
                   <EuiHorizontalRule />
 
-                  <p>
-                    The logos below are in a <EuiCode>data-shared-items-container</EuiCode> element
-                    for Reporting.
-                  </p>
-
                   <div data-shared-items-container data-shared-items-count="4">
                     <EuiFlexGroup gutterSize="l">
                       {logos.map((item, index) => (

diff --git a/x-pack/plugins/canvas/i18n/components.ts b/x-pack/plugins/canvas/i18n/components.ts
@@ -6,7 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { BOLD_MD_TOKEN, CANVAS, HTML, JSON, KIBANA, PDF, POST, URL, ZIP } from './constants';
+import { BOLD_MD_TOKEN, CANVAS, HTML, JSON, PDF, URL, ZIP } from './constants';
 
 export const ComponentStrings = {
   AddEmbeddableFlyout: {
@@ -1418,95 +1418,10 @@ export const ComponentStrings = {
           URL,
         },
       }),
-    getCopyReportingConfigMessage: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.copyReportingConfigMessage', {
-        defaultMessage: 'Copied reporting configuration to clipboard',
-      }),
     getCopyShareConfigMessage: () =>
       i18n.translate('xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage', {
         defaultMessage: 'Copied share markup to clipboard',
       }),
-    getExportPDFErrorTitle: (workpadName: string) =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.exportPDFErrorMessage', {
-        defaultMessage: "Failed to create {PDF} for '{workpadName}'",
-        values: {
-          PDF,
-          workpadName,
-        },
-      }),
-    getExportPDFMessage: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.exportPDFMessage', {
-        defaultMessage: 'Exporting {PDF}. You can track the progress in Management.',
-        values: {
-          PDF,
-        },
-      }),
-    getExportPDFTitle: (workpadName: string) =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.exportPDFTitle', {
-        defaultMessage: "{PDF} export of workpad '{workpadName}'",
-        values: {
-          PDF,
-          workpadName,
-        },
-      }),
-    getPDFFullPageLayoutHelpText: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.FullPageLayoutHelpText', {
-        defaultMessage: 'Remove borders and footer logo',
-      }),
-    getPDFFullPageLayoutLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.FullPageLayoutLabel', {
-        defaultMessage: 'Full page layout',
-      }),
-    getPDFPanelAdvancedOptionsLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelAdvancedOptionsLabel', {
-        defaultMessage: 'Advanced options',
-      }),
-    getPDFPanelCopyAriaLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelCopyAriaLabel', {
-        defaultMessage:
-          'Alternatively, you can generate a {PDF} from a script or with Watcher by using this {URL}. Press Enter to copy the {URL} to clipboard.',
-        values: {
-          PDF,
-          URL,
-        },
-      }),
-    getPDFPanelCopyButtonLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelCopyButtonLabel', {
-        defaultMessage: 'Copy {POST} {URL}',
-        values: {
-          POST,
-          URL,
-        },
-      }),
-    getPDFPanelCopyDescription: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelCopyDescription', {
-        defaultMessage:
-          'Alternatively, copy this {POST} {URL} to call generation from outside {KIBANA} or from Watcher.',
-        values: {
-          POST,
-          KIBANA,
-          URL,
-        },
-      }),
-    getPDFPanelGenerateButtonLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelGenerateButtonLabel', {
-        defaultMessage: 'Generate {PDF}',
-        values: {
-          PDF,
-        },
-      }),
-    getPDFPanelGenerateDescription: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelGenerateDescription', {
-        defaultMessage:
-          '{PDF}s can take a minute or two to generate based on the size of your workpad.',
-        values: {
-          PDF,
-        },
-      }),
-    getPDFPanelOptionsLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderShareMenu.pdfPanelOptionsLabel', {
-        defaultMessage: 'Options',
-      }),
     getShareableZipErrorTitle: (workpadName: string) =>
       i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWebsiteErrorTitle', {
         defaultMessage:

diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json
@@ -29,7 +29,6 @@
       "kibanaUtils",
       "lens",
       "maps",
-      "reporting",
       "savedObjects",
       "visualizations"
     ]

diff --git a/...mponents/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot b/...mponents/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
diff --git a/...gins/canvas/public/components/workpad_header/share_menu/__stories__/pdf_panel.stories.tsx b/...gins/canvas/public/components/workpad_header/share_menu/__stories__/pdf_panel.stories.tsx
diff --git a/...ins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx b/...ins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
@@ -5,19 +5,34 @@
  * 2.0.
  */
 
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
 import React from 'react';
+import { platformService } from '../../../../services/stubs/platform';
+import { reportingService } from '../../../../services/stubs/reporting';
 import { ShareMenu } from '../share_menu.component';
 
-storiesOf('components/WorkpadHeader/ShareMenu', module).add('default', () => (
+storiesOf('components/WorkpadHeader/ShareMenu', module).add('minimal', () => (
   <ShareMenu
-    includeReporting={true}
-    onCopy={action('onCopy')}
+    sharingData={{
+      workpad: { id: 'coolworkpad', name: 'Workpad of Cool', height: 10, width: 7 },
+      pageCount: 11,
+    }}
+    sharingServices={{ basePath: platformService.getBasePathInterface() }}
     onExport={action('onExport')}
-    getExportUrl={(type: string) => {
-      action(`getExportUrl('${type}')`);
-      return type;
+  />
+));
+
+storiesOf('components/WorkpadHeader/ShareMenu', module).add('with Reporting', () => (
+  <ShareMenu
+    sharingData={{
+      workpad: { id: 'coolworkpad', name: 'Workpad of Cool', height: 10, width: 7 },
+      pageCount: 11,
     }}
+    sharingServices={{
+      basePath: platformService.getBasePathInterface(),
+      reporting: reportingService.start,
+    }}
+    onExport={action('onExport')}
   />
 ));