move add mock data button to CatalogTable

app-config.yaml

@@ -50,6 +50,20 @@ newrelic:
     baseUrl: 'https://api.newrelic.com/v2'
     key: NEW_RELIC_REST_API_KEY
 
+catalog:
+  entities:
+    [
+      'artist-lookup-component.yaml',
+      'playback-order-component.yaml',
+      'podcast-api-component.yaml',
+      'queue-proxy-component.yaml',
+      'searcher-component.yaml',
+      'playback-lib-component.yaml',
+      'www-artist-component.yaml',
+      'shuffle-api-component.yaml',
+    ]
+  baseUrl: 'https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples'
+
 auth:
   providers:
     google:
@@ -124,7 +138,7 @@ auth:
             env: AUTH_AUTH0_DOMAIN
     microsoft:
       development:
-        appOrigin: "http://localhost:3000/"
+        appOrigin: 'http://localhost:3000/'
         secure: false
         clientId:
           $secret:
@@ -134,4 +148,4 @@ auth:
             env: AUTH_MICROSOFT_CLIENT_SECRET
         tenantId:
           $secret:
-            env: AUTH_MICROSOFT_TENANT_ID
+            env: AUTH_MICROSOFT_TENANT_ID

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { Entity } from '@backstage/catalog-model';
 import {
   configApiRef,
   Content,
@@ -27,9 +26,8 @@ import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
 import { Button, makeStyles } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
 import StarIcon from '@material-ui/icons/Star';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { catalogApiRef } from '../../api/types';
 import { EntityFilterGroupsProvider, useFilteredEntities } from '../../filter';
 import { useStarredEntities } from '../../hooks/useStarredEntites';
 import { ButtonGroup, CatalogFilter } from '../CatalogFilter/CatalogFilter';
@@ -46,9 +44,6 @@ const useStyles = makeStyles(theme => ({
     gridTemplateColumns: '250px 1fr',
     gridColumnGap: theme.spacing(2),
   },
-  mockDataButton: {
-    marginRight: '20px',
-  },
 }));
 
 const CatalogPageContents = () => {
@@ -63,42 +58,9 @@ const CatalogPageContents = () => {
   const userId = useApi(identityApiRef).getUserId();
   const [selectedTab, setSelectedTab] = useState<string>();
   const [selectedSidebarItem, setSelectedSidebarItem] = useState<string>();
-  const [entitiesState, setEntitiesState] = useState<Entity[]>([]);
-  const [errorState, setError] = useState<Error | undefined>();
-
-  useEffect(() => {
-    setError(error);
-    setEntitiesState(matchingEntities);
-  }, [error, matchingEntities]);
-  const catalogApi = useApi(catalogApiRef);
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Company';
 
-  const addMockData = async () => {
-    try {
-      const dummyEntities = [
-        'artist-lookup-component.yaml',
-        'playback-order-component.yaml',
-        'podcast-api-component.yaml',
-        'queue-proxy-component.yaml',
-        'searcher-component.yaml',
-        'playback-lib-component.yaml',
-        'www-artist-component.yaml',
-        'shuffle-api-component.yaml',
-      ];
-      const _promises = dummyEntities.map(file =>
-        catalogApi.addLocation(
-          'github',
-          `https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/${file}`,
-        ),
-      );
-      await Promise.all(_promises);
-      const data: Entity[] = await catalogApi.getEntities();
-      setEntitiesState(data);
-    } catch (err) {
-      setError(err);
-    }
-  };
   const tabs = useMemo<LabeledComponentType[]>(
     () => [
       {
@@ -167,16 +129,6 @@ const CatalogPageContents = () => {
       <Content>
         <WelcomeBanner />
         <ContentHeader title={selectedTab ?? ''}>
-          {entitiesState && entitiesState.length === 0 ? (
-            <Button
-              onClick={addMockData}
-              variant="contained"
-              color="primary"
-              className={styles.mockDataButton}
-            >
-              Add Example components
-            </Button>
-          ) : null}
           <Button
             component={RouterLink}
             variant="contained"
@@ -198,9 +150,9 @@ const CatalogPageContents = () => {
           </div>
           <CatalogTable
             titlePreamble={selectedSidebarItem ?? ''}
-            entities={entitiesState}
+            entities={matchingEntities}
             loading={loading}
-            error={errorState}
+            error={error}
           />
         </div>
       </Content>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -14,13 +14,21 @@
  * limitations under the License.
  */
 import { Entity, LocationSpec } from '@backstage/catalog-model';
-import { Table, TableColumn, TableProps } from '@backstage/core';
-import { Link, Chip } from '@material-ui/core';
+import {
+  configApiRef,
+  Table,
+  TableColumn,
+  TableProps,
+  useApi,
+} 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 from 'react';
+import React, { useEffect, useState } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { catalogApiRef } from '../../api/types';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntites';
 import { entityRoute } from '../../routes';
@@ -95,17 +103,44 @@ export const CatalogTable = ({
   titlePreamble,
 }: CatalogTableProps) => {
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
+  const configApi = useApi(configApiRef);
+  const catalogApi = useApi(catalogApiRef);
 
-  if (error) {
+  const [entitiesState, setEntitiesState] = useState<Entity[]>([]);
+  const [errorState, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    setError(error);
+    setEntitiesState(entities);
+  }, [error, entities]);
+  if (errorState) {
     return (
       <div>
         <Alert severity="error">
-          Error encountered while fetching catalog entities. {error.toString()}
+          Error encountered while fetching catalog entities.{' '}
+          {errorState.toString()}
         </Alert>
       </div>
     );
   }
 
+  const addMockData = async () => {
+    try {
+      const _promises = configApi
+        .getStringArray('catalog.entities')
+        .map(file =>
+          catalogApi.addLocation(
+            'github',
+            `${configApi.getString('catalog.baseUrl')}/${file}`,
+          ),
+        );
+      await Promise.all(_promises);
+      const data: Entity[] = await catalogApi.getEntities();
+      setEntitiesState(data);
+    } catch (err) {
+      setError(err);
+    }
+  };
   const actions: TableProps<Entity>['actions'] = [
     (rowData: Entity) => {
       const location = findLocationForEntityMeta(rowData.metadata);
@@ -148,6 +183,13 @@ export const CatalogTable = ({
         onClick: () => toggleStarredEntity(rowData),
       };
     },
+    {
+      icon: () => <Add />,
+      tooltip: 'Add example components',
+      isFreeAction: true,
+      onClick: () => addMockData(),
+      hidden: entitiesState && entitiesState.length > 0,
+    },
   ];
 
   return (
@@ -161,7 +203,7 @@ export const CatalogTable = ({
         showEmptyDataSourceMessage: !loading,
       }}
       title={`${titlePreamble} (${(entities && entities.length) || 0})`}
-      data={entities}
+      data={entitiesState}
       actions={actions}
     />
   );