@storybook/addon-interactions 6.4.0-beta.32 → 6.4.0-rc.10

package/dist/esm/components/Interaction/Interaction.js

@@ -49,7 +49,7 @@ var RowContainer = styled('div', {
     borderBottom: "1px solid ".concat(theme.appBorderColor),
     fontFamily: typography.fonts.base,
     fontSize: 13
-  }, call.state === CallStates.ERROR && {
+  }, call.status === CallStates.ERROR && {
     backgroundColor: theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning
   });
 });
@@ -71,17 +71,17 @@ var RowLabel = styled('button', {
     margin: 0,
     padding: '8px 15px',
     textAlign: 'start',
-    cursor: disabled || call.state === CallStates.ERROR ? 'default' : 'pointer',
-    '&:hover': {
+    cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
+    '&:hover': disabled ? {} : {
       background: theme.background.hoverable
     },
     '&:focus-visible': {
       outline: 0,
-      boxShadow: "inset 3px 0 0 0 ".concat(call.state === CallStates.ERROR ? theme.color.warning : theme.color.secondary),
-      background: call.state === CallStates.ERROR ? 'transparent' : theme.background.hoverable
+      boxShadow: "inset 3px 0 0 0 ".concat(call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary),
+      background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable
     },
     '& > div': {
-      opacity: call.state === CallStates.WAITING ? 0.5 : 1
+      opacity: call.status === CallStates.WAITING ? 0.5 : 1
     }
   };
 });
@@ -93,9 +93,8 @@ var RowMessage = styled('pre')({
 export var Interaction = function Interaction(_ref3) {
   var call = _ref3.call,
       callsById = _ref3.callsById,
-      onClick = _ref3.onClick,
-      isDisabled = _ref3.isDisabled,
-      isDebuggingEnabled = _ref3.isDebuggingEnabled;
+      controls = _ref3.controls,
+      controlStates = _ref3.controlStates;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -106,16 +105,18 @@ export var Interaction = function Interaction(_ref3) {
     call: call
   }, /*#__PURE__*/React.createElement(RowLabel, {
     call: call,
-    onClick: onClick,
-    disabled: isDebuggingEnabled ? isDisabled : true,
+    onClick: function onClick() {
+      return controls.goto(call.id);
+    },
+    disabled: !controlStates.goto,
     onMouseEnter: function onMouseEnter() {
-      return isDebuggingEnabled && setIsHovered(true);
+      return controlStates.goto && setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return isDebuggingEnabled && setIsHovered(false);
+      return controlStates.goto && setIsHovered(false);
     }
   }, /*#__PURE__*/React.createElement(StatusIcon, {
-    status: isHovered ? CallStates.ACTIVE : call.state
+    status: isHovered ? CallStates.ACTIVE : call.status
   }), /*#__PURE__*/React.createElement(MethodCallWrapper, {
     style: {
       marginLeft: 6,
@@ -124,5 +125,5 @@ export var Interaction = function Interaction(_ref3) {
   }, /*#__PURE__*/React.createElement(MethodCall, {
     call: call,
     callsById: callsById
-  }))), call.state === CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
+  }))), call.status === CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
 };

package/dist/esm/components/Interaction/Interaction.stories.js

@@ -16,13 +16,14 @@ import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
 import { getCall } from '../../mocks';
 import { Interaction } from './Interaction';
+import SubnavStories from '../Subnav/Subnav.stories';
 export default {
   title: 'Addons/Interactions/Interaction',
   component: Interaction,
   args: {
     callsById: new Map(),
-    isDisabled: false,
-    isDebuggingEnabled: true
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates
   }
 };
 export var Active = {
@@ -47,7 +48,9 @@ export var Done = {
 };
 export var Disabled = {
   args: Object.assign({}, Done.args, {
-    isDisabled: true
+    controlStates: Object.assign({}, SubnavStories.args.controlStates, {
+      goto: false
+    })
   })
 };
 export var Hovered = Object.assign({}, Done, {

package/dist/esm/components/Subnav/Subnav.js

@@ -84,15 +84,10 @@ var withTooltipModifiers = [{
   }
 }];
 export var Subnav = function Subnav(_ref6) {
-  var isDisabled = _ref6.isDisabled,
-      hasNext = _ref6.hasNext,
-      hasPrevious = _ref6.hasPrevious,
-      storyFileName = _ref6.storyFileName,
+  var controls = _ref6.controls,
+      controlStates = _ref6.controlStates,
       status = _ref6.status,
-      onStart = _ref6.onStart,
-      onPrevious = _ref6.onPrevious,
-      onNext = _ref6.onNext,
-      onEnd = _ref6.onEnd,
+      storyFileName = _ref6.storyFileName,
       onScrollToEnd = _ref6.onScrollToEnd;
   var buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
   return /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(StyledSubnav, null, /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(StatusBadge, {
@@ -103,49 +98,49 @@ export var Subnav = function Subnav(_ref6) {
   }, buttonText), /*#__PURE__*/React.createElement(StyledSeparator, null), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.start ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go to start"
     })
   }, /*#__PURE__*/React.createElement(RewindButton, {
-    onClick: onStart,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.start,
+    disabled: !controlStates.start
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "rewind"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasPrevious ? 'hover' : 'none',
+    trigger: controlStates.back ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go back"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onPrevious,
-    disabled: isDisabled || !hasPrevious
+    onClick: controls.back,
+    disabled: !controlStates.back
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "playback"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
     hasChrome: false,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.next ? 'hover' : 'none',
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go forward"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onNext,
-    disabled: isDisabled || !hasNext
+    onClick: controls.next,
+    disabled: !controlStates.next
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "playnext"
   }))), /*#__PURE__*/React.createElement(WithTooltip, {
     modifiers: withTooltipModifiers,
-    trigger: hasNext ? 'hover' : 'none',
+    trigger: controlStates.end ? 'hover' : 'none',
     hasChrome: false,
     tooltip: /*#__PURE__*/React.createElement(Note, {
       note: "Go to end"
     })
   }, /*#__PURE__*/React.createElement(StyledIconButton, {
-    onClick: onEnd,
-    disabled: isDisabled || !hasNext
+    onClick: controls.end,
+    disabled: !controlStates.end
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "fastforward"
   })))), storyFileName && /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(StyledLocation, null, storyFileName))));

package/dist/esm/components/Subnav/Subnav.stories.js

@@ -1,14 +1,25 @@
+import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { Subnav } from './Subnav';
 export default {
   title: 'Addons/Interactions/Subnav',
   component: Subnav,
   args: {
-    onPrevious: function onPrevious() {},
-    onNext: function onNext() {},
-    onReplay: function onReplay() {},
-    goToStart: function goToStart() {},
-    goToEnd: function goToEnd() {},
+    controls: {
+      start: action('start'),
+      back: action('back'),
+      goto: action('goto'),
+      next: action('next'),
+      end: action('end')
+    },
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: false,
+      end: false
+    },
     storyFileName: 'Subnav.stories.tsx',
     hasNext: true,
     hasPrevious: true
@@ -29,17 +40,42 @@ export var Runs = {
     status: CallStates.WAITING
   }
 };
-export var AtTheBeginning = {
-  name: 'at the beginning',
+export var AtStart = {
   args: {
-    status: CallStates.DONE,
-    hasPrevious: false
+    status: CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
-export var AtTheEnd = {
-  name: 'at the end',
+export var Midway = {
   args: {
-    status: CallStates.DONE,
-    hasNext: false
+    status: CallStates.WAITING,
+    controlStates: {
+      debugger: true,
+      start: true,
+      back: true,
+      goto: true,
+      next: true,
+      end: true
+    }
+  }
+};
+export var Locked = {
+  args: {
+    status: CallStates.ACTIVE,
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false
+    }
   }
 };

package/dist/esm/mocks/index.js

@@ -1,8 +1,9 @@
 import "core-js/modules/es.object.assign.js";
 import { CallStates } from '@storybook/instrumenter';
-export var getCall = function getCall(state) {
+export var getCall = function getCall(status) {
   var defaultData = {
     id: 'addons-interactions-accountform--standard-email-filled [3] change',
+    cursor: 0,
     path: ['fireEvent'],
     method: 'change',
     storyId: 'addons-interactions-accountform--standard-email-filled',
@@ -16,11 +17,11 @@ export var getCall = function getCall(state) {
     }],
     interceptable: true,
     retain: false,
-    state: state
+    status: status
   };
   var overrides = CallStates.ERROR ? {
     exception: {
-      callId: '',
+      name: 'Error',
       stack: '',
       message: "Things didn't work!"
     }

package/dist/modern/Panel.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import global from 'global';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import { useChannel, useParameter, useStorybookState } from '@storybook/api';
+import { useChannel, useParameter } from '@storybook/api';
 import { STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import { AddonPanel, Link, Placeholder } from '@storybook/components';
 import { EVENTS, CallStates } from '@storybook/instrumenter';
@@ -13,11 +13,14 @@ import { styled } from '@storybook/theming';
 import { StatusIcon } from './components/StatusIcon/StatusIcon';
 import { Subnav } from './components/Subnav/Subnav';
 import { Interaction } from './components/Interaction/Interaction';
-const {
-  FEATURES
-} = global;
-const pendingStates = [CallStates.ACTIVE, CallStates.WAITING];
-const completedStates = [CallStates.DONE, CallStates.ERROR];
+const INITIAL_CONTROL_STATES = {
+  debugger: false,
+  start: false,
+  back: false,
+  goto: false,
+  next: false,
+  end: false
+};
 const TabIcon = styled(StatusIcon)({
   marginLeft: 5
 });
@@ -31,44 +34,31 @@ const TabStatus = ({
 
 export const AddonPanelPure = /*#__PURE__*/React.memo((_ref) => {
   let {
+    calls,
+    controls,
+    controlStates,
     interactions,
-    isDisabled,
-    hasPrevious,
-    hasNext,
     fileName,
     hasException,
     isPlaying,
-    onStart,
-    onPrevious,
-    onNext,
-    onEnd,
     onScrollToEnd,
-    calls,
-    onInteractionClick,
-    endRef,
-    isDebuggingEnabled
+    endRef
   } = _ref,
-      panelProps = _objectWithoutPropertiesLoose(_ref, ["interactions", "isDisabled", "hasPrevious", "hasNext", "fileName", "hasException", "isPlaying", "onStart", "onPrevious", "onNext", "onEnd", "onScrollToEnd", "calls", "onInteractionClick", "endRef", "isDebuggingEnabled"]);
+      panelProps = _objectWithoutPropertiesLoose(_ref, ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "onScrollToEnd", "endRef"]);
 
-  return /*#__PURE__*/React.createElement(AddonPanel, panelProps, isDebuggingEnabled && interactions.length > 0 && /*#__PURE__*/React.createElement(Subnav, {
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
-    storyFileName: fileName,
+  return /*#__PURE__*/React.createElement(AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(Subnav, {
+    controls: controls,
+    controlStates: controlStates,
     status: // eslint-disable-next-line no-nested-ternary
     isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
+    storyFileName: fileName,
     onScrollToEnd: onScrollToEnd
   }), interactions.map(call => /*#__PURE__*/React.createElement(Interaction, {
     key: call.id,
     call: call,
     callsById: calls,
-    isDebuggingEnabled: isDebuggingEnabled,
-    isDisabled: isDisabled,
-    onClick: () => onInteractionClick(call.id)
+    controls: controls,
+    controlStates: controlStates
   })), /*#__PURE__*/React.createElement("div", {
     ref: endRef
   }), !isPlaying && interactions.length === 0 && /*#__PURE__*/React.createElement(Placeholder, null, "No interactions found", /*#__PURE__*/React.createElement(Link, {
@@ -78,13 +68,15 @@ export const AddonPanelPure = /*#__PURE__*/React.memo((_ref) => {
   }, "Learn how to add interactions to your story")));
 });
 export const Panel = props => {
-  const [isLocked, setLock] = React.useState(false);
-  const [isPlaying, setPlaying] = React.useState(true);
-  const [scrollTarget, setScrollTarget] = React.useState();
+  const [storyId, setStoryId] = React.useState();
+  const [controlStates, setControlStates] = React.useState(INITIAL_CONTROL_STATES);
+  const [isPlaying, setPlaying] = React.useState(false);
+  const [scrollTarget, setScrollTarget] = React.useState(); // Calls are tracked in a ref so we don't needlessly rerender.
+
   const calls = React.useRef(new Map());
 
   const setCall = (_ref2) => {
-    let call = _objectWithoutPropertiesLoose(_ref2, ["state"]);
+    let call = _objectWithoutPropertiesLoose(_ref2, ["status"]);
 
     return calls.current.set(call.id, call);
   };
@@ -92,9 +84,9 @@ export const Panel = props => {
   const [log, setLog] = React.useState([]);
   const interactions = log.map(({
     callId,
-    state
+    status
   }) => Object.assign({}, calls.current.get(callId), {
-    state
+    status
   }));
   const endRef = React.useRef();
   React.useEffect(() => {
@@ -106,18 +98,33 @@ export const Panel = props => {
   }, []);
   const emit = useChannel({
     [EVENTS.CALL]: setCall,
-    [EVENTS.SYNC]: setLog,
-    [EVENTS.LOCK]: setLock,
-    [STORY_RENDER_PHASE_CHANGED]: ({
-      newPhase
-    }) => {
-      setLock(false);
-      setPlaying(newPhase === 'playing');
+    [EVENTS.SYNC]: payload => {
+      setControlStates(payload.controlStates);
+      setLog(payload.logItems);
+    },
+    [STORY_RENDER_PHASE_CHANGED]: event => {
+      setStoryId(event.storyId);
+      setPlaying(event.newPhase === 'playing');
     }
-  });
-  const {
-    storyId
-  } = useStorybookState();
+  }, []);
+  const controls = React.useMemo(() => ({
+    start: () => emit(EVENTS.START, {
+      storyId
+    }),
+    back: () => emit(EVENTS.BACK, {
+      storyId
+    }),
+    goto: callId => emit(EVENTS.GOTO, {
+      storyId,
+      callId
+    }),
+    next: () => emit(EVENTS.NEXT, {
+      storyId
+    }),
+    end: () => emit(EVENTS.END, {
+      storyId
+    })
+  }), [storyId]);
   const storyFilePath = useParameter('fileName', '');
   const [fileName] = storyFilePath.toString().split('/').slice(-1);
 
@@ -126,50 +133,21 @@ export const Panel = props => {
     block: 'end'
   });
 
-  const isDebuggingEnabled = FEATURES.interactionsDebugger === true;
   const showStatus = log.length > 0 && !isPlaying;
-  const isDebugging = log.some(item => pendingStates.includes(item.state));
-  const hasPrevious = log.some(item => completedStates.includes(item.state));
-  const hasNext = log.some(item => item.state === CallStates.WAITING);
-  const hasActive = log.some(item => item.state === CallStates.ACTIVE);
-  const hasException = log.some(item => item.state === CallStates.ERROR);
-  const isDisabled = isDebuggingEnabled ? hasActive || isLocked || isPlaying && !isDebugging : true;
-  const onStart = React.useCallback(() => emit(EVENTS.START, {
-    storyId
-  }), [storyId]);
-  const onPrevious = React.useCallback(() => emit(EVENTS.BACK, {
-    storyId
-  }), [storyId]);
-  const onNext = React.useCallback(() => emit(EVENTS.NEXT, {
-    storyId
-  }), [storyId]);
-  const onEnd = React.useCallback(() => emit(EVENTS.END, {
-    storyId
-  }), [storyId]);
-  const onInteractionClick = React.useCallback(callId => emit(EVENTS.GOTO, {
-    storyId,
-    callId
-  }), [storyId]);
+  const hasException = log.some(item => item.status === CallStates.ERROR);
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: "interactions"
   }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
     status: CallStates.ERROR
   }) : ` (${interactions.length})`)), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
+    calls: calls.current,
+    controls: controls,
+    controlStates: controlStates,
     interactions: interactions,
-    isDisabled: isDisabled,
-    hasPrevious: hasPrevious,
-    hasNext: hasNext,
     fileName: fileName,
     hasException: hasException,
     isPlaying: isPlaying,
-    calls: calls.current,
     endRef: endRef,
-    isDebuggingEnabled: isDebuggingEnabled,
-    onStart: onStart,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnd: onEnd,
-    onInteractionClick: onInteractionClick,
     onScrollToEnd: scrollTarget && scrollToTarget
   }, props)));
 };

package/dist/modern/Panel.stories.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { getCall } from './mocks';
 import { AddonPanelPure } from './Panel';
+import SubnavStories from './components/Subnav/Subnav.stories';
 const StyledWrapper = styled.div(({
   theme
 }) => ({
@@ -27,16 +29,14 @@ export default {
   },
   args: {
     calls: new Map(),
-    endRef: null,
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
+    interactions: [getCall(CallStates.DONE)],
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
-    hasNext: false,
-    hasPrevious: true,
-    interactions: [getCall(CallStates.DONE)],
-    isDisabled: false,
     isPlaying: false,
-    showTabIcon: false,
-    isDebuggingEnabled: true,
+    onScrollToEnd: action('onScrollToEnd'),
+    endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true
   }
@@ -49,7 +49,15 @@ export const Passing = {
 export const Paused = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.WAITING)]
+    interactions: [getCall(CallStates.WAITING)],
+    controlStates: {
+      debugger: true,
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true
+    }
   }
 };
 export const Playing = {
@@ -66,7 +74,9 @@ export const Failed = {
 };
 export const WithDebuggingDisabled = {
   args: {
-    isDebuggingEnabled: false
+    controlStates: Object.assign({}, SubnavStories.args.controlStates, {
+      debugger: false
+    })
   }
 };
 export const NoInteractions = {

package/dist/modern/components/AccountForm/addon-interactions.stories.js

@@ -31,6 +31,24 @@ Demo.play = async ({
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
 };
 
+export const FindBy = args => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  React.useEffect(() => {
+    setTimeout(() => setIsLoading(false), 500);
+  }, []);
+  return isLoading ? /*#__PURE__*/React.createElement("div", null, "Loading...") : /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, "Loaded!");
+};
+
+FindBy.play = async ({
+  canvasElement
+}) => {
+  const canvas = within(canvasElement);
+  await canvas.findByRole('button');
+  await expect(true).toBe(true);
+};
+
 export const WaitFor = args => /*#__PURE__*/React.createElement("button", {
   type: "button",
   onClick: () => setTimeout(() => args.onSubmit('clicked'), 100)
@@ -43,6 +61,7 @@ WaitFor.play = async ({
   await userEvent.click(await within(canvasElement).findByText('Click'));
   await waitFor(async () => {
     await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
+    await expect(true).toBe(true);
   });
 };
 

package/dist/modern/components/Interaction/Interaction.js

@@ -20,7 +20,7 @@ const RowContainer = styled('div', {
   borderBottom: `1px solid ${theme.appBorderColor}`,
   fontFamily: typography.fonts.base,
   fontSize: 13
-}, call.state === CallStates.ERROR && {
+}, call.status === CallStates.ERROR && {
   backgroundColor: theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning
 }));
 const RowLabel = styled('button', {
@@ -39,17 +39,17 @@ const RowLabel = styled('button', {
   margin: 0,
   padding: '8px 15px',
   textAlign: 'start',
-  cursor: disabled || call.state === CallStates.ERROR ? 'default' : 'pointer',
-  '&:hover': {
+  cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
+  '&:hover': disabled ? {} : {
     background: theme.background.hoverable
   },
   '&:focus-visible': {
     outline: 0,
-    boxShadow: `inset 3px 0 0 0 ${call.state === CallStates.ERROR ? theme.color.warning : theme.color.secondary}`,
-    background: call.state === CallStates.ERROR ? 'transparent' : theme.background.hoverable
+    boxShadow: `inset 3px 0 0 0 ${call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary}`,
+    background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable
   },
   '& > div': {
-    opacity: call.state === CallStates.WAITING ? 0.5 : 1
+    opacity: call.status === CallStates.WAITING ? 0.5 : 1
   }
 }));
 const RowMessage = styled('pre')({
@@ -60,21 +60,20 @@ const RowMessage = styled('pre')({
 export const Interaction = ({
   call,
   callsById,
-  onClick,
-  isDisabled,
-  isDebuggingEnabled
+  controls,
+  controlStates
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   return /*#__PURE__*/React.createElement(RowContainer, {
     call: call
   }, /*#__PURE__*/React.createElement(RowLabel, {
     call: call,
-    onClick: onClick,
-    disabled: isDebuggingEnabled ? isDisabled : true,
-    onMouseEnter: () => isDebuggingEnabled && setIsHovered(true),
-    onMouseLeave: () => isDebuggingEnabled && setIsHovered(false)
+    onClick: () => controls.goto(call.id),
+    disabled: !controlStates.goto,
+    onMouseEnter: () => controlStates.goto && setIsHovered(true),
+    onMouseLeave: () => controlStates.goto && setIsHovered(false)
   }, /*#__PURE__*/React.createElement(StatusIcon, {
-    status: isHovered ? CallStates.ACTIVE : call.state
+    status: isHovered ? CallStates.ACTIVE : call.status
   }), /*#__PURE__*/React.createElement(MethodCallWrapper, {
     style: {
       marginLeft: 6,
@@ -83,5 +82,5 @@ export const Interaction = ({
   }, /*#__PURE__*/React.createElement(MethodCall, {
     call: call,
     callsById: callsById
-  }))), call.state === CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
+  }))), call.status === CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
 };