Merge pull request #2517 from SDA-SE/feat/improve-add-example-button

feat: move add example components to a more visible space and change behavior

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