From d948b21f7bd1420ef873594c76652a81f2c75067 Mon Sep 17 00:00:00 2001
From: 7PH <benjamin.raymond@sonarsource.com>
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<Props, State> {
             <EditButton
               className="js-change-visibility spacer-left button-small"
               onClick={this.handleChangeVisibilityClick}
+              aria-label={translate('settings.projects.change_visibility_form.label')}
             />
           </span>
 
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<Props> {
     return (
       <tr data-project-key={project.key}>
         <td className="thin">
-          <Checkbox checked={selected} onCheck={this.handleProjectCheck} />
+          <Checkbox
+            label={translateWithParameters('projects_management.select_project', project.name)}
+            checked={selected}
+            onCheck={this.handleProjectCheck}
+          />
         </td>
 
         <td className="nowrap hide-overflow project-row-text-cell">
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<Props, State>
 
     return (
       <>
-        <ActionsDropdown onOpen={this.handleDropdownOpen}>
+        <ActionsDropdown
+          label={translateWithParameters(
+            'projects_management.show_actions_for_x',
+            this.props.project.name
+          )}
+          onOpen={this.handleDropdownOpen}
+        >
           {loading ? (
             <ActionsDropdownItem>
               <DeferredSpinner />
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<Props, State> {
   };
 
   renderQualifierOption = (option: LabelValueSelectOption) => (
-    <div className="display-flex-center">
+    <div>
       <QualifierIcon className="little-spacer-right" qualifier={option.value} />
       {option.label}
     </div>
@@ -151,21 +151,19 @@ export class Search extends React.PureComponent<Props, State> {
       return null;
     }
     return (
-      <td className="thin nowrap text-middle">
-        <Select
-          className="input-medium it__project-qualifier-select"
-          isDisabled={!this.props.ready}
-          name="projects-qualifier"
-          onChange={this.handleQualifierChange}
-          isSearchable={false}
-          components={{
-            Option: this.optionRenderer,
-            SingleValue: this.singleValueRenderer,
-          }}
-          options={this.getQualifierOptions()}
-          value={options.find((option) => option.value === this.props.qualifiers)}
-        />
-      </td>
+      <Select
+        className="input-medium it__project-qualifier-select"
+        isDisabled={!this.props.ready}
+        name="projects-qualifier"
+        onChange={this.handleQualifierChange}
+        isSearchable={false}
+        components={{
+          Option: this.optionRenderer,
+          SingleValue: this.singleValueRenderer,
+        }}
+        options={this.getQualifierOptions()}
+        value={options.find((option) => option.value === this.props.qualifiers)}
+      />
     );
   };
 
@@ -176,23 +174,21 @@ export class Search extends React.PureComponent<Props, State> {
       { value: Visibility.Private, label: translate('visibility.private') },
     ];
     return (
-      <td className="thin nowrap text-middle">
-        <Select
-          className="input-small"
-          isDisabled={!this.props.ready}
-          name="projects-visibility"
-          onChange={this.handleVisibilityChange}
-          options={options}
-          isSearchable={false}
-          value={options.find((option) => option.value === (this.props.visibility || 'all'))}
-        />
-      </td>
+      <Select
+        className="input-small"
+        isDisabled={!this.props.ready}
+        name="projects-visibility"
+        onChange={this.handleVisibilityChange}
+        options={options}
+        isSearchable={false}
+        value={options.find((option) => option.value === (this.props.visibility || 'all'))}
+      />
     );
   };
 
   renderTypeFilter = () =>
     this.props.qualifiers === 'TRK' ? (
-      <td className="thin nowrap text-middle">
+      <div>
         <Checkbox
           checked={this.props.provisioned}
           className="link-checkbox-control"
@@ -202,75 +198,67 @@ export class Search extends React.PureComponent<Props, State> {
           <span className="text-middle little-spacer-left">
             {translate('provisioning.only_provisioned')}
           </span>
+          <HelpTooltip
+            className="spacer-left"
+            overlay={translate('provisioning.only_provisioned.tooltip')}
+          />
         </Checkbox>
-        <HelpTooltip
-          className="spacer-left"
-          overlay={translate('provisioning.only_provisioned.tooltip')}
-        />
-      </td>
+      </div>
     ) : null;
 
   renderDateFilter = () => {
     return (
-      <td className="thin nowrap text-middle">
-        <DateInput
-          inputClassName="input-medium"
-          name="analyzed-before"
-          onChange={this.props.onDateChanged}
-          placeholder={translate('last_analysis_before')}
-          value={this.props.analyzedBefore}
-        />
-      </td>
+      <DateInput
+        inputClassName="input-medium"
+        name="analyzed-before"
+        onChange={this.props.onDateChanged}
+        placeholder={translate('last_analysis_before')}
+        value={this.props.analyzedBefore}
+      />
     );
   };
 
   render() {
     return (
       <div className="big-spacer-bottom">
-        <table className="data">
-          <tbody>
-            <tr>
-              <td className="thin text-middle">
-                {this.props.ready ? this.renderCheckbox() : <i className="spinner" />}
-              </td>
-              {this.renderQualifierFilter()}
-              {this.renderDateFilter()}
-              {this.renderVisibilityFilter()}
-              {this.renderTypeFilter()}
-              <td className="text-middle">
-                <SearchBox
-                  minLength={3}
-                  onChange={this.props.onSearch}
-                  placeholder={translate('search.search_by_name_or_key')}
-                  value={this.props.query}
-                />
-              </td>
-              <td className="thin nowrap text-middle">
-                <Button
-                  className="js-bulk-apply-permission-template"
-                  disabled={this.props.selection.length === 0}
-                  onClick={this.handleBulkApplyTemplateClick}
-                >
-                  {translate('permission_templates.bulk_apply_permission_template')}
-                </Button>
-                {this.props.qualifiers === 'TRK' && (
-                  <Button
-                    className="js-delete spacer-left button-red"
-                    disabled={this.props.selection.length === 0}
-                    onClick={this.handleDeleteClick}
-                    title={
-                      this.props.selection.length === 0
-                        ? translate('permission_templates.select_to_delete')
-                        : translate('permission_templates.delete_selected')
-                    }
-                  >
-                    {translate('delete')}
-                  </Button>
-                )}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className="projects-management-search">
+          <div>{this.props.ready ? this.renderCheckbox() : <i className="spinner" />}</div>
+          {this.renderQualifierFilter()}
+          {this.renderDateFilter()}
+          {this.renderVisibilityFilter()}
+          {this.renderTypeFilter()}
+          <div className="flex-grow">
+            <SearchBox
+              minLength={3}
+              onChange={this.props.onSearch}
+              placeholder={translate('search.search_by_name_or_key')}
+              value={this.props.query}
+            />
+          </div>
+          <div className="bulk-actions">
+            <Button
+              className="js-bulk-apply-permission-template"
+              disabled={this.props.selection.length === 0}
+              onClick={this.handleBulkApplyTemplateClick}
+            >
+              {translate('permission_templates.bulk_apply_permission_template')}
+            </Button>
+            {this.props.qualifiers === 'TRK' && (
+              <Button
+                className="js-delete spacer-left button-red"
+                disabled={this.props.selection.length === 0}
+                onClick={this.handleDeleteClick}
+                title={
+                  this.props.selection.length === 0
+                    ? translate('permission_templates.select_to_delete')
+                    : translate('permission_templates.delete_selected')
+                }
+              >
+                {translate('delete')}
+              </Button>
+            )}
+          </div>
+        </div>
 
         {this.state.bulkApplyTemplateModal && (
           <BulkApplyTemplateModal
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ProjectManagementApp-it.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ProjectManagementApp-it.tsx
index 9e98fa9c417..66aee4b45ac 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ProjectManagementApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ProjectManagementApp-it.tsx
@@ -118,8 +118,8 @@ describe('Bulk Apply', () => {
 });
 
 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`] = `
         </strong>
       </span>
       <EditButton
+        aria-label="settings.projects.change_visibility_form.label"
         className="js-change-visibility spacer-left button-small"
         onClick={[Function]}
       />
@@ -77,6 +78,7 @@ exports[`renders: undefined visibility 1`] = `
         </strong>
       </span>
       <EditButton
+        aria-label="settings.projects.change_visibility_form.label"
         className="js-change-visibility spacer-left button-small"
         onClick={[Function]}
       />
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`] = `
   >
     <Checkbox
       checked={true}
+      label="projects_management.select_project.Project"
       onCheck={[Function]}
       thirdState={false}
     />
@@ -101,6 +102,7 @@ exports[`renders: portfolio 1`] = `
   >
     <Checkbox
       checked={true}
+      label="projects_management.select_project.Project"
       onCheck={[Function]}
       thirdState={false}
     />
@@ -193,6 +195,7 @@ exports[`renders: with lastAnalysisDate 1`] = `
   >
     <Checkbox
       checked={true}
+      label="projects_management.select_project.Project"
       onCheck={[Function]}
       thirdState={false}
     />
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`] = `
 <Fragment>
   <ActionsDropdown
+    label="projects_management.show_actions_for_x.Foo"
     onOpen={[Function]}
   >
     <ActionsDropdownItem
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
index 9179058e21c..5e41b9c325f 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
@@ -32,157 +32,137 @@ exports[`render qualifiers filter 1`] = `
 <div
   className="big-spacer-bottom"
 >
-  <table
-    className="data"
+  <div
+    className="projects-management-search"
   >
-    <tbody>
-      <tr>
-        <td
-          className="thin text-middle"
-        >
-          <Checkbox
-            checked={false}
-            id="projects-selection"
-            onCheck={[Function]}
-            thirdState={false}
-            title="check_all"
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <Select
-            className="input-medium it__project-qualifier-select"
-            components={
-              {
-                "Option": [Function],
-                "SingleValue": [Function],
-              }
-            }
-            isDisabled={false}
-            isSearchable={false}
-            name="projects-qualifier"
-            onChange={[Function]}
-            options={
-              [
-                {
-                  "label": "qualifiers.TRK",
-                  "value": "TRK",
-                },
-                {
-                  "label": "qualifiers.VW",
-                  "value": "VW",
-                },
-                {
-                  "label": "qualifiers.APP",
-                  "value": "APP",
-                },
-              ]
-            }
-            value={
-              {
-                "label": "qualifiers.TRK",
-                "value": "TRK",
-              }
-            }
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <DateInput
-            inputClassName="input-medium"
-            name="analyzed-before"
-            onChange={[MockFunction]}
-            placeholder="last_analysis_before"
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <Select
-            className="input-small"
-            isDisabled={false}
-            isSearchable={false}
-            name="projects-visibility"
-            onChange={[Function]}
-            options={
-              [
-                {
-                  "label": "visibility.both",
-                  "value": "all",
-                },
-                {
-                  "label": "visibility.public",
-                  "value": "public",
-                },
-                {
-                  "label": "visibility.private",
-                  "value": "private",
-                },
-              ]
-            }
-            value={
-              {
-                "label": "visibility.both",
-                "value": "all",
-              }
-            }
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <Checkbox
-            checked={false}
-            className="link-checkbox-control"
-            id="projects-provisioned"
-            onCheck={[MockFunction]}
-            thirdState={false}
-          >
-            <span
-              className="text-middle little-spacer-left"
-            >
-              provisioning.only_provisioned
-            </span>
-          </Checkbox>
-          <HelpTooltip
-            className="spacer-left"
-            overlay="provisioning.only_provisioned.tooltip"
-          />
-        </td>
-        <td
-          className="text-middle"
-        >
-          <SearchBox
-            minLength={3}
-            onChange={[MockFunction]}
-            placeholder="search.search_by_name_or_key"
-            value=""
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
+    <div>
+      <Checkbox
+        checked={false}
+        id="projects-selection"
+        onCheck={[Function]}
+        thirdState={false}
+        title="check_all"
+      />
+    </div>
+    <Select
+      className="input-medium it__project-qualifier-select"
+      components={
+        {
+          "Option": [Function],
+          "SingleValue": [Function],
+        }
+      }
+      isDisabled={false}
+      isSearchable={false}
+      name="projects-qualifier"
+      onChange={[Function]}
+      options={
+        [
+          {
+            "label": "qualifiers.TRK",
+            "value": "TRK",
+          },
+          {
+            "label": "qualifiers.VW",
+            "value": "VW",
+          },
+          {
+            "label": "qualifiers.APP",
+            "value": "APP",
+          },
+        ]
+      }
+      value={
+        {
+          "label": "qualifiers.TRK",
+          "value": "TRK",
+        }
+      }
+    />
+    <DateInput
+      inputClassName="input-medium"
+      name="analyzed-before"
+      onChange={[MockFunction]}
+      placeholder="last_analysis_before"
+    />
+    <Select
+      className="input-small"
+      isDisabled={false}
+      isSearchable={false}
+      name="projects-visibility"
+      onChange={[Function]}
+      options={
+        [
+          {
+            "label": "visibility.both",
+            "value": "all",
+          },
+          {
+            "label": "visibility.public",
+            "value": "public",
+          },
+          {
+            "label": "visibility.private",
+            "value": "private",
+          },
+        ]
+      }
+      value={
+        {
+          "label": "visibility.both",
+          "value": "all",
+        }
+      }
+    />
+    <div>
+      <Checkbox
+        checked={false}
+        className="link-checkbox-control"
+        id="projects-provisioned"
+        onCheck={[MockFunction]}
+        thirdState={false}
+      >
+        <span
+          className="text-middle little-spacer-left"
         >
-          <Button
-            className="js-bulk-apply-permission-template"
-            disabled={true}
-            onClick={[Function]}
-          >
-            permission_templates.bulk_apply_permission_template
-          </Button>
-          <Button
-            className="js-delete spacer-left button-red"
-            disabled={true}
-            onClick={[Function]}
-            title="permission_templates.select_to_delete"
-          >
-            delete
-          </Button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          provisioning.only_provisioned
+        </span>
+        <HelpTooltip
+          className="spacer-left"
+          overlay="provisioning.only_provisioned.tooltip"
+        />
+      </Checkbox>
+    </div>
+    <div
+      className="flex-grow"
+    >
+      <SearchBox
+        minLength={3}
+        onChange={[MockFunction]}
+        placeholder="search.search_by_name_or_key"
+        value=""
+      />
+    </div>
+    <div
+      className="bulk-actions"
+    >
+      <Button
+        className="js-bulk-apply-permission-template"
+        disabled={true}
+        onClick={[Function]}
+      >
+        permission_templates.bulk_apply_permission_template
+      </Button>
+      <Button
+        className="js-delete spacer-left button-red"
+        disabled={true}
+        onClick={[Function]}
+        title="permission_templates.select_to_delete"
+      >
+        delete
+      </Button>
+    </div>
+  </div>
 </div>
 `;
 
@@ -190,118 +170,102 @@ exports[`renders 1`] = `
 <div
   className="big-spacer-bottom"
 >
-  <table
-    className="data"
+  <div
+    className="projects-management-search"
   >
-    <tbody>
-      <tr>
-        <td
-          className="thin text-middle"
-        >
-          <Checkbox
-            checked={false}
-            id="projects-selection"
-            onCheck={[Function]}
-            thirdState={false}
-            title="check_all"
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <DateInput
-            inputClassName="input-medium"
-            name="analyzed-before"
-            onChange={[MockFunction]}
-            placeholder="last_analysis_before"
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <Select
-            className="input-small"
-            isDisabled={false}
-            isSearchable={false}
-            name="projects-visibility"
-            onChange={[Function]}
-            options={
-              [
-                {
-                  "label": "visibility.both",
-                  "value": "all",
-                },
-                {
-                  "label": "visibility.public",
-                  "value": "public",
-                },
-                {
-                  "label": "visibility.private",
-                  "value": "private",
-                },
-              ]
-            }
-            value={
-              {
-                "label": "visibility.both",
-                "value": "all",
-              }
-            }
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
-        >
-          <Checkbox
-            checked={false}
-            className="link-checkbox-control"
-            id="projects-provisioned"
-            onCheck={[MockFunction]}
-            thirdState={false}
-          >
-            <span
-              className="text-middle little-spacer-left"
-            >
-              provisioning.only_provisioned
-            </span>
-          </Checkbox>
-          <HelpTooltip
-            className="spacer-left"
-            overlay="provisioning.only_provisioned.tooltip"
-          />
-        </td>
-        <td
-          className="text-middle"
-        >
-          <SearchBox
-            minLength={3}
-            onChange={[MockFunction]}
-            placeholder="search.search_by_name_or_key"
-            value=""
-          />
-        </td>
-        <td
-          className="thin nowrap text-middle"
+    <div>
+      <Checkbox
+        checked={false}
+        id="projects-selection"
+        onCheck={[Function]}
+        thirdState={false}
+        title="check_all"
+      />
+    </div>
+    <DateInput
+      inputClassName="input-medium"
+      name="analyzed-before"
+      onChange={[MockFunction]}
+      placeholder="last_analysis_before"
+    />
+    <Select
+      className="input-small"
+      isDisabled={false}
+      isSearchable={false}
+      name="projects-visibility"
+      onChange={[Function]}
+      options={
+        [
+          {
+            "label": "visibility.both",
+            "value": "all",
+          },
+          {
+            "label": "visibility.public",
+            "value": "public",
+          },
+          {
+            "label": "visibility.private",
+            "value": "private",
+          },
+        ]
+      }
+      value={
+        {
+          "label": "visibility.both",
+          "value": "all",
+        }
+      }
+    />
+    <div>
+      <Checkbox
+        checked={false}
+        className="link-checkbox-control"
+        id="projects-provisioned"
+        onCheck={[MockFunction]}
+        thirdState={false}
+      >
+        <span
+          className="text-middle little-spacer-left"
         >
-          <Button
-            className="js-bulk-apply-permission-template"
-            disabled={true}
-            onClick={[Function]}
-          >
-            permission_templates.bulk_apply_permission_template
-          </Button>
-          <Button
-            className="js-delete spacer-left button-red"
-            disabled={true}
-            onClick={[Function]}
-            title="permission_templates.select_to_delete"
-          >
-            delete
-          </Button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          provisioning.only_provisioned
+        </span>
+        <HelpTooltip
+          className="spacer-left"
+          overlay="provisioning.only_provisioned.tooltip"
+        />
+      </Checkbox>
+    </div>
+    <div
+      className="flex-grow"
+    >
+      <SearchBox
+        minLength={3}
+        onChange={[MockFunction]}
+        placeholder="search.search_by_name_or_key"
+        value=""
+      />
+    </div>
+    <div
+      className="bulk-actions"
+    >
+      <Button
+        className="js-bulk-apply-permission-template"
+        disabled={true}
+        onClick={[Function]}
+      >
+        permission_templates.bulk_apply_permission_template
+      </Button>
+      <Button
+        className="js-delete spacer-left button-red"
+        disabled={true}
+        onClick={[Function]}
+        title="permission_templates.select_to_delete"
+      >
+        delete
+      </Button>
+    </div>
+  </div>
 </div>
 `;
 
@@ -314,9 +278,7 @@ exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = `
     }
   }
 >
-  <div
-    className="display-flex-center"
-  >
+  <div>
     <QualifierIcon
       className="little-spacer-right"
       qualifier="val"
@@ -335,9 +297,7 @@ exports[`renders optionrenderer and singlevaluerenderer: single value renderer 1
     }
   }
 >
-  <div
-    className="display-flex-center"
-  >
+  <div>
     <QualifierIcon
       className="little-spacer-right"
       qualifier="val"
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index f8259c2f968..b230e837f8c 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1188,6 +1188,7 @@ settings.new_code_period.description2=This setting is the default for all projec
 settings.languages.select_a_language_placeholder=Select a language
 
 settings.projects.default_visibility_of_new_projects=Default visibility of new projects:
+settings.projects.change_visibility_form.label=Change default visibility of new projects
 settings.projects.change_visibility_form.header=Set Default Visibility of New Projects
 settings.projects.change_visibility_form.warning=This will not change the visibility of already existing projects.
 settings.projects.change_visibility_form.submit=Change Default Visibility
@@ -1640,6 +1641,8 @@ projects_management.delete_resource_confirmation=Are you sure you want to delete
 projects_management.delete_selected_warning=You're about to delete {0} selected items.
 projects_management.delete_all_warning=You're about to delete all {0} items.
 projects_management.project_has_been_successfully_created=Project {project} has been successfully created.
+projects_management.select_project=Select project {0}
+projects_management.show_actions_for_x=Show actions for project {0} 
 
 #------------------------------------------------------------------------------
 #
-- 
2.39.5