From 870e4186eff059dabcb23117adc301f197997faa Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:13:04 +0200 Subject: [PATCH] refactor(catalog): extract entity cards extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/entityCards.tsx | 173 ++++++++++++++++++++++ plugins/catalog/src/alpha/plugin.tsx | 16 +- 2 files changed, 176 insertions(+), 13 deletions(-) create mode 100644 plugins/catalog/src/alpha/entityCards.tsx diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx new file mode 100644 index 0000000000..9faf0b9517 --- /dev/null +++ b/plugins/catalog/src/alpha/entityCards.tsx @@ -0,0 +1,173 @@ +/* + * Copyright 2023 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. + */ + +import React from 'react'; +import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha'; +import { createSchemaFromZod } from '@backstage/frontend-plugin-api'; + +export const EntityAboutCard = createEntityCardExtension({ + id: 'about', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + }), + ), + loader: async ({ config }) => + import('../components/AboutCard').then(m => ( + + )), +}); + +export const EntityLinksCard = createEntityCardExtension({ + id: 'links', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).optional(), + cols: z + .union([ + z.number(), + z.object({ + xs: z.number(), + sm: z.number(), + md: z.number(), + lg: z.number(), + xl: z.number(), + }), + ]) + .optional(), + }), + ), + loader: async ({ config }) => + import('../components/EntityLinksCard').then(m => { + return ; + }), +}); + +export const EntityLabelsCard = createEntityCardExtension({ + id: 'labels', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).optional(), + title: z.string().optional(), + }), + ), + loader: async ({ config }) => + import('../components/EntityLabelsCard').then(m => ( + + )), +}); + +export const EntityDependsOnComponentsCard = createEntityCardExtension({ + id: 'dependsOn.components', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + // TODO: columns, tableOptions + }), + ), + loader: async ({ config }) => + import('../components/DependsOnComponentsCard').then(m => ( + + )), +}); + +export const EntityDependsOnResourcesCard = createEntityCardExtension({ + id: 'dependsOn.resources', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + // TODO: columns, tableOptions + }), + ), + loader: async ({ config }) => + import('../components/DependsOnResourcesCard').then(m => ( + + )), +}); + +export const EntityHasComponentsCard = createEntityCardExtension({ + id: 'has.components', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + }), + ), + loader: async ({ config }) => + import('../components/HasComponentsCard').then(m => ( + + )), +}); + +export const EntityHasResourcesCard = createEntityCardExtension({ + id: 'has.resources', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + }), + ), + loader: async ({ config }) => + import('../components/HasResourcesCard').then(m => ( + + )), +}); + +export const EntityHasSubcomponentsCard = createEntityCardExtension({ + id: 'has.subcomponents', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + // TODO: tableOptions + }), + ), + loader: async ({ config }) => + import('../components/HasSubcomponentsCard').then(m => ( + + )), +}); + +export const EntityHasSystemsCard = createEntityCardExtension({ + id: 'has.systems', + configSchema: createSchemaFromZod(z => + z.object({ + variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'), + title: z.string().optional(), + }), + ), + loader: async ({ config }) => + import('../components/HasSystemsCard').then(m => ( + + )), +}); + +export default [ + EntityAboutCard, + EntityLinksCard, + EntityLabelsCard, + EntityDependsOnComponentsCard, + EntityDependsOnResourcesCard, + EntityHasComponentsCard, + EntityHasResourcesCard, + EntityHasSubcomponentsCard, + EntityHasSystemsCard, +]; diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index 67d1f036ee..761a00c29b 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -27,10 +27,7 @@ import { } from '@backstage/frontend-plugin-api'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; -import { - createEntityContentExtension, - createEntityCardExtension, -} from '@backstage/plugin-catalog-react/alpha'; +import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; import { @@ -43,6 +40,7 @@ import { import apis from './apis'; import pages from './pages'; import filters from './filters'; +import entityCards from './entityCards'; /** @alpha */ export const CatalogSearchResultListItemExtension = @@ -55,14 +53,6 @@ export const CatalogSearchResultListItemExtension = ), }); -const EntityAboutCard = createEntityCardExtension({ - id: 'about', - loader: async () => - import('../components/AboutCard').then(m => ( - - )), -}); - const OverviewEntityContent = createEntityContentExtension({ id: 'overview', defaultPath: '/', @@ -107,9 +97,9 @@ export default createPlugin({ ...apis, ...pages, ...filters, + ...entityCards, CatalogSearchResultListItemExtension, CatalogNavItem, OverviewEntityContent, - EntityAboutCard, ], });