Merge pull request #203 from chromaui/andrew/ap-4219-preserve-state-o…

…f-modesbrowsers-as-a-navigate-between
chromaui · Mar 8, 2024 · 564ee3b · 564ee3b
2 parents e8c4a24 + d36a470
commit 564ee3b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -21,6 +21,8 @@ export const IS_OUTDATED = `${ADDON_ID}/isOutdated`;
 export const START_BUILD = `${ADDON_ID}/startBuild`;
 export const STOP_BUILD = `${ADDON_ID}/stopBuild`;
 export const LOCAL_BUILD_PROGRESS = `${ADDON_ID}/localBuildProgress`;
+export const SELECTED_MODE_NAME = `${ADDON_ID}/selectedModeName`;
+export const SELECTED_BROWSER_ID = `${ADDON_ID}/selectedBrowserId`;
 
 export const REMOVE_ADDON = `${ADDON_ID}/removeAddon`;
 

diff --git a/src/utils/useTests.ts b/src/utils/useTests.ts
@@ -1,7 +1,9 @@
 import { useGlobals, useGlobalTypes } from "@storybook/manager-api";
 import { useCallback, useState } from "react";
 
+import { SELECTED_BROWSER_ID, SELECTED_MODE_NAME } from "../constants";
 import { BrowserInfo, StoryTestFieldsFragment, TestMode, TestStatus } from "../gql/graphql";
+import { useSharedState } from "./useSharedState";
 
 type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
 type ModeData = Pick<TestMode, "name">;
@@ -21,24 +23,38 @@ const useGlobalValue = (key: string) => {
  */
 export function useTests(tests: StoryTestFieldsFragment[]) {
   const [theme, themeType] = useGlobalValue("theme");
-  const [selectedBrowserId, onSelectBrowserId] = useState<BrowserData["id"]>(() => {
-    const test = tests.find(({ status }) => status !== TestStatus.Passed) || tests[0];
-    return test?.comparisons[0]?.browser.id;
-  });
-  const [selectedModeName, onSelectModeName] = useState<ModeData["name"]>(() => {
-    const changed = tests.filter(({ status }) => status !== TestStatus.Passed);
-    const candidates = changed.length ? changed : tests;
-    const test = candidates.find(({ mode }) => mode.globals.theme === theme) || candidates[0];
-    return test?.mode.name;
-  });
+  const [selectedBrowserId, setSelectedBrowserId] = useSharedState<string>(SELECTED_BROWSER_ID);
+  const [selectedModeName, setSelectedModeName] = useSharedState<string>(SELECTED_MODE_NAME);
 
-  const onSelectBrowser = useCallback(({ id }: BrowserData) => onSelectBrowserId(id), []);
-  const onSelectMode = useCallback(({ name }: ModeData) => onSelectModeName(name), []);
+  const onSelectBrowser = useCallback(
+    ({ id }: BrowserData) => setSelectedBrowserId(id),
+    [setSelectedBrowserId]
+  );
+  const onSelectMode = useCallback(
+    ({ name }: ModeData) => setSelectedModeName(name),
+    [setSelectedModeName]
+  );
 
-  const selectedTest = tests.find(({ mode }) => mode.name === selectedModeName) || tests[0];
+  // Select the test based on the following criteria (in order of priority):
+  // 1. The first test with changes detected and the mode name matches the one previously selected
+  // 2. The first test with changes detected
+  // 3. The first test where the mode name matches the one previously selected
+  // 4. The first test
+  const changedTests = tests.filter(({ status }) => status !== TestStatus.Passed);
+  const selectedTest =
+    changedTests.find(({ mode }) => mode.name === selectedModeName) ||
+    changedTests[0] ||
+    tests.find(({ mode }) => mode.name === selectedModeName) ||
+    tests[0];
+  if (selectedTest?.mode.name !== selectedModeName) {
+    setSelectedModeName(selectedTest?.mode.name);
+  }
   const selectedComparison =
     selectedTest?.comparisons.find(({ browser }) => browser.id === selectedBrowserId) ||
     selectedTest?.comparisons[0];
+  if (selectedComparison?.browser.id !== selectedBrowserId) {
+    setSelectedBrowserId(selectedComparison?.browser.id);
+  }
 
   return {
     modeOrder: themeType?.toolbar?.items?.map((item: { title: string }) => item.title),