SONAR-16731 [891586] [891587] Form elements must have labels

3 files changed, 24 insertions, 259 deletions

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>
+  );
 }