Merge pull request #20163 from acierto/master

Improve UX experience for log visibility option

.changeset/metal-peas-beam.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Display log visibility button on the template panel

plugins/scaffolder/src/next/OngoingTask/OngoingTask.test.tsx

@@ -112,4 +112,29 @@ describe('OngoingTask', () => {
       expect(getByTestId('cancel-button')).toHaveClass('Mui-disabled');
     });
   });
+
+  it('should initially do not display logs', async () => {
+    const rendered = await renderInTestApp(
+      <TestApiProvider apis={[[scaffolderApiRef, mockScaffolderApi]]}>
+        <OngoingTask />
+      </TestApiProvider>,
+      { mountedRoutes: { '/': rootRouteRef } },
+    );
+    await expect(rendered.findByText('Show Logs')).resolves.toBeInTheDocument();
+  });
+
+  it('should toggle logs visibility', async () => {
+    const rendered = await renderInTestApp(
+      <TestApiProvider apis={[[scaffolderApiRef, mockScaffolderApi]]}>
+        <OngoingTask />
+      </TestApiProvider>,
+      { mountedRoutes: { '/': rootRouteRef } },
+    );
+    await act(async () => {
+      const element = await rendered.findByText('Show Logs');
+      fireEvent.click(element);
+    });
+
+    await expect(rendered.findByText('Hide Logs')).resolves.toBeInTheDocument();
+  });
 });

plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx

@@ -46,6 +46,9 @@ const useStyles = makeStyles(theme => ({
   cancelButton: {
     marginRight: theme.spacing(1),
   },
+  logsVisibilityButton: {
+    marginRight: theme.spacing(1),
+  },
 }));
 
 export const OngoingTask = (props: {
@@ -188,6 +191,14 @@ export const OngoingTask = (props: {
                   >
                     Cancel
                   </Button>
+                  <Button
+                    className={classes.logsVisibilityButton}
+                    color="primary"
+                    variant="outlined"
+                    onClick={() => setLogVisibleState(!logsVisible)}
+                  >
+                    {logsVisible ? 'Hide Logs' : 'Show Logs'}
+                  </Button>
                   <Button
                     variant="contained"
                     color="primary"