Make DismissibleBanner persistently dismissed #1153 (#1168)

* Enables DismissableBanner instance in localstorage

When dismissed, a string representation of the DismissableBanner
is sent to localstorage using the storageapi, to allow persistance in
a user session.

* Adds tests and cleans up DismissableBanner changes

DismissbleBanner now has an id prop. This prop is used when
adding a dismissed banner instance to web storage.

The namespace dismissed banners are added to is now set to
"notifications".

Removed refrences to old settings.

Added a test to check web storage functionality.

Updates CatalogPage to add id prop.

Updates CatalogPage test to ensure storageApiRef is valid.

* Updates DismissableBanner stories to include id.

* Adds ApiProvider to DismissableBanner stories.

* Trigger CI

* Removed jest calls and replaced with ErrorApi.

* Updates imports to @backstage/core

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

@@ -17,7 +17,15 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import CatalogPage from './CatalogPage';
-import { ApiRegistry, ApiProvider, errorApiRef } from '@backstage/core';
+import {
+  ApiProvider,
+  ApiRegistry,
+  CreateStorageApiOptions,
+  errorApiRef,
+  storageApiRef,
+  StorageApi,
+  WebStorage,
+} from '@backstage/core';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { catalogApiRef } from '../..';
 import { CatalogApi } from '../../api/types';
@@ -39,6 +47,17 @@ const catalogApi: Partial<CatalogApi> = {
     Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
 };
 
+const mockWebStorageErrorApi = { post: jest.fn(), error$: jest.fn() };
+const createWebStorage = (
+  args?: Partial<CreateStorageApiOptions>,
+): StorageApi => {
+  return WebStorage.create({
+    errorApi: mockWebStorageErrorApi,
+    ...args,
+  });
+};
+const storageApi = createWebStorage();
+
 describe('CatalogPage', () => {
   // this test right now causes some red lines in the log output when running tests
   // related to some theme issues in mui-table
@@ -50,6 +69,7 @@ describe('CatalogPage', () => {
           apis={ApiRegistry.from([
             [errorApiRef, errorApi],
             [catalogApiRef, catalogApi],
+            [storageApiRef, storageApi],
           ])}
         >
           <CatalogPage />

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

@@ -149,6 +149,7 @@ const CatalogPage: FC<{}> = () => {
               page.
             </Typography>
           }
+          id="catalog_page_welcome_banner"
         />
 
         <ContentHeader title="Services">