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.

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 (
     <CatalogLayout>
       <CatalogTabs
@@ -158,6 +165,16 @@ const CatalogPageContents = () => {
           >
             Create Component
           </Button>
+          {showAddExampleEntities && (
+            <Button
+              className={styles.buttonSpacing}
+              variant="outlined"
+              color="primary"
+              onClick={addMockData}
+            >
+              Add example components
+            </Button>
+          )}
           <SupportButton>All your software catalog entities</SupportButton>
         </ContentHeader>
         <div className={styles.contentWrapper}>
@@ -174,7 +191,6 @@ const CatalogPageContents = () => {
             entities={matchingEntities}
             loading={loading}
             error={error}
-            onAddMockData={addMockData}
           />
         </div>
       </Content>

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={() => {}}
         />,
       ),
     );

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<void>;
 };
 
 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: () => <Add />,
-      tooltip: 'Add example components',
-      isFreeAction: true,
-      onClick: onAddMockData,
-      hidden: !(entities && entities.length === 0),
-    },
   ];
 
   return (

plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx

@@ -62,6 +62,7 @@ function useProvideEntityFilters(): FilterGroupsContext {
   }>({});
   const [matchingEntities, setMatchingEntities] = useState<Entity[]>([]);
   const [availableTags, setAvailableTags] = useState<string[]>([]);
+  const [isCatalogEmpty, setCatalogEmpty] = useState<boolean>(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,
   };
 }
 

plugins/catalog/src/filter/context.ts

@@ -33,6 +33,7 @@ export type FilterGroupsContext = {
   filterGroupStates: { [filterGroupId: string]: FilterGroupStates };
   matchingEntities: Entity[];
   availableTags: string[];
+  isCatalogEmpty: boolean;
 };
 
 /**

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,
   };
 }