Enable Filtering of the Catalog Page (#1143)

* feat(catalog/Filters): Add ability to render a React component as the count. Good for loading states and async data rendering for counts.

* chore(Catalog/filters): Updating the table so that we use loading states of the table rather than the panel

* chore(Catalog/filters): added some nice things for enabling the filtering with some nice count componeents

* feat(Catalog/filters): Fetch the correct data and added in enum types to make some nice resolvers

* chore(Catalog/filters): Use the new enum type here

* chore(Catalog/filters): Removing the unused import to fix lintig

* chore(Catalog/filters): Addressing some PR comments

* feat(catalog/filters): Making WebStorage return the same instance for the same bucket for subscriptions

* chore(core/Storage): fixing some issues with different instances of the storage and adding tests for it

* chore(catalog/filters): fixing some tests and trying to remove some of the act warnings in the tests

packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts

@@ -15,6 +15,7 @@
  */
 import { WebStorage } from './WebStorage';
 import { CreateStorageApiOptions, StorageApi } from '../../definitions';
+
 describe('WebStorage Storage API', () => {
   const mockErrorApi = { post: jest.fn(), error$: jest.fn() };
   const createWebStorage = (
@@ -161,4 +162,12 @@ describe('WebStorage Storage API', () => {
       }),
     );
   });
+
+  it('should return a singleton for the same namespace and same bucket', async () => {
+    const rootStorage = createWebStorage({
+      namespace: '/Test/Mock/Thing/Thing ',
+    });
+
+    expect(rootStorage.forBucket('test')).toBe(rootStorage.forBucket('test'));
+  });
 });

packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts

@@ -22,6 +22,8 @@ import {
 import { Observable } from '../../../types';
 import ObservableImpl from 'zen-observable';
 
+const buckets = new Map<string, WebStorage>();
+
 export class WebStorage implements StorageApi {
   constructor(
     private readonly namespace: string,
@@ -46,7 +48,11 @@ export class WebStorage implements StorageApi {
   }
 
   forBucket(name: string): WebStorage {
-    return new WebStorage(`${this.namespace}/${name}`, this.errorApi);
+    const bucketPath = `${this.namespace}/${name}`;
+    if (!buckets.has(bucketPath)) {
+      buckets.set(bucketPath, new WebStorage(bucketPath, this.errorApi));
+    }
+    return buckets.get(bucketPath)!;
   }
 
   async set<T>(key: string, data: T): Promise<void> {

packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -25,7 +25,7 @@ import {
   storageApiRef,
   StorageApi,
   WebStorage,
-} from '@backstage/core';
+} from '@backstage/core-api';
 
 export default {
   title: 'DismissableBanner',

packages/core/src/components/DismissableBanner/DismissableBanner.test.tsx

@@ -25,7 +25,7 @@ import {
   CreateStorageApiOptions,
   StorageApi,
   WebStorage,
-} from '@backstage/core';
+} from '@backstage/core-api';
 
 describe('<DismissableBanner />', () => {
   let apis: ApiRegistry;

packages/core/src/components/DismissableBanner/DismissableBanner.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC, ReactNode, useState, useEffect } from 'react';
-import { useApi, storageApiRef } from '@backstage/core';
+import { useApi, storageApiRef } from '@backstage/core-api';
 import { useObservable } from 'react-use';
 import classNames from 'classnames';
 import { makeStyles, Theme } from '@material-ui/core';