From d5885b4c7b0a7a76ec7c8503427fc0946a339f40 Mon Sep 17 00:00:00 2001 From: Erik Engervall Date: Wed, 5 May 2021 17:41:17 +0200 Subject: [PATCH] Replace CenteredCircularProgress with Backstage core component Progress Signed-off-by: Erik Engervall --- .../src/GitReleaseManager.tsx | 5 ++-- .../components/CenteredCircularProgress.tsx | 26 ------------------- .../ResponseStepDialog/ResponseStepList.tsx | 16 ++++++++---- .../hooks/useCreateReleaseCandidate.test.tsx | 3 ++- .../src/features/Features.test.tsx | 1 + .../src/features/Features.tsx | 5 ++-- .../src/features/Patch/PatchBody.test.tsx | 1 + .../src/features/Patch/PatchBody.tsx | 9 ++++--- .../features/RepoDetailsForm/Owner.test.tsx | 1 + .../src/features/RepoDetailsForm/Owner.tsx | 8 +++--- .../features/RepoDetailsForm/Repo.test.tsx | 1 + .../src/features/RepoDetailsForm/Repo.tsx | 8 +++--- .../src/features/Stats/DialogBody.tsx | 4 +-- .../Stats/Row/RowCollapsed/ReleaseTime.tsx | 15 +++++------ 14 files changed, 46 insertions(+), 57 deletions(-) delete mode 100644 plugins/git-release-manager/src/components/CenteredCircularProgress.tsx diff --git a/plugins/git-release-manager/src/GitReleaseManager.tsx b/plugins/git-release-manager/src/GitReleaseManager.tsx index 48a82fccdc..1b388ffc82 100644 --- a/plugins/git-release-manager/src/GitReleaseManager.tsx +++ b/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 ; + return ; } if (!userResponse.value?.user.username) { diff --git a/plugins/git-release-manager/src/components/CenteredCircularProgress.tsx b/plugins/git-release-manager/src/components/CenteredCircularProgress.tsx deleted file mode 100644 index 262ce13816..0000000000 --- a/plugins/git-release-manager/src/components/CenteredCircularProgress.tsx +++ /dev/null @@ -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 ( -
- -
- ); -}; diff --git a/plugins/git-release-manager/src/components/ResponseStepDialog/ResponseStepList.tsx b/plugins/git-release-manager/src/components/ResponseStepDialog/ResponseStepList.tsx index 082fb99517..77bcd22957 100644 --- a/plugins/git-release-manager/src/components/ResponseStepDialog/ResponseStepList.tsx +++ b/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 ? ( -
- +
+
) : ( <> diff --git a/plugins/git-release-manager/src/features/CreateReleaseCandidate/hooks/useCreateReleaseCandidate.test.tsx b/plugins/git-release-manager/src/features/CreateReleaseCandidate/hooks/useCreateReleaseCandidate.test.tsx index cd7f212531..8cfcb04ed9 100644 --- a/plugins/git-release-manager/src/features/CreateReleaseCandidate/hooks/useCreateReleaseCandidate.test.tsx +++ b/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) =>
, })); jest.mock('../../../contexts/UserContext', () => ({ useUserContext: () => ({ user: mockUser }), diff --git a/plugins/git-release-manager/src/features/Features.test.tsx b/plugins/git-release-manager/src/features/Features.test.tsx index c46187504c..078e6fabdb 100644 --- a/plugins/git-release-manager/src/features/Features.test.tsx +++ b/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) =>
, })); jest.mock('../contexts/ProjectContext', () => ({ useProjectContext: () => ({ diff --git a/plugins/git-release-manager/src/features/Features.tsx b/plugins/git-release-manager/src/features/Features.tsx index fa6fc1198b..6f2d56c4d2 100644 --- a/plugins/git-release-manager/src/features/Features.tsx +++ b/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 ; + return ; } if (gitBatchInfo.value === undefined) { diff --git a/plugins/git-release-manager/src/features/Patch/PatchBody.test.tsx b/plugins/git-release-manager/src/features/Patch/PatchBody.test.tsx index 38c09ab943..bd04df9847 100644 --- a/plugins/git-release-manager/src/features/Patch/PatchBody.test.tsx +++ b/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) =>
, })); jest.mock('../../contexts/ProjectContext', () => ({ useProjectContext: () => ({ diff --git a/plugins/git-release-manager/src/features/Patch/PatchBody.tsx b/plugins/git-release-manager/src/features/Patch/PatchBody.tsx index 4298724511..b8e037800c 100644 --- a/plugins/git-release-manager/src/features/Patch/PatchBody.tsx +++ b/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 ; + return ( + + + + ); } function Description() { diff --git a/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.test.tsx b/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.test.tsx index 31121896e9..9bd524fccd 100644 --- a/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.test.tsx +++ b/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) =>
, })); jest.mock('../../contexts/ProjectContext', () => ({ useProjectContext: jest.fn(() => ({ diff --git a/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.tsx b/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.tsx index 0d8a23efb9..5d6ea4f75d 100644 --- a/plugins/git-release-manager/src/features/RepoDetailsForm/Owner.tsx +++ b/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 ? ( - + + + ) : ( <> Owners diff --git a/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.test.tsx b/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.test.tsx index 9b087d47e2..574f7b5367 100644 --- a/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.test.tsx +++ b/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) =>
, })); jest.mock('../../contexts/ProjectContext', () => ({ useProjectContext: jest.fn(() => ({ diff --git a/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.tsx b/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.tsx index 3db956116a..bc713709b1 100644 --- a/plugins/git-release-manager/src/features/RepoDetailsForm/Repo.tsx +++ b/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 ? ( - + + + ) : ( <> Repositories diff --git a/plugins/git-release-manager/src/features/Stats/DialogBody.tsx b/plugins/git-release-manager/src/features/Stats/DialogBody.tsx index 8de40d6ac9..04c64b7b07 100644 --- a/plugins/git-release-manager/src/features/Stats/DialogBody.tsx +++ b/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 ; + return ; } if (!stats.value) { diff --git a/plugins/git-release-manager/src/features/Stats/Row/RowCollapsed/ReleaseTime.tsx b/plugins/git-release-manager/src/features/Stats/Row/RowCollapsed/ReleaseTime.tsx index 9094831b32..cc964c51b4 100644 --- a/plugins/git-release-manager/src/features/Stats/Row/RowCollapsed/ReleaseTime.tsx +++ b/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 ( - + ); }