From d3c1acdaf4666e9d8f00e31d619b574f336244f0 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 3 Aug 2022 17:20:57 +0200
Subject: [PATCH] SONAR-16731 [891586] [891587] Form elements must have labels

---
 .../src/main/js/app/styles/init/misc.css      |   4 +
 .../apps/projects/components/PageSidebar.tsx  |   2 +-
 .../__snapshots__/PageSidebar-test.tsx.snap   | 239 ------------------
 .../filters/SearchableFilterFooter.tsx        |  42 +--
 .../resources/org/sonar/l10n/core.properties  |   2 +
 5 files changed, 30 insertions(+), 259 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 2d476444af1..7c626a19ffd 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -216,6 +216,10 @@ th.hide-overflow {
   padding-top: 40px;
 }
 
+.huge-padded-bottom {
+  padding-bottom: 40px;
+}
+
 td.little-spacer-left {
   padding-left: 4px !important;
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
index c9dbb8d8d0b..a5ba9ec507b 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx
@@ -60,7 +60,7 @@ export default function PageSidebar(props: PageSidebarProps) {
   const facetProps = { onQueryChange, maxFacetValue };
 
   return (
-    <div>
+    <div className="huge-spacer-bottom huge-padded-bottom">
       <FavoriteFilter />
 
       <div className="projects-facets-header clearfix">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap
deleted file mode 100644
index b76b6259156..00000000000
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.tsx.snap
+++ /dev/null
@@ -1,239 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render \`leak\` view correctly 1`] = `
-<div>
-  <withRouter(withCurrentUserContext(FavoriteFilter)) />
-  <div
-    className="projects-facets-header clearfix"
-  >
-    <h2
-      className="h3"
-    >
-      filters
-    </h2>
-  </div>
-  <QualityGateFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewReliabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewSecurityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityReviewFilter
-    className="leak-facet-box"
-    onQueryChange={[MockFunction]}
-    property="new_security_review"
-  />
-  <NewMaintainabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewCoverageFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewDuplicationsFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewLinesFilter
-    onQueryChange={[MockFunction]}
-  />
-  <withLanguagesContext(LanguagesFilter)
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "view": "leak",
-      }
-    }
-  />
-  <QualifierFilter
-    onQueryChange={[MockFunction]}
-  />
-  <TagsFilter
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "view": "leak",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`should render \`leak\` view correctly with no applications 1`] = `
-<div>
-  <withRouter(withCurrentUserContext(FavoriteFilter)) />
-  <div
-    className="projects-facets-header clearfix"
-  >
-    <h2
-      className="h3"
-    >
-      filters
-    </h2>
-  </div>
-  <QualityGateFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewReliabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewSecurityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityReviewFilter
-    className="leak-facet-box"
-    onQueryChange={[MockFunction]}
-    property="new_security_review"
-  />
-  <NewMaintainabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewCoverageFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewDuplicationsFilter
-    onQueryChange={[MockFunction]}
-  />
-  <NewLinesFilter
-    onQueryChange={[MockFunction]}
-  />
-  <withLanguagesContext(LanguagesFilter)
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "view": "leak",
-      }
-    }
-  />
-  <TagsFilter
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "view": "leak",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`should render correctly 1`] = `
-<div>
-  <withRouter(withCurrentUserContext(FavoriteFilter)) />
-  <div
-    className="projects-facets-header clearfix"
-  >
-    <ClearAll
-      onClearAll={[MockFunction]}
-    />
-    <h2
-      className="h3"
-    >
-      filters
-    </h2>
-  </div>
-  <QualityGateFilter
-    onQueryChange={[MockFunction]}
-  />
-  <ReliabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityReviewFilter
-    onQueryChange={[MockFunction]}
-  />
-  <MaintainabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <CoverageFilter
-    onQueryChange={[MockFunction]}
-  />
-  <DuplicationsFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SizeFilter
-    onQueryChange={[MockFunction]}
-    value="3"
-  />
-  <withLanguagesContext(LanguagesFilter)
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "size": "3",
-      }
-    }
-  />
-  <QualifierFilter
-    onQueryChange={[MockFunction]}
-  />
-  <TagsFilter
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "size": "3",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`should render correctly with no applications 1`] = `
-<div>
-  <withRouter(withCurrentUserContext(FavoriteFilter)) />
-  <div
-    className="projects-facets-header clearfix"
-  >
-    <ClearAll
-      onClearAll={[MockFunction]}
-    />
-    <h2
-      className="h3"
-    >
-      filters
-    </h2>
-  </div>
-  <QualityGateFilter
-    onQueryChange={[MockFunction]}
-  />
-  <ReliabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SecurityReviewFilter
-    onQueryChange={[MockFunction]}
-  />
-  <MaintainabilityFilter
-    onQueryChange={[MockFunction]}
-  />
-  <CoverageFilter
-    onQueryChange={[MockFunction]}
-  />
-  <DuplicationsFilter
-    onQueryChange={[MockFunction]}
-  />
-  <SizeFilter
-    onQueryChange={[MockFunction]}
-    value="3"
-  />
-  <withLanguagesContext(LanguagesFilter)
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "size": "3",
-      }
-    }
-  />
-  <TagsFilter
-    onQueryChange={[MockFunction]}
-    query={
-      Object {
-        "size": "3",
-      }
-    }
-  />
-</div>
-`;
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
index cc9baa67013..b523c8a1edb 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SearchableFilterFooter.tsx
@@ -32,25 +32,29 @@ interface Props {
   query: Dict<any>;
 }
 
-export default class SearchableFilterFooter extends React.PureComponent<Props> {
-  handleOptionChange = ({ value }: { value: string }) => {
-    const urlOptions = (this.props.query[this.props.property] || []).concat(value).join(',');
-    this.props.onQueryChange({ [this.props.property]: urlOptions });
+export default function SearchableFilterFooter(props: Props) {
+  const { property, query } = props;
+
+  const handleOptionChange = ({ value }: { value: string }) => {
+    if (value) {
+      const urlOptions = (query[property] || []).concat(value).join(',');
+      props.onQueryChange({ [property]: urlOptions });
+    }
   };
 
-  render() {
-    return (
-      <div className="search-navigator-facet-footer projects-facet-footer">
-        <Select
-          className="input-super-large"
-          isLoading={this.props.isLoading}
-          onChange={this.handleOptionChange}
-          onInputChange={this.props.onInputChange}
-          onMenuOpen={this.props.onOpen}
-          options={this.props.options}
-          placeholder={translate('search_verb')}
-        />
-      </div>
-    );
-  }
+  return (
+    <div className="search-navigator-facet-footer projects-facet-footer">
+      <Select
+        aria-label={translate('projects.facets.search', property)}
+        className="input-super-large"
+        controlShouldRenderValue={false}
+        isLoading={props.isLoading}
+        onChange={handleOptionChange}
+        onInputChange={props.onInputChange}
+        onMenuOpen={props.onOpen}
+        options={props.options}
+        placeholder={translate('search_verb')}
+      />
+    </div>
+  );
 }
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 de3dc9b4373..0a81ba4f272 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1061,8 +1061,10 @@ projects.facets.quality_gate=Quality Gate
 projects.facets.quality_gate.warning_help=Warning status is deprecated. This filter will disappear when no Warning Quality Gate remains.
 projects.facets.rating_x={0} rating
 projects.facets.languages=Languages
+projects.facets.search.languages=Search for languages
 projects.facets.new_lines=New Lines
 projects.facets.tags=Tags
+projects.facets.search.tags=Search for tags
 projects.facets.qualifier=Type
 projects.facets.qualitygate_label_x=Click to filter projects with a {0} quality gate.
 projects.facets.rating_label_single_x=Click to filter projects with a {0} rating of {1}.
-- 
2.39.5