From 4227c18249d0c00db4985b88795cd3af6194666f Mon Sep 17 00:00:00 2001 From: Karthik Jeeyar Date: Fri, 11 Oct 2024 10:35:14 +0530 Subject: [PATCH] add standalone demo environment for npm plugin Signed-off-by: Karthik Jeeyar --- .../npm/.changeset/sweet-tomatoes-grow.md | 5 ++ .../app/src/components/catalog/EntityPage.tsx | 16 ++--- workspaces/npm/plugins/npm/README.md | 12 ++-- workspaces/npm/plugins/npm/dev/index.tsx | 45 +++++++++++++- workspaces/npm/plugins/npm/package.json | 3 +- workspaces/npm/plugins/npm/report.api.md | 20 ++++--- .../npm/src/components/NpmInfoCard.tsx | 5 +- .../src/components/NpmReleaseOverviewCard.tsx | 5 +- .../src/components/NpmReleaseTableCard.tsx | 5 +- .../npm/plugins/npm/src/components/index.ts | 18 ++++++ workspaces/npm/plugins/npm/src/index.ts | 10 ++-- workspaces/npm/plugins/npm/src/plugin.ts | 58 ++++++++++++++++++- 12 files changed, 161 insertions(+), 41 deletions(-) create mode 100644 workspaces/npm/.changeset/sweet-tomatoes-grow.md create mode 100644 workspaces/npm/plugins/npm/src/components/index.ts diff --git a/workspaces/npm/.changeset/sweet-tomatoes-grow.md b/workspaces/npm/.changeset/sweet-tomatoes-grow.md new file mode 100644 index 0000000000..eeabda96a6 --- /dev/null +++ b/workspaces/npm/.changeset/sweet-tomatoes-grow.md @@ -0,0 +1,5 @@ +--- +'@backstage-community/plugin-npm': patch +--- + +Add standalone demo application diff --git a/workspaces/npm/packages/app/src/components/catalog/EntityPage.tsx b/workspaces/npm/packages/app/src/components/catalog/EntityPage.tsx index aa29f5eec9..88e1c7d416 100644 --- a/workspaces/npm/packages/app/src/components/catalog/EntityPage.tsx +++ b/workspaces/npm/packages/app/src/components/catalog/EntityPage.tsx @@ -71,9 +71,9 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; import { isNpmAvailable, - NpmInfoCard, - NpmReleaseOverviewCard, - NpmReleaseTableCard, + EntityNpmInfoCard, + EntityNpmReleaseOverviewCard, + EntityNpmReleaseTableCard, } from '@backstage-community/plugin-npm'; const techdocsContent = ( @@ -154,10 +154,10 @@ const overviewContent = ( - + - + @@ -191,7 +191,7 @@ const serviceEntityPage = ( path="/npm-releases" title="NPM Releases" > - + @@ -237,7 +237,7 @@ const websiteEntityPage = ( path="/npm-releases" title="NPM Releases" > - + @@ -275,7 +275,7 @@ const defaultEntityPage = ( path="/npm-releases" title="NPM Releases" > - + diff --git a/workspaces/npm/plugins/npm/README.md b/workspaces/npm/plugins/npm/README.md index 4c6204f031..da0dce3393 100644 --- a/workspaces/npm/plugins/npm/README.md +++ b/workspaces/npm/plugins/npm/README.md @@ -27,9 +27,9 @@ After all other imports: ```tsx import { isNpmAvailable, - NpmInfoCard, - NpmReleaseOverviewCard, - NpmReleaseTableCard, + EntityNpmInfoCard, + EntityNpmReleaseOverviewCard, + EntityNpmReleaseTableCard, } from '@backstage-community/plugin-npm'; ``` @@ -40,10 +40,10 @@ Add to `const overviewContent` after `EntityAboutCard`: - + - + @@ -59,6 +59,6 @@ and to `const defaultEntityPage` between the `/` and `/docs` routecase. path="/npm-releases" title="NPM Releases" > - + ``` diff --git a/workspaces/npm/plugins/npm/dev/index.tsx b/workspaces/npm/plugins/npm/dev/index.tsx index 0b699a0995..a7c6a591d0 100644 --- a/workspaces/npm/plugins/npm/dev/index.tsx +++ b/workspaces/npm/plugins/npm/dev/index.tsx @@ -15,13 +15,52 @@ */ import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; -import { npmPlugin } from '../src/plugin'; +import { EntityProvider } from '@backstage/plugin-catalog-react'; +import { Content, Header, Page } from '@backstage/core-components'; +import { Grid } from '@material-ui/core'; +import { + npmPlugin, + EntityNpmInfoCard, + EntityNpmReleaseTableCard, +} from '../src/plugin'; + +const mockEntity = { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'backstage-plugin-catalog', + annotations: { + 'npm/package': '@backstage/plugin-catalog', + }, + }, + spec: { + type: 'website', + lifecycle: 'production', + owner: 'guests', + }, +}; createDevApp() .registerPlugin(npmPlugin) .addPage({ - element:
, - title: 'Root Page', + element: ( + +
+ + + + + + + + + + + + + + ), + title: 'Npm', path: '/npm', }) .render(); diff --git a/workspaces/npm/plugins/npm/package.json b/workspaces/npm/plugins/npm/package.json index be889c880a..03cbd274fb 100644 --- a/workspaces/npm/plugins/npm/package.json +++ b/workspaces/npm/plugins/npm/package.json @@ -69,7 +69,8 @@ "homepage": "https://github.com/backstage/community-plugins/tree/main/workspaces/npm/plugins/npm", "bugs": "https://github.com/backstage/community-plugins/issues", "maintainers": [ - "jerolimov" + "jerolimov", + "karthikjeeyar" ], "author": "Christoph Jerolimov" } diff --git a/workspaces/npm/plugins/npm/report.api.md b/workspaces/npm/plugins/npm/report.api.md index 7892088dd3..a6e28d7b7a 100644 --- a/workspaces/npm/plugins/npm/report.api.md +++ b/workspaces/npm/plugins/npm/report.api.md @@ -3,16 +3,24 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +/// + import { BackstagePlugin } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; -import { default as React_2 } from 'react'; +import { JSX as JSX_2 } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; // @public -export const isNpmAvailable: (entity: Entity) => boolean; +export const EntityNpmInfoCard: () => JSX_2.Element; + +// @public +export const EntityNpmReleaseOverviewCard: () => JSX_2.Element; // @public -export function NpmInfoCard(): React_2.JSX.Element; +export const EntityNpmReleaseTableCard: () => JSX_2.Element; + +// @public +export const isNpmAvailable: (entity: Entity) => boolean; // @public export const npmPlugin: BackstagePlugin< @@ -22,10 +30,4 @@ export const npmPlugin: BackstagePlugin< {}, {} >; - -// @public -export function NpmReleaseOverviewCard(): React_2.JSX.Element; - -// @public -export function NpmReleaseTableCard(): React_2.JSX.Element; ``` diff --git a/workspaces/npm/plugins/npm/src/components/NpmInfoCard.tsx b/workspaces/npm/plugins/npm/src/components/NpmInfoCard.tsx index 4f9ed2c459..ebf45f98a1 100644 --- a/workspaces/npm/plugins/npm/src/components/NpmInfoCard.tsx +++ b/workspaces/npm/plugins/npm/src/components/NpmInfoCard.tsx @@ -78,9 +78,8 @@ function GridItem({ * name, description, keywords, license, some links and * the latest version if available. * - * @public */ -export function NpmInfoCard() { +export const NpmInfoCard = () => { const { entity } = useEntity(); const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION]; @@ -235,4 +234,4 @@ export function NpmInfoCard() { ); -} +}; diff --git a/workspaces/npm/plugins/npm/src/components/NpmReleaseOverviewCard.tsx b/workspaces/npm/plugins/npm/src/components/NpmReleaseOverviewCard.tsx index b8399dcff8..2c4090f6f9 100644 --- a/workspaces/npm/plugins/npm/src/components/NpmReleaseOverviewCard.tsx +++ b/workspaces/npm/plugins/npm/src/components/NpmReleaseOverviewCard.tsx @@ -62,9 +62,8 @@ const tagColumns: TableColumn[] = [ * Card for the catalog (entiy page) that shows the latest tags * with their version number and the release date. * - * @public */ -export function NpmReleaseOverviewCard() { +export const NpmReleaseOverviewCard = () => { const { entity } = useEntity(); const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION]; @@ -108,4 +107,4 @@ export function NpmReleaseOverviewCard() { emptyContent={emptyContent} /> ); -} +}; diff --git a/workspaces/npm/plugins/npm/src/components/NpmReleaseTableCard.tsx b/workspaces/npm/plugins/npm/src/components/NpmReleaseTableCard.tsx index a259adae20..f734e265da 100644 --- a/workspaces/npm/plugins/npm/src/components/NpmReleaseTableCard.tsx +++ b/workspaces/npm/plugins/npm/src/components/NpmReleaseTableCard.tsx @@ -86,9 +86,8 @@ const columns: TableColumn[] = [ * One for the latest tags and versions of a npm package. * And another one for the complete version history. * - * @public */ -export function NpmReleaseTableCard() { +export const NpmReleaseTableCard = () => { const { entity } = useEntity(); const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION]; @@ -155,4 +154,4 @@ export function NpmReleaseTableCard() { /> ); -} +}; diff --git a/workspaces/npm/plugins/npm/src/components/index.ts b/workspaces/npm/plugins/npm/src/components/index.ts new file mode 100644 index 0000000000..47849f50ec --- /dev/null +++ b/workspaces/npm/plugins/npm/src/components/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export { NpmReleaseTableCard } from './NpmReleaseTableCard'; +export { NpmInfoCard } from './NpmInfoCard'; +export { NpmReleaseOverviewCard } from './NpmReleaseOverviewCard'; diff --git a/workspaces/npm/plugins/npm/src/index.ts b/workspaces/npm/plugins/npm/src/index.ts index 40f1aae37c..d51fbfd240 100644 --- a/workspaces/npm/plugins/npm/src/index.ts +++ b/workspaces/npm/plugins/npm/src/index.ts @@ -20,9 +20,11 @@ * @packageDocumentation */ -export { npmPlugin } from './plugin'; +export { + npmPlugin, + EntityNpmInfoCard, + EntityNpmReleaseOverviewCard, + EntityNpmReleaseTableCard, +} from './plugin'; export { isNpmAvailable } from './utils/isNpmAvailable'; -export { NpmInfoCard } from './components/NpmInfoCard'; -export { NpmReleaseOverviewCard } from './components/NpmReleaseOverviewCard'; -export { NpmReleaseTableCard } from './components/NpmReleaseTableCard'; diff --git a/workspaces/npm/plugins/npm/src/plugin.ts b/workspaces/npm/plugins/npm/src/plugin.ts index dd1d290b6d..2009baaf3d 100644 --- a/workspaces/npm/plugins/npm/src/plugin.ts +++ b/workspaces/npm/plugins/npm/src/plugin.ts @@ -13,7 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { createPlugin } from '@backstage/core-plugin-api'; +import { + createComponentExtension, + createPlugin, +} from '@backstage/core-plugin-api'; import { rootRouteRef } from './routes'; @@ -28,3 +31,56 @@ export const npmPlugin = createPlugin({ root: rootRouteRef, }, }); + +/** + * Page content for the catalog (entiy page) that shows two tables. + * One for the latest tags and versions of a npm package. + * And another one for the complete version history. + * @public + */ +export const EntityNpmReleaseTableCard = npmPlugin.provide( + createComponentExtension({ + name: 'EntityNpmReleaseTableCard', + component: { + lazy: () => + import('./components/NpmReleaseTableCard').then( + m => m.NpmReleaseTableCard, + ), + }, + }), +); + +/** + * + * Card for the catalog (entity page) that shows the npm + * name, description, keywords, license, some links and + * the latest version if available. + * + * @public + */ +export const EntityNpmInfoCard = npmPlugin.provide( + createComponentExtension({ + name: 'EntityNpmInfoCard', + component: { + lazy: () => import('./components/NpmInfoCard').then(m => m.NpmInfoCard), + }, + }), +); + +/** + * Card for the catalog (entiy page) that shows the latest tags + * with their version number and the release date. + * + * @public + */ +export const EntityNpmReleaseOverviewCard = npmPlugin.provide( + createComponentExtension({ + name: 'EntityNpmReleaseOverviewCard', + component: { + lazy: () => + import('./components/NpmReleaseOverviewCard').then( + m => m.NpmReleaseOverviewCard, + ), + }, + }), +);