From 75540599124aa9b6993100041631569bf6e60e2b Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Tue, 6 Jun 2023 09:35:27 +0530 Subject: [PATCH 1/3] fix-17201 Signed-off-by: npiyush97 --- .changeset/cyan-ants-pump.md | 6 ++++++ .../ExampleFetchComponent.test.tsx.hbs | 2 +- .../ExampleFetchComponent.tsx.hbs | 18 ++++-------------- 3 files changed, 11 insertions(+), 15 deletions(-) create mode 100644 .changeset/cyan-ants-pump.md diff --git a/.changeset/cyan-ants-pump.md b/.changeset/cyan-ants-pump.md new file mode 100644 index 0000000000..8b4e7e003b --- /dev/null +++ b/.changeset/cyan-ants-pump.md @@ -0,0 +1,6 @@ +--- +'example-app': patch +'@backstage/cli': patch +--- + +The issue was resolved by removing the API data and replacing it with hardcoded JSON due to non-commercial rights restrictions. diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs index a553ecd0b0..13a4061949 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs @@ -13,7 +13,7 @@ describe('ExampleFetchComponent', () => { // setup mock response beforeEach(() => { server.use( - rest.get('https://randomuser.me/*', (_, res, ctx) => + rest.get('https://tinyurl.com/fake-data', (_, res, ctx) => res(ctx.status(200), ctx.delay(2000), ctx.json({})), ), ); diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index 03b25dfb4f..d01fd8467a 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -19,18 +19,8 @@ type User = { 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",…} + picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane" nat: string; // "AU" }; @@ -52,7 +42,7 @@ export const DenseTable = ({ users }: DenseTableProps) => { return { avatar: ( {user.name.first} @@ -65,7 +55,7 @@ export const DenseTable = ({ users }: DenseTableProps) => { return ( { export const ExampleFetchComponent = () => { const { fetch } = useApi(fetchApiRef); const { value, loading, error } = useAsync(async (): Promise => { - const response = await fetch('https://randomuser.me/api/?results=20'); + const response = await fetch('https://tinyurl.com/fake-data'); const data = await response.json(); return data.results; }, []); From 4df4bdb99dd1ef43904068be2a1929239b24985b Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Thu, 8 Jun 2023 15:10:46 +0530 Subject: [PATCH 2/3] added some tweaks Signed-off-by: npiyush97 --- .changeset/cyan-ants-pump.md | 3 +- .../ExampleFetchComponent.test.tsx.hbs | 30 +-- .../ExampleFetchComponent.tsx.hbs | 234 +++++++++++++++++- 3 files changed, 242 insertions(+), 25 deletions(-) diff --git a/.changeset/cyan-ants-pump.md b/.changeset/cyan-ants-pump.md index 8b4e7e003b..ed446cd1cf 100644 --- a/.changeset/cyan-ants-pump.md +++ b/.changeset/cyan-ants-pump.md @@ -1,6 +1,5 @@ --- -'example-app': patch '@backstage/cli': patch --- -The issue was resolved by removing the API data and replacing it with hardcoded JSON due to non-commercial rights restrictions. +Updated example component for a newly scaffolded app. diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs index 13a4061949..c1035a8d3c 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs @@ -1,25 +1,19 @@ import React from 'react'; import { render, screen } 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 the user table', async () => { + render(); - // setup mock response - beforeEach(() => { - server.use( - rest.get('https://tinyurl.com/fake-data', (_, res, ctx) => - res(ctx.status(200), ctx.delay(2000), ctx.json({})), - ), - ); + // Wait for the table to render + const table = await screen.findByRole('table'); + const nationality = screen.getAllByText("GB") + // Assert that the table contains the expected user data + expect(table).toBeInTheDocument(); + expect(screen.getByAltText('Carolyn')).toBeInTheDocument(); + expect(screen.getByText('Carolyn Moore')).toBeInTheDocument(); + expect(screen.getByText('carolyn.moore@example.com')).toBeInTheDocument(); + expect(nationality[0]).toBeInTheDocument(); }); - it('should render', async () => { - await render(); - expect(await screen.findByTestId('progress')).toBeInTheDocument(); - }); -}); +}); \ No newline at end of file diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index d01fd8467a..f728c346d2 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -1,9 +1,233 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Table, TableColumn, Progress, ResponseErrorPanel } from '@backstage/core-components'; -import { fetchApiRef, useApi } from '@backstage/core-plugin-api'; import useAsync from 'react-use/lib/useAsync'; +export const exampleUsers = { + "results": [ + { + "gender": "female", + "name": { + "title": "Miss", + "first": "Carolyn", + "last": "Moore" + }, + "email": "carolyn.moore@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Carolyn", + "nat": "GB" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Esma", + "last": "Berberoğlu" + }, + "email": "esma.berberoglu@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Esma", + "nat": "TR" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Isabella", + "last": "Rhodes" + }, + "email": "isabella.rhodes@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella", + "nat": "GB" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Derrick", + "last": "Carter" + }, + "email": "derrick.carter@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Derrick", + "nat": "IE" + }, + { + "gender": "female", + "name": { + "title": "Miss", + "first": "Mattie", + "last": "Lambert" + }, + "email": "mattie.lambert@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mattie", + "nat": "AU" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Mijat", + "last": "Rakić" + }, + "email": "mijat.rakic@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mijat", + "nat": "RS" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Javier", + "last": "Reid" + }, + "email": "javier.reid@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Javier", + "nat": "US" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Isabella", + "last": "Li" + }, + "email": "isabella.li@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella", + "nat": "CA" + }, + { + "gender": "female", + "name": { + "title": "Mrs", + "first": "Stephanie", + "last": "Garrett" + }, + "email": "stephanie.garrett@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Stephanie", + "nat": "AU" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Antonia", + "last": "Núñez" + }, + "email": "antonia.nunez@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Antonia", + "nat": "ES" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Donald", + "last": "Young" + }, + "email": "donald.young@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Donald", + "nat": "US" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Iegor", + "last": "Holodovskiy" + }, + "email": "iegor.holodovskiy@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Iegor", + "nat": "UA" + }, + { + "gender": "female", + "name": { + "title": "Madame", + "first": "Jessica", + "last": "David" + }, + "email": "jessica.david@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Jessica", + "nat": "CH" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Eve", + "last": "Martinez" + }, + "email": "eve.martinez@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Eve", + "nat": "FR" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Caleb", + "last": "Silva" + }, + "email": "caleb.silva@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Caleb", + "nat": "US" + }, + { + "gender": "female", + "name": { + "title": "Miss", + "first": "Marcia", + "last": "Jenkins" + }, + "email": "marcia.jenkins@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Marcia", + "nat": "US" + }, + { + "gender": "female", + "name": { + "title": "Mrs", + "first": "Mackenzie", + "last": "Jones" + }, + "email": "mackenzie.jones@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Mackenzie", + "nat": "NZ" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Jeremiah", + "last": "Gutierrez" + }, + "email": "jeremiah.gutierrez@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Jeremiah", + "nat": "AU" + }, + { + "gender": "female", + "name": { + "title": "Ms", + "first": "Luciara", + "last": "Souza" + }, + "email": "luciara.souza@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Luciara", + "nat": "BR" + }, + { + "gender": "male", + "name": { + "title": "Mr", + "first": "Valgi", + "last": "da Cunha" + }, + "email": "valgi.dacunha@example.com", + "picture": "https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi", + "nat": "BR" + } + ] +} + const useStyles = makeStyles({ avatar: { height: 32, @@ -64,11 +288,11 @@ export const DenseTable = ({ users }: DenseTableProps) => { }; export const ExampleFetchComponent = () => { - const { fetch } = useApi(fetchApiRef); + const { value, loading, error } = useAsync(async (): Promise => { - const response = await fetch('https://tinyurl.com/fake-data'); - const data = await response.json(); - return data.results; + const response = exampleUsers; + const data = response.results; + return data; }, []); if (loading) { From 8dbe5a9e720e3c2bf67907f58a9d6eaca0731e53 Mon Sep 17 00:00:00 2001 From: PIYUSH NEGI <43876655+npiyush97@users.noreply.github.com> Date: Thu, 8 Jun 2023 16:57:08 +0530 Subject: [PATCH 3/3] Update packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs Co-authored-by: Johan Haals Signed-off-by: PIYUSH NEGI <43876655+npiyush97@users.noreply.github.com> --- .../ExampleFetchComponent/ExampleFetchComponent.tsx.hbs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index f728c346d2..e4fadfa4c1 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -290,9 +290,8 @@ export const DenseTable = ({ users }: DenseTableProps) => { export const ExampleFetchComponent = () => { const { value, loading, error } = useAsync(async (): Promise => { - const response = exampleUsers; - const data = response.results; - return data; + // Would use fetch in a real world example + return exampleUsers.results; }, []); if (loading) {