From 7a15cff97c680b2867956ca7990b5ebb7710d226 Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Thu, 23 Jan 2025 17:00:15 -0500 Subject: [PATCH 1/2] refactor(CatalogTable): allow overriding default components Signed-off-by: Phil Kuang --- .changeset/little-mangos-reply.md | 5 +++++ plugins/catalog/report.api.md | 2 ++ plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 5 +++++ .../components/CatalogTable/CursorPaginatedCatalogTable.tsx | 4 +++- .../components/CatalogTable/OffsetPaginatedCatalogTable.tsx | 3 ++- 5 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 .changeset/little-mangos-reply.md diff --git a/.changeset/little-mangos-reply.md b/.changeset/little-mangos-reply.md new file mode 100644 index 0000000000..d83967235f --- /dev/null +++ b/.changeset/little-mangos-reply.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Allow overriding default components in underlying Catalog Material table diff --git a/plugins/catalog/report.api.md b/plugins/catalog/report.api.md index 3692a919b3..015ef9678b 100644 --- a/plugins/catalog/report.api.md +++ b/plugins/catalog/report.api.md @@ -210,6 +210,8 @@ export interface CatalogTableProps { // (undocumented) columns?: TableColumn[] | CatalogTableColumnsFunc; // (undocumented) + components?: TableProps['components']; + // (undocumented) emptyContent?: ReactNode; // (undocumented) subtitle?: string; diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index c565cffa93..abb7fee77b 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -67,6 +67,7 @@ export interface CatalogTableProps { */ title?: string; subtitle?: string; + components?: TableProps['components']; } const refCompare = (a: Entity, b: Entity) => { @@ -95,6 +96,7 @@ export const CatalogTable = (props: CatalogTableProps) => { tableOptions, subtitle, emptyContent, + components, } = props; const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const entityListContext = useEntityList(); @@ -216,6 +218,7 @@ export const CatalogTable = (props: CatalogTableProps) => { data={entities.map(toEntityRow)} next={pageInfo?.next} prev={pageInfo?.prev} + components={components} /> ); } else if (paginationMode === 'offset') { @@ -229,6 +232,7 @@ export const CatalogTable = (props: CatalogTableProps) => { subtitle={subtitle} options={options} data={entities.map(toEntityRow)} + components={components} /> ); } @@ -249,6 +253,7 @@ export const CatalogTable = (props: CatalogTableProps) => { }} components={{ Toolbar: CatalogTableToolbar, + ...(components ?? {}), }} title={title} data={rows} diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx index 843d5be2c8..2f7529c1f5 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -30,7 +30,8 @@ type PaginatedCatalogTableProps = { */ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) { - const { columns, data, next, prev, options, ...restProps } = props; + const { columns, components, data, next, prev, options, ...restProps } = + props; return ( , ) { - const { columns, data, options, ...restProps } = props; + const { columns, components, data, options, ...restProps } = props; const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); const [page, setPage] = React.useState( @@ -55,6 +55,7 @@ export function OffsetPaginatedCatalogTable( }} components={{ Toolbar: CatalogTableToolbar, + ...(components ?? {}), }} page={page} onPageChange={newPage => { From d7adb966faef15e0c575b866f596b4eb67424c49 Mon Sep 17 00:00:00 2001 From: Phil Kuang Date: Wed, 5 Feb 2025 16:24:00 -0500 Subject: [PATCH 2/2] refactor(CatalogTable): use builtin material toolbar for client side paginated impl Signed-off-by: Phil Kuang --- .changeset/little-mangos-reply.md | 2 +- plugins/catalog/report.api.md | 2 -- .../catalog/src/components/CatalogTable/CatalogTable.tsx | 9 --------- .../CatalogTable/CursorPaginatedCatalogTable.tsx | 4 +--- .../CatalogTable/OffsetPaginatedCatalogTable.tsx | 3 +-- 5 files changed, 3 insertions(+), 17 deletions(-) diff --git a/.changeset/little-mangos-reply.md b/.changeset/little-mangos-reply.md index d83967235f..5f1e96464c 100644 --- a/.changeset/little-mangos-reply.md +++ b/.changeset/little-mangos-reply.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog': patch --- -Allow overriding default components in underlying Catalog Material table +Revert client side paginated catalog table to using built in Material Table toolbar component diff --git a/plugins/catalog/report.api.md b/plugins/catalog/report.api.md index 015ef9678b..3692a919b3 100644 --- a/plugins/catalog/report.api.md +++ b/plugins/catalog/report.api.md @@ -210,8 +210,6 @@ export interface CatalogTableProps { // (undocumented) columns?: TableColumn[] | CatalogTableColumnsFunc; // (undocumented) - components?: TableProps['components']; - // (undocumented) emptyContent?: ReactNode; // (undocumented) subtitle?: string; diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index abb7fee77b..0b2d2e4a4c 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -49,7 +49,6 @@ import { defaultCatalogTableColumnsFunc } from './defaultCatalogTableColumnsFunc import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { catalogTranslationRef } from '../../alpha/translation'; import { FavoriteToggleIcon } from '@backstage/core-components'; -import { CatalogTableToolbar } from './CatalogTableToolbar'; /** * Props for {@link CatalogTable}. @@ -67,7 +66,6 @@ export interface CatalogTableProps { */ title?: string; subtitle?: string; - components?: TableProps['components']; } const refCompare = (a: Entity, b: Entity) => { @@ -96,7 +94,6 @@ export const CatalogTable = (props: CatalogTableProps) => { tableOptions, subtitle, emptyContent, - components, } = props; const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const entityListContext = useEntityList(); @@ -218,7 +215,6 @@ export const CatalogTable = (props: CatalogTableProps) => { data={entities.map(toEntityRow)} next={pageInfo?.next} prev={pageInfo?.prev} - components={components} /> ); } else if (paginationMode === 'offset') { @@ -232,7 +228,6 @@ export const CatalogTable = (props: CatalogTableProps) => { subtitle={subtitle} options={options} data={entities.map(toEntityRow)} - components={components} /> ); } @@ -251,10 +246,6 @@ export const CatalogTable = (props: CatalogTableProps) => { pageSizeOptions: [20, 50, 100], ...options, }} - components={{ - Toolbar: CatalogTableToolbar, - ...(components ?? {}), - }} title={title} data={rows} actions={actions} diff --git a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx index 2f7529c1f5..843d5be2c8 100644 --- a/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CursorPaginatedCatalogTable.tsx @@ -30,8 +30,7 @@ type PaginatedCatalogTableProps = { */ export function CursorPaginatedCatalogTable(props: PaginatedCatalogTableProps) { - const { columns, components, data, next, prev, options, ...restProps } = - props; + const { columns, data, next, prev, options, ...restProps } = props; return (
, ) { - const { columns, components, data, options, ...restProps } = props; + const { columns, data, options, ...restProps } = props; const { setLimit, setOffset, limit, totalItems, offset } = useEntityList(); const [page, setPage] = React.useState( @@ -55,7 +55,6 @@ export function OffsetPaginatedCatalogTable( }} components={{ Toolbar: CatalogTableToolbar, - ...(components ?? {}), }} page={page} onPageChange={newPage => {