Merge branch 'master' into techdocs/remove-warnings

Signed-off-by: Morgan Bentell <morgan.bentell@gmail.com>

plugins/shortcuts/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @backstage/plugin-shortcuts
 
+## 0.3.8
+
+### Patch Changes
+
+- cb8ec97cdeb: Change black & white colors to be theme aware
+- 7c38e565d1f: Fixed bug in LocalStoredShortcuts client where adding new Shortcut results in replacing entire shortcut list.
+
+  Refactored LocalStoredShortcuts client to listen to `storageApi` updates to ensure that local state is always up to date.
+
+- 52b0022dab7: Updated dependency `msw` to `^1.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.12.5
+  - @backstage/core-plugin-api@1.5.0
+  - @backstage/theme@0.2.18
+  - @backstage/types@1.0.2
+
+## 0.3.8-next.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.2
+  - @backstage/core-plugin-api@1.5.0-next.2
+
+## 0.3.8-next.1
+
+### Patch Changes
+
+- cb8ec97cdeb: Change black & white colors to be theme aware
+- 52b0022dab7: Updated dependency `msw` to `^1.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.1
+  - @backstage/core-plugin-api@1.4.1-next.1
+  - @backstage/theme@0.2.18-next.0
+  - @backstage/types@1.0.2
+
 ## 0.3.8-next.0
 
 ### Patch Changes

plugins/shortcuts/api-report.md

@@ -9,24 +9,25 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { Observable } from '@backstage/types';
-import { default as Observable_2 } from 'zen-observable';
-import { StorageApi } from '@backstage/core-plugin-api';
+import { Shortcut as Shortcut_2 } from '@backstage/plugin-shortcuts';
+import { ShortcutApi as ShortcutApi_2 } from '@backstage/plugin-shortcuts';
+import type { StorageApi } from '@backstage/core-plugin-api';
 
 // @public
-export class LocalStoredShortcuts implements ShortcutApi {
+export class LocalStoredShortcuts implements ShortcutApi_2 {
   constructor(storageApi: StorageApi);
   // (undocumented)
-  add(shortcut: Omit<Shortcut, 'id'>): Promise<void>;
+  add(shortcut: Omit<Shortcut_2, 'id'>): Promise<void>;
   // (undocumented)
-  get(): Shortcut[];
+  get(): Shortcut_2[];
   // (undocumented)
   getColor(url: string): string;
   // (undocumented)
   remove(id: string): Promise<void>;
   // (undocumented)
-  shortcut$(): Observable_2<Shortcut[]>;
+  shortcut$(): Observable<Shortcut_2[]>;
   // (undocumented)
-  update(shortcut: Shortcut): Promise<void>;
+  update(shortcut: Shortcut_2): Promise<void>;
 }
 
 // @public (undocumented)

plugins/shortcuts/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-shortcuts",
   "description": "A Backstage plugin that provides a shortcuts feature to the sidebar",
-  "version": "0.3.8-next.0",
+  "version": "0.3.8",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -30,7 +30,6 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@types/zen-observable": "^0.8.2",
     "react-hook-form": "^7.12.2",
     "react-use": "^17.2.4",
     "uuid": "^8.3.2",
@@ -49,6 +48,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.0.0",
     "@types/node": "^16.11.26",
+    "@types/zen-observable": "^0.8.2",
     "cross-fetch": "^3.1.5",
     "msw": "^1.0.0"
   },

plugins/shortcuts/src/api/LocalStoredShortcuts.test.ts

@@ -36,8 +36,9 @@ describe('LocalStoredShortcuts', () => {
           resolve();
         },
       });
-      shortcutApi.add(shortcut);
     });
+    observerNextHandler.mockClear(); // handler is called with current state to start
+    await shortcutApi.add(shortcut);
 
     expect(observerNextHandler).toHaveBeenCalledTimes(1);
     expect(observerNextHandler).toHaveBeenCalledWith(

plugins/shortcuts/src/api/LocalStoredShortcuts.ts

@@ -16,10 +16,10 @@
 
 import { pageTheme } from '@backstage/theme';
 import { v4 as uuid } from 'uuid';
-import { ShortcutApi } from './ShortcutApi';
-import { Shortcut } from '../types';
-import { StorageApi } from '@backstage/core-plugin-api';
-import Observable from 'zen-observable';
+import { ShortcutApi, type Shortcut } from '@backstage/plugin-shortcuts';
+import type { StorageApi } from '@backstage/core-plugin-api';
+import type { Observable } from '@backstage/types';
+import ObservableImpl from 'zen-observable';
 
 /**
  * Implementation of the ShortcutApi that uses the StorageApi to store shortcuts.
@@ -27,27 +27,41 @@ import Observable from 'zen-observable';
  * @public
  */
 export class LocalStoredShortcuts implements ShortcutApi {
-  private readonly shortcuts: Observable<Shortcut[]>;
+  private shortcuts: Shortcut[];
+  private readonly subscribers = new Set<
+    ZenObservable.SubscriptionObserver<Shortcut[]>
+  >();
+
+  private readonly observable = new ObservableImpl<Shortcut[]>(subscriber => {
+    // forward the the latest value
+    subscriber.next(this.shortcuts);
+
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  });
 
   constructor(private readonly storageApi: StorageApi) {
-    this.shortcuts = Observable.from(
-      this.storageApi.observe$<Shortcut[]>('items'),
-    ).map(snapshot => snapshot.value ?? []);
+    this.shortcuts = this.storageApi.snapshot<Shortcut[]>('items').value ?? [];
+    this.storageApi.observe$<Shortcut[]>('items').subscribe({
+      next: next => {
+        this.shortcuts = next.value ?? [];
+        this.notifyChanges();
+      },
+    });
   }
 
-  shortcut$() {
-    return this.shortcuts;
+  shortcut$(): Observable<Shortcut[]> {
+    return this.observable;
   }
 
   get() {
-    return Array.from(
-      this.storageApi.snapshot<Shortcut[]>('items').value ?? [],
-    ).sort((a, b) => (a.title >= b.title ? 1 : -1));
+    return this.shortcuts;
   }
 
   async add(shortcut: Omit<Shortcut, 'id'>) {
-    const shortcuts = this.get();
-    shortcuts.push({ ...shortcut, id: uuid() });
+    const shortcuts = this.sort([...this.get(), { ...shortcut, id: uuid() }]);
 
     await this.storageApi.set('items', shortcuts);
   }
@@ -78,4 +92,14 @@ export class LocalStoredShortcuts implements ShortcutApi {
     catalog: 'home',
     docs: 'documentation',
   };
+
+  private sort(shortcuts: Shortcut[]): Shortcut[] {
+    return shortcuts.slice().sort((a, b) => (a.title >= b.title ? 1 : -1));
+  }
+
+  private notifyChanges() {
+    for (const subscription of this.subscribers) {
+      subscription.next(this.shortcuts);
+    }
+  }
 }