feat: add disabled states to playback functionality

addons/interactions/src/Panel.tsx

@@ -248,6 +248,8 @@ export const Panel: React.FC<PanelProps> = (props) => {
         onNext={next}
         onReplay={stop}
         goToEnd={stop}
+        hasPrevious={hasPrevious}
+        hasNext={hasNext}
       />
       {interactions.map((call) => (
         <Interaction call={call} callsById={callsById} key={call.id} onClick={() => goto(call)} />

addons/interactions/src/components/Subnav/Subnav.stories.tsx

@@ -10,6 +10,8 @@ export default {
     onReplay: () => {},
     goToEnd: () => {},
     storyFileName: 'Subnav.stories.tsx',
+    hasNext: true,
+    hasPrevious: true,
   },
 };
 
@@ -24,8 +26,25 @@ export const Fail = {
     status: CallState.ERROR,
   },
 };
+
 export const Runs = {
   args: {
     status: CallState.PENDING,
   },
 };
+
+export const AtTheBeginning = {
+  name: 'at the beginning',
+  args: {
+    status: CallState.DONE,
+    hasPrevious: false,
+  },
+};
+
+export const AtTheEnd = {
+  name: 'at the end',
+  args: {
+    status: CallState.DONE,
+    hasNext: false,
+  },
+};

addons/interactions/src/components/Subnav/Subnav.tsx

@@ -26,6 +26,8 @@ export interface SubnavProps {
   onReplay: () => void;
   goToEnd: () => void;
   storyFileName?: string;
+  hasPrevious: boolean;
+  hasNext: boolean;
 }
 
 const StyledButton = styled(Button)(({ theme }) => ({
@@ -88,6 +90,8 @@ export const Subnav: React.FC<SubnavProps> = ({
   onReplay,
   goToEnd,
   storyFileName,
+  hasNext,
+  hasPrevious,
 }) => {
   const buttonText = status === CallState.ERROR ? 'Jump to error' : 'Jump to end';
   const [isAnimating, setIsAnimating] = useState(false);
@@ -101,14 +105,21 @@ export const Subnav: React.FC<SubnavProps> = ({
       <Group>
         <StatusBadge status={status} />
 
-        <JumpToEndButton onClick={goToEnd}>{buttonText}</JumpToEndButton>
+        <JumpToEndButton onClick={goToEnd} disabled={!hasNext}>
+          {buttonText}
+        </JumpToEndButton>
 
         <StyledSeparator />
 
-        <PlaybackButton containsIcon title="Previous step" onClick={onPrevious}>
+        <PlaybackButton
+          containsIcon
+          title="Previous step"
+          onClick={onPrevious}
+          disabled={!hasPrevious}
+        >
           <Icons icon="playback" />
         </PlaybackButton>
-        <StyledIconButton containsIcon title="Next step" onClick={onNext}>
+        <StyledIconButton containsIcon title="Next step" onClick={onNext} disabled={!hasNext}>
           <Icons icon="playnext" />
         </StyledIconButton>
         <StyledAnimatedIconButton