From 96490eade960eee1b4696cec5125e69b1de0e224 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Wed, 7 Jun 2023 12:05:40 +0200 Subject: [PATCH] SONAR-19472 new UI for Keyboard Navigation Hint in Code page --- .../apps/code/components/CodeAppRenderer.tsx | 111 ++++++++++------- .../components/MeasureOverview.tsx | 12 +- .../components/hoc/withKeyboardNavigation.tsx | 9 +- .../src/main/js/components/ui/PageActions.tsx | 71 ----------- .../ui/__tests__/PageActions-test.tsx | 35 ------ .../__snapshots__/PageActions-test.tsx.snap | 116 ------------------ 6 files changed, 69 insertions(+), 285 deletions(-) delete mode 100644 server/sonar-web/src/main/js/components/ui/PageActions.tsx delete mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/PageActions-test.tsx delete mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageActions-test.tsx.snap diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx index 47cab3fba89..d790deab426 100644 --- a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx @@ -22,6 +22,7 @@ import { DeferredSpinner, FlagMessage, HelperHintIcon, + KeyboardHint, LargeCenteredLayout, LightLabel, } from 'design-system'; @@ -33,6 +34,7 @@ import HelpTooltip from '../../../components/controls/HelpTooltip'; import ListFooter from '../../../components/controls/ListFooter'; import Suggestions from '../../../components/embed-docs-modal/Suggestions'; import { Location } from '../../../components/hoc/withRouter'; +import { KeyboardKeys } from '../../../helpers/keycodes'; import { translate } from '../../../helpers/l10n'; import { BranchLike } from '../../../types/branch-like'; import { isApplication, isPortfolioLike } from '../../../types/component'; @@ -133,38 +135,57 @@ export default function CodeAppRenderer(props: Props) { )} - {hasComponents && ( - - )} +
+
+ {hasComponents && ( + + )} + + {!hasComponents && sourceViewer === undefined && ( +
+ + {translate( + 'code_viewer.no_source_code_displayed_due_to_empty_analysis', + component.qualifier + )} + +
+ )} + + {showBreadcrumbs && ( + + )} +
+ + {(showComponentList || showSearch) && ( +
+ -
- {!hasComponents && sourceViewer === undefined && ( -
- - {translate( - 'code_viewer.no_source_code_displayed_due_to_empty_analysis', - component.qualifier - )} - +
)} +
- {showBreadcrumbs && ( - - )} - + {(showComponentList || showSearch) && ( {showComponentList && ( @@ -198,25 +219,25 @@ export default function CodeAppRenderer(props: Props) { )} + )} - {showComponentList && ( - - )} + {showComponentList && ( + + )} - {sourceViewer !== undefined && !showSearch && ( -
- -
- )} -
+ {sourceViewer !== undefined && !showSearch && ( +
+ +
+ )} ); } diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx index f635d37862c..8fb3ba81a25 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureOverview.tsx @@ -22,7 +22,6 @@ import * as React from 'react'; import { getComponentLeaves } from '../../../api/components'; import SourceViewer from '../../../components/SourceViewer/SourceViewer'; import A11ySkipTarget from '../../../components/a11y/A11ySkipTarget'; -import PageActions from '../../../components/ui/PageActions'; import { getBranchLikeQuery, isSameBranchLike } from '../../../helpers/branch-like'; import { BranchLike } from '../../../types/branch-like'; import { isFile } from '../../../types/component'; @@ -171,15 +170,8 @@ export default class MeasureOverview extends React.PureComponent { /> } right={ - <> - - {leakPeriod && displayLeak && ( - - )} - + leakPeriod && + displayLeak && } /> diff --git a/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx b/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx index 6949d250dd7..bfa7081d27d 100644 --- a/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx +++ b/server/sonar-web/src/main/js/components/hoc/withKeyboardNavigation.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import PageActions from '../../components/ui/PageActions'; import { getComponentMeasureUniqueKey } from '../../helpers/component'; import { isInput, isShortcut } from '../../helpers/keyboardEventHelpers'; import { KeyboardKeys } from '../../helpers/keycodes'; @@ -157,13 +156,7 @@ export default function withKeyboardNavigation

( }; render() { - return ( - <> - - - - - ); + return ; } }; } diff --git a/server/sonar-web/src/main/js/components/ui/PageActions.tsx b/server/sonar-web/src/main/js/components/ui/PageActions.tsx deleted file mode 100644 index 69ef3bad5fb..00000000000 --- a/server/sonar-web/src/main/js/components/ui/PageActions.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2023 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import * as React from 'react'; -import { translate } from '../../helpers/l10n'; -import { formatMeasure } from '../../helpers/measures'; -import { ComponentQualifier } from '../../types/component'; -import { MetricType } from '../../types/metrics'; - -export interface Props { - componentQualifier?: string; - current?: number; - showShortcuts?: boolean; - total?: number; -} - -export default function PageActions(props: Props) { - const { componentQualifier, current, showShortcuts, total = 0 } = props; - - return ( -

- {showShortcuts && ( - - - ↑ - ↓ - {translate('component_measures.to_select_files')} - - - - ← - → - {translate('component_measures.to_navigate')} - - - )} - {total > 0 && componentQualifier === ComponentQualifier.Project && ( -
- - - {current !== undefined && ( - - {formatMeasure(current, MetricType.Integer)} - {' / '} - - )} - {formatMeasure(total, MetricType.Integer)} - {' '} - {translate('component_measures.files')} - -
- )} -
- ); -} diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/PageActions-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/PageActions-test.tsx deleted file mode 100644 index 692115886a3..00000000000 --- a/server/sonar-web/src/main/js/components/ui/__tests__/PageActions-test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2023 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import { shallow } from 'enzyme'; -import * as React from 'react'; -import { ComponentQualifier } from '../../../types/component'; -import PageActions, { Props } from '../PageActions'; - -it('should render correctly', () => { - expect(shallowRender()).toMatchSnapshot(); - expect(shallowRender({ total: 10 })).toMatchSnapshot(); - expect(shallowRender({ current: 12, showShortcuts: false, total: 120 })).toMatchSnapshot(); -}); - -function shallowRender(props: Partial = {}) { - return shallow( - - ); -} diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageActions-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageActions-test.tsx.snap deleted file mode 100644 index 67239391cc4..00000000000 --- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/PageActions-test.tsx.snap +++ /dev/null @@ -1,116 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should render correctly 1`] = ` -
- - - - ↑ - - - ↓ - - component_measures.to_select_files - - - - ← - - - → - - component_measures.to_navigate - - -
-`; - -exports[`should render correctly 2`] = ` -
- - - - ↑ - - - ↓ - - component_measures.to_select_files - - - - ← - - - → - - component_measures.to_navigate - - -
- - - 10 - - - component_measures.files - -
-
-`; - -exports[`should render correctly 3`] = ` -
-
- - - - 12 - / - - 120 - - - component_measures.files - -
-
-`; -- 2.39.5