[canvas] Create Reporting Service; remove legacy service

x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx

@@ -8,29 +8,16 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { reportingService } from '../../../../services/legacy/stubs/reporting';
+import { reduxDecorator } from '../../../../../storybook';
 import { ShareMenu } from '../share_menu.component';
 
-storiesOf('components/WorkpadHeader/ShareMenu', module).add('minimal', () => (
-  <ShareMenu
-    sharingData={{
-      workpad: { id: 'coolworkpad', name: 'Workpad of Cool', height: 10, width: 7 },
-      pageCount: 11,
-    }}
-    sharingServices={{}}
-    onExport={action('onExport')}
-  />
-));
+storiesOf('components/WorkpadHeader/ShareMenu', module)
+  .addDecorator(reduxDecorator())
+  .add('minimal', () => <ShareMenu onExport={action('onExport')} ReportingComponent={null} />);
 
 storiesOf('components/WorkpadHeader/ShareMenu', module).add('with Reporting', () => (
   <ShareMenu
-    sharingData={{
-      workpad: { id: 'coolworkpad', name: 'Workpad of Cool', height: 10, width: 7 },
-      pageCount: 11,
-    }}
-    sharingServices={{
-      reporting: reportingService.start,
-    }}
     onExport={action('onExport')}
+    ReportingComponent={() => <div>Provided Reporting Component</div>}
   />
 ));

x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx

@@ -9,8 +9,10 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ShareWebsiteFlyout } from '../flyout.component';
+import { reduxDecorator } from '../../../../../../storybook';
 
 storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module)
+  .addDecorator(reduxDecorator())
   .addParameters({
     info: {
       inline: true,

x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx

@@ -5,17 +5,14 @@
  * 2.0.
  */
 
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Popover, ClosePopoverFn } from '../../popover';
-import { ReportingStart } from '../../../../../reporting/public';
 import { PDF, JSON } from '../../../../i18n/constants';
 import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
-import { usePlatformService } from '../../../services';
+import { ClosePopoverFn, Popover } from '../../popover';
 import { ShareWebsiteFlyout } from './flyout';
-import { CanvasWorkpadSharingData, getPdfJobParams } from './utils';
 
 const strings = {
   getShareDownloadJSONTitle: () =>
@@ -53,30 +50,20 @@ type CloseTypes = 'share';
 export type OnCopyFn = (type: CopyTypes) => void;
 export type OnExportFn = (type: ExportTypes) => void;
 export type OnCloseFn = (type: CloseTypes) => void;
+export type ReportingComponent = ({ onClose }: { onClose: () => void }) => JSX.Element;
 
 export interface Props {
-  /** Canvas workpad to export as PDF **/
-  sharingData: CanvasWorkpadSharingData;
-  sharingServices: {
-    /** Reporting dependency **/
-    reporting?: ReportingStart;
-  };
-  /** Handler to invoke when an end product is exported. */
+  ReportingComponent: ReportingComponent | null;
   onExport: OnExportFn;
 }
 
 /**
  * The Menu for Exporting a Workpad from Canvas.
  */
-export const ShareMenu: FunctionComponent<Props> = ({
-  sharingData,
-  sharingServices: services,
-  onExport,
-}) => {
-  const platformService = usePlatformService();
+export const ShareMenu = ({ ReportingComponent, onExport }: Props) => {
   const [showFlyout, setShowFlyout] = useState(false);
 
-  const onClose = () => {
+  const onFlyoutClose = () => {
     setShowFlyout(false);
   };
 
@@ -91,22 +78,14 @@ export const ShareMenu: FunctionComponent<Props> = ({
           closePopover();
         },
       },
-      services.reporting != null
+      ReportingComponent !== null
         ? {
             name: strings.getShareDownloadPDFTitle(),
             icon: 'document',
             panel: {
               id: 1,
               title: strings.getShareDownloadPDFTitle(),
-              content: (
-                <services.reporting.components.ReportingPanelPDF
-                  getJobParams={() =>
-                    getPdfJobParams(sharingData, platformService.getBasePathInterface())
-                  }
-                  layoutOption="canvas"
-                  onClose={closePopover}
-                />
-              ),
+              content: <ReportingComponent onClose={closePopover} />,
             },
             'data-test-subj': 'sharePanel-PDFReports',
           }
@@ -133,7 +112,7 @@ export const ShareMenu: FunctionComponent<Props> = ({
     </EuiButtonEmpty>
   );
 
-  const flyout = showFlyout ? <ShareWebsiteFlyout onClose={onClose} /> : null;
+  const flyout = showFlyout ? <ShareWebsiteFlyout onClose={onFlyoutClose} /> : null;
 
   return (
     <div>

x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx

@@ -5,14 +5,15 @@
  * 2.0.
  */
 
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import { State } from '../../../../types';
-import { useReportingService } from '../../../services';
+import { useReportingService, usePlatformService } from '../../../services';
 import { getPages, getWorkpad } from '../../../state/selectors/workpad';
 import { useDownloadWorkpad } from '../../hooks';
 import { ShareMenu as ShareMenuComponent } from './share_menu.component';
+import { getPdfJobParams } from './utils';
 
 const strings = {
   getUnknownExportErrorMessage: (type: string) =>
@@ -24,24 +25,36 @@ const strings = {
     }),
 };
 
-export const ShareMenu: FC = () => {
+export const ShareMenu = () => {
+  const downloadWorkpad = useDownloadWorkpad();
+  const reportingService = useReportingService();
+  const platformService = usePlatformService();
+
   const { workpad, pageCount } = useSelector((state: State) => ({
     workpad: getWorkpad(state),
     pageCount: getPages(state).length,
   }));
 
-  const reportingService = useReportingService();
-  const downloadWorkpad = useDownloadWorkpad();
-
-  const sharingServices = {
-    reporting: reportingService.start,
-  };
+  const ReportingPanelPDFComponent = reportingService.getReportingPanelPDFComponent();
 
   const sharingData = {
     workpad,
     pageCount,
   };
 
+  const ReportingComponent =
+    ReportingPanelPDFComponent !== null
+      ? ({ onClose }: { onClose: () => void }) => (
+          <ReportingPanelPDFComponent
+            getJobParams={() =>
+              getPdfJobParams(sharingData, platformService.getBasePathInterface())
+            }
+            layoutOption="canvas"
+            onClose={onClose}
+          />
+        )
+      : null;
+
   const onExport = useCallback(
     (type: string) => {
       switch (type) {
@@ -58,11 +71,5 @@ export const ShareMenu: FC = () => {
     [downloadWorkpad, workpad]
   );
 
-  return (
-    <ShareMenuComponent
-      sharingServices={sharingServices}
-      sharingData={sharingData}
-      onExport={onExport}
-    />
-  );
+  return <ShareMenuComponent {...{ ReportingComponent, onExport }} />;
 };

x-pack/plugins/canvas/public/services/index.ts

@@ -12,11 +12,13 @@ import { CanvasWorkpadService } from './workpad';
 import { CanvasNavLinkService } from './nav_link';
 import { CanvasNotifyService } from './notify';
 import { CanvasPlatformService } from './platform';
+import { CanvasReportingService } from './reporting';
 
 export interface CanvasPluginServices {
   workpad: CanvasWorkpadService;
   notify: CanvasNotifyService;
   platform: CanvasPlatformService;
+  reporting: CanvasReportingService;
   navLink: CanvasNavLinkService;
 }
 
@@ -26,3 +28,4 @@ export const useWorkpadService = () => (() => pluginServices.getHooks().workpad.
 export const useNavLinkService = () => (() => pluginServices.getHooks().navLink.useService())();
 export const useNotifyService = () => (() => pluginServices.getHooks().notify.useService())();
 export const usePlatformService = () => (() => pluginServices.getHooks().platform.useService())();
+export const useReportingService = () => (() => pluginServices.getHooks().reporting.useService())();

x-pack/plugins/canvas/public/services/kibana/index.ts

@@ -16,12 +16,14 @@ import { workpadServiceFactory } from './workpad';
 import { navLinkServiceFactory } from './nav_link';
 import { notifyServiceFactory } from './notify';
 import { platformServiceFactory } from './platform';
+import { reportingServiceFactory } from './reporting';
 import { CanvasPluginServices } from '..';
 import { CanvasStartDeps } from '../../plugin';
 
 export { workpadServiceFactory } from './workpad';
 export { notifyServiceFactory } from './notify';
 export { platformServiceFactory } from './platform';
+export { reportingServiceFactory } from './reporting';
 
 export const pluginServiceProviders: PluginServiceProviders<
   CanvasPluginServices,
@@ -31,6 +33,7 @@ export const pluginServiceProviders: PluginServiceProviders<
   navLink: new PluginServiceProvider(navLinkServiceFactory),
   notify: new PluginServiceProvider(notifyServiceFactory),
   platform: new PluginServiceProvider(platformServiceFactory),
+  reporting: new PluginServiceProvider(reportingServiceFactory),
 };
 
 export const pluginServiceRegistry = new PluginServiceRegistry<

x-pack/plugins/canvas/public/services/kibana/reporting.ts

@@ -0,0 +1,45 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { KibanaPluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { CanvasStartDeps } from '../../plugin';
+import { CanvasReportingService } from '../reporting';
+
+export type CanvasReportingServiceFactory = KibanaPluginServiceFactory<
+  CanvasReportingService,
+  CanvasStartDeps
+>;
+
+export const reportingServiceFactory: CanvasReportingServiceFactory = ({
+  startPlugins,
+  coreStart,
+}) => {
+  const { reporting } = startPlugins;
+
+  const reportingEnabled = () => ({
+    getReportingPanelPDFComponent: () => reporting?.components.ReportingPanelPDF || null,
+  });
+  const reportingDisabled = () => ({ getReportingPanelPDFComponent: () => null });
+
+  if (!reporting) {
+    // Reporting is not enabled
+    return reportingDisabled();
+  }
+
+  if (reporting.usesUiCapabilities()) {
+    if (coreStart.application.capabilities.canvas?.generatePdf === true) {
+      // Canvas has declared Reporting as a subfeature with the `generatePdf` UI Capability
+      return reportingEnabled();
+    } else {
+      return reportingDisabled();
+    }
+  }
+
+  // Legacy/Deprecated: Reporting is enabled as an Elasticsearch feature
+  return reportingEnabled();
+};

x-pack/plugins/canvas/public/services/legacy/context.tsx

@@ -31,8 +31,6 @@ export const useServices = () => useContext(ServicesContext);
 export const useEmbeddablesService = () => useServices().embeddables;
 export const useExpressionsService = () => useServices().expressions;
 export const useLabsService = () => useServices().labs;
-export const useReportingService = () => useServices().reporting;
-
 export const withServices = <Props extends WithServicesProps>(type: ComponentType<Props>) => {
   const EnhancedType: FC<Props> = (props) =>
     createElement(type, { ...props, services: useServices() });
@@ -48,7 +46,6 @@ export const LegacyServicesProvider: FC<{
     embeddables: specifiedProviders.embeddables.getService(),
     expressions: specifiedProviders.expressions.getService(),
     search: specifiedProviders.search.getService(),
-    reporting: specifiedProviders.reporting.getService(),
     labs: specifiedProviders.labs.getService(),
   };
   return <ServicesContext.Provider value={value}>{children}</ServicesContext.Provider>;

x-pack/plugins/canvas/public/services/legacy/index.ts

@@ -12,7 +12,6 @@ import { embeddablesServiceFactory } from './embeddables';
 import { expressionsServiceFactory } from './expressions';
 import { searchServiceFactory } from './search';
 import { labsServiceFactory } from './labs';
-import { reportingServiceFactory } from './reporting';
 
 export { SearchService } from './search';
 export { EmbeddablesService } from './embeddables';
@@ -74,7 +73,6 @@ export const services = {
   embeddables: new CanvasServiceProvider(embeddablesServiceFactory),
   expressions: new CanvasServiceProvider(expressionsServiceFactory),
   search: new CanvasServiceProvider(searchServiceFactory),
-  reporting: new CanvasServiceProvider(reportingServiceFactory),
   labs: new CanvasServiceProvider(labsServiceFactory),
 };
 
@@ -84,7 +82,6 @@ export interface CanvasServices {
   embeddables: ServiceFromProvider<typeof services.embeddables>;
   expressions: ServiceFromProvider<typeof services.expressions>;
   search: ServiceFromProvider<typeof services.search>;
-  reporting: ServiceFromProvider<typeof services.reporting>;
   labs: ServiceFromProvider<typeof services.labs>;
 }
 
@@ -110,5 +107,4 @@ export const {
   embeddables: embeddableService,
   expressions: expressionsService,
   search: searchService,
-  reporting: reportingService,
 } = services;

x-pack/plugins/canvas/public/services/legacy/stubs/index.ts

@@ -8,14 +8,12 @@
 import { CanvasServices, services } from '../';
 import { embeddablesService } from './embeddables';
 import { expressionsService } from './expressions';
-import { reportingService } from './reporting';
 import { labsService } from './labs';
 import { searchService } from './search';
 
 export const stubs: CanvasServices = {
   embeddables: embeddablesService,
   expressions: expressionsService,
-  reporting: reportingService,
   search: searchService,
   labs: labsService,
 };

x-pack/plugins/canvas/public/services/reporting.ts

@@ -0,0 +1,13 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ReportingStart } from '../../../reporting/public';
+
+type ReportingPanelPDFComponent = ReportingStart['components']['ReportingPanelPDF'];
+export interface CanvasReportingService {
+  getReportingPanelPDFComponent: () => ReportingPanelPDFComponent | null;
+}