Replace CenteredCircularProgress with Backstage core component Progress

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>

plugins/git-release-manager/src/GitReleaseManager.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 import { Alert } from '@material-ui/lab';
-import { useApi, ContentHeader } from '@backstage/core';
+import { useApi, ContentHeader, Progress } from '@backstage/core';
 import { Box } from '@material-ui/core';
 
 import {
@@ -26,7 +26,6 @@ import {
   ComponentConfigPatch,
   ComponentConfigPromoteRc,
 } from './types/types';
-import { CenteredCircularProgress } from './components/CenteredCircularProgress';
 import { Features } from './features/Features';
 import { gitReleaseManagerApiRef } from './api/serviceApiRef';
 import { InfoCardPlus } from './components/InfoCardPlus';
@@ -73,7 +72,7 @@ export function GitReleaseManager(props: GitReleaseManagerProps) {
   }
 
   if (userResponse.loading) {
-    return <CenteredCircularProgress />;
+    return <Progress />;
   }
 
   if (!userResponse.value?.user.username) {

plugins/git-release-manager/src/components/CenteredCircularProgress.tsx

@@ -1,26 +0,0 @@
-/*
- * Copyright 2021 Spotify AB
- *
- * 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 { CircularProgress, CircularProgressProps } from '@material-ui/core';
-
-export const CenteredCircularProgress = (props: CircularProgressProps) => {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <CircularProgress {...props} />
-    </div>
-  );
-};

plugins/git-release-manager/src/components/ResponseStepDialog/ResponseStepList.tsx

@@ -16,8 +16,8 @@
 
 import React, { PropsWithChildren } from 'react';
 import { DialogContent, List } from '@material-ui/core';
+import { Progress } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../CenteredCircularProgress';
 import { ResponseStep } from '../../types/types';
 import { ResponseStepListItem } from './ResponseStepListItem';
 import { TEST_IDS } from '../../test-helpers/test-ids';
@@ -40,10 +40,16 @@ export const ResponseStepList = ({
   return (
     <>
       {loading || responseSteps.length === 0 ? (
-        <div style={{ margin: 10, textAlign: 'center' }}>
-          <CenteredCircularProgress
-            data-testid={TEST_IDS.components.circularProgress}
-          />
+        <div
+          data-testid={TEST_IDS.components.circularProgress}
+          style={{
+            textAlign: 'center',
+            margin: 10,
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <Progress />
         </div>
       ) : (
         <>

plugins/git-release-manager/src/features/CreateReleaseCandidate/hooks/useCreateReleaseCandidate.test.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { waitFor } from '@testing-library/react';
 
@@ -30,6 +30,7 @@ import { useCreateReleaseCandidate } from './useCreateReleaseCandidate';
 jest.mock('@backstage/core', () => ({
   useApi: () => mockApiClient,
   createApiRef: jest.fn(),
+  Progress: (props: Record<string, any>) => <div {...props} />,
 }));
 jest.mock('../../../contexts/UserContext', () => ({
   useUserContext: () => ({ user: mockUser }),

plugins/git-release-manager/src/features/Features.test.tsx

@@ -28,6 +28,7 @@ jest.mock('@backstage/core', () => ({
     <>{children}</>
   ),
   InfoCard: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Progress: (props: Record<string, any>) => <div {...props} />,
 }));
 jest.mock('../contexts/ProjectContext', () => ({
   useProjectContext: () => ({

plugins/git-release-manager/src/features/Features.tsx

@@ -16,9 +16,8 @@
 
 import React, { useState, ComponentProps } from 'react';
 import { Alert, AlertTitle } from '@material-ui/lab';
-import { ErrorBoundary, useApi } from '@backstage/core';
+import { ErrorBoundary, Progress, useApi } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../components/CenteredCircularProgress';
 import { CreateReleaseCandidate } from './CreateReleaseCandidate/CreateReleaseCandidate';
 import { GitReleaseManager } from '../GitReleaseManager';
 import { gitReleaseManagerApiRef } from '../api/serviceApiRef';
@@ -61,7 +60,7 @@ export function Features({
   }
 
   if (gitBatchInfo.loading) {
-    return <CenteredCircularProgress />;
+    return <Progress />;
   }
 
   if (gitBatchInfo.value === undefined) {

plugins/git-release-manager/src/features/Patch/PatchBody.test.tsx

@@ -32,6 +32,7 @@ import { TEST_IDS } from '../../test-helpers/test-ids';
 jest.mock('@backstage/core', () => ({
   useApi: () => mockApiClient,
   createApiRef: jest.fn(),
+  Progress: (props: Record<string, any>) => <div {...props} />,
 }));
 jest.mock('../../contexts/ProjectContext', () => ({
   useProjectContext: () => ({

plugins/git-release-manager/src/features/Patch/PatchBody.tsx

@@ -33,14 +33,13 @@ import {
 } from '@material-ui/core';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
-import { useApi } from '@backstage/core';
+import { Progress, useApi } from '@backstage/core';
 
 import {
   GetBranchResult,
   GetLatestReleaseResult,
 } from '../../api/GitReleaseApiClient';
 import { CalverTagParts } from '../../helpers/tagParts/getCalverTagParts';
-import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
 import { ComponentConfigPatch } from '../../types/types';
 import { Differ } from '../../components/Differ';
 import { getPatchCommitSuffix } from './helpers/getPatchCommitSuffix';
@@ -120,7 +119,11 @@ export const PatchBody = ({
   }
 
   if (gitDataResponse.loading) {
-    return <CenteredCircularProgress data-testid={TEST_IDS.patch.loading} />;
+    return (
+      <Box data-testid={TEST_IDS.patch.loading}>
+        <Progress />
+      </Box>
+    );
   }
 
   function Description() {

plugins/git-release-manager/src/features/RepoDetailsForm/Owner.test.tsx

@@ -36,6 +36,7 @@ jest.mock('react-router', () => ({
 jest.mock('@backstage/core', () => ({
   useApi: () => mockApiClient,
   createApiRef: jest.fn(),
+  Progress: (props: Record<string, any>) => <div {...props} />,
 }));
 jest.mock('../../contexts/ProjectContext', () => ({
   useProjectContext: jest.fn(() => ({

plugins/git-release-manager/src/features/RepoDetailsForm/Owner.tsx

@@ -23,10 +23,10 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  Box,
 } from '@material-ui/core';
-import { useApi } from '@backstage/core';
+import { Progress, useApi } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
 import { gitReleaseManagerApiRef } from '../../api/serviceApiRef';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useFormClasses } from './styles';
@@ -56,7 +56,9 @@ export function Owner() {
       error={!!error}
     >
       {loading ? (
-        <CenteredCircularProgress data-testid={TEST_IDS.form.owner.loading} />
+        <Box data-testid={TEST_IDS.form.owner.loading}>
+          <Progress />
+        </Box>
       ) : (
         <>
           <InputLabel id="owner-select-label">Owners</InputLabel>

plugins/git-release-manager/src/features/RepoDetailsForm/Repo.test.tsx

@@ -35,6 +35,7 @@ jest.mock('react-router', () => ({
 jest.mock('@backstage/core', () => ({
   useApi: () => mockApiClient,
   createApiRef: jest.fn(),
+  Progress: (props: Record<string, any>) => <div {...props} />,
 }));
 jest.mock('../../contexts/ProjectContext', () => ({
   useProjectContext: jest.fn(() => ({

plugins/git-release-manager/src/features/RepoDetailsForm/Repo.tsx

@@ -23,10 +23,10 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  Box,
 } from '@material-ui/core';
-import { useApi } from '@backstage/core';
+import { Progress, useApi } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
 import { gitReleaseManagerApiRef } from '../../api/serviceApiRef';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useFormClasses } from './styles';
@@ -60,7 +60,9 @@ export function Repo() {
       error={!!error}
     >
       {loading ? (
-        <CenteredCircularProgress data-testid={TEST_IDS.form.repo.loading} />
+        <Box data-testid={TEST_IDS.form.repo.loading}>
+          <Progress />
+        </Box>
       ) : (
         <>
           <InputLabel id="repo-select-label">Repositories</InputLabel>

plugins/git-release-manager/src/features/Stats/DialogBody.tsx

@@ -26,8 +26,8 @@ import {
   TableHead,
   TableRow,
 } from '@material-ui/core';
+import { Progress } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
 import { getMappedReleases } from './helpers/getMappedReleases';
 import { getReleaseStats } from './helpers/getReleaseStats';
 import { Info } from './Info/Info';
@@ -55,7 +55,7 @@ export function DialogBody() {
   }
 
   if (stats.loading) {
-    return <CenteredCircularProgress />;
+    return <Progress />;
   }
 
   if (!stats.value) {

plugins/git-release-manager/src/features/Stats/Row/RowCollapsed/ReleaseTime.tsx

@@ -15,18 +15,17 @@
  */
 
 import React from 'react';
+import { useAsync } from 'react-use';
 import { DateTime } from 'luxon';
 import { Box, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import { Progress, useApi } from '@backstage/core';
 
-import { CenteredCircularProgress } from '../../../../components/CenteredCircularProgress';
-import { ReleaseStats } from '../../contexts/ReleaseStatsContext';
-import { useAsync } from 'react-use';
-import { getTagDates } from '../../helpers/getTagDates';
-import { useProjectContext } from '../../../../contexts/ProjectContext';
-import { useApi } from '@backstage/core';
-import { gitReleaseManagerApiRef } from '../../../../api/serviceApiRef';
 import { getDecimalNumber } from '../../helpers/getDecimalNumber';
+import { getTagDates } from '../../helpers/getTagDates';
+import { gitReleaseManagerApiRef } from '../../../../api/serviceApiRef';
+import { ReleaseStats } from '../../contexts/ReleaseStatsContext';
+import { useProjectContext } from '../../../../contexts/ProjectContext';
 
 interface ReleaseTimeProps {
   releaseStat: ReleaseStats['releases']['0'];
@@ -48,7 +47,7 @@ export function ReleaseTime({ releaseStat }: ReleaseTimeProps) {
   if (releaseTimes.loading || releaseTimes.loading) {
     return (
       <Wrapper>
-        <CenteredCircularProgress />
+        <Progress />
       </Wrapper>
     );
   }