Fix shortcut keys on commands so they are according to Cogs standard

cognitedata · Aug 20, 2024 · 97fcba3 · 97fcba3
1 parent e8cab8c
commit 97fcba3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 18 deletions.
diff --git a/react-components/src/architecture/base/commands/BaseCommand.ts b/react-components/src/architecture/base/commands/BaseCommand.ts
@@ -163,18 +163,19 @@ export abstract class BaseCommand {
     return translate(key, fallback);
   }
 
-  public getShortCutKeys(): string | undefined {
+  public getShortCutKeys(): string[] | undefined {
     const key = this.shortCutKey;
     if (key === undefined) {
       return undefined;
     }
-    let result = '';
+    const keys: string[] = [];
     if (this.shortCutKeyOnCtrl) {
-      result += 'Ctrl+';
+      keys.push('Ctrl');
     }
     if (this.shortCutKeyOnShift) {
-      result += 'Shift+';
+      keys.push('Shift');
     }
-    return result + key;
+    keys.push(key);
+    return keys;
   }
 }
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
@@ -48,11 +48,10 @@ export const CommandButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
       appendTo={document.body}
       placement={placement}>

diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -93,7 +93,6 @@ export const FilterButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = usedInSettings ? undefined : command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
 
   const children = command.children;
@@ -102,7 +101,7 @@ export const FilterButton = ({
   }
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={usedInSettings || label === undefined}
       appendTo={document.body}
       placement={placement}>

diff --git a/react-components/src/components/Architecture/LabelWithShortcut.tsx b/react-components/src/components/Architecture/LabelWithShortcut.tsx
@@ -6,20 +6,27 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Shortcut } from '@cognite/cogs.js';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 
 type LabelWithShortcutProps = {
   label?: string;
-  shortcut?: string;
+  command?: BaseCommand;
+  inverted?: boolean;
 };
 
-export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({ label, shortcut }) => {
+export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({
+  label,
+  command,
+  inverted = true
+}) => {
   if (label === undefined) {
     return <></>;
   }
+  const keys = command?.getShortCutKeys();
   return (
     <Container key={label}>
       <Label>{label}</Label>
-      {shortcut !== undefined && <Shortcut keys={[shortcut]} inverted />}
+      {keys !== undefined && <Shortcut keys={keys} inverted={inverted} />}
     </Container>
   );
 };

diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
@@ -83,14 +83,13 @@ export const OptionButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = usedInSettings ? undefined : command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
   const children = command.children;
   const selectedLabel = command.selectedChild?.getLabel(t);
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={usedInSettings || label === undefined}
       appendTo={document.body}
       placement={placement}>

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -71,13 +71,12 @@ export const SettingsButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
   const children = command.children;
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
       appendTo={document.body}
       placement={placement}>
@@ -157,7 +156,6 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
     return <></>;
   }
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   return (
     <Menu.Item
       key={command.uniqueId}
@@ -170,7 +168,7 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
         command.invoke();
         setChecked(command.isChecked);
       }}>
-      <LabelWithShortcut label={label} shortcut={shortcut} />
+      <LabelWithShortcut label={label} command={command} inverted={false} />
     </Menu.Item>
   );
 }