Make notifications unit testable in behaviours

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap

@@ -1,11 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`extension special characters in page registrations renders 1`] = `<div />`;
+exports[`extension special characters in page registrations renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`extension special characters in page registrations when navigating to route with ID having special characters renders 1`] = `
 <div>
   <div>
     Some page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/__snapshots__/navigate-to-extension-page.test.tsx.snap

@@ -1,12 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`navigate to extension page renders 1`] = `<div />`;
+exports[`navigate to extension page renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`navigate to extension page when extension navigates to child route renders 1`] = `
 <div>
   <div>
     Child page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -31,6 +40,9 @@ exports[`navigate to extension page when extension navigates to route with param
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -55,6 +67,9 @@ exports[`navigate to extension page when extension navigates to route without pa
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -79,5 +94,8 @@ exports[`navigate to extension page when extension navigates to route without pa
       Some button
     </button>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/__snapshots__/navigating-between-routes.test.tsx.snap

@@ -8,6 +8,9 @@ exports[`navigating between routes given route with optional path parameters whe
   "someOtherParameter": "some-other-value"
 }
   </pre>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -16,5 +19,8 @@ exports[`navigating between routes given route without path parameters when navi
   <div>
     Some component
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`add-cluster - navigation using application menu renders 1`] = `<div />`;
+exports[`add-cluster - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`add-cluster - navigation using application menu when navigating to add cluster using application menu renders 1`] = `
 <div>
@@ -85,5 +91,8 @@ exports[`add-cluster - navigation using application menu when navigating to add
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap

@@ -328,6 +328,9 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -723,5 +726,8 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap

@@ -293,6 +293,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -589,6 +592,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -909,6 +915,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1234,6 +1243,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
   <div
     data-testid="some-child-page"
   />
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1534,6 +1546,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
   <div
     data-testid="some-child-page"
   />
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1854,6 +1869,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2150,5 +2168,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap

@@ -293,6 +293,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -589,6 +592,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -929,6 +935,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1313,6 +1322,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1697,6 +1709,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2036,6 +2051,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2376,6 +2394,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -2672,5 +2693,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap

@@ -261,6 +261,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -573,5 +576,8 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`extensions - navigation using application menu renders 1`] = `<div />`;
+exports[`extensions - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`extensions - navigation using application menu when navigating to extensions using application menu renders 1`] = `
 <div>
@@ -118,5 +124,8 @@ exports[`extensions - navigation using application menu when navigating to exten
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap

@@ -454,5 +454,8 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
       </div>
     </main>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap

@@ -537,6 +537,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -679,6 +682,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -687,6 +693,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
   <div>
     Some front page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -695,6 +704,9 @@ exports[`preferences - closing-preferences given accessing preferences directly
   <div>
     Some front page
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1235,6 +1247,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1377,6 +1392,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1519,6 +1537,9 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1661,5 +1682,8 @@ exports[`preferences - closing-preferences given already in a page and then navi
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap

@@ -199,6 +199,9 @@ exports[`preferences - navigation to application preferences given in some child
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -727,5 +730,8 @@ exports[`preferences - navigation to application preferences given in some child
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap

@@ -525,6 +525,9 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -935,5 +938,8 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap

@@ -525,6 +525,9 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1065,6 +1068,9 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1239,5 +1245,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap

@@ -525,6 +525,9 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -836,7 +839,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="flex gaps"
               >
                 <div
-                  class="Select theme-lens box grow css-b62m3t-container"
+                  class="Select theme-lens box grow Select--is-disabled css-3iigni-container"
                 >
                   <span
                     class="css-1f43avz-a11yText-A11yText"
@@ -849,7 +852,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     class="css-1f43avz-a11yText-A11yText"
                   />
                   <div
-                    class="Select__control css-1s2u09g-control"
+                    class="Select__control Select__control--is-disabled css-1insrsq-control"
                   >
                     <div
                       class="Select__value-container css-319lph-ValueContainer"
@@ -861,7 +864,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                         Repositories
                       </div>
                       <div
-                        class="Select__input-container css-6j8wv5-Input"
+                        class="Select__input-container css-jzldcf-Input"
                         data-value=""
                       >
                         <input
@@ -873,6 +876,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                           autocomplete="off"
                           autocorrect="off"
                           class="Select__input"
+                          disabled=""
                           id="HelmRepoSelect"
                           role="combobox"
                           spellcheck="false"
@@ -885,9 +889,23 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     </div>
                     <div
                       class="Select__indicators css-1hb7zxy-IndicatorsContainer"
+                    >
+                      <div
+                        aria-hidden="true"
+                        class="Select__indicator Select__loading-indicator css-at12u2-loadingIndicator"
                       >
                         <span
-                        class="Select__indicator-separator css-1okebmr-indicatorSeparator"
+                          class="css-1xtdfmb-LoadingDot"
+                        />
+                        <span
+                          class="css-zoievk-LoadingDot"
+                        />
+                        <span
+                          class="css-x748d8-LoadingDot"
+                        />
+                      </div>
+                      <span
+                        class="Select__indicator-separator css-109onse-indicatorSeparator"
                       />
                       <div
                         aria-hidden="true"
@@ -920,13 +938,11 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="repos"
               >
                 <div
-                  class="notice"
+                  class="pt-5 relative"
                 >
                   <div
-                    class="flex-grow text-center"
+                    class="Spinner singleColor center"
-                  >
+                  />
-                    The repositories have not been added yet
-                  </div>
                 </div>
               </div>
             </div>
@@ -969,5 +985,8 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap

@@ -525,6 +525,9 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -727,5 +730,8 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap

@@ -185,6 +185,9 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -713,6 +716,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1253,6 +1259,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1429,6 +1438,9 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -1568,5 +1580,8 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap

@@ -525,6 +525,9 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;
 
@@ -845,5 +848,8 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`preferences - navigation using application menu renders 1`] = `<div />`;
+exports[`preferences - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`preferences - navigation using application menu when navigating to preferences using application menu renders 1`] = `
 <div>
@@ -527,5 +533,8 @@ exports[`preferences - navigation using application menu when navigating to pref
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/behaviours/preferences/__snapshots__/navigation-using-tray.test.ts.snap

@@ -2,7 +2,11 @@
 
 exports[`show-about-using-tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
@@ -532,6 +536,9 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
   </div>
 </body>
 `;

src/behaviours/update-app/__snapshots__/installing-update-using-tray.test.ts.snap

@@ -2,54 +2,90 @@
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download fails renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user answers not to install the update renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user answers to install the update renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when new update is discovered when download succeeds when user disregards the question and installs the update using tray renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;
 
 exports[`installing update using tray given no update is already downloaded, and "latest" update channel is selected, when started when user checks for updates using tray when no new update is discovered renders 1`] = `
 <body>
-  <div />
+  <div>
+    <div
+      class="Notifications flex column align-flex-end"
+    />
+  </div>
 </body>
 `;

src/behaviours/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`welcome - navigation using application menu renders 1`] = `<div />`;
+exports[`welcome - navigation using application menu renders 1`] = `
+<div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
+</div>
+`;
 
 exports[`welcome - navigation using application menu when navigating to welcome using application menu renders 1`] = `
 <div>
@@ -87,5 +93,8 @@ exports[`welcome - navigation using application menu when navigating to welcome
       </div>
     </div>
   </div>
+  <div
+    class="Notifications flex column align-flex-end"
+  />
 </div>
 `;

src/renderer/components/notifications/notifications-store.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { NotificationsStore } from "./notifications.store";
+
+const notificationsStoreInjectable = getInjectable({
+  id: "notifications-store",
+  instantiate: () => new NotificationsStore(),
+});
+
+export default notificationsStoreInjectable;

src/renderer/components/notifications/notifications.store.tsx

@@ -91,5 +91,3 @@ export class NotificationsStore {
     }
   }
 }
-
-export const notificationsStore = new NotificationsStore();

src/renderer/components/notifications/notifications.tsx

@@ -10,61 +10,25 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { cssNames, prevDefault } from "../../utils";
-import type { Notification, NotificationMessage } from "./notifications.store";
+import type { Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
-import { notificationsStore, NotificationStatus } from "./notifications.store";
+import { NotificationStatus } from "./notifications.store";
 import { Animate } from "../animate";
 import { Icon } from "../icon";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
+import notificationsStoreInjectable from "./notifications-store.injectable";
+
+interface Dependencies {
+  store: NotificationsStore;
+}
 
 @observer
-export class Notifications extends React.Component {
+class NonInjectedNotifications extends React.Component<Dependencies> {
   public elem: HTMLDivElement | null = null;
 
-  static ok(message: NotificationMessage) {
-    return notificationsStore.add({
-      message,
-      timeout: 2_500,
-      status: NotificationStatus.OK,
-    });
-  }
-
-  static checkedError(message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) {
-    if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
-      return Notifications.error(message, customOpts);
-    }
-
-    console.warn("Unknown notification error message, falling back to default", message);
-
-    return Notifications.error(fallback, customOpts);
-  }
-
-  static error(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return notificationsStore.add({
-      message,
-      timeout: 10_000,
-      status: NotificationStatus.ERROR,
-      ...customOpts,
-    });
-  }
-
-  static shortInfo(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return this.info(message, {
-      timeout: 5_000,
-      ...customOpts,
-    });
-  }
-
-  static info(message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) {
-    return notificationsStore.add({
-      status: NotificationStatus.INFO,
-      timeout: 0,
-      message,
-      ...customOpts,
-    });
-  }
-
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => notificationsStore.notifications.length, () => {
+      reaction(() => this.props.store.notifications.length, () => {
         this.scrollToLastNotification();
       }, { delay: 250 }),
     ]);
@@ -74,7 +38,7 @@ export class Notifications extends React.Component {
     if (!this.elem) {
       return;
     }
-    this.elem.scrollTo({
+    this.elem.scrollTo?.({
       top: this.elem.scrollHeight,
       behavior: "smooth",
     });
@@ -91,7 +55,7 @@ export class Notifications extends React.Component {
   }
 
   render() {
-    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = notificationsStore;
+    const { notifications, remove, addAutoHideTimer, removeAutoHideTimer } = this.props.store;
 
     return (
       <div className="Notifications flex column align-flex-end" ref={e => this.elem = e}>
@@ -114,6 +78,7 @@ export class Notifications extends React.Component {
                   <Icon
                     material="close"
                     className="close"
+                    data-testid={`close-notification-for-${id}`}
                     onClick={prevDefault(() => {
                       remove(id);
                       onClose?.();
@@ -128,3 +93,68 @@ export class Notifications extends React.Component {
     );
   }
 }
+
+export const Notifications = withInjectables<Dependencies>(
+  NonInjectedNotifications,
+
+  {
+    getProps: (di) => ({
+      store: di.inject(notificationsStoreInjectable),
+    }),
+  },
+) as React.FC & {
+  ok: (message: NotificationMessage) => () => void;
+  checkedError: (message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  error: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  shortInfo: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+  info: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
+};
+
+/**
+ * @deprecated
+ */
+const _notificationStore = asLegacyGlobalForExtensionApi(notificationsStoreInjectable);
+
+Notifications.ok = (message: NotificationMessage) => {
+  return _notificationStore.add({
+    message,
+    timeout: 2_500,
+    status: NotificationStatus.OK,
+  });
+};
+
+Notifications.checkedError = (message, fallback, customOpts = {}) => {
+  if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
+    return Notifications.error(message, customOpts);
+  }
+
+  console.warn("Unknown notification error message, falling back to default", message);
+
+  return Notifications.error(fallback, customOpts);
+};
+
+Notifications.error = (message, customOpts= {}) => {
+  return _notificationStore.add({
+    message,
+    timeout: 10_000,
+    status: NotificationStatus.ERROR,
+    ...customOpts,
+  });
+};
+
+Notifications.shortInfo = (message, customOpts = {}) => {
+  return Notifications.info(message, {
+    timeout: 5_000,
+    ...customOpts,
+  });
+};
+
+Notifications.info = (message, customOpts = {}) => {
+  return _notificationStore.add({
+    status: NotificationStatus.INFO,
+    timeout: 0,
+    message,
+    ...customOpts,
+  });
+};
+

src/renderer/components/test-utils/get-application-builder.tsx

@@ -44,10 +44,10 @@ import { flushPromises } from "../../../common/test-utils/flush-promises";
 import type { NamespaceStore } from "../+namespaces/store";
 import namespaceStoreInjectable from "../+namespaces/store.injectable";
 import historyInjectable from "../../navigation/history.injectable";
-import trayMenuItemsInjectable from "../../../main/tray/tray-menu-item/tray-menu-items.injectable";
 import type { TrayMenuItem } from "../../../main/tray/tray-menu-item/tray-menu-item-injection-token";
 import electronTrayInjectable from "../../../main/tray/electron-tray/electron-tray.injectable";
 import applicationWindowInjectable from "../../../main/start-main-application/lens-window/application-window/application-window.injectable";
+import { Notifications } from "../notifications/notifications";
 
 type Callback = (dis: DiContainers) => void | Promise<void>;
 
@@ -395,6 +395,8 @@ export const getApplicationBuilder = () => {
               return <Component />;
             }}
           </Observer>
+
+          <Notifications />
         </Router>,
       );
 

src/renderer/ipc/list-namespaces-forbidden-handler.injectable.tsx

@@ -5,17 +5,19 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
 import type { ListNamespaceForbiddenArgs } from "../../common/ipc/cluster";
-import { Notifications, notificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
 import { Button } from "../components/button";
 import type { IpcRendererEvent } from "electron";
 import React from "react";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const listNamespacesForbiddenHandlerInjectable = getInjectable({
   id: "list-namespaces-forbidden-handler",
 
   instantiate: (di) => {
     const navigateToEntitySettings = di.inject(navigateToEntitySettingsInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
 
     const notificationLastDisplayedAt = new Map<string, number>();
     const intervalBetweenNotifications = 1000 * 60; // 60s

src/renderer/ipc/register-listeners.tsx

@@ -8,7 +8,7 @@ import type { IpcRendererEvent } from "electron";
 import { ipcRenderer } from "electron";
 import type { UpdateAvailableFromMain, BackchannelArg } from "../../common/ipc";
 import { areArgsUpdateAvailableFromMain, UpdateAvailableChannel, onCorrect, ipcRendererOn, AutoUpdateChecking, AutoUpdateNoUpdateAvailable } from "../../common/ipc";
-import { Notifications, notificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import { Button } from "../components/button";
 import { isMac } from "../../common/vars";
 import { defaultHotbarCells } from "../../common/hotbars/types";
@@ -16,7 +16,6 @@ import { type ListNamespaceForbiddenArgs, clusterListNamespaceForbiddenChannel,
 import { hotbarTooManyItemsChannel } from "../../common/ipc/hotbar";
 
 function sendToBackchannel(backchannel: string, notificationId: string, data: BackchannelArg): void {
-  notificationsStore.remove(notificationId);
   ipcRenderer.send(backchannel, data);
 }
 

src/renderer/port-forward/about-port-forwarding.injectable.ts

@@ -7,18 +7,22 @@ import { aboutPortForwarding } from "./port-forward-notify";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import hostedClusterIdInjectable from "../../common/cluster-store/hosted-cluster-id.injectable";
 import assert from "assert";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const aboutPortForwardingInjectable = getInjectable({
   id: "about-port-forwarding",
 
   instantiate: (di) => {
     const hostedClusterId = di.inject(hostedClusterIdInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+    const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable);
 
     assert(hostedClusterId, "Only allowed to notify about port forward errors within a cluster frame");
 
     return aboutPortForwarding({
-      navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
+      navigateToPortForwards,
       hostedClusterId,
+      notificationsStore,
     });
   },
 });

src/renderer/port-forward/notify-error-port-forwarding.injectable.ts

@@ -7,18 +7,22 @@ import { notifyErrorPortForwarding } from "./port-forward-notify";
 import navigateToPortForwardsInjectable from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import hostedClusterIdInjectable from "../../common/cluster-store/hosted-cluster-id.injectable";
 import assert from "assert";
+import notificationsStoreInjectable from "../components/notifications/notifications-store.injectable";
 
 const notifyErrorPortForwardingInjectable = getInjectable({
   id: "notify-error-port-forwarding",
 
   instantiate: (di) => {
     const hostedClusterId = di.inject(hostedClusterIdInjectable);
+    const notificationsStore = di.inject(notificationsStoreInjectable);
+    const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable);
 
     assert(hostedClusterId, "Only allowed to notify about port forward errors within a cluster frame");
 
     return notifyErrorPortForwarding({
-      navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
+      navigateToPortForwards,
       hostedClusterId,
+      notificationsStore,
     });
   },
 });

src/renderer/port-forward/port-forward-notify.tsx

@@ -5,17 +5,20 @@
 
 import React from "react";
 import { Button } from "../components/button";
-import { Notifications, notificationsStore } from "../components/notifications";
+import type { NotificationsStore } from "../components/notifications";
+import { Notifications } from "../components/notifications";
 import type { NavigateToPortForwards } from "../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 
 interface AboutPortForwardingDependencies {
   navigateToPortForwards: NavigateToPortForwards;
   hostedClusterId: string;
+  notificationsStore: NotificationsStore;
 }
 
 export const aboutPortForwarding = ({
   navigateToPortForwards,
   hostedClusterId,
+  notificationsStore,
 }: AboutPortForwardingDependencies) => () => {
   const notificationId = `port-forward-notification-${hostedClusterId}`;
 
@@ -49,12 +52,14 @@ export const aboutPortForwarding = ({
 interface NotifyErrorPortForwardingDependencies {
   navigateToPortForwards: NavigateToPortForwards;
   hostedClusterId: string;
+  notificationsStore: NotificationsStore;
 }
 
 
 export const notifyErrorPortForwarding = ({
   navigateToPortForwards,
   hostedClusterId,
+  notificationsStore,
 }: NotifyErrorPortForwardingDependencies) => (msg: string) => {
   const notificationId = `port-forward-error-notification-${hostedClusterId}`;