Refactor Navigation

.storybook/main.ts

@@ -8,7 +8,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
-    "@storybook/addon-designs"
+    "@storybook/addon-designs",
+    "storybook-addon-remix-react-router"
   ],
   framework: {
     name: "@storybook/react-webpack5",

.storybook/preview-body.html

@@ -28,8 +28,9 @@
 
   window.insightsRefreshInterval;
 
-  window.notificationsRefreshInterval;
-  window.notificationsViewMode;
+  // deprecated
+  // window.notificationsRefreshInterval;
+  // window.notificationsViewMode;
 
   window.recentActivityExpirationLimit;
   window.recentActivityDocumentationURL =

.storybook/preview.tsx

@@ -3,20 +3,22 @@ import { StoryFn } from "@storybook/react";
 // TODO: remove React import due to new JSX transform
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { useEffect, useState } from "react";
+import { withRouter } from "storybook-addon-remix-react-router";
 import {
   cancelMessage,
   initializeDigmaMessageListener,
   sendMessage
 } from "../src/api";
 import { App, THEMES } from "../src/components/common/App";
 import { dispatcher } from "../src/dispatcher";
-import { Mode } from "../src/globals";
+import { Theme } from "../src/globals";
 
 const preview: Preview = {
   decorators: [
+    withRouter,
     (Story: StoryFn, context): JSX.Element => {
       const [isInitialized, setIsInitialized] = useState(false);
-      const theme = context.globals.theme as Mode;
+      const theme = context.globals.theme as Theme;
 
       useEffect(() => {
         const removeDigmaMessageListener =