UI: Add remount story shortcut

code/lib/manager-api/src/modules/shortcuts.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { global } from '@storybook/global';
-import { PREVIEW_KEYDOWN } from '@storybook/core-events';
+import { FORCE_REMOUNT, PREVIEW_KEYDOWN } from '@storybook/core-events';
 
 import type { ModuleFn } from '../index';
 
@@ -57,6 +57,7 @@ export interface API_Shortcuts {
   escape: API_KeyCollection;
   collapseAll: API_KeyCollection;
   expandAll: API_KeyCollection;
+  remount: API_KeyCollection;
 }
 
 export type API_Action = keyof API_Shortcuts;
@@ -91,6 +92,7 @@ export const defaultShortcuts: API_Shortcuts = Object.freeze({
   escape: ['escape'], // This one is not customizable
   collapseAll: [controlOrMetaKey(), 'shift', 'ArrowUp'],
   expandAll: [controlOrMetaKey(), 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 });
 
 const addonsShortcuts: API_AddonShortcuts = {};
@@ -177,6 +179,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
       const {
         layout: { isFullscreen, showNav, showPanel },
         ui: { enableShortcuts },
+        storyId,
       } = store.getState();
       if (!enableShortcuts) {
         return;
@@ -320,6 +323,10 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
           fullAPI.expandAll();
           break;
         }
+        case 'remount': {
+          fullAPI.emit(FORCE_REMOUNT, { storyId });
+          break;
+        }
         default:
           addonsShortcuts[feature].action();
           break;

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -34,6 +34,7 @@ export const shortcuts: State['shortcuts'] = {
   escape: ['escape'],
   collapseAll: ['ctrl', 'shift', 'ArrowUp'],
   expandAll: ['ctrl', 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 };
 
 export const panels: Addon_Collection = {

code/ui/manager/src/components/preview/tools/remount.tsx

@@ -24,6 +24,7 @@ const menuMapper = ({ api, state }: Combo) => {
   return {
     storyId,
     remount: () => api.emit(FORCE_REMOUNT, { storyId: state.storyId }),
+    api,
   };
 };
 
@@ -33,19 +34,22 @@ export const remountTool: Addon = {
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
     <Consumer filter={menuMapper}>
-      {({ remount, storyId }) => {
+      {({ remount, storyId, api }) => {
         const [isAnimating, setIsAnimating] = useState(false);
-        const animateAndReplay = () => {
+        const remountComponent = () => {
           if (!storyId) return;
-          setIsAnimating(true);
           remount();
         };
 
+        api.on(FORCE_REMOUNT, () => {
+          setIsAnimating(true);
+        });
+
         return (
           <StyledAnimatedIconButton
             key="remount"
             title="Remount component"
-            onClick={animateAndReplay}
+            onClick={remountComponent}
             onAnimationEnd={() => setIsAnimating(false)}
             animating={isAnimating}
             disabled={!storyId}

code/ui/manager/src/settings/shortcuts.stories.tsx

@@ -23,6 +23,7 @@ const defaultShortcuts = {
   escape: ['escape'], // This one is not customizable
   collapseAll: ['ctrl', 'shift', 'ArrowUp'],
   expandAll: ['ctrl', 'shift', 'ArrowDown'],
+  remount: ['alt', 'R'],
 };
 
 const actions = makeActions(

code/ui/manager/src/settings/shortcuts.tsx

@@ -124,6 +124,7 @@ const shortcutLabels = {
   aboutPage: 'Go to about page',
   collapseAll: 'Collapse all items on sidebar',
   expandAll: 'Expand all items on sidebar',
+  remount: 'Remount component',
 };
 
 export type Feature = keyof typeof shortcutLabels;