Merge pull request #153 from chromaui/order-modes

Sort modes by their theme toolbar order
chromaui · Nov 30, 2023 · d563e50 · d563e50
2 parents 55c5e9d + b6caef9
commit d563e50
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/src/components/ModeSelector.tsx b/src/components/ModeSelector.tsx
@@ -32,16 +32,18 @@ type ModeData = Pick<TestMode, "name">;
 
 interface ModeSelectorProps {
   isAccepted: boolean;
-  selectedMode: ModeData;
-  onSelectMode: (mode: ModeData) => void;
+  modeOrder?: string[];
   modeResults: { mode: ModeData; result?: ComparisonResult }[];
+  onSelectMode: (mode: ModeData) => void;
+  selectedMode: ModeData;
 }
 
 export const ModeSelector = ({
   isAccepted,
-  selectedMode,
+  modeOrder,
   modeResults,
   onSelectMode,
+  selectedMode,
 }: ModeSelectorProps) => {
   const aggregate = aggregateResult(modeResults.map(({ result }) => result));
   if (!aggregate) return null;
@@ -53,13 +55,20 @@ export const ModeSelector = ({
 
   const links =
     modeResults.length > 1 &&
-    modeResults.map(({ mode, result }) => ({
-      id: mode.name,
-      title: mode.name,
-      right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
-      onClick: () => onSelectMode(mode),
-      active: selectedMode.name === mode.name,
-    }));
+    modeResults
+      .map(({ mode, result }) => ({
+        id: mode.name,
+        title: mode.name,
+        right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
+        onClick: () => onSelectMode(mode),
+        active: selectedMode.name === mode.name,
+      }))
+      .sort((a, b) => {
+        if (!modeOrder) return 0;
+        const ia = modeOrder.indexOf(a.title);
+        const ib = modeOrder.indexOf(b.title);
+        return ia !== -1 && ib !== -1 ? ia - ib : 0;
+      });
 
   return (
     <WithTooltip

diff --git a/src/screens/VisualTests/BuildResultsFooter.tsx b/src/screens/VisualTests/BuildResultsFooter.tsx
@@ -21,6 +21,7 @@ export const BuildResultsFooter = ({
         {modeResults.length > 0 && (
           <ModeSelector
             isAccepted={storyState.summary.status === TestStatus.Accepted}
+            modeOrder={storyState.modeOrder}
             selectedMode={storyState.selectedTest.mode}
             modeResults={modeResults}
             onSelectMode={storyState.onSelectMode}

diff --git a/src/utils/useTests.ts b/src/utils/useTests.ts
@@ -1,4 +1,4 @@
-import { useGlobals } from "@storybook/manager-api";
+import { useGlobals, useGlobalTypes } from "@storybook/manager-api";
 import { useCallback, useState } from "react";
 
 import { BrowserInfo, StoryTestFieldsFragment, TestMode, TestStatus } from "../gql/graphql";
@@ -8,9 +8,10 @@ type ModeData = Pick<TestMode, "name">;
 
 const useGlobalValue = (key: string) => {
   try {
-    return useGlobals()[0][key];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return [useGlobals()[0][key], useGlobalTypes()[key]];
   } catch (e) {
-    return null;
+    return [null, null];
   }
 };
 
@@ -19,7 +20,7 @@ const useGlobalValue = (key: string) => {
  * for the same story.
  */
 export function useTests(tests: StoryTestFieldsFragment[]) {
-  const theme = useGlobalValue("theme");
+  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;
@@ -40,6 +41,7 @@ export function useTests(tests: StoryTestFieldsFragment[]) {
     selectedTest?.comparisons[0];
 
   return {
+    modeOrder: themeType?.toolbar?.items?.map((item: { title: string }) => item.title),
     selectedTest,
     selectedComparison,
     onSelectBrowser,