From 2b91568fa3c4ddeee8e982621c06a57ee1cd5544 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:07:53 +0200 Subject: [PATCH 1/9] refactor(catalog): rename filters extensions file Signed-off-by: Camila Belo --- ...uiltInFilterExtensions.tsx => filters.tsx} | 2 +- plugins/catalog/src/alpha/plugin.tsx | 19 +++++++++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) rename plugins/catalog/src/alpha/{builtInFilterExtensions.tsx => filters.tsx} (98%) diff --git a/plugins/catalog/src/alpha/builtInFilterExtensions.tsx b/plugins/catalog/src/alpha/filters.tsx similarity index 98% rename from plugins/catalog/src/alpha/builtInFilterExtensions.tsx rename to plugins/catalog/src/alpha/filters.tsx index 5a7575c4f5..7b73c2d14b 100644 --- a/plugins/catalog/src/alpha/builtInFilterExtensions.tsx +++ b/plugins/catalog/src/alpha/filters.tsx @@ -109,7 +109,7 @@ const CatalogUserListFilter = createCatalogFilterExtension({ }, }); -export const builtInFilterExtensions = [ +export default [ CatalogEntityTagFilter, CatalogEntityKindFilter, CatalogEntityTypeFilter, diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index d9d2878213..9f6094d288 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; +import Grid from '@material-ui/core/Grid'; import HomeIcon from '@material-ui/icons/Home'; + import { createApiFactory, discoveryApiRef, @@ -23,7 +25,6 @@ import { storageApiRef, } from '@backstage/core-plugin-api'; import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; -import { CatalogClient } from '@backstage/catalog-client'; import { createApiExtension, createPageExtension, @@ -32,6 +33,8 @@ import { coreExtensionData, createExtensionInput, } from '@backstage/frontend-plugin-api'; + +import { CatalogClient } from '@backstage/catalog-client'; import { AsyncEntityProvider, catalogApiRef, @@ -44,6 +47,7 @@ import { entityContentTitleExtensionDataRef, } from '@backstage/plugin-catalog-react/alpha'; import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; + import { DefaultStarredEntitiesApi } from '../apis'; import { createComponentRouteRef, @@ -51,9 +55,9 @@ import { rootRouteRef, viewTechDocRouteRef, } from '../routes'; -import { builtInFilterExtensions } from './builtInFilterExtensions'; import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl'; -import Grid from '@material-ui/core/Grid'; + +import filters from './filters'; /** @alpha */ export const CatalogApi = createApiExtension({ @@ -99,8 +103,11 @@ const CatalogIndexPage = createPageExtension({ }, loader: async ({ inputs }) => { const { BaseCatalogPage } = await import('../components/CatalogPage'); - const filters = inputs.filters.map(filter => filter.element); - return {filters}} />; + return ( + {inputs.filters.map(filter => filter.element)}} + /> + ); }, }); @@ -188,6 +195,7 @@ export default createPlugin({ createFromTemplate: convertLegacyRouteRef(createFromTemplateRouteRef), }, extensions: [ + ...filters, CatalogApi, StarredEntitiesApi, CatalogSearchResultListItemExtension, @@ -196,6 +204,5 @@ export default createPlugin({ CatalogNavItem, OverviewEntityContent, EntityAboutCard, - ...builtInFilterExtensions, ], }); From 12e562f379e4fecf145aba298750d2d983e9d808 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:10:22 +0200 Subject: [PATCH 2/9] refactor(catalog): extract apis extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/apis.tsx | 51 ++++++++++++++++++++++++++++ plugins/catalog/src/alpha/plugin.tsx | 37 ++------------------ 2 files changed, 53 insertions(+), 35 deletions(-) create mode 100644 plugins/catalog/src/alpha/apis.tsx diff --git a/plugins/catalog/src/alpha/apis.tsx b/plugins/catalog/src/alpha/apis.tsx new file mode 100644 index 0000000000..a887a33a04 --- /dev/null +++ b/plugins/catalog/src/alpha/apis.tsx @@ -0,0 +1,51 @@ +/* + * 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 { + createApiFactory, + discoveryApiRef, + fetchApiRef, + storageApiRef, +} from '@backstage/core-plugin-api'; +import { CatalogClient } from '@backstage/catalog-client'; +import { createApiExtension } from '@backstage/frontend-plugin-api'; +import { + catalogApiRef, + starredEntitiesApiRef, +} from '@backstage/plugin-catalog-react'; +import { DefaultStarredEntitiesApi } from '../apis'; + +export const CatalogApi = createApiExtension({ + factory: createApiFactory({ + api: catalogApiRef, + deps: { + discoveryApi: discoveryApiRef, + fetchApi: fetchApiRef, + }, + factory: ({ discoveryApi, fetchApi }) => + new CatalogClient({ discoveryApi, fetchApi }), + }), +}); + +export const StarredEntitiesApi = createApiExtension({ + factory: createApiFactory({ + api: starredEntitiesApiRef, + deps: { storageApi: storageApiRef }, + factory: ({ storageApi }) => new DefaultStarredEntitiesApi({ storageApi }), + }), +}); + +export default [CatalogApi, StarredEntitiesApi]; diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index 9f6094d288..c40bb55aa5 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -18,15 +18,8 @@ import React from 'react'; import Grid from '@material-ui/core/Grid'; import HomeIcon from '@material-ui/icons/Home'; -import { - createApiFactory, - discoveryApiRef, - fetchApiRef, - storageApiRef, -} from '@backstage/core-plugin-api'; import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; import { - createApiExtension, createPageExtension, createPlugin, createNavItemExtension, @@ -34,12 +27,9 @@ import { createExtensionInput, } from '@backstage/frontend-plugin-api'; -import { CatalogClient } from '@backstage/catalog-client'; import { AsyncEntityProvider, - catalogApiRef, entityRouteRef, - starredEntitiesApiRef, } from '@backstage/plugin-catalog-react'; import { createEntityContentExtension, @@ -48,7 +38,6 @@ import { } from '@backstage/plugin-catalog-react/alpha'; import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; -import { DefaultStarredEntitiesApi } from '../apis'; import { createComponentRouteRef, createFromTemplateRouteRef, @@ -57,30 +46,9 @@ import { } from '../routes'; import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl'; +import apis from './apis'; import filters from './filters'; -/** @alpha */ -export const CatalogApi = createApiExtension({ - factory: createApiFactory({ - api: catalogApiRef, - deps: { - discoveryApi: discoveryApiRef, - fetchApi: fetchApiRef, - }, - factory: ({ discoveryApi, fetchApi }) => - new CatalogClient({ discoveryApi, fetchApi }), - }), -}); - -/** @alpha */ -export const StarredEntitiesApi = createApiExtension({ - factory: createApiFactory({ - api: starredEntitiesApiRef, - deps: { storageApi: storageApiRef }, - factory: ({ storageApi }) => new DefaultStarredEntitiesApi({ storageApi }), - }), -}); - /** @alpha */ export const CatalogSearchResultListItemExtension = createSearchResultListItemExtension({ @@ -195,9 +163,8 @@ export default createPlugin({ createFromTemplate: convertLegacyRouteRef(createFromTemplateRouteRef), }, extensions: [ + ...apis, ...filters, - CatalogApi, - StarredEntitiesApi, CatalogSearchResultListItemExtension, CatalogIndexPage, CatalogEntityPage, From 3f65bb7208b93cbbed295be3d8098989947e9ef9 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:12:00 +0200 Subject: [PATCH 3/9] refactor(catalog): extract pages extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/pages.tsx | 83 ++++++++++++++++++++++++++++ plugins/catalog/src/alpha/plugin.tsx | 66 +--------------------- 2 files changed, 86 insertions(+), 63 deletions(-) create mode 100644 plugins/catalog/src/alpha/pages.tsx diff --git a/plugins/catalog/src/alpha/pages.tsx b/plugins/catalog/src/alpha/pages.tsx new file mode 100644 index 0000000000..6270ae777d --- /dev/null +++ b/plugins/catalog/src/alpha/pages.tsx @@ -0,0 +1,83 @@ +/* + * 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 { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; +import { + createPageExtension, + coreExtensionData, + createExtensionInput, +} from '@backstage/frontend-plugin-api'; +import { + AsyncEntityProvider, + entityRouteRef, +} from '@backstage/plugin-catalog-react'; +import { entityContentTitleExtensionDataRef } from '@backstage/plugin-catalog-react/alpha'; +import { rootRouteRef } from '../routes'; +import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl'; + +export const CatalogIndexPage = createPageExtension({ + id: 'plugin.catalog.page.index', + defaultPath: '/catalog', + routeRef: convertLegacyRouteRef(rootRouteRef), + inputs: { + filters: createExtensionInput({ + element: coreExtensionData.reactElement, + }), + }, + loader: async ({ inputs }) => { + const { BaseCatalogPage } = await import('../components/CatalogPage'); + const filters = inputs.filters.map(filter => filter.element); + return {filters}} />; + }, +}); + +export const CatalogEntityPage = createPageExtension({ + id: 'plugin.catalog.page.entity', + defaultPath: '/catalog/:namespace/:kind/:name', + routeRef: convertLegacyRouteRef(entityRouteRef), + inputs: { + contents: createExtensionInput({ + element: coreExtensionData.reactElement, + path: coreExtensionData.routePath, + routeRef: coreExtensionData.routeRef.optional(), + title: entityContentTitleExtensionDataRef, + }), + }, + loader: async ({ inputs }) => { + const { EntityLayout } = await import('../components/EntityLayout'); + const Component = () => { + return ( + + + {inputs.contents.map(content => ( + + {content.element} + + ))} + + + ); + }; + return ; + }, +}); + +export default [CatalogIndexPage, CatalogEntityPage]; diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index c40bb55aa5..67d1f036ee 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -20,21 +20,16 @@ import HomeIcon from '@material-ui/icons/Home'; import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; import { - createPageExtension, createPlugin, createNavItemExtension, coreExtensionData, createExtensionInput, } from '@backstage/frontend-plugin-api'; -import { - AsyncEntityProvider, - entityRouteRef, -} from '@backstage/plugin-catalog-react'; +import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { createEntityContentExtension, createEntityCardExtension, - entityContentTitleExtensionDataRef, } from '@backstage/plugin-catalog-react/alpha'; import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; @@ -44,9 +39,9 @@ import { rootRouteRef, viewTechDocRouteRef, } from '../routes'; -import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl'; import apis from './apis'; +import pages from './pages'; import filters from './filters'; /** @alpha */ @@ -60,60 +55,6 @@ export const CatalogSearchResultListItemExtension = ), }); -const CatalogIndexPage = createPageExtension({ - id: 'plugin.catalog.page.index', - defaultPath: '/catalog', - routeRef: convertLegacyRouteRef(rootRouteRef), - inputs: { - filters: createExtensionInput({ - element: coreExtensionData.reactElement, - }), - }, - loader: async ({ inputs }) => { - const { BaseCatalogPage } = await import('../components/CatalogPage'); - return ( - {inputs.filters.map(filter => filter.element)}} - /> - ); - }, -}); - -const CatalogEntityPage = createPageExtension({ - id: 'plugin.catalog.page.entity', - defaultPath: '/catalog/:namespace/:kind/:name', - routeRef: convertLegacyRouteRef(entityRouteRef), - inputs: { - contents: createExtensionInput({ - element: coreExtensionData.reactElement, - path: coreExtensionData.routePath, - routeRef: coreExtensionData.routeRef.optional(), - title: entityContentTitleExtensionDataRef, - }), - }, - loader: async ({ inputs }) => { - const { EntityLayout } = await import('../components/EntityLayout'); - const Component = () => { - return ( - - - {inputs.contents.map(content => ( - - {content.element} - - ))} - - - ); - }; - return ; - }, -}); - const EntityAboutCard = createEntityCardExtension({ id: 'about', loader: async () => @@ -164,10 +105,9 @@ export default createPlugin({ }, extensions: [ ...apis, + ...pages, ...filters, CatalogSearchResultListItemExtension, - CatalogIndexPage, - CatalogEntityPage, CatalogNavItem, OverviewEntityContent, EntityAboutCard, From 870e4186eff059dabcb23117adc301f197997faa Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:13:04 +0200 Subject: [PATCH 4/9] 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, ], }); From 81497c8a4125cf779d3f12d53c8d1f504d413d7d Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:17:02 +0200 Subject: [PATCH 5/9] refactor(catalog): extract nav items extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/navItems.tsx | 29 ++++++++++++++++++++++++++ plugins/catalog/src/alpha/plugin.tsx | 12 ++--------- 2 files changed, 31 insertions(+), 10 deletions(-) create mode 100644 plugins/catalog/src/alpha/navItems.tsx diff --git a/plugins/catalog/src/alpha/navItems.tsx b/plugins/catalog/src/alpha/navItems.tsx new file mode 100644 index 0000000000..b6481fd764 --- /dev/null +++ b/plugins/catalog/src/alpha/navItems.tsx @@ -0,0 +1,29 @@ +/* + * 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 HomeIcon from '@material-ui/icons/Home'; +import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; +import { createNavItemExtension } from '@backstage/frontend-plugin-api'; +import { rootRouteRef } from '../routes'; + +export const CatalogIndexNavItem = createNavItemExtension({ + id: 'catalog.nav.index', + routeRef: convertLegacyRouteRef(rootRouteRef), + title: 'Catalog', + icon: HomeIcon, +}); + +export default [CatalogIndexNavItem]; diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index 761a00c29b..10e516874f 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -16,12 +16,10 @@ import React from 'react'; import Grid from '@material-ui/core/Grid'; -import HomeIcon from '@material-ui/icons/Home'; import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; import { createPlugin, - createNavItemExtension, coreExtensionData, createExtensionInput, } from '@backstage/frontend-plugin-api'; @@ -40,6 +38,7 @@ import { import apis from './apis'; import pages from './pages'; import filters from './filters'; +import navItems from './navItems'; import entityCards from './entityCards'; /** @alpha */ @@ -74,13 +73,6 @@ const OverviewEntityContent = createEntityContentExtension({ ), }); -const CatalogNavItem = createNavItemExtension({ - id: 'catalog.nav.index', - routeRef: convertLegacyRouteRef(rootRouteRef), - title: 'Catalog', - icon: HomeIcon, -}); - /** @alpha */ export default createPlugin({ id: 'catalog', @@ -97,9 +89,9 @@ export default createPlugin({ ...apis, ...pages, ...filters, + ...navItems, ...entityCards, CatalogSearchResultListItemExtension, - CatalogNavItem, OverviewEntityContent, ], }); From 29ccace57b72f2a44c576291456ae518b16bf67b Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:19:47 +0200 Subject: [PATCH 6/9] refactor(catalog): extract search result items extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/plugin.tsx | 15 ++-------- .../catalog/src/alpha/searchResultItems.tsx | 29 +++++++++++++++++++ 2 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 plugins/catalog/src/alpha/searchResultItems.tsx diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index 10e516874f..2c85e2bc51 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -26,7 +26,6 @@ import { import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; -import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; import { createComponentRouteRef, @@ -40,17 +39,7 @@ import pages from './pages'; import filters from './filters'; import navItems from './navItems'; import entityCards from './entityCards'; - -/** @alpha */ -export const CatalogSearchResultListItemExtension = - createSearchResultListItemExtension({ - id: 'catalog', - predicate: result => result.type === 'software-catalog', - component: () => - import('../components/CatalogSearchResultListItem').then( - m => m.CatalogSearchResultListItem, - ), - }); +import searchResultItems from './searchResultItems'; const OverviewEntityContent = createEntityContentExtension({ id: 'overview', @@ -91,7 +80,7 @@ export default createPlugin({ ...filters, ...navItems, ...entityCards, - CatalogSearchResultListItemExtension, + ...searchResultItems, OverviewEntityContent, ], }); diff --git a/plugins/catalog/src/alpha/searchResultItems.tsx b/plugins/catalog/src/alpha/searchResultItems.tsx new file mode 100644 index 0000000000..f677869136 --- /dev/null +++ b/plugins/catalog/src/alpha/searchResultItems.tsx @@ -0,0 +1,29 @@ +/* + * 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 { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha'; + +export const CatalogSearchResultListItemExtension = + createSearchResultListItemExtension({ + id: 'catalog', + predicate: result => result.type === 'software-catalog', + component: () => + import('../components/CatalogSearchResultListItem').then( + m => m.CatalogSearchResultListItem, + ), + }); + +export default [CatalogSearchResultListItemExtension]; From 24dced7352c44eb3f093bd7bd64a89206660226d Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 17:37:22 +0200 Subject: [PATCH 7/9] refactor(catalog): extract entity contentes extensions file Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/entityContents.tsx | 46 ++++++++++++++++++++ plugins/catalog/src/alpha/plugin.tsx | 34 ++------------- 2 files changed, 49 insertions(+), 31 deletions(-) create mode 100644 plugins/catalog/src/alpha/entityContents.tsx diff --git a/plugins/catalog/src/alpha/entityContents.tsx b/plugins/catalog/src/alpha/entityContents.tsx new file mode 100644 index 0000000000..0e26373b5e --- /dev/null +++ b/plugins/catalog/src/alpha/entityContents.tsx @@ -0,0 +1,46 @@ +/* + * 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 { Grid } from '@material-ui/core'; +import { + coreExtensionData, + createExtensionInput, +} from '@backstage/frontend-plugin-api'; +import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; + +export const OverviewEntityContent = createEntityContentExtension({ + id: 'overview', + defaultPath: '/', + defaultTitle: 'Overview', + disabled: false, + inputs: { + cards: createExtensionInput({ + element: coreExtensionData.reactElement, + }), + }, + loader: async ({ inputs }) => ( + + {inputs.cards.map(card => ( + + {card.element} + + ))} + + ), +}); + +export default [OverviewEntityContent]; diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx index 2c85e2bc51..2f019ca33e 100644 --- a/plugins/catalog/src/alpha/plugin.tsx +++ b/plugins/catalog/src/alpha/plugin.tsx @@ -14,18 +14,10 @@ * limitations under the License. */ -import React from 'react'; -import Grid from '@material-ui/core/Grid'; - import { convertLegacyRouteRef } from '@backstage/core-plugin-api/alpha'; -import { - createPlugin, - coreExtensionData, - createExtensionInput, -} from '@backstage/frontend-plugin-api'; +import { createPlugin } from '@backstage/frontend-plugin-api'; import { entityRouteRef } from '@backstage/plugin-catalog-react'; -import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha'; import { createComponentRouteRef, @@ -39,29 +31,9 @@ import pages from './pages'; import filters from './filters'; import navItems from './navItems'; import entityCards from './entityCards'; +import entityContents from './entityContents'; import searchResultItems from './searchResultItems'; -const OverviewEntityContent = createEntityContentExtension({ - id: 'overview', - defaultPath: '/', - defaultTitle: 'Overview', - disabled: false, - inputs: { - cards: createExtensionInput({ - element: coreExtensionData.reactElement, - }), - }, - loader: async ({ inputs }) => ( - - {inputs.cards.map(card => ( - - {card.element} - - ))} - - ), -}); - /** @alpha */ export default createPlugin({ id: 'catalog', @@ -80,7 +52,7 @@ export default createPlugin({ ...filters, ...navItems, ...entityCards, + ...entityContents, ...searchResultItems, - OverviewEntityContent, ], }); From 8a8445663b49d22ebb8ad52b871400d192818b27 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Sat, 21 Oct 2023 13:33:31 +0200 Subject: [PATCH 8/9] chore: add changeset file Signed-off-by: Camila Belo --- .changeset/fast-bears-lick.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fast-bears-lick.md diff --git a/.changeset/fast-bears-lick.md b/.changeset/fast-bears-lick.md new file mode 100644 index 0000000000..8e0dc8e60b --- /dev/null +++ b/.changeset/fast-bears-lick.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Migrate catalog entity cards to new frontend system extension format. From 150f2a8797eb9414d13b809d269690ab58a86f7c Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 23 Oct 2023 14:28:24 +0200 Subject: [PATCH 9/9] refactor(catalog): remove cards config for now Signed-off-by: Camila Belo --- plugins/catalog/src/alpha/entityCards.tsx | 107 ++++------------------ 1 file changed, 18 insertions(+), 89 deletions(-) diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx index 9faf0b9517..cc30928fcf 100644 --- a/plugins/catalog/src/alpha/entityCards.tsx +++ b/plugins/catalog/src/alpha/entityCards.tsx @@ -16,147 +16,76 @@ 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 }) => + loader: async () => 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 }) => + loader: async () => import('../components/EntityLinksCard').then(m => { - return ; + 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 }) => + loader: async () => 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 }) => + loader: async () => 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 }) => + loader: async () => 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 }) => + loader: async () => 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 }) => + loader: async () => 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 }) => + loader: async () => 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 }) => + loader: async () => import('../components/HasSystemsCard').then(m => ( - + )), });