From: Wouter Admiraal Date: Tue, 9 Feb 2021 08:04:28 +0000 (+0100) Subject: SONAR-14439 Make shortcut help fit in the modal X-Git-Tag: 8.7.0.41497~25 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=b11ef6df792cd942cfa7b83f44a32ba3a777ebb9;p=sonarqube.git SONAR-14439 Make shortcut help fit in the modal --- diff --git a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx index c5313a7a3ee..d961ae6dd40 100644 --- a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx +++ b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx @@ -22,56 +22,108 @@ import { Button } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import { translate } from 'sonar-ui-common/helpers/l10n'; -const CATEGORIES = [ - { - category: 'global', - shortcuts: [ - { keys: ['s'], action: 'search' }, - { keys: ['?'], action: 'open_shortcuts' } - ] - }, - { - category: 'code_page', - shortcuts: [ - { keys: ['↑', '↓'], action: 'select_files' }, - { keys: ['→'], action: 'open_file' }, - { keys: ['←'], action: 'back' } - ] - }, - { - category: 'issues_page', - shortcuts: [ - { keys: ['↑', '↓'], action: 'navigate' }, - { keys: ['→'], action: 'source_code' }, - { keys: ['←'], action: 'back' }, - { keys: ['alt', '+', '↑', '↓'], action: 'navigate_locations' }, - { keys: ['alt', '+', '←', '→'], action: 'switch_flows' }, - { keys: ['f'], action: 'transition' }, - { keys: ['a'], action: 'assign' }, - { keys: ['m'], action: 'assign_to_me' }, - { keys: ['i'], action: 'severity' }, - { keys: ['c'], action: 'comment' }, - { keys: ['ctrl', '+', 'enter'], action: 'submit_comment' }, - { keys: ['t'], action: 'tags' } - ] - }, - { - category: 'measures_page', - shortcuts: [ - { keys: ['↑', '↓'], action: 'select_files' }, - { keys: ['→'], action: 'open_file' }, - { keys: ['←'], action: 'back' } - ] - }, - { - category: 'rules_page', - shortcuts: [ - { keys: ['↑', '↓'], action: 'navigate' }, - { keys: ['→'], action: 'rule_details' }, - { keys: ['←'], action: 'back' } - ] - } -]; +type Shortcuts = Array<{ + category: string; + shortcuts: Array<{ + keys: string[]; + action: string; + }>; +}>; + +const CATEGORIES: { left: Shortcuts; right: Shortcuts } = { + left: [ + { + category: 'global', + shortcuts: [ + { keys: ['s'], action: 'search' }, + { keys: ['?'], action: 'open_shortcuts' } + ] + }, + { + category: 'issues_page', + shortcuts: [ + { keys: ['↑', '↓'], action: 'navigate' }, + { keys: ['→'], action: 'source_code' }, + { keys: ['←'], action: 'back' }, + { keys: ['alt', '+', '↑', '↓'], action: 'navigate_locations' }, + { keys: ['alt', '+', '←', '→'], action: 'switch_flows' }, + { keys: ['f'], action: 'transition' }, + { keys: ['a'], action: 'assign' }, + { keys: ['m'], action: 'assign_to_me' }, + { keys: ['i'], action: 'severity' }, + { keys: ['c'], action: 'comment' }, + { keys: ['ctrl', '+', 'enter'], action: 'submit_comment' }, + { keys: ['t'], action: 'tags' } + ] + } + ], + right: [ + { + category: 'code_page', + shortcuts: [ + { keys: ['↑', '↓'], action: 'select_files' }, + { keys: ['→'], action: 'open_file' }, + { keys: ['←'], action: 'back' } + ] + }, + { + category: 'measures_page', + shortcuts: [ + { keys: ['↑', '↓'], action: 'select_files' }, + { keys: ['→'], action: 'open_file' }, + { keys: ['←'], action: 'back' } + ] + }, + { + category: 'rules_page', + shortcuts: [ + { keys: ['↑', '↓'], action: 'navigate' }, + { keys: ['→'], action: 'rule_details' }, + { keys: ['←'], action: 'back' } + ] + } + ] +}; + +function renderShortcuts(list: Shortcuts) { + return ( + <> + {list.map(({ category, shortcuts }) => ( +
+

{translate('keyboard_shortcuts', category, 'title')}

+ + + + + + + + + {shortcuts.map(({ action, keys }) => ( + + + + + ))} + +
{translate('keyboard_shortcuts.shortcut')}{translate('keyboard_shortcuts.action')}
+ {keys.map(k => + k === '+' ? ( + + {k} + + ) : ( + + {k} + + ) + )} + {translate('keyboard_shortcuts', category, action)}
+
+ ))} + + ); +} export default function KeyboardShortcutsModal() { const [display, setDisplay] = React.useState(false); @@ -108,40 +160,9 @@ export default function KeyboardShortcutsModal() {

{title}

-
- {CATEGORIES.map(({ category, shortcuts }) => ( -
-

{translate('keyboard_shortcuts', category, 'title')}

- - - - - - - - - {shortcuts.map(({ action, keys }) => ( - - - - - ))} - -
{translate('keyboard_shortcuts.shortcut')}{translate('keyboard_shortcuts.action')}
- {keys.map(k => - k === '+' ? ( - - {k} - - ) : ( - - {k} - - ) - )} - {translate('keyboard_shortcuts', category, action)}
-
- ))} +
+
{renderShortcuts(CATEGORIES.left)}
+
{renderShortcuts(CATEGORIES.right)}
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap index ce74b8537f1..c288017ad14 100644 --- a/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/KeyboardShortcutsModal-test.tsx.snap @@ -16,534 +16,552 @@ exports[`should render correctly: visible 1`] = `
-

- keyboard_shortcuts.global.title -

- - - - - - - - - - - - - - - - - -
- keyboard_shortcuts.shortcut - - keyboard_shortcuts.action -
- - s - - - keyboard_shortcuts.global.search -
- - ? - - - keyboard_shortcuts.global.open_shortcuts -
+
+

+ keyboard_shortcuts.global.title +

+ + + + + + + + + + + + + + + + + +
+ keyboard_shortcuts.shortcut + + keyboard_shortcuts.action +
+ + s + + + keyboard_shortcuts.global.search +
+ + ? + + + keyboard_shortcuts.global.open_shortcuts +
+
+
+

+ keyboard_shortcuts.issues_page.title +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ keyboard_shortcuts.shortcut + + keyboard_shortcuts.action +
+ + ↑ + + + ↓ + + + keyboard_shortcuts.issues_page.navigate +
+ + → + + + keyboard_shortcuts.issues_page.source_code +
+ + ← + + + keyboard_shortcuts.issues_page.back +
+ + alt + + + + + + + ↑ + + + ↓ + + + keyboard_shortcuts.issues_page.navigate_locations +
+ + alt + + + + + + + ← + + + → + + + keyboard_shortcuts.issues_page.switch_flows +
+ + f + + + keyboard_shortcuts.issues_page.transition +
+ + a + + + keyboard_shortcuts.issues_page.assign +
+ + m + + + keyboard_shortcuts.issues_page.assign_to_me +
+ + i + + + keyboard_shortcuts.issues_page.severity +
+ + c + + + keyboard_shortcuts.issues_page.comment +
+ + ctrl + + + + + + + enter + + + keyboard_shortcuts.issues_page.submit_comment +
+ + t + + + keyboard_shortcuts.issues_page.tags +
+
-

- keyboard_shortcuts.code_page.title -

- - - - - - - - - - - - - - - - - - - - - -
- keyboard_shortcuts.shortcut - - keyboard_shortcuts.action -
- - ↑ - - - ↓ - - - keyboard_shortcuts.code_page.select_files -
- - → - - - keyboard_shortcuts.code_page.open_file -
- - ← - - - keyboard_shortcuts.code_page.back -
-
-
-

- keyboard_shortcuts.issues_page.title -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- keyboard_shortcuts.shortcut - - keyboard_shortcuts.action -
- - ↑ - - - ↓ - - - keyboard_shortcuts.issues_page.navigate -
- - → - - - keyboard_shortcuts.issues_page.source_code -
- - ← - - - keyboard_shortcuts.issues_page.back -
- - alt - - - + - - - ↑ - - - ↓ - - - keyboard_shortcuts.issues_page.navigate_locations -
- - alt - - - + - - - ← - - - → - - - keyboard_shortcuts.issues_page.switch_flows -
- - f - - - keyboard_shortcuts.issues_page.transition -
- - a - - - keyboard_shortcuts.issues_page.assign -
- - m - - - keyboard_shortcuts.issues_page.assign_to_me -
- - i - - - keyboard_shortcuts.issues_page.severity -
- - c - - - keyboard_shortcuts.issues_page.comment -
- - ctrl - - - + - - - enter - - - keyboard_shortcuts.issues_page.submit_comment -
- - t - - - keyboard_shortcuts.issues_page.tags -
-
-
-

- keyboard_shortcuts.measures_page.title -

- - - - - - - - - - - - - - - - - - - - - -
- keyboard_shortcuts.shortcut - - keyboard_shortcuts.action -
- - ↑ - - - ↓ - - - keyboard_shortcuts.measures_page.select_files -
- - → - - - keyboard_shortcuts.measures_page.open_file -
- - ← - - - keyboard_shortcuts.measures_page.back -
-
-
-

- keyboard_shortcuts.rules_page.title -

- - - - - - - - - - - - - - - - - - - - - -
- keyboard_shortcuts.shortcut - - keyboard_shortcuts.action -
- - ↑ - - - ↓ - - - keyboard_shortcuts.rules_page.navigate -
- - → - - - keyboard_shortcuts.rules_page.rule_details -
- - ← - - - keyboard_shortcuts.rules_page.back -
+
+

+ keyboard_shortcuts.code_page.title +

+ + + + + + + + + + + + + + + + + + + + + +
+ keyboard_shortcuts.shortcut + + keyboard_shortcuts.action +
+ + ↑ + + + ↓ + + + keyboard_shortcuts.code_page.select_files +
+ + → + + + keyboard_shortcuts.code_page.open_file +
+ + ← + + + keyboard_shortcuts.code_page.back +
+
+
+

+ keyboard_shortcuts.measures_page.title +

+ + + + + + + + + + + + + + + + + + + + + +
+ keyboard_shortcuts.shortcut + + keyboard_shortcuts.action +
+ + ↑ + + + ↓ + + + keyboard_shortcuts.measures_page.select_files +
+ + → + + + keyboard_shortcuts.measures_page.open_file +
+ + ← + + + keyboard_shortcuts.measures_page.back +
+
+
+

+ keyboard_shortcuts.rules_page.title +

+ + + + + + + + + + + + + + + + + + + + + +
+ keyboard_shortcuts.shortcut + + keyboard_shortcuts.action +
+ + ↑ + + + ↓ + + + keyboard_shortcuts.rules_page.navigate +
+ + → + + + keyboard_shortcuts.rules_page.rule_details +
+ + ← + + + keyboard_shortcuts.rules_page.back +
+