Open addon panel when notification is clicked, and pass new duration option

src/SidebarTop.tsx

@@ -1,7 +1,7 @@
 import { type API, useChannel, useStorybookState } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
 import pluralize from "pluralize";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import { SidebarTopButton } from "./components/SidebarTopButton";
 import {
@@ -47,6 +47,19 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
     (value) => value[ADDON_ID]?.status === "warn"
   );
 
+  const openVisualTestsPanel = useCallback(() => {
+    setOptions({ selectedPanel: PANEL_ID });
+    togglePanel(true);
+  }, [setOptions, togglePanel]);
+
+  const clickNotification = useCallback(
+    ({ onDismiss }) => {
+      onDismiss();
+      openVisualTestsPanel();
+    },
+    [openVisualTestsPanel]
+  );
+
   useEffect(() => {
     if (localBuildProgress?.currentStep === lastStep.current) return;
     lastStep.current = localBuildProgress?.currentStep;
@@ -62,10 +75,13 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "passed",
           color: color.positive,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        duration: 8_000,
+        onClick: clickNotification,
       });
-      setTimeout(() => clearNotification(`${ADDON_ID}/build-initialize`), 10_000);
+
+      // Kept for backwards compatibility (before `duration` support was added)
+      setTimeout(() => clearNotification(`${ADDON_ID}/build-initialize`), 8_000);
     }
 
     if (localBuildProgress?.currentStep === "aborted") {
@@ -79,10 +95,13 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "failed",
           color: color.negative,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        duration: 8_000,
+        onClick: clickNotification,
       });
-      setTimeout(() => clearNotification(`${ADDON_ID}/build-aborted`), 10_000);
+
+      // Kept for backwards compatibility (before `duration` support was added)
+      setTimeout(() => clearNotification(`${ADDON_ID}/build-aborted`), 8_000);
     }
 
     if (localBuildProgress?.currentStep === "complete") {
@@ -104,10 +123,13 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "passed",
           color: color.positive,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        duration: 8_000,
+        onClick: clickNotification,
       });
-      setTimeout(() => clearNotification(`${ADDON_ID}/build-complete`), 10_000);
+
+      // Kept for backwards compatibility (before `duration` support was added)
+      setTimeout(() => clearNotification(`${ADDON_ID}/build-complete`), 8_000);
     }
 
     if (localBuildProgress?.currentStep === "error") {
@@ -121,8 +143,8 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "failed",
           color: color.negative,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        onClick: clickNotification,
       });
     }
 
@@ -138,13 +160,14 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "failed",
           color: color.negative,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        onClick: clickNotification,
       });
     }
   }, [
     addNotification,
     clearNotification,
+    clickNotification,
     localBuildProgress?.currentStep,
     localBuildProgress?.errorCount,
     localBuildProgress?.changeCount,
@@ -172,10 +195,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
       isRunning={isRunning}
       localBuildProgress={localBuildProgress}
       warning={warning}
-      clickWarning={() => {
-        setOptions({ selectedPanel: PANEL_ID });
-        togglePanel(true);
-      }}
+      clickWarning={openVisualTestsPanel}
       startBuild={startBuild}
       stopBuild={stopBuild}
     />

src/screens/Authentication/Verify.tsx

@@ -1,4 +1,4 @@
-import { styled, useTheme } from "@storybook/theming";
+import { styled } from "@storybook/theming";
 import React, { useCallback, useRef } from "react";
 import { useClient } from "urql";
 
@@ -63,7 +63,6 @@ export const Verify = ({
 }: VerifyProps) => {
   const client = useClient();
   const onError = useErrorNotification();
-  const theme = useTheme();
 
   const { user_code: userCode, verificationUrl } = exchangeParameters;
 

src/screens/VisualTests/VisualTests.tsx

@@ -3,6 +3,7 @@ import type { API_StatusState } from "@storybook/types";
 import React, { useCallback, useEffect, useState } from "react";
 import { useMutation } from "urql";
 
+import { PANEL_ID } from "../../constants";
 import { getFragment, graphql } from "../../gql";
 import {
   ReviewTestBatch,
@@ -191,7 +192,7 @@ export const VisualTestsWithoutSelectedBuildId = ({
   storyId,
 }: VisualTestsProps) => {
   const managerApi = useStorybookApi();
-  const { addNotification } = managerApi;
+  const { addNotification, setOptions, togglePanel } = managerApi;
   const buildInfo = useBuild({ projectId, storyId, gitInfo, selectedBuildInfo });
 
   const {
@@ -208,6 +209,15 @@ export const VisualTestsWithoutSelectedBuildId = ({
     userCanReview,
   } = buildInfo;
 
+  const clickNotification = useCallback(
+    ({ onDismiss }) => {
+      onDismiss();
+      setOptions({ selectedPanel: PANEL_ID });
+      togglePanel(true);
+    },
+    [setOptions, togglePanel]
+  );
+
   const reviewState = useReview({
     buildIsReviewable: !!selectedBuild && selectedBuild.id === lastBuildOnBranch?.id,
     userCanReview,
@@ -216,8 +226,6 @@ export const VisualTestsWithoutSelectedBuildId = ({
       if (err instanceof Error) {
         addNotification({
           id: "chromatic/errorAccepting",
-          // @ts-expect-error we need a better API for not passing a link
-          link: undefined,
           content: {
             headline: `Failed to ${
               update.status === ReviewTestInputStatus.Accepted ? "accept" : "unaccept"
@@ -228,6 +236,9 @@ export const VisualTestsWithoutSelectedBuildId = ({
             name: "cross",
             color: "red",
           },
+          // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+          duration: 8_000,
+          onClick: clickNotification,
         });
       }
     },

src/utils/useErrorNotification.ts

@@ -2,12 +2,21 @@ import { useStorybookApi } from "@storybook/manager-api";
 import { color } from "@storybook/theming";
 import { useCallback } from "react";
 
-import { ADDON_ID } from "../constants";
+import { ADDON_ID, PANEL_ID } from "../constants";
 
 export function useErrorNotification() {
   const api = useStorybookApi();
 
-  const { addNotification } = api;
+  const { addNotification, setOptions, togglePanel } = api;
+  const clickNotification = useCallback(
+    ({ onDismiss }) => {
+      onDismiss();
+      setOptions({ selectedPanel: PANEL_ID });
+      togglePanel(true);
+    },
+    [setOptions, togglePanel]
+  );
+
   return useCallback(
     (headline: string, err: any) => {
       addNotification({
@@ -20,10 +29,10 @@ export function useErrorNotification() {
           name: "failed",
           color: color.negative,
         },
-        // @ts-expect-error SB needs a proper API for no link
-        link: undefined,
+        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
+        onClick: clickNotification,
       });
     },
-    [addNotification]
+    [addNotification, clickNotification]
   );
 }