From 96e693a47512f839642570069679042f5d0b4831 Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 15:20:32 -0700 Subject: [PATCH 1/7] Update CatalogPage to take in columns Signed-off-by: Heather Lee --- packages/app/src/App.tsx | 14 +++ packages/catalog-model/src/index.ts | 2 +- packages/catalog-model/src/types.ts | 12 ++ .../components/CatalogPage/CatalogPage.tsx | 4 + .../components/CatalogTable/CatalogTable.tsx | 104 +++-------------- .../src/components/CatalogTable/columns.tsx | 110 ++++++++++++++++++ .../src/components/CatalogTable/types.ts | 27 +++++ 7 files changed, 184 insertions(+), 89 deletions(-) create mode 100644 plugins/catalog/src/components/CatalogTable/columns.tsx create mode 100644 plugins/catalog/src/components/CatalogTable/types.ts diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index c5e5033973..1fb1125518 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -20,6 +20,7 @@ import { FlatRoutes, OAuthRequestDialog, SignInPage, + TableColumn, } from '@backstage/core'; import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs'; import { @@ -56,6 +57,8 @@ import { Root } from './components/Root'; import { entityPage } from './components/catalog/EntityPage'; import { providers } from './identityProviders'; import * as plugins from './plugins'; +import { EntityRow } from '../../catalog-model/src'; +import { EntityRefLink } from '@backstage/plugin-catalog-react'; const app = createApp({ apis, @@ -95,6 +98,17 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); +const columns: TableColumn[] = [ + { + title: 'Name', + field: 'resolved.name', + highlight: true, + render: ({ entity }) => ( + + ), + }, +]; + const routes = ( diff --git a/packages/catalog-model/src/index.ts b/packages/catalog-model/src/index.ts index 976b5f6148..825e765453 100644 --- a/packages/catalog-model/src/index.ts +++ b/packages/catalog-model/src/index.ts @@ -18,5 +18,5 @@ export * from './entity'; export { EntityPolicies } from './EntityPolicies'; export * from './kinds'; export * from './location'; -export type { EntityName, EntityRef, JSONSchema } from './types'; +export type { EntityName, EntityRef, JSONSchema, EntityRow } from './types'; export * from './validation'; diff --git a/packages/catalog-model/src/types.ts b/packages/catalog-model/src/types.ts index edac03466d..963e57919d 100644 --- a/packages/catalog-model/src/types.ts +++ b/packages/catalog-model/src/types.ts @@ -16,6 +16,7 @@ import { JsonValue } from '@backstage/config'; import { JSONSchema7 } from 'json-schema'; +import { Entity } from './entity'; export type JSONSchema = JSONSchema7 & { [key in string]?: JsonValue }; @@ -44,3 +45,14 @@ export type EntityRef = namespace?: string; name: string; }; + +export type EntityRow = { + entity: Entity; + resolved: { + name: string; + partOfSystemRelationTitle?: string; + partOfSystemRelations: EntityName[]; + ownedByRelationsTitle?: string; + ownedByRelations: EntityName[]; + }; +}; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index fd3d63edd7..2484b5cd29 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -20,9 +20,11 @@ import { ContentHeader, errorApiRef, SupportButton, + TableColumn, useApi, useRouteRef, } from '@backstage/core'; +import { EntityRow } from '@backstage/catalog-model'; import { catalogApiRef, isOwnerOf, @@ -61,6 +63,7 @@ const useStyles = makeStyles(theme => ({ export type CatalogPageProps = { initiallySelectedFilter?: string; + columns?: TableColumn[]; }; const CatalogPageContents = (props: CatalogPageProps) => { @@ -210,6 +213,7 @@ const CatalogPageContents = (props: CatalogPageProps) => { [] = [ - { - title: 'Name', - field: 'resolved.name', - highlight: true, - render: ({ entity }) => ( - - ), - }, - { - title: 'System', - field: 'resolved.partOfSystemRelationTitle', - render: ({ resolved }) => ( - - ), - }, - { - title: 'Owner', - field: 'resolved.ownedByRelationsTitle', - render: ({ resolved }) => ( - - ), - }, - { - title: 'Type', - field: 'entity.spec.type', - hidden: true, - }, - { - title: 'Lifecycle', - field: 'entity.spec.lifecycle', - }, - { - title: 'Description', - field: 'entity.metadata.description', - render: ({ entity }) => ( - - ), - width: 'auto', - }, - { - title: 'Tags', - field: 'entity.metadata.tags', - cellStyle: { - padding: '0px 16px 0px 20px', - }, - render: ({ entity }) => ( - <> - {entity.metadata.tags && - entity.metadata.tags.map(t => ( - - ))} - - ), - }, +const defaultColumns: TableColumn[] = [ + columnFactories.createNameColumn(), + columnFactories.createSystemColumn(), + columnFactories.createOwnerColumn(), + columnFactories.createSpecTypeColumn(), + columnFactories.createSpecLifecycleColumn(), + columnFactories.createMetadataDescriptionColumn(), + columnFactories.createTagsColumn(), ]; type CatalogTableProps = { @@ -136,6 +60,7 @@ type CatalogTableProps = { loading: boolean; error?: any; view?: string; + columns?: TableColumn[]; }; export const CatalogTable = ({ @@ -144,6 +69,7 @@ export const CatalogTable = ({ error, titlePreamble, view, + columns, }: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); @@ -224,7 +150,7 @@ export const CatalogTable = ({ }; }); - const typeColumn = columns.find(c => c.title === 'Type'); + const typeColumn = defaultColumns.find(c => c.title === 'Type'); if (typeColumn) { typeColumn.hidden = view !== 'Other'; } @@ -232,7 +158,7 @@ export const CatalogTable = ({ return ( isLoading={loading} - columns={columns} + columns={columns || defaultColumns} options={{ paging: true, pageSize: 20, @@ -248,3 +174,5 @@ export const CatalogTable = ({ /> ); }; + +CatalogTable.columns = columnFactories; diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx new file mode 100644 index 0000000000..4f65e4b0c7 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/columns.tsx @@ -0,0 +1,110 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 { EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react'; +import { OverflowTooltip, TableColumn } from '@backstage/core'; +import { Chip } from '@material-ui/core'; +import { EntityRow } from './types'; + +export function createNameColumn(): TableColumn { + return { + title: 'Name', + field: 'resolved.name', + highlight: true, + render: ({ entity }) => ( + + ), + }; +} + +export function createSystemColumn(): TableColumn { + return { + title: 'System', + field: 'resolved.partOfSystemRelationTitle', + render: ({ resolved }) => ( + + ), + }; +} + +export function createOwnerColumn(): TableColumn { + return { + title: 'Owner', + field: 'resolved.ownedByRelationsTitle', + render: ({ resolved }) => ( + + ), + }; +} + +export function createSpecTypeColumn(): TableColumn { + return { + title: 'Type', + field: 'entity.spec.type', + hidden: true, + }; +} + +export function createSpecLifecycleColumn(): TableColumn { + return { + title: 'Lifecycle', + field: 'entity.spec.lifecycle', + }; +} + +export function createMetadataDescriptionColumn(): TableColumn { + return { + title: 'Description', + field: 'entity.metadata.description', + render: ({ entity }) => ( + + ), + width: 'auto', + }; +} + +export function createTagsColumn(): TableColumn { + return { + title: 'Tags', + field: 'entity.metadata.tags', + cellStyle: { + padding: '0px 16px 0px 20px', + }, + render: ({ entity }) => ( + <> + {entity.metadata.tags && + entity.metadata.tags.map(t => ( + + ))} + + ), + }; +} diff --git a/plugins/catalog/src/components/CatalogTable/types.ts b/plugins/catalog/src/components/CatalogTable/types.ts new file mode 100644 index 0000000000..b1a0ce2739 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/types.ts @@ -0,0 +1,27 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 { Entity, EntityName } from '@backstage/catalog-model'; + +export type EntityRow = { + entity: Entity; + resolved: { + name: string; + partOfSystemRelationTitle?: string; + partOfSystemRelations: EntityName[]; + ownedByRelationsTitle?: string; + ownedByRelations: EntityName[]; + }; +}; From b209b23e60676aa29ada30a22cd05e0f6b0ab92e Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 15:31:29 -0700 Subject: [PATCH 2/7] Update the export to work properly for CatalogTable Signed-off-by: Heather Lee --- .../catalog/src/components/CatalogTable/index.ts | 16 ++++++++++++++++ plugins/catalog/src/index.ts | 1 + 2 files changed, 17 insertions(+) create mode 100644 plugins/catalog/src/components/CatalogTable/index.ts diff --git a/plugins/catalog/src/components/CatalogTable/index.ts b/plugins/catalog/src/components/CatalogTable/index.ts new file mode 100644 index 0000000000..9148a22a41 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 { CatalogTable } from './CatalogTable'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 7ab7b95dd7..fb269fc484 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -17,6 +17,7 @@ export { AboutCard } from './components/AboutCard'; export { EntityLayout } from './components/EntityLayout'; export { EntityPageLayout } from './components/EntityPageLayout'; +export { CatalogTable } from './components/CatalogTable'; export * from './components/EntitySwitch'; export { Router } from './components/Router'; export { From 75885e5cff010807ccea66cf17a760e94197b004 Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 15:37:08 -0700 Subject: [PATCH 3/7] Reverting unnecessary changes Signed-off-by: Heather Lee --- packages/app/src/App.tsx | 14 -------------- packages/catalog-model/src/types.ts | 12 ------------ 2 files changed, 26 deletions(-) diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 1fb1125518..c5e5033973 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -20,7 +20,6 @@ import { FlatRoutes, OAuthRequestDialog, SignInPage, - TableColumn, } from '@backstage/core'; import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs'; import { @@ -57,8 +56,6 @@ import { Root } from './components/Root'; import { entityPage } from './components/catalog/EntityPage'; import { providers } from './identityProviders'; import * as plugins from './plugins'; -import { EntityRow } from '../../catalog-model/src'; -import { EntityRefLink } from '@backstage/plugin-catalog-react'; const app = createApp({ apis, @@ -98,17 +95,6 @@ const app = createApp({ const AppProvider = app.getProvider(); const AppRouter = app.getRouter(); -const columns: TableColumn[] = [ - { - title: 'Name', - field: 'resolved.name', - highlight: true, - render: ({ entity }) => ( - - ), - }, -]; - const routes = ( diff --git a/packages/catalog-model/src/types.ts b/packages/catalog-model/src/types.ts index 963e57919d..edac03466d 100644 --- a/packages/catalog-model/src/types.ts +++ b/packages/catalog-model/src/types.ts @@ -16,7 +16,6 @@ import { JsonValue } from '@backstage/config'; import { JSONSchema7 } from 'json-schema'; -import { Entity } from './entity'; export type JSONSchema = JSONSchema7 & { [key in string]?: JsonValue }; @@ -45,14 +44,3 @@ export type EntityRef = namespace?: string; name: string; }; - -export type EntityRow = { - entity: Entity; - resolved: { - name: string; - partOfSystemRelationTitle?: string; - partOfSystemRelations: EntityName[]; - ownedByRelationsTitle?: string; - ownedByRelations: EntityName[]; - }; -}; From 6c5af91993a1ab1f95bdb102588714b483788c44 Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 16:01:45 -0700 Subject: [PATCH 4/7] Fix references to type Signed-off-by: Heather Lee --- plugins/catalog/src/components/CatalogPage/CatalogPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 2484b5cd29..bbb26d7be7 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -24,7 +24,6 @@ import { useApi, useRouteRef, } from '@backstage/core'; -import { EntityRow } from '@backstage/catalog-model'; import { catalogApiRef, isOwnerOf, @@ -44,6 +43,7 @@ import { CatalogFilterType, } from '../CatalogFilter/CatalogFilter'; import { CatalogTable } from '../CatalogTable/CatalogTable'; +import { EntityRow } from '../CatalogTable/types'; import { ResultsFilter } from '../ResultsFilter/ResultsFilter'; import { useOwnUser } from '../useOwnUser'; import CatalogLayout from './CatalogLayout'; From d7ef50d9647d617dc86443b520fecba3fd446736 Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 16:09:26 -0700 Subject: [PATCH 5/7] Remove extra definition of EntityRow from catalog-model Signed-off-by: Heather Lee --- packages/catalog-model/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/catalog-model/src/index.ts b/packages/catalog-model/src/index.ts index 825e765453..976b5f6148 100644 --- a/packages/catalog-model/src/index.ts +++ b/packages/catalog-model/src/index.ts @@ -18,5 +18,5 @@ export * from './entity'; export { EntityPolicies } from './EntityPolicies'; export * from './kinds'; export * from './location'; -export type { EntityName, EntityRef, JSONSchema, EntityRow } from './types'; +export type { EntityName, EntityRef, JSONSchema } from './types'; export * from './validation'; From 129bb3f8c5c333b6024af78e060d69a9b462b494 Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Wed, 5 May 2021 17:02:41 -0700 Subject: [PATCH 6/7] Adjust type column to render as a result of overridden columns, or key off defaultColumns if nothing is passed in Signed-off-by: Heather Lee --- plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index d8e152ed75..03dece50fe 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -150,7 +150,7 @@ export const CatalogTable = ({ }; }); - const typeColumn = defaultColumns.find(c => c.title === 'Type'); + const typeColumn = (columns || defaultColumns).find(c => c.title === 'Type'); if (typeColumn) { typeColumn.hidden = view !== 'Other'; } From 5542de095aaefa0d103413f220fcd317652a68ab Mon Sep 17 00:00:00 2001 From: Heather Lee Date: Fri, 7 May 2021 08:32:50 -0700 Subject: [PATCH 7/7] Add changeset Signed-off-by: Heather Lee --- .changeset/clean-starfishes-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clean-starfishes-drop.md diff --git a/.changeset/clean-starfishes-drop.md b/.changeset/clean-starfishes-drop.md new file mode 100644 index 0000000000..884bb8de9f --- /dev/null +++ b/.changeset/clean-starfishes-drop.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +This makes the CatalogTable configurable with custom columns, passed through the CatalogPage component rendered on the home page.