Merge pull request #29501 from storybookjs/yann/hide-testing-module-o…

…n-prod Addon Test: Only render the TestingModule component in development mode
storybookjs · Nov 1, 2024 · 46e37f1 · 46e37f1
2 parents 6663c5e + 54c8712
commit 46e37f1
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 20 deletions.
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -85,6 +85,7 @@ const meta = {
     refs: {},
     status: {},
     showCreateStoryButton: true,
+    isDevelopment: true,
   },
   decorators: [
     (storyFn) => (

diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -109,7 +109,6 @@ const useCombination = (
   return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
 
-const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
 const isRendererReact = global.STORYBOOK_RENDERER === 'react';
 
 export interface SidebarProps extends API_LoadedRefData {
@@ -124,6 +123,7 @@ export interface SidebarProps extends API_LoadedRefData {
   onMenuClick?: HeadingProps['onMenuClick'];
   showCreateStoryButton?: boolean;
   indexJson?: StoryIndex;
+  isDevelopment?: boolean;
 }
 export const Sidebar = React.memo(function Sidebar({
   // @ts-expect-error (non strict)
@@ -138,6 +138,7 @@ export const Sidebar = React.memo(function Sidebar({
   extra,
   menuHighlighted = false,
   enableShortcuts = true,
+  isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
   refs = {},
   onMenuClick,
   showCreateStoryButton = isDevelopment && isRendererReact,
@@ -229,7 +230,7 @@ export const Sidebar = React.memo(function Sidebar({
             )}
           </Search>
         </Top>
-        {isMobile || isLoading ? null : <SidebarBottom />}
+        {isMobile || isLoading ? null : <SidebarBottom isDevelopment={isDevelopment} />}
       </ScrollArea>
     </Container>
   );

diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
@@ -6,6 +6,7 @@ import { SidebarBottomBase } from './SidebarBottom';
 export default {
   component: SidebarBottomBase,
   args: {
+    isDevelopment: true,
     api: {
       clearNotification: fn(),
       emit: fn(),

diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -92,9 +92,15 @@ interface SidebarBottomProps {
   api: API;
   notifications: State['notifications'];
   status: State['status'];
+  isDevelopment?: boolean;
 }
 
-export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => {
+export const SidebarBottomBase = ({
+  api,
+  notifications = [],
+  status = {},
+  isDevelopment,
+}: SidebarBottomProps) => {
   const spacerRef = useRef<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [warningsActive, setWarningsActive] = useState(false);
@@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
     <div id={SIDEBAR_BOTTOM_SPACER_ID} ref={spacerRef}>
       <Content id={SIDEBAR_BOTTOM_WRAPPER_ID} ref={wrapperRef}>
         <NotificationList notifications={notifications} clearNotification={api.clearNotification} />
-        <TestingModule
-          {...{
-            testProviders: testProvidersArray,
-            errorCount: errors.length,
-            errorsActive,
-            setErrorsActive,
-            warningCount: warnings.length,
-            warningsActive,
-            setWarningsActive,
-            onRunTests,
-            onCancelTests,
-            onSetWatchMode,
-          }}
-        />
+        {isDevelopment && (
+          <TestingModule
+            {...{
+              testProviders: testProvidersArray,
+              errorCount: errors.length,
+              errorsActive,
+              setErrorsActive,
+              warningCount: warnings.length,
+              warningsActive,
+              setWarningsActive,
+              onRunTests,
+              onCancelTests,
+              onSetWatchMode,
+            }}
+          />
+        )}
       </Content>
     </div>
   );
 };
 
-export const SidebarBottom = () => {
+export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => {
   const api = useStorybookApi();
   const { notifications, status } = useStorybookState();
-  return <SidebarBottomBase api={api} notifications={notifications} status={status} />;
+  return (
+    <SidebarBottomBase
+      api={api}
+      notifications={notifications}
+      status={status}
+      isDevelopment={isDevelopment}
+    />
+  );
 };
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -229,7 +229,12 @@ export const TestingModule = ({
   const testing = testProviders.length > 0;
 
   return (
-    <Outline running={running} crashed={crashed} failed={failed || errorCount > 0}>
+    <Outline
+      id="storybook-testing-module"
+      running={running}
+      crashed={crashed}
+      failed={failed || errorCount > 0}
+    >
       <Card>
         <Collapsible
           style={{