diff --git a/plugins/airbrake/src/components/ExampleComponent/index.ts b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx similarity index 91% rename from plugins/airbrake/src/components/ExampleComponent/index.ts rename to plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx index 212740dcdb..7f0d9bd499 100644 --- a/plugins/airbrake/src/components/ExampleComponent/index.ts +++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx @@ -13,4 +13,3 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { ExampleComponent } from './ExampleComponent'; diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx new file mode 100644 index 0000000000..7a150c5746 --- /dev/null +++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx @@ -0,0 +1,54 @@ +/* + * Copyright 2021 The Backstage Authors + * + * 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 { Typography, Grid } from '@material-ui/core'; +import { + InfoCard, + Header, + Page, + Content, + ContentHeader, + HeaderLabel, + SupportButton, +} from '@backstage/core-components'; +import exampleData from './ExampleData'; + +export const AirbrakeWidget = () => { + return ( + +
+ + +
+ + + A description of your plugin goes here. + + + {exampleData.groups.map(groupEntry => ( + + {groupEntry.errors.map(error => ( + + {error.message} + + ))} + + ))} + + + + ); +}; diff --git a/plugins/airbrake/dev/ExampleData.ts b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts similarity index 98% rename from plugins/airbrake/dev/ExampleData.ts rename to plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts index 15588cd77f..d1d2394ee6 100644 --- a/plugins/airbrake/dev/ExampleData.ts +++ b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts @@ -56,7 +56,7 @@ export default { createdAt: '2021-12-19T09:44:30.067447Z', }, { - id: '345', + id: '2', projectId: 123, resolved: true, muted: false, @@ -87,7 +87,7 @@ export default { }, lastDeployId: '0', lastDeployAt: null, - lastNoticeId: '456', + lastNoticeId: '345', lastNoticeAt: '2021-12-15T17:16:38.419Z', noticeCount: 1, noticeTotalCount: 1, diff --git a/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.test.tsx b/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.test.tsx deleted file mode 100644 index 993a8e7a9e..0000000000 --- a/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { ExampleComponent } from './ExampleComponent'; -import { ThemeProvider } from '@material-ui/core'; -import { lightTheme } from '@backstage/theme'; -import { rest } from 'msw'; -import { setupServer } from 'msw/node'; -import { - setupRequestMockHandlers, - renderInTestApp, -} from '@backstage/test-utils'; - -describe('ExampleComponent', () => { - const server = setupServer(); - // Enable sane handlers for network requests - setupRequestMockHandlers(server); - - // setup mock response - beforeEach(() => { - server.use( - rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))), - ); - }); - - it('should render', async () => { - const rendered = await renderInTestApp( - - - , - ); - expect(rendered.getByText('Welcome to airbrake!')).toBeInTheDocument(); - }); -}); diff --git a/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.tsx b/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.tsx deleted file mode 100644 index bc6a9360a9..0000000000 --- a/plugins/airbrake/src/components/ExampleComponent/ExampleComponent.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { Typography, Grid } from '@material-ui/core'; -import { - InfoCard, - Header, - Page, - Content, - ContentHeader, - HeaderLabel, - SupportButton, -} from '@backstage/core-components'; -import { ExampleFetchComponent } from '../ExampleFetchComponent'; - -export const ExampleComponent = () => ( - -
- - -
- - - A description of your plugin goes here. - - - - - - All content should be wrapped in a card like this. - - - - - - - - - -); diff --git a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx b/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx deleted file mode 100644 index a9085d27d6..0000000000 --- a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx +++ /dev/null @@ -1,127 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { render } from '@testing-library/react'; -import { ExampleFetchComponent } from './ExampleFetchComponent'; -import { rest } from 'msw'; -import { setupServer } from 'msw/node'; -import { setupRequestMockHandlers } from '@backstage/test-utils'; - -describe('ExampleFetchComponent', () => { - const server = setupServer(); - // Enable sane handlers for network requests - setupRequestMockHandlers(server); - - it('renders progress bar when loading', async () => { - server.use( - rest.get('https://randomuser.me/*', (_, res, ctx) => { - return res(ctx.delay(2000)); - }), - ); - - const rendered = render(); - expect(await rendered.findByTestId('progress')).toBeInTheDocument(); - }); - - it('renders data when fetch was successful', async () => { - server.use( - rest.get('https://randomuser.me/*', (_, res, ctx) => - res( - ctx.status(200), - ctx.json({ - results: [ - { - gender: 'male', - name: { - title: 'Mr', - first: 'Vedat', - last: 'Özbey', - }, - location: { - street: { - number: 7542, - name: 'Filistin Cd', - }, - city: 'Elazığ', - state: 'Karaman', - country: 'Turkey', - postcode: 29773, - coordinates: { - latitude: '73.4994', - longitude: '-44.5254', - }, - timezone: { - offset: '-8:00', - description: 'Pacific Time (US & Canada)', - }, - }, - email: 'vedat.ozbey@example.com', - login: { - uuid: 'ff2c94d3-65c9-43f2-97ae-afc39a5d4c1b', - username: 'redtiger713', - password: 'iforget', - salt: 'xuYMm0j2', - md5: '080fefd48bae64a2d3b952898ac3eca6', - sha1: '196b73795ba4529f85fdba815b20ce39cb96a7cc', - sha256: - '870a2ab050f8ce74dc44c4654c91ae94bd9921c4b4b5c4dd308529545f875adf', - }, - dob: { - date: '1996-12-31T19:07:00.102Z', - age: 25, - }, - registered: { - date: '2016-05-21T03:36:41.149Z', - age: 5, - }, - phone: '(563)-838-1728', - cell: '(443)-962-7009', - id: { - name: '', - value: null, - }, - picture: { - large: 'https://randomuser.me/api/portraits/men/21.jpg', - medium: 'https://randomuser.me/api/portraits/med/men/21.jpg', - thumbnail: - 'https://randomuser.me/api/portraits/thumb/men/21.jpg', - }, - nat: 'TR', - }, - ], - }), - ), - ), - ); - - const rendered = render(); - expect( - await rendered.findByRole('cell', { name: /Vedat Özbey/i }), - ).toBeInTheDocument(); - expect(await rendered.queryByRole('alert')).not.toBeInTheDocument(); - }); - - it('renders an alert if fetch failed', async () => { - server.use( - rest.get('https://randomuser.me/*', (_, res, ctx) => { - return res(ctx.status(500)); - }), - ); - - const rendered = render(); - expect(await rendered.findByRole('alert')).toBeInTheDocument(); - }); -}); diff --git a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx b/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx deleted file mode 100644 index d7b9716439..0000000000 --- a/plugins/airbrake/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { makeStyles } from '@material-ui/core/styles'; -import { Table, TableColumn, Progress } from '@backstage/core-components'; -import Alert from '@material-ui/lab/Alert'; -import { useAsync } from 'react-use'; - -const useStyles = makeStyles({ - avatar: { - height: 32, - width: 32, - borderRadius: '50%', - }, -}); - -type User = { - gender: string; // "male" - name: { - title: string; // "Mr", - first: string; // "Duane", - last: string; // "Reed" - }; - location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…} - email: string; // "duane.reed@example.com" - login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…} - dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37} - registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14} - phone: string; // "07-2154-5651" - cell: string; // "0405-592-879" - id: { - name: string; // "TFN", - value: string; // "796260432" - }; - picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…} - nat: string; // "AU" -}; - -type DenseTableProps = { - users: User[]; -}; - -export const DenseTable = ({ users }: DenseTableProps) => { - const classes = useStyles(); - - const columns: TableColumn[] = [ - { title: 'Avatar', field: 'avatar' }, - { title: 'Name', field: 'name' }, - { title: 'Email', field: 'email' }, - { title: 'Nationality', field: 'nationality' }, - ]; - - const data = users.map(user => { - return { - avatar: ( - {user.name.first} - ), - name: `${user.name.first} ${user.name.last}`, - email: user.email, - nationality: user.nat, - }; - }); - - return ( - - ); -}; - -export const ExampleFetchComponent = () => { - const { value, loading, error } = useAsync(async (): Promise => { - const response = await fetch('https://randomuser.me/api/?results=20'); - const data = await response.json(); - return data.results; - }, []); - - if (loading) { - return ; - } else if (error) { - return {error.message}; - } - - return ; -}; diff --git a/plugins/airbrake/src/components/ExampleFetchComponent/index.ts b/plugins/airbrake/src/components/ExampleFetchComponent/index.ts deleted file mode 100644 index c17896a0f4..0000000000 --- a/plugins/airbrake/src/components/ExampleFetchComponent/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { ExampleFetchComponent } from './ExampleFetchComponent'; diff --git a/plugins/airbrake/src/plugin.ts b/plugins/airbrake/src/plugin.ts index 63c9ec3acc..8eebd4e31c 100644 --- a/plugins/airbrake/src/plugin.ts +++ b/plugins/airbrake/src/plugin.ts @@ -31,7 +31,9 @@ export const AirbrakePage = airbrakePlugin.provide( createRoutableExtension({ name: 'AirbrakePage', component: () => - import('./components/ExampleComponent').then(m => m.ExampleComponent), + import('./components/AirbrakeWidget/AirbrakeWidget').then( + m => m.AirbrakeWidget, + ), mountPoint: rootRouteRef, }), );