fix(Dashboard): Sync/Async Dashboard Screenshot Generation

superset-frontend/package.json

@@ -137,6 +137,7 @@
     "d3-scale": "^2.1.2",
     "dayjs": "^1.11.13",
     "dom-to-image-more": "^3.2.0",
+    "dom-to-pdf": "^0.3.2",
     "emotion-rgba": "0.0.12",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -60,6 +60,8 @@ export enum FeatureFlag {
   UseAnalagousColors = 'USE_ANALAGOUS_COLORS',
   ForceSqlLabRunAsync = 'SQLLAB_FORCE_RUN_ASYNC',
   SlackEnableAvatars = 'SLACK_ENABLE_AVATARS',
+  EnableDashboardScreenshotEndpoints = 'ENABLE_DASHBOARD_SCREENSHOT_ENDPOINTS',
+  EnableDashboardDownloadWebDriverScreenshot = 'ENABLE_DASHBOARD_DOWNLOAD_WEBDRIVER_SCREENSHOT',
 }
 
 export type ScheduleQueriesProps = {

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/DownloadAsImage.test.tsx

@@ -23,13 +23,20 @@ import { Menu } from 'src/components/Menu';
 import downloadAsImage from 'src/utils/downloadAsImage';
 import DownloadAsImage from './DownloadAsImage';
 
+const mockAddDangerToast = jest.fn();
+
 jest.mock('src/utils/downloadAsImage', () => ({
   __esModule: true,
   default: jest.fn(() => (_e: SyntheticEvent) => {}),
 }));
 
+jest.mock('src/components/MessageToasts/withToasts', () => ({
+  useToasts: () => ({
+    addDangerToast: mockAddDangerToast,
+  }),
+}));
+
 const createProps = () => ({
-  addDangerToast: jest.fn(),
   text: 'Download as Image',
   dashboardTitle: 'Test Dashboard',
   logEvent: jest.fn(),
@@ -40,22 +47,24 @@ const renderComponent = () => {
     <Menu>
       <DownloadAsImage {...createProps()} />
     </Menu>,
+    {
+      useRedux: true,
+    },
   );
 };
 
 test('Should call download image on click', async () => {
-  const props = createProps();
   renderComponent();
   await waitFor(() => {
     expect(downloadAsImage).toHaveBeenCalledTimes(0);
-    expect(props.addDangerToast).toHaveBeenCalledTimes(0);
+    expect(mockAddDangerToast).toHaveBeenCalledTimes(0);
   });
 
   userEvent.click(screen.getByRole('button', { name: 'Download as Image' }));
 
   await waitFor(() => {
     expect(downloadAsImage).toHaveBeenCalledTimes(1);
-    expect(props.addDangerToast).toHaveBeenCalledTimes(0);
+    expect(mockAddDangerToast).toHaveBeenCalledTimes(0);
   });
 });
 

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/DownloadAsImage.tsx

@@ -21,20 +21,20 @@ import { logging, t } from '@superset-ui/core';
 import { Menu } from 'src/components/Menu';
 import { LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
 import downloadAsImage from 'src/utils/downloadAsImage';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
 
 export default function DownloadAsImage({
   text,
   logEvent,
   dashboardTitle,
-  addDangerToast,
   ...rest
 }: {
   text: string;
-  addDangerToast: Function;
   dashboardTitle: string;
   logEvent?: Function;
 }) {
   const SCREENSHOT_NODE_SELECTOR = '.dashboard';
+  const { addDangerToast } = useToasts();
   const onDownloadImage = async (e: SyntheticEvent) => {
     try {
       downloadAsImage(SCREENSHOT_NODE_SELECTOR, dashboardTitle, true)(e);

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/DownloadAsPdf.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { SyntheticEvent } from 'react';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { Menu } from 'src/components/Menu';
+import downloadAsPdf from 'src/utils/downloadAsPdf';
+import DownloadAsPdf from './DownloadAsPdf';
+
+const mockAddDangerToast = jest.fn();
+
+jest.mock('src/utils/downloadAsPdf', () => ({
+  __esModule: true,
+  default: jest.fn(() => (_e: SyntheticEvent) => {}),
+}));
+
+jest.mock('src/components/MessageToasts/withToasts', () => ({
+  useToasts: () => ({
+    addDangerToast: mockAddDangerToast,
+  }),
+}));
+
+const createProps = () => ({
+  text: 'Export as PDF',
+  dashboardTitle: 'Test Dashboard',
+  logEvent: jest.fn(),
+});
+
+const renderComponent = () => {
+  render(
+    <Menu>
+      <DownloadAsPdf {...createProps()} />
+    </Menu>,
+    { useRedux: true },
+  );
+};
+
+test('Should call download pdf on click', async () => {
+  renderComponent();
+  await waitFor(() => {
+    expect(downloadAsPdf).toHaveBeenCalledTimes(0);
+    expect(mockAddDangerToast).toHaveBeenCalledTimes(0);
+  });
+
+  userEvent.click(screen.getByRole('button', { name: 'Export as PDF' }));
+
+  await waitFor(() => {
+    expect(downloadAsPdf).toHaveBeenCalledTimes(1);
+    expect(mockAddDangerToast).toHaveBeenCalledTimes(0);
+  });
+});
+
+test('Component is rendered with role="button"', async () => {
+  renderComponent();
+  const button = screen.getByRole('button', { name: 'Export as PDF' });
+  expect(button).toBeInTheDocument();
+});

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/DownloadAsPdf.tsx

@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { SyntheticEvent } from 'react';
+import { logging, t } from '@superset-ui/core';
+import { Menu } from 'src/components/Menu';
+import downloadAsPdf from 'src/utils/downloadAsPdf';
+import { LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_PDF } from 'src/logger/LogUtils';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
+
+export default function DownloadAsPdf({
+  text,
+  logEvent,
+  dashboardTitle,
+  ...rest
+}: {
+  text: string;
+  dashboardTitle: string;
+  logEvent?: Function;
+}) {
+  const SCREENSHOT_NODE_SELECTOR = '.dashboard';
+  const { addDangerToast } = useToasts();
+  const onDownloadPdf = async (e: SyntheticEvent) => {
+    try {
+      downloadAsPdf(SCREENSHOT_NODE_SELECTOR, dashboardTitle, true)(e);
+    } catch (error) {
+      logging.error(error);
+      addDangerToast(t('Sorry, something went wrong. Try again later.'));
+    }
+    logEvent?.(LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_PDF);
+  };
+
+  return (
+    <Menu.Item key="download-pdf" {...rest}>
+      <div onClick={onDownloadPdf} role="button" tabIndex={0}>
+        {text}
+      </div>
+    </Menu.Item>
+  );
+}

superset-frontend/src/dashboard/components/menu/DownloadMenuItems/DownloadScreenshot.test.tsx

@@ -130,6 +130,9 @@ describe('DownloadScreenshot component', () => {
     await waitFor(() => {
       expect(mockAddInfoToast).toHaveBeenCalledWith(
         'The screenshot is being generated. Please, do not leave the page.',
+        {
+          noDuplicate: true,
+        },
       );
     });
   });
@@ -202,7 +205,7 @@ describe('DownloadScreenshot component', () => {
     // Wait for the successful image retrieval message
     await waitFor(() => {
       expect(mockAddSuccessToast).toHaveBeenCalledWith(
-        'The screenshot is now being downloaded.',
+        'The screenshot has been downloaded.',
       );
     });
   });