diff --git a/.changeset/brown-flowers-visit.md b/.changeset/brown-flowers-visit.md new file mode 100644 index 0000000000..e62c97d932 --- /dev/null +++ b/.changeset/brown-flowers-visit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +This is a quick fix (while #2791 is being implemented) to make it possible view non well known component types listed in the catalog index page. It buckets any component entities that are not a `service`, `library`, or `documentation` into the `Other` tab. It also displays a `Type` column when on Other tab. diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 0ec5dd31af..4679c10096 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -203,6 +203,7 @@ const CatalogPageContents = () => { { const filterGroup = useMemo(() => { + const otherType = 'other'; + const wellKnownTypes = tabs.map(t => t.id).filter(t => t !== otherType); + const isOtherType = (entity: Entity) => + !wellKnownTypes.includes(entity.spec?.type as string); + return { filters: Object.fromEntries( - tabs.map(t => [t.id, (entity: Entity) => entity.spec?.type === t.id]), + tabs.map(t => [ + t.id, + (entity: Entity) => + (t.id === otherType && isOtherType(entity)) || + entity.spec?.type === t.id, + ]), ), }; }, [tabs]); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index dc80622bbe..04c800d3db 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -87,6 +87,11 @@ const columns: TableColumn[] = [ /> ), }, + { + title: 'Type', + field: 'entity.spec.type', + hidden: true, + }, { title: 'Lifecycle', field: 'entity.spec.lifecycle', @@ -130,6 +135,7 @@ type CatalogTableProps = { titlePreamble: string; loading: boolean; error?: any; + view?: string; }; export const CatalogTable = ({ @@ -137,6 +143,7 @@ export const CatalogTable = ({ loading, error, titlePreamble, + view, }: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); @@ -217,6 +224,11 @@ export const CatalogTable = ({ }; }); + const typeColumn = columns.find(c => c.title === 'Type'); + if (typeColumn) { + typeColumn.hidden = view !== 'Other'; + } + return ( isLoading={loading}