feat: add keyboard shortcuts in tooltips

kubeshop · May 23, 2022 · 1354cfe · 1354cfe
1 parent 17c3d01
commit 1354cfe
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/components/organisms/PaneManager/PaneManagerLeftMenu.tsx b/src/components/organisms/PaneManager/PaneManagerLeftMenu.tsx
@@ -3,6 +3,13 @@ import {useEffect, useMemo, useState} from 'react';
 import {FolderOpenOutlined, FolderOutlined, FormatPainterOutlined} from '@ant-design/icons';
 
 import {ROOT_FILE_ENTRY} from '@constants/constants';
+import {
+  FileExplorerTabTooltip,
+  HelmTabTooltip,
+  KustomizeTabTooltip,
+  TemplatesTabTooltip,
+  ValidationTabTooltip,
+} from '@constants/tooltips';
 
 import {LeftMenuSelectionType} from '@models/ui';
 
@@ -82,7 +89,7 @@ const PaneManagerLeftMenu: React.FC = () => {
     <S.Container id="LeftToolbar" isLeftActive={isActive}>
       <PaneTooltip
         show={!leftActive || !(leftMenuSelection === 'file-explorer')}
-        title="View File Explorer"
+        title={FileExplorerTabTooltip}
         placement="right"
       >
         <MenuButton
@@ -104,7 +111,7 @@ const PaneManagerLeftMenu: React.FC = () => {
 
       <PaneTooltip
         show={!leftActive || !(leftMenuSelection === 'kustomize-pane')}
-        title="View Kustomizations"
+        title={KustomizeTabTooltip}
         placement="right"
       >
         <MenuButton
@@ -130,12 +137,12 @@ const PaneManagerLeftMenu: React.FC = () => {
         </MenuButton>
       </PaneTooltip>
 
-      <PaneTooltip
-        show={!leftActive || !(leftMenuSelection === 'helm-pane')}
-        title="View Helm Charts"
-        placement="right"
-      >
-        <WalkThrough placement="rightTop" step="kustomizeHelm" collection="novice">
+      <WalkThrough placement="rightTop" step="kustomizeHelm" collection="novice">
+        <PaneTooltip
+          show={!leftActive || !(leftMenuSelection === 'helm-pane')}
+          title={HelmTabTooltip}
+          placement="right"
+        >
           <MenuButton
             id="helm-pane"
             isSelected={Boolean(activeProject) && !leftDrawerVisible && leftMenuSelection === 'helm-pane'}
@@ -157,8 +164,8 @@ const PaneManagerLeftMenu: React.FC = () => {
               />
             </S.Badge>
           </MenuButton>
-        </WalkThrough>
-      </PaneTooltip>
+        </PaneTooltip>
+      </WalkThrough>
 
       <FeatureFlag name="DockerImagesPane">
         <PaneTooltip
@@ -183,7 +190,7 @@ const PaneManagerLeftMenu: React.FC = () => {
 
       <PaneTooltip
         show={!leftActive || !(leftMenuSelection === 'templates-pane')}
-        title="View Templates"
+        title={TemplatesTabTooltip}
         placement="right"
       >
         <MenuButton
@@ -202,8 +209,8 @@ const PaneManagerLeftMenu: React.FC = () => {
         </MenuButton>
       </PaneTooltip>
 
-      <PaneTooltip show={!leftDrawerVisible} title="View Validation" placement="right">
-        <WalkThrough placement="rightTop" step="validation" collection="release">
+      <WalkThrough placement="rightTop" step="validation" collection="release">
+        <PaneTooltip show={!leftDrawerVisible} title={ValidationTabTooltip} placement="right">
           <MenuButton
             isSelected={leftDrawerVisible}
             isActive={isActive}
@@ -212,8 +219,8 @@ const PaneManagerLeftMenu: React.FC = () => {
           >
             <MenuIcon iconName="validation" active={isActive} isSelected={leftDrawerVisible} />
           </MenuButton>
-        </WalkThrough>
-      </PaneTooltip>
+        </PaneTooltip>
+      </WalkThrough>
     </S.Container>
   );
 };

diff --git a/src/constants/tooltips.ts b/src/constants/tooltips.ts
@@ -1,10 +1,8 @@
 const KEY_CTRL_CMD = process.platform === 'darwin' ? '⌘' : 'CTRL';
 
-export const BrowseFolderTooltip = `Browse for folder containing manifests, kustomizations or Helm charts (${KEY_CTRL_CMD}+O)`;
 export const ReloadFolderTooltip = `Reload manifests from the currently selected folder (${KEY_CTRL_CMD}+F5)`;
 export const ExpandTreeTooltip = 'Expand all folders';
 export const CollapseTreeTooltip = 'Collapse all folders';
-export const FileExplorerTooltip = 'Show/hide File Exlorer';
 export const ClusterExplorerTooltips = {
   default: 'Show/hide Cluster Preview',
   firstTimeSeeing: 'Configure your Kubeconfig path to enable Cluster features',
@@ -51,18 +49,23 @@ export const PluginManagerDrawerReloadTooltip = 'Updates all plugins that have a
 export const DocumentationTooltip = 'Open Monokle Documentation Website';
 export const DiscordTooltip = 'Open Kubeshop Discord Server';
 export const GitHubTooltip = 'Open Monokle Github Repository';
-export const SettingsTooltip = 'Open Settings';
+export const SettingsTooltip = `Open Settings (${KEY_CTRL_CMD}+Comma)`;
 export const NotificationsTooltip = 'Show latest notifications';
 export const ProjectManagementTooltip = 'Select and manage your projects';
 export const NewProjectFromTemplateTooltip = 'New Project from Template';
 export const NewProjectFromFolderTooltip = 'New project from existing folder';
 export const NewEmptyProjectTooltip = 'New Empty Project';
 export const SearchProjectTooltip = 'Search for project by name or path';
 export const PluginDrawerTooltip = 'Open Plugins Manager';
-export const QuickFilterTooltip = `Filter results – Hint: quick-filter using ${KEY_CTRL_CMD} + P`;
-export const NewResourceTooltip = `Create new resource (${KEY_CTRL_CMD} + N)`;
+export const QuickFilterTooltip = `Filter results (${KEY_CTRL_CMD}+P)`;
+export const NewResourceTooltip = `Create new resource (${KEY_CTRL_CMD}+N)`;
 export const NewPreviewConfigurationTooltip = 'Create a new Preview Configuration';
 export const RunPreviewConfigurationTooltip = 'Run this Preview Configuration';
 export const EditPreviewConfigurationTooltip = 'Edit this Preview Configuration';
 export const DeletePreviewConfigurationTooltip = 'Are you sure you want to delete this Preview Configuration?';
 export const TelemetryDocumentationUrl = 'https://kubeshop.github.io/monokle/telemetry';
+export const FileExplorerTabTooltip = `View File Explorer (${KEY_CTRL_CMD}+SHIFT+E)`;
+export const KustomizeTabTooltip = `View Kustomizations (${KEY_CTRL_CMD}+SHIFT+K)`;
+export const HelmTabTooltip = `View Helm Charts (${KEY_CTRL_CMD}+SHIFT+H)`;
+export const TemplatesTabTooltip = `View Templates`;
+export const ValidationTabTooltip = `View Validation (${KEY_CTRL_CMD}+SHIFT+V)`;