Core: Disable interactions debugger on composed stories to avoid cross-origin error

code/core/src/component-testing/components/DetachedDebuggerMessage.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Link } from 'storybook/internal/components';
+
+import { styled } from 'storybook/theming';
+
+import { PANEL_ID } from '../constants';
+
+const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
+  textAlign: 'start',
+  padding: '11px 15px',
+  fontSize: `${typography.size.s2 - 1}px`,
+  fontWeight: typography.weight.regular,
+  lineHeight: '1rem',
+  background: background.app,
+  borderBottom: `1px solid ${color.border}`,
+  color: color.defaultText,
+  backgroundClip: 'padding-box',
+  position: 'relative',
+}));
+
+export const DetachedDebuggerMessage = ({ storyUrl }: { storyUrl: string }) => {
+  return (
+    <Wrapper>
+      Debugger controls are not available on composed Storybooks.{' '}
+      <Link
+        href={`${storyUrl}&addonPanel=${PANEL_ID}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        withArrow
+      >
+        Open in external Storybook
+      </Link>
+    </Wrapper>
+  );
+};

code/core/src/component-testing/components/InteractionsPanel.stories.tsx

@@ -109,6 +109,7 @@ export const Paused: Story = {
     isPlaying: true,
     interactions: getInteractions(CallStates.WAITING),
     controlStates: {
+      detached: false,
       start: false,
       back: false,
       goto: true,
@@ -151,6 +152,21 @@ export const DiscrepancyResult: Story = {
   },
 };
 
+export const DetachedDebugger = {
+  args: {
+    browserTestStatus: CallStates.DONE,
+    interactions: getInteractions(CallStates.DONE),
+    controlStates: {
+      detached: true,
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false,
+    },
+  },
+};
+
 export const RenderOnly: Story = {
   args: {
     browserTestStatus: CallStates.DONE,

code/core/src/component-testing/components/InteractionsPanel.tsx

@@ -6,6 +6,7 @@ import { styled } from 'storybook/theming';
 import { type Call, type CallStates, type ControlStates } from '../../instrumenter/types';
 import { INTERNAL_RENDER_CALL_ID } from '../constants';
 import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
+import { DetachedDebuggerMessage } from './DetachedDebuggerMessage';
 import { Empty } from './EmptyState';
 import { Interaction } from './Interaction';
 import { Subnav } from './Subnav';
@@ -21,6 +22,7 @@ export interface Controls {
 }
 
 interface InteractionsPanelProps {
+  storyUrl: string;
   controls: Controls;
   controlStates: ControlStates;
   interactions: (Call & {
@@ -86,6 +88,7 @@ const CaughtExceptionStack = styled.pre(({ theme }) => ({
 
 export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
   function InteractionsPanel({
+    storyUrl,
     calls,
     controls,
     controlStates,
@@ -102,10 +105,14 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     browserTestStatus,
   }) {
     const filter = useAnsiToHtmlFilter();
+    const hasRealInteractions = interactions.some((i) => i.id !== INTERNAL_RENDER_CALL_ID);
 
     return (
       <Container>
         {hasResultMismatch && <TestDiscrepancyMessage browserTestStatus={browserTestStatus} />}
+        {controlStates.detached && (hasRealInteractions || hasException) && (
+          <DetachedDebuggerMessage storyUrl={storyUrl} />
+        )}
         {(interactions.length > 0 || hasException) && (
           <Subnav
             controls={controls}
@@ -163,9 +170,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
           </CaughtException>
         )}
         <div ref={endRef} />
-        {!isPlaying &&
-          !caughtException &&
-          !interactions.some((i) => i.id !== INTERNAL_RENDER_CALL_ID) && <Empty />}
+        {!isPlaying && !caughtException && !hasRealInteractions && <Empty />}
       </Container>
     );
   }