Use storageApi.forBucket and add back a default implementation in the plugin

Signed-off-by: Marcus Eide <eide@spotify.com>

packages/app/src/apis.ts

@@ -20,7 +20,6 @@ import {
   createApiFactory,
   errorApiRef,
   githubAuthApiRef,
-  WebStorage,
 } from '@backstage/core';
 import {
   ScmIntegrationsApi,
@@ -34,10 +33,6 @@ import {
   graphQlBrowseApiRef,
   GraphQLEndpoints,
 } from '@backstage/plugin-graphiql';
-import {
-  LocalStoredShortcuts,
-  shortcutsApiRef,
-} from '@backstage/plugin-shortcuts';
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
@@ -66,13 +61,4 @@ export const apis: AnyApiFactory[] = [
   }),
 
   createApiFactory(costInsightsApiRef, new ExampleCostInsightsClient()),
-
-  createApiFactory({
-    api: shortcutsApiRef,
-    deps: { errorApi: errorApiRef },
-    factory: ({ errorApi }) =>
-      new LocalStoredShortcuts(
-        WebStorage.create({ namespace: '@backstage/shortcuts', errorApi }),
-      ),
-  }),
 ];

plugins/shortcuts/README.md

@@ -17,23 +17,20 @@ import { Shortcuts } from '@backstage/plugin-shortcuts';
 </Sidebar>;
 ```
 
-The plugin exports a `shortcutApiRef` and an implementation of the `ShortcutApi` that uses `localStorage` for storage, that you can use to get started quickly. To use it add it to your app's `apis.ts`:
+The plugin exports a `shortcutApiRef` but the plugin includes a default implementation of the `ShortcutApi` that uses `localStorage` to store each users shortcuts.
+
+To overwrite the default implementation add it to the App's `apis.ts`:
 
 ```ts
-import {
-  LocalStoredShortcuts,
-  shortcutsApiRef,
-} from '@backstage/plugin-shortcuts';
+import { shortcutsApiRef } from '@backstage/plugin-shortcuts';
+import { CustomShortcutsImpl } from '...';
 
 export const apis = [
   // ...
   createApiFactory({
     api: shortcutsApiRef,
-    deps: { errorApi: errorApiRef },
-    factory: ({ errorApi }) =>
-      new LocalStoredShortcuts(
-        WebStorage.create({ namespace: '@backstage/shortcuts', errorApi }),
-      ),
+    deps: {},
+    factory: () => new CustomShortcutsImpl(),
   }),
 ];
 ```

plugins/shortcuts/src/plugin.ts

@@ -14,10 +14,24 @@
  * limitations under the License.
  */
 
-import { createComponentExtension, createPlugin } from '@backstage/core';
+import {
+  createApiFactory,
+  createComponentExtension,
+  createPlugin,
+  storageApiRef,
+} from '@backstage/core';
+import { LocalStoredShortcuts, shortcutsApiRef } from './api';
 
 export const shortcutsPlugin = createPlugin({
   id: 'shortcuts',
+  apis: [
+    createApiFactory({
+      api: shortcutsApiRef,
+      deps: { storageApi: storageApiRef },
+      factory: ({ storageApi }) =>
+        new LocalStoredShortcuts(storageApi.forBucket('shortcuts')),
+    }),
+  ],
 });
 
 export const Shortcuts = shortcutsPlugin.provide(