Use <Progress> instead of <LinearProgress /> in combination with …

…`Suspense` Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
backstage · Nov 11, 2021 · e849f9c · e849f9c
1 parent 7e5bd18
commit e849f9c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/.changeset/dull-mangos-count.md b/.changeset/dull-mangos-count.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-github-actions': patch
+---
+
+Use `<Progress>` instead of `<LinearProgress />` in combination with `Suspense`.
diff --git a/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx b/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { Progress } from '@backstage/core-components';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  LinearProgress,
   Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -85,7 +85,7 @@ export const ActionOutput = ({
         {messages.length === 0 ? (
           'Nothing here...'
         ) : (
-          <Suspense fallback={<LinearProgress />}>
+          <Suspense fallback={<Progress />}>
             <div style={{ height: '20vh', width: '100%' }}>
               <LazyLog text={messages.join('\n')} extraLines={1} enableSearch />
             </div>

diff --git a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
@@ -14,28 +14,27 @@
  * limitations under the License.
  */
 
+import { Entity } from '@backstage/catalog-model';
+import { Progress } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import {
   Accordion,
   AccordionSummary,
   CircularProgress,
   Fade,
-  LinearProgress,
   makeStyles,
   Modal,
   Theme,
   Tooltip,
   Typography,
   Zoom,
 } from '@material-ui/core';
-
+import DescriptionIcon from '@material-ui/icons/Description';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React, { Suspense } from 'react';
-import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
 import { useProjectName } from '../useProjectName';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import DescriptionIcon from '@material-ui/icons/Description';
-import { Entity } from '@backstage/catalog-model';
-import { readGitHubIntegrationConfigs } from '@backstage/integration';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
 
 const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const LinePart = React.lazy(() => import('react-lazylog/build/LinePart'));
@@ -72,7 +71,7 @@ const DisplayLog = ({
   className: string;
 }) => {
   return (
-    <Suspense fallback={<LinearProgress />}>
+    <Suspense fallback={<Progress />}>
       <div className={className}>
         <LazyLog
           text={jobLogs ?? 'No Values Found'}