Keybindings: Change 'h' to 'mod+h' to open help modal (#82253)

Keybindings: Change 'h' to 'mod+h'

.betterer.results

@@ -1296,16 +1296,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/core/components/help/HelpModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"]
-    ],
     "public/app/core/navigation/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

public/app/core/components/help/HelpModal.tsx

@@ -27,7 +27,7 @@ const getShortcuts = (modKey: string) => {
           description: t('help-modal.shortcuts-description.exit-edit/setting-views', 'Exit edit/setting views'),
         },
         {
-          keys: ['h'],
+          keys: [`${modKey} + h`],
           description: t('help-modal.shortcuts-description.show-all-shortcuts', 'Show all keyboard shortcuts'),
         },
         { keys: ['c', 't'], description: t('help-modal.shortcuts-description.change-theme', 'Change theme') },
@@ -177,60 +177,55 @@ export const HelpModal = ({ onDismiss }: HelpModalProps): JSX.Element => {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    titleDescription: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      font-weight: ${theme.typography.bodySmall.fontWeight};
-      color: ${theme.colors.text.disabled};
-      padding-bottom: ${theme.spacing(2)};
-    `,
-    categories: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: space-between;
-      align-items: flex-start;
-    `,
-    shortcutCategory: css`
-      width: 50%;
-      font-size: ${theme.typography.bodySmall.fontSize};
-    `,
-    shortcutTable: css`
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    shortcutTableCategoryHeader: css`
-      font-weight: normal;
-      font-size: ${theme.typography.h6.fontSize};
-      text-align: left;
-    `,
-    shortcutTableDescription: css`
-      text-align: left;
-      color: ${theme.colors.text.disabled};
-      width: 99%;
-      padding: ${theme.spacing(1, 2)};
-    `,
-    shortcutTableKeys: css`
-      white-space: nowrap;
-      width: 1%;
-      text-align: right;
-      color: ${theme.colors.text.primary};
-    `,
-    shortcutTableKey: css`
-      display: inline-block;
-      text-align: center;
-      margin-right: ${theme.spacing(0.5)};
-      padding: 3px 5px;
-      font:
-        11px Consolas,
-        'Liberation Mono',
-        Menlo,
-        Courier,
-        monospace;
-      line-height: 10px;
-      vertical-align: middle;
-      border: solid 1px ${theme.colors.border.medium};
-      border-radius: ${theme.shape.borderRadius(3)};
-      color: ${theme.colors.text.primary};
-      background-color: ${theme.colors.background.secondary};
-    `,
+    titleDescription: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.bodySmall.fontWeight,
+      color: theme.colors.text.disabled,
+      paddingBottom: theme.spacing(2),
+    }),
+    categories: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      display: 'flex',
+      flexFlow: 'row wrap',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+    }),
+    shortcutCategory: css({
+      width: '50%',
+      fontSize: theme.typography.bodySmall.fontSize,
+    }),
+    shortcutTable: css({
+      marginBottom: theme.spacing(2),
+    }),
+    shortcutTableCategoryHeader: css({
+      fontWeight: 'normal',
+      fontSize: theme.typography.h6.fontSize,
+      textAlign: 'left',
+    }),
+    shortcutTableDescription: css({
+      textAlign: 'left',
+      color: theme.colors.text.disabled,
+      width: '99%',
+      padding: theme.spacing(1, 2),
+    }),
+    shortcutTableKeys: css({
+      whiteSpace: 'nowrap',
+      width: '1%',
+      textAlign: 'right',
+      color: theme.colors.text.primary,
+    }),
+    shortcutTableKey: css({
+      display: 'inline-block',
+      textAlign: 'center',
+      marginRight: theme.spacing(0.5),
+      padding: '3px 5px',
+      font: "11px Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+      lineHeight: '10px',
+      verticalAlign: 'middle',
+      border: `solid 1px ${theme.colors.border.medium}`,
+      borderRadius: theme.shape.radius.default,
+      color: theme.colors.text.primary,
+      backgroundColor: theme.colors.background.secondary,
+    }),
   };
 }

public/app/core/services/keybindingSrv.ts

@@ -40,7 +40,7 @@ export class KeybindingSrv {
 
     // Chromeless pages like login and signup page don't get any global bindings
     if (!route.chromeless) {
-      this.bind(['?', 'h'], this.showHelpModal);
+      this.bind(['?', 'mod+h'], this.showHelpModal);
       this.bind('g h', this.goToHome);
       this.bind('g d', this.goToDashboards);
       this.bind('g e', this.goToExplore);