Merge pull request #31989 from 0xts/feat/scaffolder-logs-btn

feat: add log download btn for LogViewer

packages/core-components/report-alpha.api.md

@@ -63,6 +63,7 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'autoLogout.stillTherePrompt.buttonText': "Yes! Don't log me out";
     readonly 'dependencyGraph.fullscreenTooltip': 'Toggle fullscreen';
     readonly 'proxiedSignInPage.title': 'You do not appear to be signed in. Please try reloading the browser page.';
+    readonly 'logViewer.downloadBtn.tooltip': 'Download logs';
     readonly 'logViewer.searchField.placeholder': 'Search';
   }
 >;

packages/core-components/report.api.md

@@ -819,6 +819,7 @@ export interface LogViewerProps {
   classes?: {
     root?: string;
   };
+  onDownloadLog?: () => void;
   text: string;
   textWrap?: boolean;
 }

packages/core-components/src/components/LogViewer/LogViewer.tsx

@@ -27,6 +27,10 @@ const RealLogViewer = lazy(() =>
  * @public
  */
 export interface LogViewerProps {
+  /**
+   * Callback function to handle the download log action, and show the download button.
+   */
+  onDownloadLog?: () => void;
   /**
    * The text of the logs to display.
    *

packages/core-components/src/components/LogViewer/LogViewerControls.tsx

@@ -22,10 +22,14 @@ import Typography from '@material-ui/core/Typography';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import GetApp from '@material-ui/icons/GetApp';
+import ToolTip from '@material-ui/core/Tooltip';
 import { coreComponentsTranslationRef } from '../../translation';
 import { LogViewerSearch } from './useLogViewerSearch';
 
-export interface LogViewerControlsProps extends LogViewerSearch {}
+export interface LogViewerControlsProps extends LogViewerSearch {
+  onDownloadLog?: () => void;
+}
 
 export function LogViewerControls(props: LogViewerControlsProps) {
   const { t } = useTranslationRef(coreComponentsTranslationRef);
@@ -72,6 +76,13 @@ export function LogViewerControls(props: LogViewerControlsProps) {
           <FilterListIcon color="disabled" />
         )}
       </IconButton>
+      {Boolean(props?.onDownloadLog) ? (
+        <ToolTip title={t('logViewer.downloadBtn.tooltip')}>
+          <IconButton size="small" onClick={props.onDownloadLog}>
+            <GetApp />
+          </IconButton>
+        </ToolTip>
+      ) : null}
     </>
   );
 }

packages/core-components/src/components/LogViewer/RealLogViewer.test.tsx

@@ -75,4 +75,41 @@ describe('RealLogViewer', () => {
 
     expect(copyToClipboard).toHaveBeenCalledWith('Derp');
   });
+
+  it('should render download button when showDownloadButton is true', async () => {
+    const onDownloadLog = jest.fn();
+    const rendered = await renderInTestApp(
+      <RealLogViewer
+        text={testText}
+        showDownloadButton
+        onDownloadLog={onDownloadLog}
+      />,
+    );
+
+    const downloadButton = rendered.getByRole('button', { name: /download/i });
+    expect(downloadButton).toBeInTheDocument();
+
+    await userEvent.click(downloadButton);
+    expect(onDownloadLog).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render download button when showDownloadButton is false', async () => {
+    const rendered = await renderInTestApp(
+      <RealLogViewer text={testText} showDownloadButton={false} />,
+    );
+
+    const downloadButton = rendered.queryByRole('button', {
+      name: /download/i,
+    });
+    expect(downloadButton).not.toBeInTheDocument();
+  });
+
+  it('should not render download button by default', async () => {
+    const rendered = await renderInTestApp(<RealLogViewer text={testText} />);
+
+    const downloadButton = rendered.queryByRole('button', {
+      name: /download/i,
+    });
+    expect(downloadButton).not.toBeInTheDocument();
+  });
 });

packages/core-components/src/components/LogViewer/RealLogViewer.tsx

@@ -32,6 +32,8 @@ import { useLogViewerSelection } from './useLogViewerSelection';
 import Snackbar from '@material-ui/core/Snackbar';
 
 export interface RealLogViewerProps {
+  showDownloadButton?: boolean;
+  onDownloadLog?: () => void;
   text: string;
   textWrap?: boolean;
   classes?: { root?: string };
@@ -187,7 +189,10 @@ export function RealLogViewer(props: RealLogViewerProps) {
           return (
             <Box style={{ width, height }} className={classes.root}>
               <Box className={classes.header}>
-                <LogViewerControls {...search} />
+                <LogViewerControls
+                  {...search}
+                  onDownloadLog={props.onDownloadLog}
+                />
               </Box>
               {shouldTextWrap ? (
                 <VariableSizeList<AnsiLine[]>

packages/core-components/src/translation.ts

@@ -128,6 +128,9 @@ export const coreComponentsTranslationRef = createTranslationRef({
         'You do not appear to be signed in. Please try reloading the browser page.',
     },
     logViewer: {
+      downloadBtn: {
+        tooltip: 'Download logs',
+      },
       searchField: {
         placeholder: 'Search',
       },