From 6a60d609e8f4f05e4f56d5be788c078f2ba3bba6 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Thu, 17 Sep 2020 15:31:05 +0200 Subject: [PATCH] feat: move add example components to a more visible space and change behavior Previously the button was displayed every time the table was empty. This event happend during filtering, causing the layout to switch around. Now we check if the catalog is completly empty instead. In addition the button is now at the top of the page and not part of the table. If no example locations are configured, it is completly hidden. --- .../src/components/CatalogPage/CatalogPage.tsx | 18 +++++++++++++++++- .../CatalogTable/CatalogTable.test.tsx | 2 -- .../components/CatalogTable/CatalogTable.tsx | 12 +----------- .../src/filter/EntityFilterGroupsProvider.tsx | 3 +++ plugins/catalog/src/filter/context.ts | 1 + .../catalog/src/filter/useFilteredEntities.ts | 1 + 6 files changed, 23 insertions(+), 14 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index db490cf542..ea99753c14 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -46,6 +46,9 @@ const useStyles = makeStyles(theme => ({ gridTemplateColumns: '250px 1fr', gridColumnGap: theme.spacing(2), }, + buttonSpacing: { + marginLeft: theme.spacing(2), + }, })); const CatalogPageContents = () => { @@ -56,6 +59,7 @@ const CatalogPageContents = () => { reload, matchingEntities, availableTags, + isCatalogEmpty, } = useFilteredEntities(); const configApi = useApi(configApiRef); const catalogApi = useApi(catalogApiRef); @@ -141,6 +145,9 @@ const CatalogPageContents = () => { [isStarredEntity, userId, orgName], ); + const showAddExampleEntities = + configApi.has('catalog.exampleEntityLocations') && isCatalogEmpty; + return ( { > Create Component + {showAddExampleEntities && ( + + )} All your software catalog entities
@@ -174,7 +191,6 @@ const CatalogPageContents = () => { entities={matchingEntities} loading={loading} error={error} - onAddMockData={addMockData} />
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx index d1eef2a005..46d6010f2f 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx @@ -46,7 +46,6 @@ describe('CatalogTable component', () => { entities={[]} loading={false} error={{ code: 'error' }} - onAddMockData={() => {}} />, ), ); @@ -63,7 +62,6 @@ describe('CatalogTable component', () => { titlePreamble="Owned" entities={entities} loading={false} - onAddMockData={() => {}} />, ), ); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index cd4df13775..f5885145b3 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -16,11 +16,10 @@ import { Entity, LocationSpec } from '@backstage/catalog-model'; import { Table, TableColumn, TableProps } from '@backstage/core'; import { Chip, Link } from '@material-ui/core'; -import Add from '@material-ui/icons/Add'; import Edit from '@material-ui/icons/Edit'; import GitHub from '@material-ui/icons/GitHub'; import { Alert } from '@material-ui/lab'; -import React, { Dispatch } from 'react'; +import React from 'react'; import { generatePath, Link as RouterLink } from 'react-router-dom'; import { findLocationForEntityMeta } from '../../data/utils'; import { useStarredEntities } from '../../hooks/useStarredEntites'; @@ -87,7 +86,6 @@ type CatalogTableProps = { titlePreamble: string; loading: boolean; error?: any; - onAddMockData: Dispatch; }; export const CatalogTable = ({ @@ -95,7 +93,6 @@ export const CatalogTable = ({ loading, error, titlePreamble, - onAddMockData, }: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); @@ -151,13 +148,6 @@ export const CatalogTable = ({ onClick: () => toggleStarredEntity(rowData), }; }, - { - icon: () => , - tooltip: 'Add example components', - isFreeAction: true, - onClick: onAddMockData, - hidden: !(entities && entities.length === 0), - }, ]; return ( diff --git a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx index 94bc428a45..5c3a67d9d0 100644 --- a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx +++ b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx @@ -62,6 +62,7 @@ function useProvideEntityFilters(): FilterGroupsContext { }>({}); const [matchingEntities, setMatchingEntities] = useState([]); const [availableTags, setAvailableTags] = useState([]); + const [isCatalogEmpty, setCatalogEmpty] = useState(false); useEffect(() => { doReload(); @@ -86,6 +87,7 @@ function useProvideEntityFilters(): FilterGroupsContext { ), ); setAvailableTags(collectTags(entities)); + setCatalogEmpty(entities !== undefined && entities.length === 0); }, [entities, error]); const register = useCallback( @@ -143,6 +145,7 @@ function useProvideEntityFilters(): FilterGroupsContext { filterGroupStates, matchingEntities, availableTags, + isCatalogEmpty, }; } diff --git a/plugins/catalog/src/filter/context.ts b/plugins/catalog/src/filter/context.ts index 838ec8d532..c025480fa6 100644 --- a/plugins/catalog/src/filter/context.ts +++ b/plugins/catalog/src/filter/context.ts @@ -33,6 +33,7 @@ export type FilterGroupsContext = { filterGroupStates: { [filterGroupId: string]: FilterGroupStates }; matchingEntities: Entity[]; availableTags: string[]; + isCatalogEmpty: boolean; }; /** diff --git a/plugins/catalog/src/filter/useFilteredEntities.ts b/plugins/catalog/src/filter/useFilteredEntities.ts index 138a7547c0..2d7dcfd89d 100644 --- a/plugins/catalog/src/filter/useFilteredEntities.ts +++ b/plugins/catalog/src/filter/useFilteredEntities.ts @@ -31,6 +31,7 @@ export function useFilteredEntities() { error: context.error, matchingEntities: context.matchingEntities, availableTags: context.availableTags, + isCatalogEmpty: context.isCatalogEmpty, reload: context.reload, }; }