@backstage/cli 0.36.0-next.2 → 0.36.0

package/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -1,28 +0,0 @@
-import { ExampleComponent } from './ExampleComponent';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { screen } from '@testing-library/react';
-import {
-  registerMswTestHooks,
-  renderInTestApp,
-} from '@backstage/test-utils';
-
-describe('ExampleComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  registerMswTestHooks(server);
-
-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
-    );
-  });
-
-  it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
-    expect(
-      screen.getByText('Welcome to {{pluginId}}!'),
-    ).toBeInTheDocument();
-  });
-});

package/templates/frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -1,37 +0,0 @@
-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 = () => (
-  <Page themeId="tool">
-    <Header title="Welcome to {{pluginId}}!" subtitle="Optional subtitle">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
-    </Header>
-    <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <ExampleFetchComponent />
-        </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);

package/templates/frontend-plugin/src/components/ExampleComponent/index.ts

@@ -1 +0,0 @@
-export { ExampleComponent } from './ExampleComponent';

package/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -1,19 +0,0 @@
-import { renderInTestApp } from '@backstage/test-utils';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
-
-describe('ExampleFetchComponent', () => {
-  it('renders the user table', async () => {
-    const { getAllByText, getByAltText, getByText, findByRole } =
-      await renderInTestApp(<ExampleFetchComponent />);
-
-    // Wait for the table to render
-    const table = await findByRole('table');
-    const nationality = getAllByText('GB');
-    // Assert that the table contains the expected user data
-    expect(table).toBeInTheDocument();
-    expect(getByAltText('Carolyn')).toBeInTheDocument();
-    expect(getByText('Carolyn Moore')).toBeInTheDocument();
-    expect(getByText('carolyn.moore@example.com')).toBeInTheDocument();
-    expect(nationality[0]).toBeInTheDocument();
-  });
-});

package/templates/frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -1,308 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  Table,
-  TableColumn,
-  Progress,
-  ResponseErrorPanel,
-} from '@backstage/core-components';
-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,
-    width: 32,
-    borderRadius: '50%',
-  },
-});
-
-type User = {
-  gender: string; // "male"
-  name: {
-    title: string; // "Mr",
-    first: string; // "Duane",
-    last: string; // "Reed"
-  };
-  email: string; // "duane.reed@example.com"
-  picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane"
-  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: (
-        <img
-          src={user.picture}
-          className={classes.avatar}
-          alt={user.name.first}
-        />
-      ),
-      name: `${user.name.first} ${user.name.last}`,
-      email: user.email,
-      nationality: user.nat,
-    };
-  });
-
-  return (
-    <Table
-      title="Example User List"
-      options=\{{ search: false, paging: false }}
-      columns={columns}
-      data={data}
-    />
-  );
-};
-
-export const ExampleFetchComponent = () => {
-
-  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    // Would use fetch in a real world example
-    return exampleUsers.results;
-  }, []);
-
-  if (loading) {
-    return <Progress />;
-  } else if (error) {
-    return <ResponseErrorPanel error={error} />;
-  }
-
-  return <DenseTable users={value || []} />;
-};

package/templates/frontend-plugin/src/components/ExampleFetchComponent/index.ts

@@ -1 +0,0 @@
-export { ExampleFetchComponent } from './ExampleFetchComponent';

package/templates/frontend-plugin/src/index.ts.hbs

@@ -1 +0,0 @@
-export { {{ pluginVar }}, {{ extensionName }} } from './plugin';

package/templates/frontend-plugin/src/plugin.test.ts.hbs

@@ -1,7 +0,0 @@
-import { {{ pluginVar }} } from './plugin';
-
-describe('{{pluginId}}', () => {
-  it('should export plugin', () => {
-    expect({{ pluginVar }}).toBeDefined();
-  });
-});

package/templates/frontend-plugin/src/plugin.ts.hbs

@@ -1,22 +0,0 @@
-import {
-  createPlugin,
-  createRoutableExtension,
-} from '@backstage/core-plugin-api';
-
-import { rootRouteRef } from './routes';
-
-export const {{ pluginVar }} = createPlugin({
-  id: '{{pluginId}}',
-  routes: {
-    root: rootRouteRef,
-  },
-});
-
-export const {{ extensionName }} = {{ pluginVar }}.provide(
-  createRoutableExtension({
-    name: '{{ extensionName }}',
-    component: () =>
-      import('./components/ExampleComponent').then(m => m.ExampleComponent),
-    mountPoint: rootRouteRef,
-  }),
-);

package/templates/frontend-plugin/src/routes.ts.hbs

@@ -1,5 +0,0 @@
-import { createRouteRef } from '@backstage/core-plugin-api';
-
-export const rootRouteRef = createRouteRef({
-  id: '{{pluginId}}',
-});

package/templates/frontend-plugin/src/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/templates/new-frontend-plugin/.eslintrc.js.hbs

@@ -1 +0,0 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

package/templates/new-frontend-plugin/README.md.hbs

@@ -1,20 +0,0 @@
-# {{pluginId}}
-
-Welcome to the {{pluginId}} plugin!
-
-_This plugin was created through the Backstage CLI_
-
-## Getting started
-
-Your plugin has been added to the app in this repository, meaning you'll be able
-to access it by running `yarn start` in the root directory, and then navigating
-to [/{{pluginId}}](http://localhost:3000/{{pluginId}}).
-
-This plugin is built with Backstage's [new frontend
-system](https://backstage.io/docs/frontend-system/architecture/index), and you
-can find more information about building plugins in the [plugin builder
-documentation](https://backstage.io/docs/frontend-system/building-plugins/index).
-
-You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
-This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
-It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

package/templates/new-frontend-plugin/dev/index.tsx

@@ -1,10 +0,0 @@
-import { createApp } from '@backstage/frontend-defaults';
-import ReactDOM from 'react-dom';
-
-import plugin from '../src';
-
-const app = createApp({
-  features: [plugin],
-});
-
-ReactDOM.render(app.createRoot(), document.getElementById('root'));

package/templates/new-frontend-plugin/package.json.hbs

@@ -1,49 +0,0 @@
-{
-  "name": "{{packageName}}",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
-  },
-  "backstage": {
-    "role": "frontend-plugin",
-    "pluginId": "{{pluginId}}"
-  },
-  "sideEffects": false,
-  "scripts": {
-    "start": "backstage-cli package start",
-    "build": "backstage-cli package build",
-    "lint": "backstage-cli package lint",
-    "test": "backstage-cli package test",
-    "clean": "backstage-cli package clean",
-    "prepack": "backstage-cli package prepack",
-    "postpack": "backstage-cli package postpack"
-  },
-  "dependencies": {
-    "@backstage/core-components": "{{versionQuery '@backstage/core-components'}}",
-    "@backstage/frontend-plugin-api": "{{versionQuery '@backstage/frontend-plugin-api'}}",
-    "@backstage/theme": "{{versionQuery '@backstage/theme'}}",
-    "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}",
-    "@material-ui/icons": "{{versionQuery '@material-ui/icons' '4.9.1'}}",
-    "@material-ui/lab": "{{versionQuery '@material-ui/lab' '4.0.0-alpha.61'}}",
-    "react-use": "{{versionQuery 'react-use' '17.2.4'}}"
-  },
-  "peerDependencies": {
-    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
-  },
-  "devDependencies": {
-    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
-    "@backstage/frontend-defaults": "{{versionQuery '@backstage/frontend-defaults'}}",
-    "@backstage/frontend-test-utils": "{{versionQuery '@backstage/frontend-test-utils'}}",
-    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}",
-    "@testing-library/react": "{{versionQuery '@testing-library/react' '14.0.0'}}",
-    "@testing-library/user-event": "{{versionQuery '@testing-library/user-event' '14.0.0'}}",
-    "msw": "{{versionQuery 'msw' '1.0.0'}}",
-    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
-  },
-  "files": [
-    "dist"
-  ]
-}

package/templates/new-frontend-plugin/portable-template.yaml

@@ -1,5 +0,0 @@
-name: frontend-plugin
-role: frontend-plugin
-description: A new frontend plugin
-values:
-  pluginVar: '{{ camelCase pluginId }}Plugin'

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -1,28 +0,0 @@
-import { ExampleComponent } from './ExampleComponent';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { screen } from '@testing-library/react';
-import {
-  registerMswTestHooks,
-  renderInTestApp,
-} from '@backstage/frontend-test-utils';
-
-describe('ExampleComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  registerMswTestHooks(server);
-
-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
-    );
-  });
-
-  it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
-    expect(
-      screen.getByText('Welcome to {{pluginId}}!'),
-    ).toBeInTheDocument();
-  });
-});

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -1,37 +0,0 @@
-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 = () => (
-  <Page themeId="tool">
-    <Header title="Welcome to {{pluginId}}!" subtitle="Optional subtitle">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
-    </Header>
-    <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <ExampleFetchComponent />
-        </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);

package/templates/new-frontend-plugin/src/components/ExampleComponent/index.ts

@@ -1 +0,0 @@
-export { ExampleComponent } from './ExampleComponent';

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -1,19 +0,0 @@
-import { renderInTestApp } from '@backstage/frontend-test-utils';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
-
-describe('ExampleFetchComponent', () => {
-  it('renders the user table', async () => {
-    const { getAllByText, getByAltText, getByText, findByRole } =
-      await renderInTestApp(<ExampleFetchComponent />);
-
-    // Wait for the table to render
-    const table = await findByRole('table');
-    const nationality = getAllByText('GB');
-    // Assert that the table contains the expected user data
-    expect(table).toBeInTheDocument();
-    expect(getByAltText('Carolyn')).toBeInTheDocument();
-    expect(getByText('Carolyn Moore')).toBeInTheDocument();
-    expect(getByText('carolyn.moore@example.com')).toBeInTheDocument();
-    expect(nationality[0]).toBeInTheDocument();
-  });
-});