SONAR-21566 Migrate keyboard shortcut modal to new UI

3 files changed, 62 insertions, 27 deletions

diff --git a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
index 84cf5e12a5e..44ac3e6c4ba 100644
--- a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
+++ b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
+import classNames from 'classnames';
 import tw from 'twin.macro';
 import { themeColor, themeContrast } from '../helpers';
 import { Key } from '../helpers/keyboard';
@@ -35,6 +36,8 @@ export const mappedKeys = {
   [Key.Click]: 'click',
 };
 
+const NON_KEY_SYMBOLS = ['+', ' '];
+
 export function KeyboardHintKeys({ command }: { command: string }) {
   const keys = command
     .trim()
@@ -42,11 +45,19 @@ export function KeyboardHintKeys({ command }: { command: string }) {
     .map((key, index) => {
       const uniqueKey = `${key}-${index}`;
 
-      if (!(Object.keys(mappedKeys).includes(key) || Object.values(mappedKeys).includes(key))) {
+      if (NON_KEY_SYMBOLS.includes(key)) {
         return <span key={uniqueKey}>{key}</span>;
       }
 
-      return <KeyBox key={uniqueKey}>{mappedKeys[key as keyof typeof mappedKeys] || key}</KeyBox>;
+      const isNonMappedKey = !(
+        Object.keys(mappedKeys).includes(key) || Object.values(mappedKeys).includes(key)
+      );
+
+      return (
+        <KeyBox className={classNames({ 'sw-px-1': isNonMappedKey })} key={uniqueKey}>
+          {Object.keys(mappedKeys).includes(key) ? mappedKeys[key as keyof typeof mappedKeys] : key}
+        </KeyBox>
+      );
     });
 
   return <div className="sw-flex sw-gap-1">{keys}</div>;
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
index 798c34a273f..a45b1d68bd8 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHint-test.tsx.snap
@@ -46,12 +46,12 @@ exports[`renders on mac 1`] = `
       class="sw-flex sw-gap-1"
     >
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         ⌘
       </span>
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         ⌥
       </span>
@@ -106,12 +106,12 @@ exports[`renders on windows 1`] = `
       class="sw-flex sw-gap-1"
     >
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         Ctrl
       </span>
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         Alt
       </span>
@@ -138,6 +138,26 @@ exports[`renders with command 1`] = `
   color: rgb(106,117,144);
 }
 
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  border-radius: 0.125rem;
+  background-color: rgb(225,230,243);
+  color: rgb(62,67,87);
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -145,7 +165,9 @@ exports[`renders with command 1`] = `
     <div
       class="sw-flex sw-gap-1"
     >
-      <span>
+      <span
+        class="sw-px-1 emotion-2 emotion-3"
+      >
         command
       </span>
     </div>
@@ -204,7 +226,7 @@ exports[`renders with title 1`] = `
       class="sw-flex sw-gap-1"
     >
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         click
       </span>
@@ -259,7 +281,7 @@ exports[`renders without title 1`] = `
       class="sw-flex sw-gap-1"
     >
       <span
-        class="emotion-2 emotion-3"
+        class=" emotion-2 emotion-3"
       >
         click
       </span>
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
index 337d1b9b385..d1ec21d7864 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/KeyboardHintKeys-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`should render Alt 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       Alt
     </span>
@@ -60,7 +60,7 @@ exports[`should render ArrowDown 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -108,7 +108,7 @@ exports[`should render ArrowLeft 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -156,7 +156,7 @@ exports[`should render ArrowRight 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -204,7 +204,7 @@ exports[`should render ArrowUp 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -252,7 +252,7 @@ exports[`should render Click 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       click
     </span>
@@ -286,7 +286,7 @@ exports[`should render Command 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       ⌘
     </span>
@@ -320,7 +320,7 @@ exports[`should render Control 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       Ctrl
     </span>
@@ -354,7 +354,7 @@ exports[`should render Option 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       ⌥
     </span>
@@ -388,7 +388,7 @@ exports[`should render a default text if no keys match 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       Ctrl
     </span>
@@ -396,7 +396,7 @@ exports[`should render a default text if no keys match 1`] = `
       +
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       click
     </span>
@@ -429,11 +429,13 @@ exports[`should render multiple keys 1`] = `
   <div
     class="sw-flex sw-gap-1"
   >
-    <span>
+    <span
+      class="sw-px-1 emotion-0 emotion-1"
+    >
       Use
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       Ctrl
     </span>
@@ -441,7 +443,7 @@ exports[`should render multiple keys 1`] = `
       +
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -460,7 +462,7 @@ exports[`should render multiple keys 1`] = `
       </svg>
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -508,7 +510,7 @@ exports[`should render multiple keys with non-key symbols 1`] = `
     class="sw-flex sw-gap-1"
   >
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       Ctrl
     </span>
@@ -516,7 +518,7 @@ exports[`should render multiple keys with non-key symbols 1`] = `
       +
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"
@@ -535,7 +537,7 @@ exports[`should render multiple keys with non-key symbols 1`] = `
       </svg>
     </span>
     <span
-      class="emotion-0 emotion-1"
+      class=" emotion-0 emotion-1"
     >
       <svg
         aria-hidden="true"