chore: moving things around a little

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.tsx

@@ -1,79 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed 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 React from 'react';
-import {
-  Stepper as MuiStepper,
-  Step as MuiStep,
-  StepButton as MuiStepButton,
-  StepLabel as MuiStepLabel,
-  StepIconProps,
-  Box,
-} from '@material-ui/core';
-import { TaskStep } from '@backstage/plugin-scaffolder-common';
-import { type Step } from '@backstage/plugin-scaffolder-react';
-import { StepIcon } from './StepIcon';
-import { StepTime } from './StepTime';
-
-/**
- *
- * @public
- */
-export interface StepperProps {
-  steps: (TaskStep & Step)[];
-  activeStep?: number;
-}
-
-/**
- * The visual stepper of the task event stream
- *
- * @public
- */
-export const TaskSteps = (props: StepperProps) => {
-  return (
-    <MuiStepper
-      activeStep={props.activeStep}
-      alternativeLabel
-      variant="elevation"
-    >
-      {props.steps.map((step, index) => {
-        const isCompleted = step.status === 'completed';
-        const isFailed = step.status === 'failed';
-        const isActive = step.status === 'processing';
-        const isSkipped = step.status === 'skipped';
-        const stepIconProps: Partial<StepIconProps & { skipped: boolean }> = {
-          completed: isCompleted,
-          error: isFailed,
-          active: isActive,
-          skipped: isSkipped,
-        };
-
-        return (
-          <MuiStep key={index}>
-            <MuiStepButton>
-              <MuiStepLabel
-                StepIconProps={stepIconProps}
-                StepIconComponent={StepIcon}
-              >
-                <Box>{step.name}</Box>
-                <StepTime step={step} />
-              </MuiStepLabel>
-            </MuiStepButton>
-          </MuiStep>
-        );
-      })}
-    </MuiStepper>
-  );
-};

plugins/scaffolder-react/src/components/TaskSteps/index.ts

@@ -1,16 +0,0 @@
-/*
- * Copyright 2023 The Backstage Authors
- *
- * Licensed 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.
- */
-export { TaskSteps, type StepperProps } from './TaskSteps';

plugins/scaffolder-react/src/components/index.ts

@@ -1,18 +0,0 @@
-/*
- * Copyright 2023 The Backstage Authors
- *
- * Licensed 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.
- */
-export { TaskSteps, type StepperProps } from './TaskSteps';
-export { TaskBorder } from './TaskBorder';
-export { TaskLogStream } from './TaskLogStream';

plugins/scaffolder-react/src/next/components/TaskLogStream/TaskLogStream.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles({
 /**
  * The text of the event stream
  *
- * @public
+ * @alpha
  */
 export const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {
   const styles = useStyles();

plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx

@@ -28,8 +28,6 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 
 /**
  * The visual progress of the task event stream
- *
- * @public
  */
 export const TaskBorder = (props: {
   isComplete: boolean;

plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed 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 React from 'react';
+import {
+  Stepper as MuiStepper,
+  Step as MuiStep,
+  StepButton as MuiStepButton,
+  StepLabel as MuiStepLabel,
+  StepIconProps,
+  Box,
+  Paper,
+} from '@material-ui/core';
+import { TaskStep } from '@backstage/plugin-scaffolder-common';
+import { type Step } from '@backstage/plugin-scaffolder-react';
+import { StepIcon } from './StepIcon';
+import { StepTime } from './StepTime';
+import { TaskBorder } from './TaskBorder';
+
+/**
+ * Props for the TaskSteps component
+ *
+ * @alpha
+ */
+export interface TaskStepsProps {
+  steps: (TaskStep & Step)[];
+  activeStep?: number;
+  isComplete?: boolean;
+  isError?: boolean;
+}
+
+/**
+ * The visual stepper of the task event stream
+ *
+ * @alpha
+ */
+export const TaskSteps = (props: TaskStepsProps) => {
+  return (
+    <Paper style={{ position: 'relative', overflow: 'hidden' }}>
+      <TaskBorder
+        isComplete={props.isComplete ?? false}
+        isError={props.isError ?? false}
+      />
+      <Box padding={2}>
+        <MuiStepper
+          activeStep={props.activeStep}
+          alternativeLabel
+          variant="elevation"
+        >
+          {props.steps.map((step, index) => {
+            const isCompleted = step.status === 'completed';
+            const isFailed = step.status === 'failed';
+            const isActive = step.status === 'processing';
+            const isSkipped = step.status === 'skipped';
+            const stepIconProps: Partial<StepIconProps & { skipped: boolean }> =
+              {
+                completed: isCompleted,
+                error: isFailed,
+                active: isActive,
+                skipped: isSkipped,
+              };
+
+            return (
+              <MuiStep key={index}>
+                <MuiStepButton>
+                  <MuiStepLabel
+                    StepIconProps={stepIconProps}
+                    StepIconComponent={StepIcon}
+                  >
+                    <Box>{step.name}</Box>
+                    <StepTime step={step} />
+                  </MuiStepLabel>
+                </MuiStepButton>
+              </MuiStep>
+            );
+          })}
+        </MuiStepper>
+      </Box>
+    </Paper>
+  );
+};

plugins/scaffolder-react/src/next/components/TaskSteps/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { TaskBorder } from './TaskBorder';
+export { TaskSteps, type TaskStepsProps } from './TaskSteps';

plugins/scaffolder-react/src/next/components/index.ts

@@ -20,3 +20,5 @@ export * from './TemplateGroup';
 export * from './Workflow';
 export * from './TemplateOutputs';
 export * from './Form';
+export * from './TaskSteps';
+export * from './TaskLogStream';

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

@@ -18,9 +18,6 @@ import { Page, Header, Content, ErrorPanel } from '@backstage/core-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Box, makeStyles, Paper } from '@material-ui/core';
 import {
-  TaskSteps,
-  TaskBorder,
-  TaskLogStream,
   ScaffolderTaskOutput,
   useTaskEventStream,
 } from '@backstage/plugin-scaffolder-react';
@@ -28,7 +25,11 @@ import { nextSelectedTemplateRouteRef } from '../routes';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
 import { ContextMenu } from './ContextMenu';
-import { DefaultTemplateOutputs } from '@backstage/plugin-scaffolder-react/alpha';
+import {
+  DefaultTemplateOutputs,
+  TaskLogStream,
+  TaskSteps,
+} from '@backstage/plugin-scaffolder-react/alpha';
 
 const useStyles = makeStyles({
   contentWrapper: {
@@ -132,15 +133,12 @@ export const OngoingTask = (props: {
         ) : null}
 
         <Box paddingBottom={2}>
-          <Paper style={{ position: 'relative', overflow: 'hidden' }}>
-            <TaskBorder
-              isComplete={taskStream.completed}
-              isError={Boolean(taskStream.error)}
-            />
-            <Box padding={2}>
-              <TaskSteps steps={steps} activeStep={activeStep} />
-            </Box>
-          </Paper>
+          <TaskSteps
+            steps={steps}
+            activeStep={activeStep}
+            isComplete={taskStream.completed}
+            isError={Boolean(taskStream.error)}
+          />
         </Box>
 
         <Outputs output={taskStream.output} />