Interactions: Add disable parameter for interactions panel

code/core/src/component-testing/constants.ts

@@ -1,5 +1,6 @@
 export const ADDON_ID = 'storybook/interactions';
 export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = 'interactions';
 
 export const DOCUMENTATION_LINK = 'writing-tests/integrations/vitest-addon';
 export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`;

code/core/src/component-testing/manager.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+
+import { PARAM_KEY } from './constants';
+import type { InteractionsParameters } from './types';
+import { isInteractionsDisabled } from './utils';
+
+describe('Interactions Panel Disable Parameter', () => {
+  it('should return true when interactions.disable is true', () => {
+    const parameters: InteractionsParameters = {
+      [PARAM_KEY]: {
+        disable: true,
+      },
+    };
+
+    expect(isInteractionsDisabled(parameters)).toBe(true);
+  });
+
+  it('should return false when interactions.disable is false', () => {
+    const parameters: InteractionsParameters = {
+      [PARAM_KEY]: {
+        disable: false,
+      },
+    };
+
+    expect(isInteractionsDisabled(parameters)).toBe(false);
+  });
+
+  it('should return false when interactions parameter is not provided', () => {
+    const parameters: InteractionsParameters = {};
+
+    expect(isInteractionsDisabled(parameters)).toBe(false);
+  });
+
+  it('should return false when disable is undefined', () => {
+    const parameters: InteractionsParameters = {
+      [PARAM_KEY]: {},
+    };
+
+    expect(isInteractionsDisabled(parameters)).toBe(false);
+  });
+});

code/core/src/component-testing/manager.tsx

@@ -7,6 +7,7 @@ import { type Combo, Consumer, addons, types } from 'storybook/manager-api';
 import { Panel } from './components/Panel';
 import { PanelTitle } from './components/PanelTitle';
 import { ADDON_ID, PANEL_ID } from './constants';
+import { isInteractionsDisabled } from './utils';
 
 export default addons.register(ADDON_ID, () => {
   if (globalThis?.FEATURES?.interactions) {
@@ -25,6 +26,7 @@ export default addons.register(ADDON_ID, () => {
       type: types.PANEL,
       title: () => <PanelTitle />,
       match: ({ viewMode }) => viewMode === 'story',
+      disabled: isInteractionsDisabled,
       render: ({ active }) => {
         return (
           <AddonPanel active={!!active}>

code/core/src/component-testing/types.ts

@@ -0,0 +1,21 @@
+export interface InteractionsParameters {
+  /**
+   * Interactions configuration
+   *
+   * @see https://storybook.js.org/docs/writing-tests/interaction-testing
+   */
+  interactions?: {
+    /**
+     * Removes the addon panel and disables the feature's behavior. If you wish to turn off this
+     * feature for the entire Storybook, you can set the option in your `main.js|ts` configuration
+     * file.
+     *
+     * @see https://storybook.js.org/docs/writing-tests/interaction-testing#disable
+     */
+    disable?: boolean;
+  };
+}
+
+export interface InteractionsTypes {
+  parameters: InteractionsParameters;
+}

code/core/src/component-testing/utils.ts

@@ -1,8 +1,16 @@
+import type { API_StoryEntry } from 'storybook/internal/types';
+
 import Filter from 'ansi-to-html';
 import { type StorybookTheme, useTheme } from 'storybook/theming';
 // eslint-disable-next-line depend/ban-dependencies
 import stripAnsi from 'strip-ansi';
 
+import { PARAM_KEY } from './constants';
+
+export function isInteractionsDisabled(parameters: API_StoryEntry['parameters']): boolean {
+  return !!parameters?.[PARAM_KEY]?.disable;
+}
+
 export function isTestAssertionError(error: unknown) {
   return isChaiError(error) || isJestError(error);
 }

code/core/template/stories/component-play.stories.ts

@@ -24,3 +24,11 @@ export default {
 
 export const StoryOne = {};
 export const StoryTwo = {};
+
+export const DisabledInteractions = {
+  parameters: {
+    interactions: {
+      disable: true,
+    },
+  },
+};