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 1/3] 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>
+    </>
   );
 };

From 33e139e65248b2133212c9eae6e9878261e6c318 Mon Sep 17 00:00:00 2001
From: Brian Fletcher <brian@roadie.io>
Date: Fri, 4 Feb 2022 12:05:37 +0000
Subject: [PATCH 2/3] adds changeset

Signed-off-by: Brian Fletcher <brian@roadie.io>
---
 .changeset/loud-monkeys-explode.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/loud-monkeys-explode.md

diff --git a/.changeset/loud-monkeys-explode.md b/.changeset/loud-monkeys-explode.md
new file mode 100644
index 0000000000..b17b1e1641
--- /dev/null
+++ b/.changeset/loud-monkeys-explode.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Adds a loading bar to the scaffolder task page if the task is still loading. This can happen if it takes a while for a task worker to pick up a task.

From 85636955987f84d2fb8b320a684f88d7f1ddb586 Mon Sep 17 00:00:00 2001
From: Brian Fletcher <brian@roadie.io>
Date: Fri, 4 Feb 2022 15:07:24 +0000
Subject: [PATCH 3/3] move the progress bar inside the log viewer

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

diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
index cb2eeab3b2..a5a36d1d40 100644
--- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
+++ b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx
@@ -295,59 +295,58 @@ export const TaskPage = () => {
   };
 
   return (
-    <>
-      <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>
+    <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>
-            </div>
-          )}
-        </Content>
-      </Page>
-    </>
+              <Grid item xs={9}>
+                {!currentStepId && <Progress />}
+
+                <div style={{ height: '80vh' }}>
+                  <LogViewer text={logAsString} />
+                </div>
+              </Grid>
+            </Grid>
+          </div>
+        )}
+      </Content>
+    </Page>
   );
 };