From 213a1c3c840559c311c0e45d9d255fc8275aeeab Mon Sep 17 00:00:00 2001
From: Twisha Saraiya <twisha.saraiya@quantiphi.com>
Date: Sun, 9 Aug 2020 21:53:40 +0530
Subject: [PATCH 1/4] add button to register dummy entities

---
 .../components/CatalogPage/CatalogPage.tsx    | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 6a3d7362aa..3eac1b7a30 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -14,28 +14,30 @@
  * limitations under the License.
  */
 
+import { Entity } from '@backstage/catalog-model';
 import {
+  configApiRef,
   Content,
   ContentHeader,
   identityApiRef,
   SupportButton,
-  configApiRef,
   useApi,
 } from '@backstage/core';
 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, { useMemo, useState } from 'react';
+import React, { useEffect, 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 { CatalogFilter, ButtonGroup } from '../CatalogFilter/CatalogFilter';
+import { ButtonGroup, CatalogFilter } from '../CatalogFilter/CatalogFilter';
 import { CatalogTable } from '../CatalogTable/CatalogTable';
+import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
 import CatalogLayout from './CatalogLayout';
 import { CatalogTabs, LabeledComponentType } from './CatalogTabs';
 import { WelcomeBanner } from './WelcomeBanner';
-import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -44,6 +46,9 @@ const useStyles = makeStyles(theme => ({
     gridTemplateColumns: '250px 1fr',
     gridColumnGap: theme.spacing(2),
   },
+  mockDataButton: {
+    marginRight: '20px',
+  },
 }));
 
 const CatalogPageContents = () => {
@@ -58,9 +63,42 @@ 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[]>(
     () => [
       {
@@ -129,6 +167,16 @@ 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"
@@ -150,9 +198,9 @@ const CatalogPageContents = () => {
           </div>
           <CatalogTable
             titlePreamble={selectedSidebarItem ?? ''}
-            entities={matchingEntities}
+            entities={entitiesState}
             loading={loading}
-            error={error}
+            error={errorState}
           />
         </div>
       </Content>

From ddc7030731dd2251cc12d013adf3b3ee5bbda649 Mon Sep 17 00:00:00 2001
From: Twisha Saraiya <twisha.saraiya@quantiphi.com>
Date: Sat, 22 Aug 2020 23:14:14 +0530
Subject: [PATCH 2/4] move add mock data button to CatalogTable

---
 app-config.yaml                               | 18 ++++++-
 .../components/CatalogPage/CatalogPage.tsx    | 54 ++-----------------
 .../components/CatalogTable/CatalogTable.tsx  | 54 ++++++++++++++++---
 3 files changed, 67 insertions(+), 59 deletions(-)

diff --git a/app-config.yaml b/app-config.yaml
index 8a0199e30a..361ba8e7c8 100644
--- a/app-config.yaml
+++ b/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
\ No newline at end of file
+            env: AUTH_MICROSOFT_TENANT_ID
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 3eac1b7a30..a73fc5df96 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/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>
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index eed8998fb7..4cee1a5889 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/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}
     />
   );

From 26159c01e9749ffe5586a655e2c50af3efd47998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Wed, 26 Aug 2020 10:52:30 +0200
Subject: [PATCH 3/4] fix tests

---
 .../CatalogTable/CatalogTable.test.tsx        | 47 ++++++++++++-------
 .../src/filter/useEntityFilterGroup.test.tsx  | 12 ++---
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
index 707213f3bb..99f251664d 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
@@ -15,12 +15,18 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { wrapInTestApp } from '@backstage/test-utils';
-import { render } from '@testing-library/react';
+import {
+  ApiProvider,
+  ApiRegistry,
+  ConfigApi,
+  configApiRef,
+} from '@backstage/core';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import * as React from 'react';
+import { CatalogApi, catalogApiRef } from '../../api/types';
 import { CatalogTable } from './CatalogTable';
 
-const entites: Entity[] = [
+const entities: Entity[] = [
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'Component',
@@ -39,15 +45,22 @@ const entites: Entity[] = [
 ];
 
 describe('CatalogTable component', () => {
+  const apis = ApiRegistry.from([
+    [configApiRef, ({} as Partial<ConfigApi>) as ConfigApi],
+    [catalogApiRef, ({} as Partial<CatalogApi>) as CatalogApi],
+  ]);
+
   it('should render error message when error is passed in props', async () => {
-    const rendered = render(
+    const rendered = await renderWithEffects(
       wrapInTestApp(
-        <CatalogTable
-          titlePreamble="Owned"
-          entities={[]}
-          loading={false}
-          error={{ code: 'error' }}
-        />,
+        <ApiProvider apis={apis}>
+          <CatalogTable
+            titlePreamble="Owned"
+            entities={[]}
+            loading={false}
+            error={{ code: 'error' }}
+          />
+        </ApiProvider>,
       ),
     );
     const errorMessage = await rendered.findByText(
@@ -57,13 +70,15 @@ describe('CatalogTable component', () => {
   });
 
   it('should display entity names when loading has finished and no error occurred', async () => {
-    const rendered = render(
+    const rendered = await renderWithEffects(
       wrapInTestApp(
-        <CatalogTable
-          titlePreamble="Owned"
-          entities={entites}
-          loading={false}
-        />,
+        <ApiProvider apis={apis}>
+          <CatalogTable
+            titlePreamble="Owned"
+            entities={entities}
+            loading={false}
+          />
+        </ApiProvider>,
       ),
     );
     expect(rendered.getByText(/Owned \(3\)/)).toBeInTheDocument();
diff --git a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx b/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
index 60e7d4f412..acf4790ebf 100644
--- a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
+++ b/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
@@ -51,12 +51,12 @@ describe('useEntityFilterGroup', () => {
   it('works for an empty set of filters', async () => {
     catalogApi.getEntities.mockResolvedValue([]);
     const group: FilterGroup = { filters: {} };
-    const { result, wait } = renderHook(
+    const { result, waitFor } = renderHook(
       () => useEntityFilterGroup('g1', group),
       { wrapper },
     );
 
-    await wait(() => expect(result.current.state.type).toBe('ready'));
+    await waitFor(() => expect(result.current.state.type).toBe('ready'));
   });
 
   it('works for a single group', async () => {
@@ -73,12 +73,12 @@ describe('useEntityFilterGroup', () => {
         f2: e => e.metadata.name !== 'n',
       },
     };
-    const { result, wait } = renderHook(
+    const { result, waitFor } = renderHook(
       () => useEntityFilterGroup('g1', group),
       { wrapper },
     );
 
-    await wait(() => expect(result.current.state.type).toEqual('ready'));
+    await waitFor(() => expect(result.current.state.type).toEqual('ready'));
     let state = result.current.state as FilterGroupStatesReady;
     expect(state.state.filters.f1).toEqual({
       isSelected: false,
@@ -91,7 +91,7 @@ describe('useEntityFilterGroup', () => {
 
     act(() => result.current.setSelectedFilters(['f1']));
 
-    await wait(() => expect(result.current.state.type).toEqual('ready'));
+    await waitFor(() => expect(result.current.state.type).toEqual('ready'));
     state = result.current.state as FilterGroupStatesReady;
     expect(state.state.filters.f1).toEqual({
       isSelected: true,
@@ -104,7 +104,7 @@ describe('useEntityFilterGroup', () => {
 
     act(() => result.current.setSelectedFilters(['f2']));
 
-    await wait(() => expect(result.current.state.type).toEqual('ready'));
+    await waitFor(() => expect(result.current.state.type).toEqual('ready'));
     state = result.current.state as FilterGroupStatesReady;
     expect(state.state.filters.f1).toEqual({
       isSelected: false,

From ddad61d824d2869141ebbdc4638ac4f7163ae461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Wed, 26 Aug 2020 11:42:09 +0200
Subject: [PATCH 4/4] reload the filtered entities context instead of direct
 fetch

---
 app-config.yaml                               | 22 ++++---
 .../components/CatalogPage/CatalogPage.tsx    | 28 ++++++++-
 .../CatalogTable/CatalogTable.test.tsx        | 40 +++++--------
 .../components/CatalogTable/CatalogTable.tsx  | 57 +++++--------------
 .../src/filter/EntityFilterGroupsProvider.tsx | 17 +++++-
 plugins/catalog/src/filter/context.ts         |  1 +
 .../catalog/src/filter/useFilteredEntities.ts |  1 +
 7 files changed, 79 insertions(+), 87 deletions(-)

diff --git a/app-config.yaml b/app-config.yaml
index 361ba8e7c8..6202d48560 100644
--- a/app-config.yaml
+++ b/app-config.yaml
@@ -51,18 +51,16 @@ newrelic:
     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'
+  exampleEntityLocations:
+    github:
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/artist-lookup-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/playback-order-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/podcast-api-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/queue-proxy-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/searcher-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/playback-lib-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/www-artist-component.yaml
+      - https://github.com/spotify/backstage/blob/master/packages/catalog-model/examples/shuffle-api-component.yaml
 
 auth:
   providers:
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index a73fc5df96..db490cf542 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -18,6 +18,7 @@ import {
   configApiRef,
   Content,
   ContentHeader,
+  errorApiRef,
   identityApiRef,
   SupportButton,
   useApi,
@@ -26,8 +27,9 @@ 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, { useMemo, useState } from 'react';
+import React, { useCallback, 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';
@@ -51,15 +53,34 @@ const CatalogPageContents = () => {
   const {
     loading,
     error,
+    reload,
     matchingEntities,
     availableTags,
   } = useFilteredEntities();
+  const configApi = useApi(configApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const errorApi = useApi(errorApiRef);
   const { isStarredEntity } = useStarredEntities();
   const userId = useApi(identityApiRef).getUserId();
   const [selectedTab, setSelectedTab] = useState<string>();
   const [selectedSidebarItem, setSelectedSidebarItem] = useState<string>();
-  const orgName =
-    useApi(configApiRef).getOptionalString('organization.name') ?? 'Company';
+  const orgName = configApi.getOptionalString('organization.name') ?? 'Company';
+
+  const addMockData = useCallback(async () => {
+    try {
+      const promises: Promise<unknown>[] = [];
+      const root = configApi.getConfig('catalog.exampleEntityLocations');
+      for (const type of root.keys()) {
+        for (const target of root.getStringArray(type)) {
+          promises.push(catalogApi.addLocation(type, target));
+        }
+      }
+      await Promise.all(promises);
+      await reload();
+    } catch (err) {
+      errorApi.post(err);
+    }
+  }, [catalogApi, configApi, errorApi, reload]);
 
   const tabs = useMemo<LabeledComponentType[]>(
     () => [
@@ -153,6 +174,7 @@ const CatalogPageContents = () => {
             entities={matchingEntities}
             loading={loading}
             error={error}
+            onAddMockData={addMockData}
           />
         </div>
       </Content>
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
index 99f251664d..d1eef2a005 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.test.tsx
@@ -15,15 +15,8 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import {
-  ApiProvider,
-  ApiRegistry,
-  ConfigApi,
-  configApiRef,
-} from '@backstage/core';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import * as React from 'react';
-import { CatalogApi, catalogApiRef } from '../../api/types';
 import { CatalogTable } from './CatalogTable';
 
 const entities: Entity[] = [
@@ -45,22 +38,16 @@ const entities: Entity[] = [
 ];
 
 describe('CatalogTable component', () => {
-  const apis = ApiRegistry.from([
-    [configApiRef, ({} as Partial<ConfigApi>) as ConfigApi],
-    [catalogApiRef, ({} as Partial<CatalogApi>) as CatalogApi],
-  ]);
-
   it('should render error message when error is passed in props', async () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <CatalogTable
-            titlePreamble="Owned"
-            entities={[]}
-            loading={false}
-            error={{ code: 'error' }}
-          />
-        </ApiProvider>,
+        <CatalogTable
+          titlePreamble="Owned"
+          entities={[]}
+          loading={false}
+          error={{ code: 'error' }}
+          onAddMockData={() => {}}
+        />,
       ),
     );
     const errorMessage = await rendered.findByText(
@@ -72,13 +59,12 @@ describe('CatalogTable component', () => {
   it('should display entity names when loading has finished and no error occurred', async () => {
     const rendered = await renderWithEffects(
       wrapInTestApp(
-        <ApiProvider apis={apis}>
-          <CatalogTable
-            titlePreamble="Owned"
-            entities={entities}
-            loading={false}
-          />
-        </ApiProvider>,
+        <CatalogTable
+          titlePreamble="Owned"
+          entities={entities}
+          loading={false}
+          onAddMockData={() => {}}
+        />,
       ),
     );
     expect(rendered.getByText(/Owned \(3\)/)).toBeInTheDocument();
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 4cee1a5889..c68eb10e66 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -14,21 +14,14 @@
  * limitations under the License.
  */
 import { Entity, LocationSpec } from '@backstage/catalog-model';
-import {
-  configApiRef,
-  Table,
-  TableColumn,
-  TableProps,
-  useApi,
-} from '@backstage/core';
+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, { useEffect, useState } from 'react';
+import React, { Dispatch } 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';
@@ -82,7 +75,12 @@ const columns: TableColumn<Entity>[] = [
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
-            <Chip label={t} color="secondary" style={{ marginBottom: '0px' }} />
+            <Chip
+              key={t}
+              label={t}
+              color="secondary"
+              style={{ marginBottom: '0px' }}
+            />
           ))}
       </>
     ),
@@ -94,6 +92,7 @@ type CatalogTableProps = {
   titlePreamble: string;
   loading: boolean;
   error?: any;
+  onAddMockData: Dispatch<void>;
 };
 
 export const CatalogTable = ({
@@ -101,46 +100,20 @@ export const CatalogTable = ({
   loading,
   error,
   titlePreamble,
+  onAddMockData,
 }: CatalogTableProps) => {
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
-  const configApi = useApi(configApiRef);
-  const catalogApi = useApi(catalogApiRef);
 
-  const [entitiesState, setEntitiesState] = useState<Entity[]>([]);
-  const [errorState, setError] = useState<Error | undefined>();
-
-  useEffect(() => {
-    setError(error);
-    setEntitiesState(entities);
-  }, [error, entities]);
-  if (errorState) {
+  if (error) {
     return (
       <div>
         <Alert severity="error">
-          Error encountered while fetching catalog entities.{' '}
-          {errorState.toString()}
+          Error encountered while fetching catalog entities. {error.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);
@@ -187,8 +160,8 @@ export const CatalogTable = ({
       icon: () => <Add />,
       tooltip: 'Add example components',
       isFreeAction: true,
-      onClick: () => addMockData(),
-      hidden: entitiesState && entitiesState.length > 0,
+      onClick: onAddMockData,
+      hidden: !(entities && entities.length === 0),
     },
   ];
 
@@ -203,7 +176,7 @@ export const CatalogTable = ({
         showEmptyDataSourceMessage: !loading,
       }}
       title={`${titlePreamble} (${(entities && entities.length) || 0})`}
-      data={entitiesState}
+      data={entities}
       actions={actions}
     />
   );
diff --git a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
index db8e21e071..94bc428a45 100644
--- a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
+++ b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
@@ -16,8 +16,8 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
-import React, { useCallback, useRef, useState } from 'react';
-import { useAsync } from 'react-use';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useAsyncFn } from 'react-use';
 import { catalogApiRef } from '../api/types';
 import { filterGroupsContext, FilterGroupsContext } from './context';
 import {
@@ -46,7 +46,9 @@ export const EntityFilterGroupsProvider = ({
 // The hook that implements the actual context building
 function useProvideEntityFilters(): FilterGroupsContext {
   const catalogApi = useApi(catalogApiRef);
-  const { value: entities, error } = useAsync(() => catalogApi.getEntities());
+  const [{ value: entities, error }, doReload] = useAsyncFn(() =>
+    catalogApi.getEntities(),
+  );
 
   const filterGroups = useRef<{
     [filterGroupId: string]: FilterGroup;
@@ -61,6 +63,10 @@ function useProvideEntityFilters(): FilterGroupsContext {
   const [matchingEntities, setMatchingEntities] = useState<Entity[]>([]);
   const [availableTags, setAvailableTags] = useState<string[]>([]);
 
+  useEffect(() => {
+    doReload();
+  }, [doReload]);
+
   const rebuild = useCallback(() => {
     setFilterGroupStates(
       buildStates(
@@ -122,11 +128,16 @@ function useProvideEntityFilters(): FilterGroupsContext {
     [rebuild],
   );
 
+  const reload = useCallback(async () => {
+    await doReload();
+  }, [doReload]);
+
   return {
     register,
     unregister,
     setGroupSelectedFilters,
     setSelectedTags,
+    reload,
     loading: !error && !entities,
     error,
     filterGroupStates,
diff --git a/plugins/catalog/src/filter/context.ts b/plugins/catalog/src/filter/context.ts
index 7f16107f09..838ec8d532 100644
--- a/plugins/catalog/src/filter/context.ts
+++ b/plugins/catalog/src/filter/context.ts
@@ -27,6 +27,7 @@ export type FilterGroupsContext = {
   unregister: (filterGroupId: string) => void;
   setGroupSelectedFilters: (filterGroupId: string, filterIds: string[]) => void;
   setSelectedTags: (tags: string[]) => void;
+  reload: () => Promise<void>;
   loading: boolean;
   error?: Error;
   filterGroupStates: { [filterGroupId: string]: FilterGroupStates };
diff --git a/plugins/catalog/src/filter/useFilteredEntities.ts b/plugins/catalog/src/filter/useFilteredEntities.ts
index 3f70c0bd85..138a7547c0 100644
--- a/plugins/catalog/src/filter/useFilteredEntities.ts
+++ b/plugins/catalog/src/filter/useFilteredEntities.ts
@@ -31,5 +31,6 @@ export function useFilteredEntities() {
     error: context.error,
     matchingEntities: context.matchingEntities,
     availableTags: context.availableTags,
+    reload: context.reload,
   };
 }