[Backport 2.x] [Bug] Updated notebooks reporting button render

public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap

@@ -123,6 +123,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
                   >
                     <button
                       class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="reporting-actions-button"
                       id="reportingActionsButton"
                       type="button"
                     >

public/components/notebooks/components/__tests__/notebook.test.tsx

@@ -54,9 +54,9 @@
   const cloneNotebook = jest.fn();
   const deleteNotebook = jest.fn();
   const setToast = jest.fn();
   const location = jest.fn() as any;
   location.search = '';
   const history = jest.fn() as any;
   history.replace = jest.fn();
   history.push = jest.fn();
 
@@ -518,6 +518,61 @@
     expect(deleteNotebook).toHaveBeenCalledTimes(1);
   });
 
+  it('Checks notebook reporting action presence', async () => {
+    httpClient.get = jest.fn(() => Promise.resolve((emptyNotebook as unknown) as HttpResponse));
+
+    const utils = render(
+      <Notebook
+        pplService={pplService}
+        openedNoteId="458e1320-3f05-11ef-bd29-e58626f102c0"
+        DashboardContainerByValueRenderer={jest.fn()}
+        http={httpClient}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        renameNotebook={jest.fn()}
+        cloneNotebook={jest.fn()}
+        deleteNotebook={deleteNotebook}
+        setToast={setToast}
+        location={location}
+        history={history}
+        dataSourceEnabled={false}
+      />
+    );
+    await waitFor(() => {
+      expect(utils.getByText('sample-notebook-1')).toBeInTheDocument();
+    });
+
+    const button = utils.queryByTestId('reporting-actions-button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('Checks notebook reporting action absence', async () => {
+    httpClient.get = jest.fn(() => Promise.resolve((emptyNotebook as unknown) as HttpResponse));
+
+    const utils = render(
+      <Notebook
+        pplService={pplService}
+        openedNoteId="458e1320-3f05-11ef-bd29-e58626f102c0"
+        DashboardContainerByValueRenderer={jest.fn()}
+        http={httpClient}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        renameNotebook={jest.fn()}
+        cloneNotebook={jest.fn()}
+        deleteNotebook={deleteNotebook}
+        setToast={setToast}
+        location={location}
+        history={history}
+        dataSourceEnabled={true}
+      />
+    );
+    await waitFor(() => {
+      expect(utils.getByText('sample-notebook-1')).toBeInTheDocument();
+    });
+    const button = utils.queryByTestId('reporting-actions-button');
+    expect(button).not.toBeInTheDocument();
+  });
+
   it('Renders the visualization component', async () => {
     SavedObjectsActions.getBulk = jest.fn().mockResolvedValue({
       observabilityObjectList: [{ savedVisualization: sampleSavedVisualization }],

public/components/notebooks/components/notebook.tsx

@@ -78,7 +78,7 @@
   http: CoreStart['http'];
   parentBreadcrumb: ChromeBreadcrumb;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   renameNotebook: (newNoteName: string, noteId: string) => Promise<any>;
   cloneNotebook: (newNoteName: string, noteId: string) => Promise<string>;
   deleteNotebook: (noteList: string[], toastMessage?: string) => void;
   setToast: (title: string, color?: string, text?: string) => void;
@@ -97,7 +97,7 @@
   path: string;
   dateCreated: string;
   dateModified: string;
   paragraphs: any; // notebook paragraphs fetched from API
   parsedPara: ParaType[]; // paragraphs parsed to a common format
   vizPrefix: string; // prefix for visualizations in Zeppelin Adaptor
   isAddParaPopoverOpen: boolean;
@@ -153,7 +153,7 @@
   };
 
   // parse paragraphs based on backend
   parseParagraphs = (paragraphs: any[]): ParaType[] => {
     try {
       const parsedPara = defaultParagraphParser(paragraphs);
       parsedPara.forEach((para: ParaType) => {
@@ -587,7 +587,7 @@
     }
   };
 
   runForAllParagraphs = (reducer: (para: ParaType, _index: number) => Promise<any>) => {
     return this.state.parsedPara
       .map((para: ParaType, _index: number) => () => reducer(para, _index))
       .reduce((chain, func) => chain.then(func), Promise.resolve());
@@ -685,7 +685,7 @@
     this.setState({ dataSourceMDSId: id, dataSourceMDSLabel: label });
   };
 
   loadQueryResultsFromInput = async (paragraph: any, dataSourceMDSId?: any) => {
     const queryType =
       paragraph.input.inputText.substring(0, 4) === '%sql' ? 'sqlquery' : 'pplquery';
     const query = {
@@ -970,31 +970,33 @@
       },
     ];
 
-    const showReportingContextMenu = this.state.isReportingPluginInstalled ? (
-      <div>
-        <EuiPopover
-          panelPaddingSize="none"
-          button={
-            <EuiSmallButton
-              id="reportingActionsButton"
-              iconType="arrowDown"
-              iconSide="right"
-              onClick={() =>
-                this.setState({
-                  isReportingActionsPopoverOpen: !this.state.isReportingActionsPopoverOpen,
-                })
-              }
-            >
-              Reporting
-            </EuiSmallButton>
-          }
-          isOpen={this.state.isReportingActionsPopoverOpen}
-          closePopover={() => this.setState({ isReportingActionsPopoverOpen: false })}
-        >
-          <EuiContextMenu initialPanelId={0} panels={reportingActionPanels} size="s" />
-        </EuiPopover>
-      </div>
-    ) : null;
+    const showReportingContextMenu =
+      this.state.isReportingPluginInstalled && !this.state.dataSourceMDSEnabled ? (
+        <div>
+          <EuiPopover
+            panelPaddingSize="none"
+            button={
+              <EuiSmallButton
+                data-test-subj="reporting-actions-button"
+                id="reportingActionsButton"
+                iconType="arrowDown"
+                iconSide="right"
+                onClick={() =>
+                  this.setState({
+                    isReportingActionsPopoverOpen: !this.state.isReportingActionsPopoverOpen,
+                  })
+                }
+              >
+                Reporting
+              </EuiSmallButton>
+            }
+            isOpen={this.state.isReportingActionsPopoverOpen}
+            closePopover={() => this.setState({ isReportingActionsPopoverOpen: false })}
+          >
+            <EuiContextMenu initialPanelId={0} panels={reportingActionPanels} size="s" />
+          </EuiPopover>
+        </div>
+      ) : null;
 
     const showLoadingModal = this.state.isReportingLoadingModalOpen ? (
       <GenerateReportLoadingModal setShowLoading={this.toggleReportingLoadingModal} />