From 39d7c8718aff2ebd9ae428f4788104807e3afe16 Mon Sep 17 00:00:00 2001 From: Andrew Johnson Date: Tue, 30 Mar 2021 17:35:53 +0100 Subject: [PATCH] update for comments Signed-off-by: Andrew Johnson --- plugins/github-deployments/README.md | 21 ++--- plugins/github-deployments/package.json | 2 +- .../components/GithubDeploymentsCard.test.tsx | 30 +++---- .../src/components/GithubDeploymentsCard.tsx | 9 +- .../GithubDeploymentsTable.tsx | 51 +++++------- plugins/github-deployments/src/index.ts | 4 +- plugins/github-deployments/src/mocks/mocks.ts | 4 +- yarn.lock | 83 ------------------- 8 files changed, 50 insertions(+), 154 deletions(-) diff --git a/plugins/github-deployments/README.md b/plugins/github-deployments/README.md index 46d54cac57..d736638980 100644 --- a/plugins/github-deployments/README.md +++ b/plugins/github-deployments/README.md @@ -4,18 +4,13 @@ The GitHub Deployments Plugin displays recent deployments from GitHub. ![github-deployments-card](./docs/github-deployments-card.png) +## Prerequisites + +- [GitHub Authentication Provider](https://backstage.io/docs/auth/github/provider) + ## Getting Started -1. Provide OAuth credentials: - -- Create an [OAuth App](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) and set env variables for ID and Secret. - -```bash -export AUTH_GITHUB_CLIENT_ID={{YOUR_CLIENT_ID}} -export AUTH_CLIENT_SECRET={{YOUR_CLIENT_SECRET}} -``` - -2. Install the GitHub Deployments Plugin. +1. Install the GitHub Deployments Plugin. ```bash # packages/app @@ -23,7 +18,7 @@ export AUTH_CLIENT_SECRET={{YOUR_CLIENT_SECRET}} yarn add @backstage/plugin-github-deployments ``` -3. Add the plugin to the app +2. Add the plugin to the app ```typescript // packages/app/src/plugins.ts @@ -31,7 +26,7 @@ yarn add @backstage/plugin-github-deployments export { plugin as GithubDeployments } from '@backstage/plugin-github-deployments'; ``` -4. Add the `EntityGithubDeploymentsCard` to the EntityPage: +3. Add the `EntityGithubDeploymentsCard` to the EntityPage: ```typescript // packages/app/src/components/catalog/EntityPage.tsx @@ -49,7 +44,7 @@ const OverviewContent = () => ( ); ``` -5. Add the `github.com/project-slug` annotation to your `catalog-info.yaml` file: +4. Add the `github.com/project-slug` annotation to your `catalog-info.yaml` file: ```yaml apiVersion: backstage.io/v1alpha1 diff --git a/plugins/github-deployments/package.json b/plugins/github-deployments/package.json index c030d33322..c2e7fb0fab 100644 --- a/plugins/github-deployments/package.json +++ b/plugins/github-deployments/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.45", "@octokit/graphql": "^4.6.1", - "moment": "^2.29.1", + "luxon": "^1.26.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-use": "^15.3.3" diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx index 962c08d1cd..93074d4df5 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx @@ -24,14 +24,14 @@ import { OAuthApi, } from '@backstage/core'; -import { render } from '@testing-library/react'; -import { setupServer } from 'msw/node'; +import { msw } from '@backstage/test-utils' import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api'; import { githubDeploymentsPlugin } from '../plugin'; import { GithubDeploymentsCard } from './GithubDeploymentsCard'; import { entityStub, noDataResponseStub, responseStub } from '../mocks/mocks'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { renderInTestApp } from '@backstage/test-utils'; +import { setupServer } from 'msw/node'; import { graphql } from 'msw'; jest.mock('@backstage/plugin-catalog-react', () => ({ @@ -55,9 +55,7 @@ const apis = ApiRegistry.from([ describe('github-deployments', () => { const worker = setupServer(); - beforeAll(() => worker.listen()); - afterAll(() => worker.close()); - afterEach(() => worker.resetHandlers()); + msw.setupDefaultHandlers(worker); beforeEach(() => { jest.resetAllMocks(); @@ -77,12 +75,10 @@ describe('github-deployments', () => { ), ); - const rendered = render( - wrapInTestApp( - - - , - ), + const rendered = await renderInTestApp( + + + , ); expect(await rendered.findByText('active')).toBeInTheDocument(); @@ -107,12 +103,10 @@ describe('github-deployments', () => { ), ); - const rendered = render( - wrapInTestApp( - - - , - ), + const rendered = await renderInTestApp( + + + , ); expect( diff --git a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx index ebbe426caf..d108dd61ae 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsCard.tsx @@ -14,8 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { LinearProgress } from '@material-ui/core'; -import { InfoCard, MissingAnnotationEmptyState, useApi } from '@backstage/core'; +import { InfoCard, MissingAnnotationEmptyState, Progress, ResponseErrorPanel, useApi } from '@backstage/core'; import { useAsync } from 'react-use'; import { githubDeploymentsApiRef } from '../api'; import { useEntity } from '@backstage/plugin-catalog-react'; @@ -42,15 +41,13 @@ const GithubDeploymentsComponent = ({ if (loading) { return ( - + ); } if (error) { return ( - - Error occured while fetching Data - + ); } diff --git a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx index d7bc8e90b3..66d2fd4f29 100644 --- a/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx +++ b/plugins/github-deployments/src/components/GithubDeploymentsTable/GithubDeploymentsTable.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ import React from 'react'; -import { Table, TableColumn } from '@backstage/core'; +import { StatusPending, StatusRunning, StatusOK, Table, TableColumn, StatusAborted, StatusError } from '@backstage/core'; import { GithubDeployment } from '../../api'; -import moment from 'moment'; +import { DateTime } from 'luxon'; import { Box, Typography, Link, makeStyles } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ @@ -27,31 +27,21 @@ const useStyles = makeStyles(theme => ({ }, })); -const lastUpdated = (start: string): string => moment(start).fromNow(); - -const State = ({ value }: { value: string }) => { - const colorMap: Record = { - PENDING: 'orange', - IN_PROGRESS: 'orange', - ACTIVE: 'green', - }; - - return ( - - - {value} - - ); -}; +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[] = [ { @@ -62,7 +52,10 @@ const columns: TableColumn[] = [ { title: 'Status', render: (row: GithubDeployment): React.ReactNode => ( - + + { statusIndicator(row.state)} + {row.state} + ), }, { @@ -76,7 +69,7 @@ const columns: TableColumn[] = [ { title: 'Last Updated', render: (row: GithubDeployment): React.ReactNode => - lastUpdated(row.updatedAt), + DateTime.fromISO(row.updatedAt).toRelative({ locale: 'en' }), }, ]; diff --git a/plugins/github-deployments/src/index.ts b/plugins/github-deployments/src/index.ts index d1bff4e186..7660aaad3b 100644 --- a/plugins/github-deployments/src/index.ts +++ b/plugins/github-deployments/src/index.ts @@ -14,7 +14,7 @@ * limitations under the License. */ export { - githubDeploymentsPlugin as plugin, + githubDeploymentsPlugin, EntityGithubDeploymentsCard, } from './plugin'; -export { isGithubDeploymentsAvailable as isPluginApplicableToEntity } from './Router'; +export { isGithubDeploymentsAvailable } from './Router'; diff --git a/plugins/github-deployments/src/mocks/mocks.ts b/plugins/github-deployments/src/mocks/mocks.ts index a66317dec8..6a394b54bf 100644 --- a/plugins/github-deployments/src/mocks/mocks.ts +++ b/plugins/github-deployments/src/mocks/mocks.ts @@ -1,5 +1,3 @@ -import { QueryResponse } from '../api'; - /* * Copyright 2021 Spotify AB * @@ -15,6 +13,8 @@ import { QueryResponse } from '../api'; * See the License for the specific language governing permissions and * limitations under the License. */ +import { QueryResponse } from '../api'; + export const entityStub = { entity: { metadata: { diff --git a/yarn.lock b/yarn.lock index 94b4d959f4..c595a2283a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1846,23 +1846,6 @@ uuid "^8.0.0" yup "^0.29.3" -"@backstage/core-api@^0.2.15": - version "0.2.15" - resolved "https://registry.npmjs.org/@backstage/core-api/-/core-api-0.2.15.tgz#24c3e4b1fe0bdee36de26c50b8757f41bb266109" - integrity sha512-OQTmvCGM3hkaLV0+JPF85dZk/X1SXoIFkXZi9pO/DzBPZ1Psuptia9xNXrhnEeYJaCazlCnOCTXS/kdoT1zBVg== - dependencies: - "@backstage/config" "^0.1.4" - "@backstage/theme" "^0.2.5" - "@material-ui/core" "^4.11.0" - "@material-ui/icons" "^4.9.1" - "@types/prop-types" "^15.7.3" - "@types/react" "^16.9" - prop-types "^15.7.2" - react "^16.12.0" - react-router-dom "6.0.0-beta.0" - react-use "^15.3.3" - zen-observable "^0.8.15" - "@backstage/core@^0.3.0": version "0.7.3" dependencies: @@ -1989,65 +1972,6 @@ remark-gfm "^1.0.0" zen-observable "^0.8.15" -"@backstage/core@^0.7.3": - version "0.7.3" - resolved "https://registry.npmjs.org/@backstage/core/-/core-0.7.3.tgz#a55f094f0aceab4102ea08a75832c2ec5a70e226" - integrity sha512-uKTCYYAYVtmdOiJrNKe00N0AKeEhxZ+y3qQVY+H96WN9QDql/56XTmoiyPjDU7wK4nDj+yGV4j+xM5uxSXaOCg== - dependencies: - "@backstage/config" "^0.1.4" - "@backstage/core-api" "^0.2.15" - "@backstage/errors" "^0.1.1" - "@backstage/theme" "^0.2.5" - "@material-ui/core" "^4.11.0" - "@material-ui/icons" "^4.9.1" - "@material-ui/lab" "4.0.0-alpha.45" - "@testing-library/react-hooks" "^3.4.2" - "@types/dagre" "^0.7.44" - "@types/prop-types" "^15.7.3" - "@types/react" "^16.9" - "@types/react-sparklines" "^1.7.0" - "@types/react-text-truncate" "^0.14.0" - classnames "^2.2.6" - clsx "^1.1.0" - d3-selection "^2.0.0" - d3-shape "^2.0.0" - d3-zoom "^2.0.0" - dagre "^0.8.5" - immer "^8.0.1" - lodash "^4.17.15" - material-table "^1.69.1" - prop-types "^15.7.2" - qs "^6.9.4" - rc-progress "^3.0.0" - react "^16.12.0" - react-dom "^16.12.0" - react-helmet "6.1.0" - react-hook-form "^6.6.0" - react-markdown "^5.0.2" - react-router "6.0.0-beta.0" - react-router-dom "6.0.0-beta.0" - react-sparklines "^1.7.0" - react-syntax-highlighter "^15.4.3" - react-text-truncate "^0.16.0" - react-use "^15.3.3" - remark-gfm "^1.0.0" - zen-observable "^0.8.15" - -"@backstage/plugin-catalog-react@^0.1.3": - version "0.1.3" - resolved "https://registry.npmjs.org/@backstage/plugin-catalog-react/-/plugin-catalog-react-0.1.3.tgz#e4cc6c40616976737893cc91d7e373b9397618d1" - integrity sha512-nNIz+tc72UtwB66L++xA9drv5VV0SxMPh0BNLOFAHAllcR2RMQyvWpDq4uBupUXx/lr6bzihngkW9Jqr4rfz/Q== - dependencies: - "@backstage/catalog-client" "^0.3.8" - "@backstage/catalog-model" "^0.7.3" - "@backstage/core" "^0.7.3" - "@material-ui/core" "^4.11.0" - "@types/react" "^16.9" - react "^16.13.1" - react-router "6.0.0-beta.0" - react-router-dom "6.0.0-beta.0" - react-use "^15.3.3" - "@backstage/plugin-catalog@^0.2.1": version "0.5.1" dependencies: @@ -2096,13 +2020,6 @@ react-use "^15.3.3" swr "^0.3.0" -"@backstage/theme@^0.2.5": - version "0.2.5" - resolved "https://registry.npmjs.org/@backstage/theme/-/theme-0.2.5.tgz#657e2ceaaede1b4dbe8abeafa6e168671a27b6da" - integrity sha512-GT7Ok9QSiZWXkxka+vcpweMrOg1lgDkRRjh7aSU97Mcoiq77szdO45o0hZtQChz8qay60vCRlu57ADvUn4QxZw== - dependencies: - "@material-ui/core" "^4.11.0" - "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"