From 87b623baefa75bacc6b6e5b51fe02ce7cf0d6955 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 25 Oct 2024 16:55:54 +0200
Subject: [PATCH 1/2] Track test provider state in sessionStorage

---
 .../components/sidebar/SidebarBottom.tsx      | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index 48bf60a5f095..851731270b98 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -30,6 +30,8 @@ const SIDEBAR_BOTTOM_SPACER_ID = 'sidebar-bottom-spacer';
 // This ID is used by some integrators to target the (fixed position) sidebar bottom element so it should remain stable.
 const SIDEBAR_BOTTOM_WRAPPER_ID = 'sidebar-bottom-wrapper';
 
+const STORAGE_KEY = '@storybook/manager/test-providers';
+
 const initialTestProviderState: TestProviderState = {
   details: {} as { [key: string]: any },
   cancellable: false,
@@ -97,13 +99,17 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [warningsActive, setWarningsActive] = useState(false);
   const [errorsActive, setErrorsActive] = useState(false);
-  const [testProviders, setTestProviders] = useState<TestProviders>(() =>
-    Object.fromEntries(
+  const [testProviders, setTestProviders] = useState<TestProviders>(() => {
+    let sessionState: TestProviders = {};
+    try {
+      sessionState = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}');
+    } catch (_) {}
+    return Object.fromEntries(
       Object.entries(api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER)).map(
-        ([id, config]) => [id, { ...config, ...initialTestProviderState }]
+        ([id, config]) => [id, { ...config, ...initialTestProviderState, ...sessionState[id] }]
       )
-    )
-  );
+    );
+  });
 
   const warnings = Object.values(status).filter((statusByAddonId) =>
     Object.values(statusByAddonId).some((value) => value?.status === 'warn')
@@ -116,7 +122,11 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
 
   const updateTestProvider = useCallback(
     (id: TestProviderId, update: Partial<TestProviderState>) =>
-      setTestProviders((state) => ({ ...state, [id]: { ...state[id], ...update } })),
+      setTestProviders((state) => {
+        const newValue = { ...state, [id]: { ...state[id], ...update } };
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(newValue));
+        return newValue;
+      }),
     []
   );
 
@@ -130,6 +140,7 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
         progress: undefined,
       };
       setTestProviders((state) => ({ ...state, [id]: { ...state[id], ...startingState } }));
+      sessionStorage.removeItem(STORAGE_KEY);
       api.experimental_updateStatus(id, (state = {}) =>
         Object.fromEntries(Object.keys(state).map((key) => [key, null]))
       );

From 15dcb362f0fb6e9c6dcbe4e425c729b3d4dfbde2 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 28 Oct 2024 14:22:57 +0100
Subject: [PATCH 2/2] Prevent clearing sessionStorage for other test providers
 when clearing state for one

---
 .../src/manager/components/sidebar/SidebarBottom.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index 851731270b98..4bd087e681ca 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -131,21 +131,19 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
   );
 
   const clearState = useCallback(
-    ({ providerId: id }: { providerId: TestProviderId }) => {
-      const startingState: Partial<TestProviderState> = {
+    ({ providerId }: { providerId: TestProviderId }) => {
+      updateTestProvider(providerId, {
         cancelling: false,
         running: true,
         failed: false,
         crashed: false,
         progress: undefined,
-      };
-      setTestProviders((state) => ({ ...state, [id]: { ...state[id], ...startingState } }));
-      sessionStorage.removeItem(STORAGE_KEY);
-      api.experimental_updateStatus(id, (state = {}) =>
+      });
+      api.experimental_updateStatus(providerId, (state = {}) =>
         Object.fromEntries(Object.keys(state).map((key) => [key, null]))
       );
     },
-    [api]
+    [api, updateTestProvider]
   );
 
   const onRunTests = useCallback(