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 94f1fe3b70..ceecc17953 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, }; }