Don't show menu when there's only one viewport or browser

src/components/BrowserSelector.tsx

@@ -1,3 +1,5 @@
+import { TooltipNote, WithTooltip } from "@storybook/components";
+import { styled } from "@storybook/theming";
 import React from "react";
 
 import { Browser, BrowserInfo, ComparisonResult } from "../gql/graphql";
@@ -17,6 +19,14 @@ const browserIcons = {
   [Browser.Edge]: <EdgeIcon alt="Edge" aria-label="Edge" />,
 } as const;
 
+const IconWrapper = styled.div({
+  height: 16,
+  margin: "6px 7px",
+  svg: {
+    verticalAlign: "top",
+  },
+});
+
 type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
 
 interface BrowserSelectorProps {
@@ -32,28 +42,43 @@ export const BrowserSelector = ({
   browserResults,
   onSelectBrowser,
 }: BrowserSelectorProps) => {
-  const links = browserResults
-    .filter(({ browser }) => browser.key in browserIcons)
-    .map(({ browser, result }) => ({
+  const aggregate = aggregateResult(browserResults.map(({ result }) => result));
+  if (!aggregate) return null;
+
+  let icon = browserIcons[selectedBrowser.key];
+  if (!isAccepted && aggregate !== ComparisonResult.Equal) {
+    icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
+  }
+
+  const links =
+    browserResults.length > 1 &&
+    browserResults.map(({ browser, result }) => ({
       active: selectedBrowser === browser,
       id: browser.id,
       onClick: () => onSelectBrowser(browser),
       right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
       title: browser.name,
     }));
 
-  const aggregate = aggregateResult(browserResults.map(({ result }) => result));
-  if (!aggregate) return null;
-
-  const icon = browserIcons[selectedBrowser.key];
   return (
-    <TooltipMenu placement="bottom" links={links}>
-      {isAccepted || aggregate === ComparisonResult.Equal ? (
-        icon
+    <WithTooltip
+      hasChrome={false}
+      placement="top"
+      trigger="hover"
+      tooltip={
+        <TooltipNote
+          note={links ? "Switch browser" : `Tested in ${browserResults[0].browser.name}`}
+        />
+      }
+    >
+      {links ? (
+        <TooltipMenu placement="bottom" links={links}>
+          {icon}
+          <ArrowIcon icon="arrowdown" />
+        </TooltipMenu>
       ) : (
-        <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>
+        <IconWrapper>{icon}</IconWrapper>
       )}
-      <ArrowIcon icon="arrowdown" />
-    </TooltipMenu>
+    </WithTooltip>
   );
 };

src/components/ViewportSelector.stories.ts → src/components/ModeSelector.stories.ts

@@ -2,7 +2,7 @@ import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ComparisonResult } from "../gql/graphql";
-import { ViewportSelector } from "./ViewportSelector";
+import { ModeSelector } from "./ModeSelector";
 
 const viewport800Px = {
   id: "_800",
@@ -14,20 +14,20 @@ const viewport1200Px = {
 };
 
 const meta = {
-  component: ViewportSelector,
+  component: ModeSelector,
   args: {
     isAccepted: false,
-    onSelectViewport: action("onSelectViewport"),
+    onSelectMode: action("onSelectMode"),
   },
-} satisfies Meta<typeof ViewportSelector>;
+} satisfies Meta<typeof ModeSelector>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const WithSingleViewportChanged: Story = {
   args: {
-    selectedViewport: viewport1200Px,
-    viewportResults: [
+    selectedMode: viewport1200Px,
+    modeResults: [
       {
         viewport: viewport1200Px,
         result: ComparisonResult.Changed,
@@ -39,8 +39,8 @@ export const WithSingleViewportChanged: Story = {
 export const WithSingleViewportAccepted: Story = {
   args: {
     isAccepted: true,
-    selectedViewport: viewport1200Px,
-    viewportResults: [
+    selectedMode: viewport1200Px,
+    modeResults: [
       {
         viewport: viewport1200Px,
         result: ComparisonResult.Changed,
@@ -51,8 +51,8 @@ export const WithSingleViewportAccepted: Story = {
 
 export const WithSingleViewportEqual: Story = {
   args: {
-    selectedViewport: viewport1200Px,
-    viewportResults: [
+    selectedMode: viewport1200Px,
+    modeResults: [
       {
         viewport: viewport1200Px,
         result: ComparisonResult.Equal,
@@ -63,8 +63,8 @@ export const WithSingleViewportEqual: Story = {
 
 export const WithSingleViewportError: Story = {
   args: {
-    selectedViewport: viewport1200Px,
-    viewportResults: [
+    selectedMode: viewport1200Px,
+    modeResults: [
       {
         viewport: viewport1200Px,
         result: ComparisonResult.CaptureError,
@@ -75,8 +75,8 @@ export const WithSingleViewportError: Story = {
 
 export const WithManyViewportsEqual: Story = {
   args: {
-    selectedViewport: viewport800Px,
-    viewportResults: [
+    selectedMode: viewport800Px,
+    modeResults: [
       {
         viewport: viewport800Px,
         result: ComparisonResult.Equal,
@@ -91,8 +91,8 @@ export const WithManyViewportsEqual: Story = {
 
 export const WithManyViewportsSecondSelected: Story = {
   args: {
-    selectedViewport: viewport1200Px,
-    viewportResults: [
+    selectedMode: viewport1200Px,
+    modeResults: [
       {
         viewport: viewport800Px,
         result: ComparisonResult.Equal,
@@ -107,8 +107,8 @@ export const WithManyViewportsSecondSelected: Story = {
 
 export const WithManyViewportsVaried: Story = {
   args: {
-    selectedViewport: viewport800Px,
-    viewportResults: [
+    selectedMode: viewport800Px,
+    modeResults: [
       {
         viewport: viewport800Px,
         result: ComparisonResult.Equal,

src/components/ModeSelector.tsx

@@ -0,0 +1,74 @@
+import { TooltipNote, WithTooltip } from "@storybook/components";
+import { Icon } from "@storybook/design-system";
+import { styled } from "@storybook/theming";
+import React from "react";
+
+import { ComparisonResult, ViewportInfo } from "../gql/graphql";
+import { aggregateResult } from "../utils/aggregateResult";
+import { ArrowIcon } from "./icons/ArrowIcon";
+import { StatusDot, StatusDotWrapper } from "./StatusDot";
+import { TooltipMenu } from "./TooltipMenu";
+
+const IconWrapper = styled.div(({ theme }) => ({
+  height: 14,
+  margin: "7px 7px",
+  color: `${theme.color.defaultText}99`,
+  svg: {
+    verticalAlign: "top",
+  },
+}));
+
+type ModeData = Pick<ViewportInfo, "id" | "name">;
+
+interface ModeSelectorProps {
+  isAccepted: boolean;
+  selectedMode: ModeData;
+  onSelectMode: (viewport: ModeData) => void;
+  modeResults: { viewport: ModeData; result: ComparisonResult }[];
+}
+
+export const ModeSelector = ({
+  isAccepted,
+  selectedMode,
+  modeResults,
+  onSelectMode,
+}: ModeSelectorProps) => {
+  const aggregate = aggregateResult(modeResults.map(({ result }) => result));
+  if (!aggregate) return null;
+
+  let icon = <Icon icon="diamond" />;
+  if (!isAccepted && aggregate !== ComparisonResult.Equal) {
+    icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
+  }
+
+  const links =
+    modeResults.length > 1 &&
+    modeResults.map(({ viewport, result }) => ({
+      id: viewport.id,
+      title: viewport.name,
+      right: !isAccepted && result !== ComparisonResult.Equal && <StatusDot status={result} />,
+      onClick: () => onSelectMode(viewport),
+      active: selectedMode === viewport,
+    }));
+
+  return (
+    <WithTooltip
+      hasChrome={false}
+      placement="top"
+      trigger="hover"
+      tooltip={
+        <TooltipNote note={links ? "Switch mode" : `View mode: ${modeResults[0].viewport.name}`} />
+      }
+    >
+      {links ? (
+        <TooltipMenu placement="bottom" links={links}>
+          {icon}
+          {selectedMode.name}
+          <ArrowIcon icon="arrowdown" />
+        </TooltipMenu>
+      ) : (
+        <IconWrapper>{icon}</IconWrapper>
+      )}
+    </WithTooltip>
+  );
+};

src/screens/VisualTests/SnapshotComparison.tsx

@@ -6,10 +6,10 @@ import { BrowserSelector } from "../../components/BrowserSelector";
 import { IconButton } from "../../components/IconButton";
 import { ProgressIcon } from "../../components/icons/ProgressIcon";
 import { Bar, Col } from "../../components/layout";
+import { ModeSelector } from "../../components/ModeSelector";
 import { Placeholder } from "../../components/Placeholder";
 import { SnapshotImage } from "../../components/SnapshotImage";
 import { TooltipMenu } from "../../components/TooltipMenu";
-import { ViewportSelector } from "../../components/ViewportSelector";
 import {
   ComparisonResult,
   ReviewTestBatch,
@@ -41,9 +41,8 @@ export const SnapshotComparison = ({
   const [diffVisible, setDiffVisible] = useState(true);
   const [focusVisible, setFocusVisible] = useState(false);
 
-  const { selectedTest, selectedComparison, onSelectBrowser, onSelectViewport } = useTests(tests);
-  const { status, isInProgress, changeCount, browserResults, viewportResults } =
-    summarizeTests(tests);
+  const { selectedTest, selectedComparison, onSelectBrowser, onSelectMode } = useTests(tests);
+  const { status, isInProgress, changeCount, browserResults, modeResults } = summarizeTests(tests);
 
   return (
     <>
@@ -56,36 +55,24 @@ export const SnapshotComparison = ({
         </Bar>
       ) : (
         <Bar>
-          {viewportResults.length > 0 && (
+          {modeResults.length > 0 && (
             <Col>
-              <WithTooltip
-                tooltip={<TooltipNote note="Switch viewport" />}
-                trigger="hover"
-                hasChrome={false}
-              >
-                <ViewportSelector
-                  isAccepted={status === TestStatus.Accepted}
-                  selectedViewport={selectedTest.parameters.viewport}
-                  viewportResults={viewportResults}
-                  onSelectViewport={onSelectViewport}
-                />
-              </WithTooltip>
+              <ModeSelector
+                isAccepted={status === TestStatus.Accepted}
+                selectedMode={selectedTest.parameters.viewport}
+                modeResults={modeResults}
+                onSelectMode={onSelectMode}
+              />
             </Col>
           )}
           {browserResults.length > 0 && (
             <Col>
-              <WithTooltip
-                tooltip={<TooltipNote note="Switch browser" />}
-                trigger="hover"
-                hasChrome={false}
-              >
-                <BrowserSelector
-                  isAccepted={status === TestStatus.Accepted}
-                  selectedBrowser={selectedComparison.browser}
-                  browserResults={browserResults}
-                  onSelectBrowser={onSelectBrowser}
-                />
-              </WithTooltip>
+              <BrowserSelector
+                isAccepted={status === TestStatus.Accepted}
+                selectedBrowser={selectedComparison.browser}
+                browserResults={browserResults}
+                onSelectBrowser={onSelectBrowser}
+              />
             </Col>
           )}
           {selectedComparison?.result === ComparisonResult.Changed && (