From 359649086f6b9f940b82064b755352951e17b61f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wojciech=20Adaszy=C5=84ski?= Date: Thu, 14 May 2020 08:46:45 +0200 Subject: [PATCH] Add component table front-end (#848) Co-authored-by: Wojciech Adaszynski --- .../CatalogPage/CatalogPage.test.tsx | 4 +- .../components/CatalogPage/CatalogPage.tsx | 49 ++++----------- .../CatalogTable/CatalogTable.test.tsx | 56 +++++++++++++++++ .../components/CatalogTable/CatalogTable.tsx | 60 +++++++++++++++++++ plugins/catalog/src/data/component.ts | 23 +++++++ .../catalog/src/data/mock-factory-data.json | 35 +++++++++++ plugins/catalog/src/data/mock-factory.ts | 31 ++++++++++ 7 files changed, 219 insertions(+), 39 deletions(-) create mode 100644 plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx create mode 100644 plugins/catalog/src/components/CatalogTable/CatalogTable.tsx create mode 100644 plugins/catalog/src/data/component.ts create mode 100644 plugins/catalog/src/data/mock-factory-data.json create mode 100644 plugins/catalog/src/data/mock-factory.ts diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 02b7fcacff..01d821e175 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -16,19 +16,17 @@ import React from 'react'; import { render } from '@testing-library/react'; -import mockFetch from 'jest-fetch-mock'; import CatalogPage from './CatalogPage'; import { ThemeProvider } from '@material-ui/core'; import { lightTheme } from '@backstage/theme'; describe('CatalogPage', () => { it('should render', async () => { - mockFetch.mockResponse(() => new Promise(() => {})); const rendered = render( , ); - expect(await rendered.findByText('backstage-backend')).toBeInTheDocument(); + expect(await rendered.findByText('Your components')).toBeInTheDocument(); }); }); diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 5d530f8416..9972b9d71f 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -15,48 +15,25 @@ */ import React, { FC } from 'react'; -import { Typography } from '@material-ui/core'; -import { Content, InfoCard, Header, Page, pageTheme } from '@backstage/core'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; +import { Content, Header, Page, pageTheme } from '@backstage/core'; +import { useAsync } from 'react-use'; +import { ComponentFactory } from '../../data/component'; +import { MockComponentFactory } from '../../data/mock-factory'; +import CatalogTable from '../CatalogTable/CatalogTable'; -// TODO(freben): Connect to backend -const STATIC_DATA = [ - { id: 'backstage-frontend', kind: 'website' }, - { id: 'backstage-backend', kind: 'service' }, - { id: 'backstage-microsite', kind: 'website' }, -]; +const componentFactory: ComponentFactory = MockComponentFactory; const CatalogPage: FC<{}> = () => { + const { value, error, loading } = useAsync(componentFactory.getAllComponents); return ( -
+
- All of it - - - - - - ID - Kind - - - - {STATIC_DATA.map((d) => ( - - {d.id} - {d.kind} - - ))} - -
- - + ); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx new file mode 100644 index 0000000000..0ab95f4231 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -0,0 +1,56 @@ +/* + * Copyright 2020 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 * as React from 'react'; +import { render } from '@testing-library/react'; +import CatalogTable from './CatalogTable'; +import { Component } from '../../data/component'; + +const components: Component[] = [ + { name: 'component1' }, + { name: 'component2' }, + { name: 'component3' }, +]; + +describe('CatalogTable component', () => { + it('should render loading when loading prop it set to true', async () => { + const rendered = render(); + const progress = await rendered.findByTestId('progress'); + expect(progress).toBeInTheDOM(); + }); + + it('should render error message when error is passed in props', async () => { + const rendered = render( + , + ); + const errorMessage = await rendered.findByText( + 'Error encountered while fetching components.', + ); + expect(errorMessage).toBeInTheDOM(); + }); + + it('should display component names when loading has finished and no error occurred', async () => { + const rendered = render( + , + ); + expect(await rendered.findByText('component1')).toBeInTheDOM(); + expect(await rendered.findByText('component2')).toBeInTheDOM(); + expect(await rendered.findByText('component3')).toBeInTheDOM(); + }); +}); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx new file mode 100644 index 0000000000..31f15fe5ca --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -0,0 +1,60 @@ +/* + * Copyright 2020 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, { FC } from 'react'; +import { Component } from '../../data/component'; +import { InfoCard, Progress, Table, TableColumn } from '@backstage/core'; +import { Typography } from '@material-ui/core'; + +const columns: TableColumn[] = [ + { + title: 'Name', + field: 'name', + highlight: true, + }, +]; + +type CatalogTableProps = { + components: Component[]; + loading: boolean; + error?: any; +}; +const CatalogTable: FC = ({ + components, + loading, + error, +}) => { + if (loading) { + return ; + } + if (error) { + return ( + + + Error encountered while fetching components. + + + ); + } + return ( + + ); +}; +export default CatalogTable; diff --git a/plugins/catalog/src/data/component.ts b/plugins/catalog/src/data/component.ts new file mode 100644 index 0000000000..5b67b647e4 --- /dev/null +++ b/plugins/catalog/src/data/component.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2020 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 type Component = { + name: string; +}; + +export interface ComponentFactory { + getAllComponents(): Promise; + getComponentByName(name: string): Promise; +} diff --git a/plugins/catalog/src/data/mock-factory-data.json b/plugins/catalog/src/data/mock-factory-data.json new file mode 100644 index 0000000000..8fc61a87a6 --- /dev/null +++ b/plugins/catalog/src/data/mock-factory-data.json @@ -0,0 +1,35 @@ +[ + { + "name": "example.com" + }, + { + "name": "subdomain.example.com" + }, + { + "name": "subdomain2.example.com" + }, + { + "name": "User data pipeline 1" + }, + { + "name": "User data pipeline 2" + }, + { + "name": "User data pipeline 3" + }, + { + "name": "Aggregation CRON job" + }, + { + "name": "Authentication service" + }, + { + "name": "Payments service" + }, + { + "name": "Backstage supervisor" + }, + { + "name": "Identity service" + } +] diff --git a/plugins/catalog/src/data/mock-factory.ts b/plugins/catalog/src/data/mock-factory.ts new file mode 100644 index 0000000000..010036d732 --- /dev/null +++ b/plugins/catalog/src/data/mock-factory.ts @@ -0,0 +1,31 @@ +/* + * Copyright 2020 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 { Component, ComponentFactory } from './component'; +import mock from './mock-factory-data.json'; + +export const MockComponentFactory: ComponentFactory = { + getAllComponents(): Promise { + return new Promise((resolve) => setTimeout(() => resolve(mock), 2000)); + }, + getComponentByName(name: string): Promise { + return new Promise((resolve) => + setTimeout( + () => resolve(mock.find((component) => component.name === name)), + 2000, + ), + ); + }, +};