From 60d0a1a2edbcb298a0d12d843ad896ae71b27f47 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Mon, 22 Mar 2021 18:24:15 +0000 Subject: [PATCH 01/11] github collaborators field Signed-off-by: Andrew Johnson --- .changeset/dry-elephants-doubt.md | 5 +++ plugins/github-deployments/src/api/index.ts | 8 +++++ .../components/GithubDeploymentsCard.test.tsx | 36 +++++++++++++++---- .../src/components/GithubDeploymentsCard.tsx | 15 ++++++-- .../GithubDeploymentsTable.tsx | 4 ++- plugins/github-deployments/src/mocks/mocks.ts | 16 +++++++++ 6 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 .changeset/dry-elephants-doubt.md diff --git a/.changeset/dry-elephants-doubt.md b/.changeset/dry-elephants-doubt.md new file mode 100644 index 0000000000..7a9ccc9892 --- /dev/null +++ b/.changeset/dry-elephants-doubt.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-github-deployments': patch +--- + +Adds extraColumns field to GitHub Deployments card diff --git a/plugins/github-deployments/src/api/index.ts b/plugins/github-deployments/src/api/index.ts index ca69ac3853..7496370bc9 100644 --- a/plugins/github-deployments/src/api/index.ts +++ b/plugins/github-deployments/src/api/index.ts @@ -24,6 +24,10 @@ export type GithubDeployment = { abbreviatedOid: string; commitUrl: string; }; + creator: { + login: string; + }; + payload: string; }; export interface GithubDeploymentsApi { @@ -55,6 +59,10 @@ query deployments($owner: String!, $repo: String!, $last: Int) { abbreviatedOid commitUrl } + creator { + login + } + payload } } } diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index e20183f1d6..0eca749788 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -22,11 +22,16 @@ import { ConfigReader, ConfigApi, OAuthApi, + TableColumn, } from '@backstage/core'; import { fireEvent } from '@testing-library/react'; import { msw, renderInTestApp } from '@backstage/test-utils'; -import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api'; +import { + GithubDeployment, + GithubDeploymentsApiClient, + githubDeploymentsApiRef, +} from '../api'; import { githubDeploymentsPlugin } from '../plugin'; import { GithubDeploymentsCard } from './GithubDeploymentsCard'; @@ -127,12 +132,6 @@ describe('github-deployments', () => { }); it('should shows new data on reload', async () => { - worker.use( - graphql.query('deployments', (_, res, ctx) => - res(ctx.data(responseStub)), - ), - ); - const rendered = await renderInTestApp( @@ -160,4 +159,27 @@ describe('github-deployments', () => { expect(await rendered.findByText('failure')).toBeInTheDocument(); }); }); + + it('should display extra columns', async () => { + worker.use( + graphql.query('deployments', (_, res, ctx) => + res(ctx.data(responseStub)), + ), + ); + + const extraColumns: TableColumn[] = [ + { + title: 'Creator', + field: 'creator.login', + }, + ]; + + const rendered = await renderInTestApp( + + + , + ); + + expect(await rendered.findByText('robot-user-001')).toBeInTheDocument(); + }); }); diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx index 99dfba560a..2a887047a1 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx @@ -17,10 +17,11 @@ import React from 'react'; import { MissingAnnotationEmptyState, ResponseErrorPanel, + TableColumn, useApi, } from '@backstage/core'; import { useAsyncRetry } from 'react-use'; -import { githubDeploymentsApiRef } from '../api'; +import { GithubDeployment, githubDeploymentsApiRef } from '../api'; import { useEntity } from '@backstage/plugin-catalog-react'; import { GITHUB_PROJECT_SLUG_ANNOTATION, @@ -31,9 +32,11 @@ import GithubDeploymentsTable from './GithubDeploymentsTable/GithubDeploymentsTa const GithubDeploymentsComponent = ({ projectSlug, last, + extraColumns, }: { projectSlug: string; last: number; + extraColumns: TableColumn[]; }) => { const api = useApi(githubDeploymentsApiRef); const [owner, repo] = projectSlug.split('/'); @@ -51,11 +54,18 @@ const GithubDeploymentsComponent = ({ deployments={value || []} isLoading={loading} reload={reload} + extraColumns={extraColumns} /> ); }; -export const GithubDeploymentsCard = ({ last }: { last?: number }) => { +export const GithubDeploymentsCard = ({ + last, + extraColumns, +}: { + last?: number; + extraColumns?: TableColumn[]; +}) => { const { entity } = useEntity(); return !isGithubDeploymentsAvailable(entity) ? ( @@ -66,6 +76,7 @@ export const GithubDeploymentsCard = ({ last }: { last?: number }) => { entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || '' } last={last || 10} + extraColumns={extraColumns || []} /> ); }; diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx index 91f91b919e..44ed1fbcdd 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx @@ -86,18 +86,20 @@ type GithubDeploymentsTableProps = { deployments: GithubDeployment[]; isLoading: boolean; reload: () => void; + extraColumns: TableColumn[]; }; const GithubDeploymentsTable = ({ deployments, isLoading, reload, + extraColumns, }: GithubDeploymentsTableProps) => { const classes = useStyles(); return ( Date: Tue, 6 Apr 2021 14:29:59 +0100 Subject: [PATCH 02/11] fix test Signed-off-by: Andrew Johnson --- .../src/components/GithubDeploymentsCard.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index 0eca749788..a1c2230d0d 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -132,6 +132,12 @@ describe('github-deployments', () => { }); it('should shows new data on reload', async () => { + worker.use( + graphql.query('deployments', (_, res, ctx) => + res(ctx.data(responseStub)), + ), + ); + const rendered = await renderInTestApp( From 7b30d0cdcf33429bc49654b8ca0f64cc33c8563b Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Tue, 6 Apr 2021 14:38:56 +0100 Subject: [PATCH 03/11] prettier Signed-off-by: Andrew Johnson --- .../src/components/GithubDeploymentsCard.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index a1c2230d0d..a3bdd2cb9c 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -137,7 +137,7 @@ describe('github-deployments', () => { res(ctx.data(responseStub)), ), ); - + const rendered = await renderInTestApp( From a1c46265e9396e411a01efeebe40d6368ed41183 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Tue, 6 Apr 2021 15:34:31 +0100 Subject: [PATCH 04/11] fix test Signed-off-by: Andrew Johnson --- plugins/github-deployments/src/mocks/mocks.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/github-deployments/src/mocks/mocks.ts b/plugins/github-deployments/src/mocks/mocks.ts index 1edbbc9b00..a84d684661 100644 --- a/plugins/github-deployments/src/mocks/mocks.ts +++ b/plugins/github-deployments/src/mocks/mocks.ts @@ -63,7 +63,7 @@ export const responseStub: QueryResponse = { abbreviatedOid: '54321', }, creator: { - login: 'robot-user-001', + login: 'robot-user-002', }, payload: '', }, @@ -98,7 +98,7 @@ export const refreshedResponseStub: QueryResponse = { abbreviatedOid: '54321', }, creator: { - login: 'robot-user-001', + login: 'robot-user-002', }, payload: '', }, From 1229d8377fbbc40a1e54297b0d4c3599e1a28a1a Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Thu, 8 Apr 2021 14:22:10 +0100 Subject: [PATCH 05/11] use custom columns Signed-off-by: Andrew Johnson --- .../components/GithubDeploymentsCard.test.tsx | 53 +++++----- .../src/components/GithubDeploymentsCard.tsx | 14 +-- .../GithubDeploymentsTable.tsx | 77 +++------------ .../GithubDeploymentsTable/columns.tsx | 99 +++++++++++++++++++ .../GithubDeploymentsTable/index.ts | 16 +++ .../GithubDeploymentsTable/presets.ts | 32 ++++++ plugins/github-deployments/src/mocks/mocks.ts | 4 +- 7 files changed, 197 insertions(+), 98 deletions(-) create mode 100644 plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx create mode 100644 plugins/github-deployments/src/components/GithubDeploymentsTable/index.ts create mode 100644 plugins/github-deployments/src/components/GithubDeploymentsTable/presets.ts diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index a3bdd2cb9c..52c84d657b 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -22,16 +22,11 @@ import { ConfigReader, ConfigApi, OAuthApi, - TableColumn, } from '@backstage/core'; import { fireEvent } from '@testing-library/react'; import { msw, renderInTestApp } from '@backstage/test-utils'; -import { - GithubDeployment, - GithubDeploymentsApiClient, - githubDeploymentsApiRef, -} from '../api'; +import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api'; import { githubDeploymentsPlugin } from '../plugin'; import { GithubDeploymentsCard } from './GithubDeploymentsCard'; @@ -44,6 +39,7 @@ import { import { setupServer } from 'msw/node'; import { graphql } from 'msw'; +import { GithubDeploymentsTable } from './GithubDeploymentsTable'; jest.mock('@backstage/plugin-catalog-react', () => ({ useEntity: () => { @@ -164,28 +160,35 @@ describe('github-deployments', () => { ).toBeInTheDocument(); expect(await rendered.findByText('failure')).toBeInTheDocument(); }); - }); - it('should display extra columns', async () => { - worker.use( - graphql.query('deployments', (_, res, ctx) => - res(ctx.data(responseStub)), - ), - ); + it('should display extra columns', async () => { + worker.use( + graphql.query('deployments', (_, res, ctx) => + res(ctx.data(responseStub)), + ), + ); - const extraColumns: TableColumn[] = [ - { - title: 'Creator', - field: 'creator.login', - }, - ]; + const renderTargetFromPayload = (payload: string) => { + const parsedPayload = JSON.parse(payload); + return parsedPayload?.target || 'unknown'; + }; - const rendered = await renderInTestApp( - - - , - ); + const columns = [ + ...GithubDeploymentsTable.defaultDeploymentColumns, + GithubDeploymentsTable.columns.createPayloadColumn( + 'Target', + renderTargetFromPayload, + ), + ]; - expect(await rendered.findByText('robot-user-001')).toBeInTheDocument(); + const rendered = await renderInTestApp( + + + , + ); + + expect(await rendered.findByText('moon')).toBeInTheDocument(); + expect(await rendered.findByText('sun')).toBeInTheDocument(); + }); }); }); diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx index 2a887047a1..073f78af2e 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx @@ -27,16 +27,16 @@ import { GITHUB_PROJECT_SLUG_ANNOTATION, isGithubDeploymentsAvailable, } from '../Router'; -import GithubDeploymentsTable from './GithubDeploymentsTable/GithubDeploymentsTable'; +import { GithubDeploymentsTable } from './GithubDeploymentsTable/GithubDeploymentsTable'; const GithubDeploymentsComponent = ({ projectSlug, last, - extraColumns, + columns, }: { projectSlug: string; last: number; - extraColumns: TableColumn[]; + columns: TableColumn[]; }) => { const api = useApi(githubDeploymentsApiRef); const [owner, repo] = projectSlug.split('/'); @@ -54,17 +54,17 @@ const GithubDeploymentsComponent = ({ deployments={value || []} isLoading={loading} reload={reload} - extraColumns={extraColumns} + columns={columns} /> ); }; export const GithubDeploymentsCard = ({ last, - extraColumns, + columns, }: { last?: number; - extraColumns?: TableColumn[]; + columns?: TableColumn[]; }) => { const { entity } = useEntity(); @@ -76,7 +76,7 @@ export const GithubDeploymentsCard = ({ entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || '' } last={last || 10} - extraColumns={extraColumns || []} + columns={columns || GithubDeploymentsTable.defaultDeploymentColumns} /> ); }; diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx index 44ed1fbcdd..e13b8aeb18 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx @@ -14,19 +14,12 @@ * limitations under the License. */ import React from 'react'; -import { - StatusPending, - StatusRunning, - StatusOK, - Table, - TableColumn, - StatusAborted, - StatusError, -} from '@backstage/core'; +import { Table, TableColumn } from '@backstage/core'; import { GithubDeployment } from '../../api'; -import { DateTime } from 'luxon'; -import { Box, Typography, Link, makeStyles } from '@material-ui/core'; +import { Typography, makeStyles } from '@material-ui/core'; import SyncIcon from '@material-ui/icons/Sync'; +import * as columnFactories from './columns'; +import { defaultDeploymentColumns } from './presets'; const useStyles = makeStyles(theme => ({ empty: { @@ -36,70 +29,24 @@ const useStyles = makeStyles(theme => ({ }, })); -const statusIndicator = (value: string): React.ReactNode => { - switch (value) { - case 'PENDING': - return ; - case 'IN_PROGRESS': - return ; - case 'ACTIVE': - return ; - case 'ERROR': - case 'FAILURE': - return ; - default: - return ; - } -}; - -const columns: TableColumn[] = [ - { - title: 'Environment', - field: 'environment', - highlight: true, - }, - { - title: 'Status', - render: (row: GithubDeployment): React.ReactNode => ( - - {statusIndicator(row.state)} - {row.state} - - ), - }, - { - title: 'Commit', - render: (row: GithubDeployment): React.ReactNode => ( - - {row.commit.abbreviatedOid} - - ), - }, - { - title: 'Last Updated', - render: (row: GithubDeployment): React.ReactNode => - DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }), - }, -]; - type GithubDeploymentsTableProps = { deployments: GithubDeployment[]; isLoading: boolean; reload: () => void; - extraColumns: TableColumn[]; + columns: TableColumn[]; }; -const GithubDeploymentsTable = ({ +export function GithubDeploymentsTable({ deployments, isLoading, reload, - extraColumns, -}: GithubDeploymentsTableProps) => { + columns, +}: GithubDeploymentsTableProps) { const classes = useStyles(); return (
); -}; +} -export default GithubDeploymentsTable; +GithubDeploymentsTable.columns = columnFactories; + +GithubDeploymentsTable.defaultDeploymentColumns = defaultDeploymentColumns; diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx new file mode 100644 index 0000000000..fe166be6e0 --- /dev/null +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx @@ -0,0 +1,99 @@ +/* + * 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 { + StatusPending, + StatusRunning, + StatusOK, + TableColumn, + StatusAborted, + StatusError, +} from '@backstage/core'; +import { GithubDeployment } from '../../api'; +import { DateTime } from 'luxon'; +import { Box, Typography, Link } from '@material-ui/core'; + +const statusIndicator = (value: string): React.ReactNode => { + switch (value) { + case 'PENDING': + return ; + case 'IN_PROGRESS': + return ; + case 'ACTIVE': + return ; + case 'ERROR': + case 'FAILURE': + return ; + default: + return ; + } +}; + +export function createEnvironmentColumn(): TableColumn { + return { + title: 'Environment', + field: 'environment', + highlight: true, + }; +} + +export function createStatusColumn(): TableColumn { + return { + title: 'Status', + render: (row: GithubDeployment): React.ReactNode => ( + + {statusIndicator(row.state)} + {row.state} + + ), + }; +} + +export function createCommitColumn(): TableColumn { + return { + title: 'Commit', + render: (row: GithubDeployment): React.ReactNode => ( + + {row.commit.abbreviatedOid} + + ), + }; +} + +export function createCreatorColumn(): TableColumn { + return { + title: 'Creator', + field: 'creator.login', + }; +} + +export function createLastUpdatedColumn(): TableColumn { + return { + title: 'Last Updated', + render: (row: GithubDeployment): React.ReactNode => + DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }), + }; +} + +export function createPayloadColumn( + title: string, + render: (payload: string) => React.ReactNode, +): TableColumn { + return { + title: title, + render: (deployment: GithubDeployment) => render(deployment.payload), + }; +} diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/index.ts b/plugins/github-deployments/src/components/GithubDeploymentsTable/index.ts new file mode 100644 index 0000000000..e622d559cb --- /dev/null +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export { GithubDeploymentsTable } from './GithubDeploymentsTable'; diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/presets.ts b/plugins/github-deployments/src/components/GithubDeploymentsTable/presets.ts new file mode 100644 index 0000000000..b50e11dcb6 --- /dev/null +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/presets.ts @@ -0,0 +1,32 @@ +/* + * 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 { TableColumn } from '@backstage/core'; +import { GithubDeployment } from '../../api'; +import { + createEnvironmentColumn, + createStatusColumn, + createCommitColumn, + createLastUpdatedColumn, + createCreatorColumn, +} from './columns'; + +export const defaultDeploymentColumns: TableColumn[] = [ + createEnvironmentColumn(), + createStatusColumn(), + createCommitColumn(), + createCreatorColumn(), + createLastUpdatedColumn(), +]; diff --git a/plugins/github-deployments/src/mocks/mocks.ts b/plugins/github-deployments/src/mocks/mocks.ts index a84d684661..c0afb325db 100644 --- a/plugins/github-deployments/src/mocks/mocks.ts +++ b/plugins/github-deployments/src/mocks/mocks.ts @@ -52,7 +52,7 @@ export const responseStub: QueryResponse = { creator: { login: 'robot-user-001', }, - payload: '', + payload: '{"target":"moon"}', }, { state: 'pending', @@ -65,7 +65,7 @@ export const responseStub: QueryResponse = { creator: { login: 'robot-user-002', }, - payload: '', + payload: '{"target":"sun"}', }, ], }, From 932293a0785e52c542967ac70a55c99d5b84b16a Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Thu, 8 Apr 2021 14:26:37 +0100 Subject: [PATCH 06/11] export Signed-off-by: Andrew Johnson --- plugins/github-deployments/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/github-deployments/src/index.ts b/plugins/github-deployments/src/index.ts index 2ee681332a..06eed2a2a2 100644 --- a/plugins/github-deployments/src/index.ts +++ b/plugins/github-deployments/src/index.ts @@ -14,4 +14,5 @@ * limitations under the License. */ export { githubDeploymentsPlugin, EntityGithubDeploymentsCard } from './plugin'; +export { GithubDeploymentsTable } from './components/GithubDeploymentsTable'; export { isGithubDeploymentsAvailable } from './Router'; From 7c5784e3f4745ea83eb5ff795d638460ecc807fe Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Thu, 8 Apr 2021 14:38:58 +0100 Subject: [PATCH 07/11] add @types/react Signed-off-by: Andrew Johnson --- plugins/github-deployments/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/github-deployments/package.json b/plugins/github-deployments/package.json index b8761c1385..2cbc63255a 100644 --- a/plugins/github-deployments/package.json +++ b/plugins/github-deployments/package.json @@ -42,6 +42,7 @@ "@testing-library/user-event": "^12.0.7", "@types/jest": "^26.0.7", "@types/node": "^14.14.32", + "@types/react": "^16.9", "cross-fetch": "^3.0.6", "msw": "^0.21.2" }, From 8ced77687892c761eab45eef86d84e6acb7f7ee6 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Thu, 8 Apr 2021 14:52:17 +0100 Subject: [PATCH 08/11] move Signed-off-by: Andrew Johnson --- plugins/github-deployments/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/github-deployments/package.json b/plugins/github-deployments/package.json index 2cbc63255a..6d4e61d4eb 100644 --- a/plugins/github-deployments/package.json +++ b/plugins/github-deployments/package.json @@ -31,7 +31,8 @@ "luxon": "^1.26.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-use": "^15.3.3" + "react-use": "^15.3.3", + "@types/react": "^16.9" }, "devDependencies": { "@backstage/cli": "^0.6.6", @@ -42,7 +43,6 @@ "@testing-library/user-event": "^12.0.7", "@types/jest": "^26.0.7", "@types/node": "^14.14.32", - "@types/react": "^16.9", "cross-fetch": "^3.0.6", "msw": "^0.21.2" }, From af95852d2edc440adfc633cf41b73c3b6e74a51d Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Thu, 15 Apr 2021 22:18:59 +0100 Subject: [PATCH 09/11] suggestions Signed-off-by: Andrew Johnson --- .../app/src/components/catalog/EntityPage.tsx | 4 ++++ plugins/github-deployments/package.json | 3 +-- .../GithubDeploymentsTable/columns.tsx | 17 +++++++++-------- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 5dc4f4c570..e161022059 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -108,6 +108,7 @@ import { } from '@roadiehq/backstage-plugin-travis-ci'; import React, { ReactNode, useMemo, useState } from 'react'; import BadgeIcon from '@material-ui/icons/CallToAction'; +import { EntityGithubDeploymentsCard } from '@backstage/plugin-github-deployments'; export const CICDSwitcher = ({ entity }: { entity: Entity }) => { // This component is just an example of how you can implement your company's logic in entity page. @@ -247,6 +248,9 @@ const ComponentOverviewContent = ({ entity }: { entity: Entity }) => ( + + + ); diff --git a/plugins/github-deployments/package.json b/plugins/github-deployments/package.json index 6d4e61d4eb..b8761c1385 100644 --- a/plugins/github-deployments/package.json +++ b/plugins/github-deployments/package.json @@ -31,8 +31,7 @@ "luxon": "^1.26.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-use": "^15.3.3", - "@types/react": "^16.9" + "react-use": "^15.3.3" }, "devDependencies": { "@backstage/cli": "^0.6.6", diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx index fe166be6e0..e1a9fc180b 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx @@ -26,7 +26,7 @@ import { GithubDeployment } from '../../api'; import { DateTime } from 'luxon'; import { Box, Typography, Link } from '@material-ui/core'; -const statusIndicator = (value: string): React.ReactNode => { +const statusIndicator = (value: string): JSX.Element => { switch (value) { case 'PENDING': return ; @@ -53,7 +53,7 @@ export function createEnvironmentColumn(): TableColumn { export function createStatusColumn(): TableColumn { return { title: 'Status', - render: (row: GithubDeployment): React.ReactNode => ( + render: (row: GithubDeployment): JSX.Element => ( {statusIndicator(row.state)} {row.state} @@ -65,7 +65,7 @@ export function createStatusColumn(): TableColumn { export function createCommitColumn(): TableColumn { return { title: 'Commit', - render: (row: GithubDeployment): React.ReactNode => ( + render: (row: GithubDeployment): JSX.Element => ( {row.commit.abbreviatedOid} @@ -83,17 +83,18 @@ export function createCreatorColumn(): TableColumn { export function createLastUpdatedColumn(): TableColumn { return { title: 'Last Updated', - render: (row: GithubDeployment): React.ReactNode => - DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }), + render: (row: GithubDeployment): JSX.Element => ( + {DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' })} + ), }; } -export function createPayloadColumn( +export function createCustomColumn( title: string, - render: (payload: string) => React.ReactNode, + render: (payload: GithubDeployment) => JSX.Element, ): TableColumn { return { title: title, - render: (deployment: GithubDeployment) => render(deployment.payload), + render: (deployment: GithubDeployment) => render(deployment), }; } From 523371d8a91cc5a570a96bcfd330c768792c10ec Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Fri, 16 Apr 2021 01:02:41 +0100 Subject: [PATCH 10/11] remove Signed-off-by: Andrew Johnson --- .../components/GithubDeploymentsCard.test.tsx | 19 ++++++++++++++----- .../GithubDeploymentsTable/columns.tsx | 10 ---------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index 52c84d657b..f128e6274b 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -26,7 +26,11 @@ import { import { fireEvent } from '@testing-library/react'; import { msw, renderInTestApp } from '@backstage/test-utils'; -import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api'; +import { + GithubDeployment, + GithubDeploymentsApiClient, + githubDeploymentsApiRef, +} from '../api'; import { githubDeploymentsPlugin } from '../plugin'; import { GithubDeploymentsCard } from './GithubDeploymentsCard'; @@ -40,6 +44,7 @@ import { import { setupServer } from 'msw/node'; import { graphql } from 'msw'; import { GithubDeploymentsTable } from './GithubDeploymentsTable'; +import { Box } from '@material-ui/core'; jest.mock('@backstage/plugin-catalog-react', () => ({ useEntity: () => { @@ -173,12 +178,16 @@ describe('github-deployments', () => { return parsedPayload?.target || 'unknown'; }; + const extraColumn = { + title: 'Target', + render: (row: GithubDeployment): JSX.Element => ( + {renderTargetFromPayload(row.payload)} + ), + }; + const columns = [ ...GithubDeploymentsTable.defaultDeploymentColumns, - GithubDeploymentsTable.columns.createPayloadColumn( - 'Target', - renderTargetFromPayload, - ), + extraColumn, ]; const rendered = await renderInTestApp( diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx index e1a9fc180b..94d60e9b5f 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx @@ -88,13 +88,3 @@ export function createLastUpdatedColumn(): TableColumn { ), }; } - -export function createCustomColumn( - title: string, - render: (payload: GithubDeployment) => JSX.Element, -): TableColumn { - return { - title: title, - render: (deployment: GithubDeployment) => render(deployment), - }; -} From 2346b070295866cd380fbe85c660a85ef74f1f79 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Fri, 16 Apr 2021 10:03:32 +0100 Subject: [PATCH 11/11] GithubStateIndicator component + link from backstage Signed-off-by: Andrew Johnson --- .../src/components/GithubDeploymentsTable/columns.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx index 94d60e9b5f..f050af836c 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/columns.tsx @@ -21,13 +21,14 @@ import { TableColumn, StatusAborted, StatusError, + Link, } from '@backstage/core'; import { GithubDeployment } from '../../api'; import { DateTime } from 'luxon'; -import { Box, Typography, Link } from '@material-ui/core'; +import { Box, Typography } from '@material-ui/core'; -const statusIndicator = (value: string): JSX.Element => { - switch (value) { +export const GithubStateIndicator = ({ state }: { state: string }) => { + switch (state) { case 'PENDING': return ; case 'IN_PROGRESS': @@ -55,7 +56,7 @@ export function createStatusColumn(): TableColumn { title: 'Status', render: (row: GithubDeployment): JSX.Element => ( - {statusIndicator(row.state)} + {row.state} ), @@ -66,7 +67,7 @@ export function createCommitColumn(): TableColumn { return { title: 'Commit', render: (row: GithubDeployment): JSX.Element => ( - + {row.commit.abbreviatedOid} ),