From 9f19529e4847a1785ceed629266d7f27ac56afc3 Mon Sep 17 00:00:00 2001
From: Brian Fletcher <brian@roadie.io>
Date: Fri, 4 Feb 2022 12:02:09 +0000
Subject: [PATCH] adds progress bar to the task page..

.. if the task is still loading

Signed-off-by: Brian Fletcher <brian@roadie.io>
---
 .../src/components/TaskPage/TaskPage.tsx      | 104 +++++++++---------
 1 file changed, 54 insertions(+), 50 deletions(-)

diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
index 9f5dad2adc..cb2eeab3b2 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
@@ -21,6 +21,7 @@ import {
   Lifecycle,
   Page,
   LogViewer,
+  Progress,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
@@ -294,56 +295,59 @@ export const TaskPage = () => {
   };
 
   return (
-    <Page themeId="home">
-      <Header
-        pageTitleOverride={`Task ${taskId}`}
-        title={
-          <>
-            Task Activity <Lifecycle alpha shorthand />
-          </>
-        }
-        subtitle={`Activity for task: ${taskId}`}
-      />
-      <Content>
-        {taskNotFound ? (
-          <ErrorPage
-            status="404"
-            statusMessage="Task not found"
-            additionalInfo="No task found with this ID"
-          />
-        ) : (
-          <div>
-            <Grid container>
-              <Grid item xs={3}>
-                <Paper>
-                  <TaskStatusStepper
-                    steps={steps}
-                    currentStepId={currentStepId}
-                    onUserStepChange={setUserSelectedStepId}
-                  />
-                  {output && hasLinks(output) && (
-                    <TaskPageLinks output={output} />
-                  )}
-                  <Button
-                    className={classes.button}
-                    onClick={handleStartOver}
-                    disabled={!completed}
-                    variant="contained"
-                    color="primary"
-                  >
-                    Start Over
-                  </Button>
-                </Paper>
+    <>
+      <Progress style={{ display: !!currentStepId ? 'none' : undefined }} />
+      <Page themeId="home">
+        <Header
+          pageTitleOverride={`Task ${taskId}`}
+          title={
+            <>
+              Task Activity <Lifecycle alpha shorthand />
+            </>
+          }
+          subtitle={`Activity for task: ${taskId}`}
+        />
+        <Content>
+          {taskNotFound ? (
+            <ErrorPage
+              status="404"
+              statusMessage="Task not found"
+              additionalInfo="No task found with this ID"
+            />
+          ) : (
+            <div>
+              <Grid container>
+                <Grid item xs={3}>
+                  <Paper>
+                    <TaskStatusStepper
+                      steps={steps}
+                      currentStepId={currentStepId}
+                      onUserStepChange={setUserSelectedStepId}
+                    />
+                    {output && hasLinks(output) && (
+                      <TaskPageLinks output={output} />
+                    )}
+                    <Button
+                      className={classes.button}
+                      onClick={handleStartOver}
+                      disabled={!completed}
+                      variant="contained"
+                      color="primary"
+                    >
+                      Start Over
+                    </Button>
+                  </Paper>
+                </Grid>
+                <Grid item xs={9}>
+                  <div style={{ height: '80vh' }}>
+                    <LogViewer text={logAsString} />
+                  </div>
+                </Grid>
               </Grid>
-              <Grid item xs={9}>
-                <div style={{ height: '80vh' }}>
-                  <LogViewer text={logAsString} />
-                </div>
-              </Grid>
-            </Grid>
-          </div>
-        )}
-      </Content>
-    </Page>
+            </div>
+          )}
+        </Content>
+      </Page>
+    </>
   );
 };