Fix frontend plugin template prettier issues

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/cli/templates/default-plugin/dev/index.tsx.hbs

@@ -7,6 +7,6 @@ createDevApp()
   .addPage({
     element: <{{ extensionName }} />,
     title: 'Root Page',
-    path: '/{{ id }}'
+    path: '/{{ id }}',
   })
   .render();

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -6,7 +6,7 @@ import { screen } from '@testing-library/react';
 import {
   setupRequestMockHandlers,
   renderInTestApp,
-} from "@backstage/test-utils";
+} from '@backstage/test-utils';
 
 describe('ExampleComponent', () => {
   const server = setupServer();
@@ -22,6 +22,8 @@ describe('ExampleComponent', () => {
 
   it('should render', async () => {
     await renderInTestApp(<ExampleComponent />);
-    expect(screen.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
+    expect(
+      screen.getByText('Welcome to example-frontend!'),
+    ).toBeInTheDocument();
   });
 });

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -13,6 +13,7 @@ import { ExampleFetchComponent } from '../ExampleFetchComponent';
 
 export const ExampleComponent = () => (
   <Page themeId="tool">
+    
     <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
       <HeaderLabel label="Owner" value="Team X" />
       <HeaderLabel label="Lifecycle" value="Alpha" />

packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -8,7 +8,7 @@ describe('ExampleFetchComponent', () => {
 
     // Wait for the table to render
     const table = await screen.findByRole('table');
-    const nationality = screen.getAllByText("GB")
+    const nationality = screen.getAllByText('GB')
     // Assert that the table contains the expected user data
     expect(table).toBeInTheDocument();
     expect(screen.getByAltText('Carolyn')).toBeInTheDocument();
@@ -16,4 +16,4 @@ describe('ExampleFetchComponent', () => {
     expect(screen.getByText('carolyn.moore@example.com')).toBeInTheDocument();
     expect(nationality[0]).toBeInTheDocument();
   });
-});
+});

packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -1,232 +1,237 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Table, TableColumn, Progress, ResponseErrorPanel } from '@backstage/core-components';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  ResponseErrorPanel,
+} from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 
 export const exampleUsers = {
-  "results": [
+  results: [
     {
-      "gender": "female",
-      "name": {
-        "title": "Miss",
-        "first": "Carolyn",
-        "last": "Moore"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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ć"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
+      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"
-    }
-  ]
-}
+      email: 'valgi.dacunha@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi',
+      nat: 'BR',
+    },
+  ],
+};
 
 const useStyles = makeStyles({
   avatar: {

packages/cli/templates/default-plugin/src/plugin.ts.hbs

@@ -1,4 +1,7 @@
-import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
+import {
+  createPlugin,
+  createRoutableExtension,
+} from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from './routes';