@backstage/cli-module-new 0.1.1 → 0.1.2

package/dist/packages/ui/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.14.0";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/ui/package.json.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/plugins/auth-backend/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.27.3";
+var version = "0.28.0";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/plugins/auth-backend-module-guest-provider/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.2.17";
+var version = "0.2.18";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/plugins/catalog-node/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "2.1.0";
+var version = "2.2.0";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/plugins/scaffolder-node/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.13.1";
+var version = "0.13.2";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/plugins/scaffolder-node-test-utils/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.3.9";
+var version = "0.3.10";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/cli-module-new",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI module for Backstage CLI",
   "backstage": {
     "role": "cli-module"
@@ -34,9 +34,9 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/cli-common": "^0.2.0",
-    "@backstage/cli-node": "^0.3.0",
-    "@backstage/errors": "^1.2.7",
+    "@backstage/cli-common": "^0.2.1",
+    "@backstage/cli-node": "^0.3.1",
+    "@backstage/errors": "^1.3.0",
     "chalk": "^4.0.0",
     "cleye": "^2.3.0",
     "fs-extra": "^11.2.0",
@@ -51,10 +51,10 @@
     "zod-validation-error": "^4.0.2"
   },
   "devDependencies": {
-    "@backstage/backend-test-utils": "^1.11.1",
-    "@backstage/cli": "^0.36.0",
-    "@backstage/core-plugin-api": "^1.12.4",
-    "@backstage/test-utils": "^1.7.16",
+    "@backstage/backend-test-utils": "^1.11.2",
+    "@backstage/cli": "^0.36.1",
+    "@backstage/core-plugin-api": "^1.12.5",
+    "@backstage/test-utils": "^1.7.17",
     "@types/fs-extra": "^11.0.0",
     "@types/inquirer": "^8.1.3",
     "@types/lodash": "^4.14.151",

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

@@ -10,7 +10,7 @@ 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
+This plugin is built with Backstage's [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).

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

@@ -25,9 +25,7 @@
     "@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'}}",
+    "@backstage/ui": "{{versionQuery '@backstage/ui'}}",
     "react-use": "{{versionQuery 'react-use' '17.2.4'}}"
   },
   "peerDependencies": {

package/templates/frontend-plugin/src/components/TodoList/TodoList.test.tsx

@@ -0,0 +1,18 @@
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/frontend-test-utils';
+import { TodoList } from './TodoList';
+
+describe('TodoList', () => {
+  it('renders a list of todos', async () => {
+    const todos = [
+      { id: '1', title: 'First task', createdBy: 'user:default/guest', createdAt: '2025-01-01T00:00:00.000Z' },
+      { id: '2', title: 'Second task', createdBy: 'user:default/admin', createdAt: '2025-01-02T00:00:00.000Z' },
+    ];
+
+    await renderInTestApp(<TodoList todos={todos} />);
+
+    expect(await screen.findByText('First task')).toBeInTheDocument();
+    expect(await screen.findByText('Second task')).toBeInTheDocument();
+    expect(await screen.findByText('user:default/guest')).toBeInTheDocument();
+  });
+});

package/templates/frontend-plugin/src/components/TodoList/TodoList.tsx

@@ -0,0 +1,42 @@
+import { Table, useTable, CellText, type ColumnConfig } from '@backstage/ui';
+
+export type TodoItem = {
+  title: string;
+  id: string;
+  createdBy: string;
+  createdAt: string;
+};
+
+const columns: ColumnConfig<TodoItem>[] = [
+  {
+    id: 'title',
+    label: 'Title',
+    cell: item => <CellText title={item.title} />,
+  },
+  {
+    id: 'createdBy',
+    label: 'Created by',
+    cell: item => <CellText title={item.createdBy} />,
+  },
+  {
+    id: 'createdAt',
+    label: 'Created at',
+    cell: item => <CellText title={new Date(item.createdAt).toLocaleString()} />,
+  },
+];
+
+export const TodoList = ({ todos }: { todos: TodoItem[] }) => {
+  const { tableProps } = useTable({
+    mode: 'complete',
+    data: todos,
+    paginationOptions: { pageSize: todos.length || 1 },
+  });
+
+  return (
+    <Table
+      columnConfig={columns}
+      {...tableProps}
+      pagination={{ type: 'none' }}
+    />
+  );
+};

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

@@ -0,0 +1,2 @@
+export { TodoList } from './TodoList';
+export type { TodoItem } from './TodoList';

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

@@ -0,0 +1,43 @@
+import { screen } from '@testing-library/react';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  registerMswTestHooks,
+  renderInTestApp,
+} from '@backstage/frontend-test-utils';
+import { TodoPage } from './TodoPage';
+
+describe('TodoPage', () => {
+  const server = setupServer();
+  registerMswTestHooks(server);
+
+  it('renders todos from the backend', async () => {
+    server.use(
+      rest.get('*/api/{{pluginId}}/todos', (_, res, ctx) =>
+        res(
+          ctx.json({
+            items: [
+              { id: '1', title: 'Mocked task', createdBy: 'user:default/guest', createdAt: '2025-01-01T00:00:00.000Z' },
+            ],
+          }),
+        ),
+      ),
+    );
+
+    await renderInTestApp(<TodoPage />);
+
+    expect(await screen.findByText('Mocked task')).toBeInTheDocument();
+  });
+
+  it('falls back to example data when the backend fails', async () => {
+    server.use(
+      rest.get('*/api/{{pluginId}}/todos', (_, res, ctx) =>
+        res(ctx.status(500), ctx.json({ message: 'Internal Server Error' })),
+      ),
+    );
+
+    await renderInTestApp(<TodoPage />);
+
+    expect(await screen.findByText('Install the backend plugin')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { Progress } from '@backstage/core-components';
+import {
+  useApi,
+  fetchApiRef,
+} from '@backstage/frontend-plugin-api';
+import { Header, Container } from '@backstage/ui';
+import useAsync from 'react-use/esm/useAsync';
+import { TodoList } from '../TodoList';
+import type { TodoItem } from '../TodoList';
+
+const exampleTodos: TodoItem[] = [
+  { id: '1', title: 'Install the backend plugin', createdBy: 'user:default/guest', createdAt: new Date().toISOString() },
+  { id: '2', title: 'Connect the frontend to real data', createdBy: 'user:default/guest', createdAt: new Date().toISOString() },
+];
+
+// TEMPLATE NOTE:
+// This is a simple example of fetching data from the backend plugin.
+// You can replace this with your own data fetching logic or use a
+// generated client from an OpenAPI schema.
+function useTodos() {
+  const { fetch } = useApi(fetchApiRef);
+
+  return useAsync(async (): Promise<TodoItem[]> => {
+    const response = await fetch(`plugin://{{pluginId}}/todos`);
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch todos: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+    return data.items;
+  }, [fetch]);
+}
+
+export const TodoPage = () => {
+  const { value: todos, loading, error } = useTodos();
+
+  if (loading) {
+    return <Progress />;
+  }
+
+  return (
+    <>
+      <Header title="Welcome to {{pluginId}}!" />
+      <Container>
+        <TodoList todos={error ? exampleTodos : (todos ?? [])} />
+      </Container>
+    </>
+  );
+};

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

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

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

@@ -10,9 +10,9 @@ export const page = PageBlueprint.make({
     path: '/{{pluginId}}',
     routeRef: rootRouteRef,
     loader: () =>
-      import('./components/ExampleComponent').then(m =>
-        <m.ExampleComponent />,
-      ),
+      import('./components/TodoPage').then(m => (
+        <m.TodoPage />
+      )),
   },
 });
 

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

@@ -1 +1 @@
-export { {{ moduleVar }} as default } from './plugin';
+export { {{ moduleVar }} as default } from './module';

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

@@ -1,4 +1,4 @@
-name: legacy-frontend-plugin
+name: frontend-plugin-legacy
 role: frontend-plugin
 description: A new frontend plugin (legacy system)
 values:

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/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/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/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();
-  });
-});