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) {