Improve shortcuts and open fixture plugin (#1608)

* Improve shortcuts and open fixture plugin * Show L shortcut and remove unused component * Add FIXME related to hardcoded plugin shortcut * Improve styling of screenshots in home screen * Prevent triggering keyboard shortcuts inadvertently
react-cosmos · Jan 27, 2024 · 15ea229 · 15ea229
1 parent f771e1d
commit 15ea229
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 52 deletions.
diff --git a/docs/pages/docs/plugins/ui-plugins.mdx b/docs/pages/docs/plugins/ui-plugins.mdx
@@ -253,7 +253,7 @@ Here's a few examples of existing slots:
 
 | Type        | Slot name         | Description                  | Plug examples                                                   |
 | ----------- | ----------------- | ---------------------------- | --------------------------------------------------------------- |
-| `ArraySlot` | `rendererAction`  | Renderer-related buttons.    | Edit fixture source. Go full screen. Toggle responsive preview. |
+| `ArraySlot` | `rendererAction`  | Renderer-related buttons.    | Open fixture source. Go full screen. Toggle responsive preview. |
 | `ArraySlot` | `navRow`          | Left-hand nav panel widgets. | Fixture search. Fixture bookmarks. Fixture tree view.           |
 | `Array`     | `rendererPreview` | Fixture preview placeholder. | Iframe renderer for web, status message for React Native.       |
 

diff --git a/docs/pages/docs/user-interface.mdx b/docs/pages/docs/user-interface.mdx
@@ -126,10 +126,9 @@ The Cosmos UI supports a set of useful keyboard shortcuts for the most commonly
 
 | Shortcut | Action               |
 | -------: | -------------------- |
-|  `⌘ + K` | Search fixtures      |
+|  `⌘` `K` | Search fixtures      |
 |      `L` | Toggle fixture list  |
 |      `P` | Toggle control panel |
-|      `E` | Edit fixture         |
 |      `F` | Go full screen       |
 |      `R` | Reload renderer      |
 

diff --git a/packages/react-cosmos-core/src/playground/registerPlaygroundShortcuts.ts b/packages/react-cosmos-core/src/playground/registerPlaygroundShortcuts.ts
@@ -17,18 +17,26 @@ export function registerPlaygroundShortcuts(
     const keyChar = String.fromCharCode(e.keyCode);
     const metaKey = e.metaKey || e.ctrlKey;
 
-    if (keyChar === 'K' && metaKey) {
-      run(e, 'searchFixtures');
-    } else if (keyChar === 'L') {
-      run(e, 'toggleFixtureList');
-    } else if (keyChar === 'P') {
-      run(e, 'toggleControlPanel');
-    } else if (keyChar === 'F') {
-      run(e, 'goFullScreen');
-    } else if (keyChar === 'E') {
-      run(e, 'editFixture');
-    } else if (keyChar === 'R') {
-      run(e, 'reloadRenderer');
+    if (metaKey) {
+      if (keyChar === 'K') {
+        run(e, 'searchFixtures');
+      }
+    } else {
+      if (keyChar === 'L') {
+        run(e, 'toggleFixtureList');
+      } else if (keyChar === 'P') {
+        run(e, 'toggleControlPanel');
+      } else if (keyChar === 'F') {
+        run(e, 'goFullScreen');
+      } else if (keyChar === 'S') {
+        // FIXME: This core code is coupled with the open-fixture-source plugin
+        // We can decouple it by adding support for registering shortcuts from
+        // within plugins. This would require a way to serialize shortcuts, which
+        // isn't trivial but is on the roadmap.
+        run(e, 'openFixture');
+      } else if (keyChar === 'R') {
+        run(e, 'reloadRenderer');
+      }
     }
   }
 

diff --git a/packages/react-cosmos-plugin-open-fixture/src/OpenFixtureButton.tsx b/packages/react-cosmos-plugin-open-fixture/src/OpenFixtureButton.tsx
@@ -9,7 +9,7 @@ export function OpenFixtureButton({ onClick }: Props) {
   return (
     <IconButton32
       icon={<EditIcon />}
-      title="Open fixture source"
+      title="Open fixture source (S)"
       onClick={onClick}
     />
   );

diff --git a/packages/react-cosmos-plugin-open-fixture/src/index.test.tsx b/packages/react-cosmos-plugin-open-fixture/src/index.test.tsx
@@ -47,7 +47,7 @@ it(`shows error notification when dev server is off`, async () => {
   const { pushTimedNotification } = mockNotifications();
 
   await loadTestPlugins();
-  registeredCommands.editFixture();
+  registeredCommands.openFixture();
 
   await waitFor(() =>
     expect(pushTimedNotification).toBeCalledWith(expect.any(Object), {

diff --git a/packages/react-cosmos-plugin-open-fixture/src/index.tsx b/packages/react-cosmos-plugin-open-fixture/src/index.tsx
@@ -17,15 +17,15 @@ const { namedPlug, register } = createPlugin<OpenFixtureSpec>({
 
 namedPlug<RendererActionSlotProps>(
   'rendererAction',
-  'editFixture',
+  'openFixture',
   ({ pluginContext, slotProps }) => {
     const { getMethodsOf } = pluginContext;
     const core = getMethodsOf<CoreSpec>('core');
     const devServerOn = core.isDevServerOn();
     const onOpen = useOpen(pluginContext, slotProps.fixtureId, devServerOn);
 
     useEffect(() => {
-      return core.registerCommands({ editFixture: onOpen });
+      return core.registerCommands({ openFixture: onOpen });
     }, [core, onOpen]);
 
     if (!devServerOn) {

diff --git a/packages/react-cosmos-ui/src/plugins/FixtureSearch/FixtureSearchHeader.tsx b/packages/react-cosmos-ui/src/plugins/FixtureSearch/FixtureSearchHeader.tsx
@@ -29,7 +29,7 @@ export function FixtureSearchHeader({
       <NavButtonContainer>
         <IconButton32
           icon={<ChevronLeftIcon />}
-          title="Hide fixture list"
+          title="Hide fixture list (L)"
           disabled={!fixtureSelected}
           selected={false}
           onClick={onCloseNav}

diff --git a/packages/react-cosmos-ui/src/plugins/FullScreenButton/FullScreenButton.tsx b/packages/react-cosmos-ui/src/plugins/FullScreenButton/FullScreenButton.tsx
@@ -10,7 +10,7 @@ export function FullScreenButton({ onClick }: Props) {
   return (
     <IconButton32
       icon={<ExternalIcon />}
-      title="Go fullscreen"
+      title="Go fullscreen (F)"
       onClick={onClick}
     />
   );

diff --git a/packages/react-cosmos-ui/src/plugins/PluginList/PluginList.fixture.tsx b/packages/react-cosmos-ui/src/plugins/PluginList/PluginList.fixture.tsx
@@ -7,7 +7,6 @@ const initialPlugins: SimplePlugin[] = [
   { name: 'classStatePanel', enabled: true },
   { name: 'controlPanel', enabled: true },
   { name: 'core', enabled: true },
-  { name: 'editFixtureButton', enabled: true },
   { name: 'fixtureBookmark', enabled: true },
   { name: 'fixtureSearch', enabled: true },
   { name: 'fixtureTree', enabled: true },

diff --git a/packages/react-cosmos-ui/src/plugins/Root/HomeOverlay/NoFixtureSelected.tsx b/packages/react-cosmos-ui/src/plugins/Root/HomeOverlay/NoFixtureSelected.tsx
@@ -21,10 +21,12 @@ export function NoFixtureSelected({ onShowWelcome }: Props) {
       <OverlayBody>
         <TextContainer>
           <KeyShortcut keys={['⌘', 'K']} label="Search fixtures" />
-          <Subtitle>FIXTURE SELECTED</Subtitle>
+          <SubtitleContainer>
+            <div style={{ flex: 1 }} />
+            <Subtitle>ON SELECTED FIXTURE</Subtitle>
+          </SubtitleContainer>
           <KeyShortcut keys={['L']} label="Toggle fixture list" />
           <KeyShortcut keys={['P']} label="Toggle control panel" />
-          <KeyShortcut keys={['E']} label="Edit fixture" />
           <KeyShortcut keys={['F']} label="Go full screen" />
           <KeyShortcut keys={['R']} label="Reload renderer" />
         </TextContainer>
@@ -39,13 +41,20 @@ export function NoFixtureSelected({ onShowWelcome }: Props) {
   );
 }
 
-const Subtitle = styled.div`
+const SubtitleContainer = styled.div`
   margin: 40px 0 24px 0;
+  display: flex;
+  flex-direction: row;
+`;
+
+const Subtitle = styled.div`
+  flex: 1.4;
   color: ${screenGrey3};
   font-size: 14px;
   font-weight: 500;
   line-height: 14px;
-  text-align: center;
+  text-align: left;
+  text-indent: -26px;
   letter-spacing: 0.5px;
 `;
 

diff --git a/packages/react-cosmos-ui/src/plugins/Root/RendererHeader.tsx b/packages/react-cosmos-ui/src/plugins/Root/RendererHeader.tsx
@@ -47,7 +47,7 @@ export const RendererHeader = React.memo(function RendererHeader({
           <>
             <IconButton32
               icon={<MenuIcon />}
-              title="Show fixture list"
+              title="Show fixture list (L)"
               selected={false}
               onClick={onOpenNav}
             />
@@ -61,7 +61,7 @@ export const RendererHeader = React.memo(function RendererHeader({
         />
         <IconButton32
           icon={<RotateCcwIcon />}
-          title="Reload fixture"
+          title="Reload fixture (R)"
           onClick={onReloadRenderer}
         />
         {fixtureItem && (
@@ -79,7 +79,7 @@ export const RendererHeader = React.memo(function RendererHeader({
         />
         <IconButton32
           icon={<SlidersIcon />}
-          title="Toggle control panel"
+          title="Toggle control panel (P)"
           selected={panelOpen}
           onClick={onTogglePanel}
         />

diff --git a/packages/react-cosmos-ui/src/plugins/Root/ToggleNavButton.tsx b/packages/react-cosmos-ui/src/plugins/Root/ToggleNavButton.tsx
diff --git a/packages/react-cosmos-ui/src/shared/defaultPluginConfig.ts b/packages/react-cosmos-ui/src/shared/defaultPluginConfig.ts
@@ -5,7 +5,7 @@ export const DEFAULT_PLUGIN_CONFIG = {
     globalOrder: ['fixtureSearch', 'notifications'],
     navRowOrder: ['fixtureSearch', 'fixtureBookmarks', 'fixtureTree'],
     fixtureActionOrder: ['bookmarkFixture'],
-    rendererActionOrder: ['editFixture', 'fullScreen', 'responsivePreview'],
+    rendererActionOrder: ['openFixture', 'fullScreen', 'responsivePreview'],
   },
   controlPanel: {
     controlActionOrder: ['expandCollapse'],

diff --git a/packages/react-cosmos/src/corePlugins/openFilePlugin.ts b/packages/react-cosmos/src/corePlugins/openFilePlugin.ts
@@ -56,7 +56,7 @@ function getReqQuery(req: express.Request): ReqQuery {
 function resolveFilePath(rootDir: string, filePath: string) {
   // This heuristic is needed because the open file endpoint is used for
   // multiple applications, which provide different file path types:
-  // 1. Edit fixture button: Sends path relative to Cosmos rootDir
+  // 1. Open fixture source button: Sends path relative to Cosmos rootDir
   // 2. react-error-overlay runtime error: Sends absolute path
   // 3. react-error-overlay compile error: Sends path relative to CWD
   if (path.isAbsolute(filePath)) {