From d948b21f7bd1420ef873594c76652a81f2c75067 Mon Sep 17 00:00:00 2001 From: 7PH Date: Tue, 21 Mar 2023 14:49:07 +0100 Subject: [PATCH] SONAR-18845 Improve Projects Management page accessibility --- .../js/apps/projectsManagement/Header.tsx | 1 + .../js/apps/projectsManagement/ProjectRow.css | 21 + .../js/apps/projectsManagement/ProjectRow.tsx | 7 +- .../projectsManagement/ProjectRowActions.tsx | 10 +- .../js/apps/projectsManagement/Search.tsx | 160 +++--- .../__tests__/ProjectManagementApp-it.tsx | 4 +- .../__snapshots__/Header-test.tsx.snap | 2 + .../__snapshots__/ProjectRow-test.tsx.snap | 3 + .../ProjectRowActions-test.tsx.snap | 1 + .../__snapshots__/Search-test.tsx.snap | 490 ++++++++---------- .../resources/org/sonar/l10n/core.properties | 3 + 11 files changed, 346 insertions(+), 356 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx index 9f1b40851f8..de75e3e9713 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx @@ -64,6 +64,7 @@ export default class Header extends React.PureComponent { diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css index a43e5969ec6..a918a26dce1 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.css @@ -20,3 +20,24 @@ .project-row-text-cell { max-width: 20em; } + +.projects-management-search { + display: flex; + gap: 20px; + padding: 8px 10px; + flex-wrap: wrap; +} + +.projects-management-search > * { + display: flex; + white-space: nowrap; +} + +.projects-management-search > *:not(.bulk-actions) { + flex-direction: column; + justify-content: center; +} + +.projects-management-search > .bulk-actions { + justify-content: end; +} diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx index 61ccd02b8ca..8125bf3fbf9 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx @@ -25,6 +25,7 @@ import Checkbox from '../../components/controls/Checkbox'; import Tooltip from '../../components/controls/Tooltip'; import QualifierIcon from '../../components/icons/QualifierIcon'; import DateFormatter from '../../components/intl/DateFormatter'; +import { translateWithParameters } from '../../helpers/l10n'; import { getComponentOverviewUrl } from '../../helpers/urls'; import { LoggedInUser } from '../../types/users'; import './ProjectRow.css'; @@ -48,7 +49,11 @@ export default class ProjectRow extends React.PureComponent { return ( - + diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx index 249342be290..7fff9e79f9d 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRowActions.tsx @@ -22,7 +22,7 @@ import { Project } from '../../api/components'; import { getComponentNavigation } from '../../api/navigation'; import ActionsDropdown, { ActionsDropdownItem } from '../../components/controls/ActionsDropdown'; import DeferredSpinner from '../../components/ui/DeferredSpinner'; -import { translate } from '../../helpers/l10n'; +import { translate, translateWithParameters } from '../../helpers/l10n'; import { getComponentPermissionsUrl } from '../../helpers/urls'; import { LoggedInUser } from '../../types/users'; import ApplyTemplate from '../permissions/project/components/ApplyTemplate'; @@ -102,7 +102,13 @@ export default class ProjectRowActions extends React.PureComponent return ( <> - + {loading ? ( diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx index dee37b24790..344f574b8bb 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx @@ -139,7 +139,7 @@ export class Search extends React.PureComponent { }; renderQualifierOption = (option: LabelValueSelectOption) => ( -
+
{option.label}
@@ -151,21 +151,19 @@ export class Search extends React.PureComponent { return null; } return ( - - option.value === this.props.qualifiers)} + /> ); }; @@ -176,23 +174,21 @@ export class Search extends React.PureComponent { { value: Visibility.Private, label: translate('visibility.private') }, ]; return ( - - option.value === (this.props.visibility || 'all'))} + /> ); }; renderTypeFilter = () => this.props.qualifiers === 'TRK' ? ( - +
{ {translate('provisioning.only_provisioned')} + - - +
) : null; renderDateFilter = () => { return ( - - - + ); }; render() { return (
- - - - - {this.renderQualifierFilter()} - {this.renderDateFilter()} - {this.renderVisibilityFilter()} - {this.renderTypeFilter()} - - - - -
- {this.props.ready ? this.renderCheckbox() : } - - - - - {this.props.qualifiers === 'TRK' && ( - - )} -
+
+
{this.props.ready ? this.renderCheckbox() : }
+ {this.renderQualifierFilter()} + {this.renderDateFilter()} + {this.renderVisibilityFilter()} + {this.renderTypeFilter()} +
+ +
+
+ + {this.props.qualifiers === 'TRK' && ( + + )} +
+
{this.state.bulkApplyTemplateModal && ( { }); function getProjects() { - // remove the first 2 rows: first is the filter bar, and second is the header - return screen.getAllByRole('row').slice(2); + // Remove the first row (header) + return screen.getAllByRole('row').slice(1); } function getComponentsImplementation(overridePageSize?: number) { diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap index d55cfa0344d..839270b15bc 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Header-test.tsx.snap @@ -33,6 +33,7 @@ exports[`renders: default 1`] = ` @@ -77,6 +78,7 @@ exports[`renders: undefined visibility 1`] = ` diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap index 4be321cb443..e59f26b8049 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap @@ -9,6 +9,7 @@ exports[`renders 1`] = ` > @@ -101,6 +102,7 @@ exports[`renders: portfolio 1`] = ` > @@ -193,6 +195,7 @@ exports[`renders: with lastAnalysisDate 1`] = ` > diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap index 24f1502417d..f892badf19b 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRowActions-test.tsx.snap @@ -18,6 +18,7 @@ exports[`permissions shows the apply permission template modal 1`] = ` exports[`renders correctly 1`] = ` - - - - - - - - - - - - -
- - - - - - - - - provisioning.only_provisioned - - - - - - + + + +
+ + - - -
+ provisioning.only_provisioned + + +
+
+
+ +
+
+ + +
+
`; @@ -190,118 +170,102 @@ exports[`renders 1`] = `
- - - - - - - - - - - -
- - - - - - - - provisioning.only_provisioned - - - - - - + + + +
+ provisioning.only_provisioned + + + +
+
+ +
+
+ + +
+ `; @@ -314,9 +278,7 @@ exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = ` } } > -
+
-
+