SONAR-16823 Buttons have same name but different actions

5 files changed, 37 insertions, 81 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
index 7be20e1a1cb..f77224b01c7 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
@@ -20,7 +20,6 @@
 import classNames from 'classnames';
 import { orderBy, sortBy, without } from 'lodash';
 import * as React from 'react';
-import Tooltip from '../../../components/controls/Tooltip';
 import FacetBox from '../../../components/facet/FacetBox';
 import FacetHeader from '../../../components/facet/FacetHeader';
 import FacetItem from '../../../components/facet/FacetItem';
@@ -110,11 +109,9 @@ export default class Facet extends React.PureComponent<Props> {
         className={classNames({ 'search-navigator-facet-box-forbidden': disabled })}
         property={this.props.property}>
         <FacetHeader
-          name={
-            <Tooltip overlay={disabled ? this.props.disabledHelper : undefined}>
-              <span>{translate('coding_rules.facet', this.props.property)}</span>
-            </Tooltip>
-          }
+          name={translate('coding_rules.facet', this.props.property)}
+          disabled={disabled}
+          disabledHelper={this.props.disabledHelper}
           onClear={this.handleClear}
           onClick={disabled ? undefined : this.handleHeaderClick}
           open={this.props.open && !disabled}
diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index febd98b02ed..ee06de65751 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -23,12 +23,15 @@ import HelpTooltip from '../../components/controls/HelpTooltip';
 import OpenCloseIcon from '../../components/icons/OpenCloseIcon';
 import DeferredSpinner from '../../components/ui/DeferredSpinner';
 import { translate, translateWithParameters } from '../../helpers/l10n';
+import Tooltip from '../controls/Tooltip';
 
 interface Props {
   children?: React.ReactNode;
   fetching?: boolean;
   helper?: string;
-  name: React.ReactNode;
+  disabled?: boolean;
+  disabledHelper?: string;
+  name: string;
   onClear?: () => void;
   onClick?: () => void;
   open: boolean;
@@ -66,9 +69,15 @@ export default class FacetHeader extends React.PureComponent<Props> {
   }
 
   render() {
-    const showClearButton =
-      this.props.values != null && this.props.values.length > 0 && this.props.onClear != null;
-
+    const { disabled, values, disabledHelper, name, open, children, fetching } = this.props;
+    const showClearButton = values != null && values.length > 0 && this.props.onClear != null;
+    const header = disabled ? (
+      <Tooltip overlay={disabledHelper}>
+        <span>{name}</span>
+      </Tooltip>
+    ) : (
+      name
+    );
     return (
       <div className="search-navigator-facet-header-wrapper display-flex-center">
         {this.props.onClick ? (
@@ -77,27 +86,27 @@ export default class FacetHeader extends React.PureComponent<Props> {
               className="button-link"
               type="button"
               onClick={this.handleClick}
-              aria-expanded={this.props.open}
+              aria-expanded={open}
               tabIndex={0}>
-              <OpenCloseIcon className="little-spacer-right" open={this.props.open} />
-              {this.props.name}
+              <OpenCloseIcon className="little-spacer-right" open={open} />
+              {header}
             </button>
             {this.renderHelper()}
           </span>
         ) : (
           <span className="search-navigator-facet-header display-flex-center">
-            {this.props.name}
+            {header}
             {this.renderHelper()}
           </span>
         )}
 
-        {this.props.children}
+        {children}
 
         <span className="search-navigator-facet-header-value spacer-left spacer-right ">
           {this.renderValueIndicator()}
         </span>
 
-        {this.props.fetching && (
+        {fetching && (
           <span className="little-spacer-right">
             <DeferredSpinner />
           </span>
@@ -106,6 +115,7 @@ export default class FacetHeader extends React.PureComponent<Props> {
         {showClearButton && (
           <Button
             className="search-navigator-facet-header-button button-small button-red"
+            aria-label={translateWithParameters('clear_x_filter', name)}
             onClick={this.props.onClear}>
             {translate('clear')}
           </Button>
diff --git a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
index d56bfd1b88c..206df6595be 100644
--- a/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/components/facet/ListStyleFacet.tsx
@@ -22,7 +22,6 @@ import { sortBy, without } from 'lodash';
 import * as React from 'react';
 import ListFooter from '../../components/controls/ListFooter';
 import SearchBox from '../../components/controls/SearchBox';
-import Tooltip from '../../components/controls/Tooltip';
 import { Alert } from '../../components/ui/Alert';
 import { translate } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
@@ -395,11 +394,9 @@ export default class ListStyleFacet<S> extends React.Component<Props<S>, State<S
         property={this.props.property}>
         <FacetHeader
           fetching={this.props.fetching}
-          name={
-            <Tooltip overlay={disabled ? this.props.disabledHelper : undefined}>
-              <span>{this.props.facetHeader}</span>
-            </Tooltip>
-          }
+          name={this.props.facetHeader}
+          disabled={disabled}
+          disabledHelper={this.props.disabledHelper}
           onClear={this.handleClear}
           onClick={disabled ? undefined : this.handleHeaderClick}
           open={this.props.open && !disabled}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/Facet-it.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/Facet-it.tsx
index 8c86352db2a..0b1d70d7bf7 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/Facet-it.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/Facet-it.tsx
@@ -66,7 +66,7 @@ it('should correctly render a header with helper text', async () => {
 it('should correctly render a header with value data', () => {
   renderFacet(undefined, { values: ['value 1'] });
   expect(screen.getByText('value 1')).toBeInTheDocument();
-  screen.getByRole('button', { name: 'clear' }).click();
+  screen.getByRole('button', { name: 'clear_x_filter.foo' }).click();
   expect(screen.queryByText('value 1')).not.toBeInTheDocument();
 });
 
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
index ba89dc13bb5..63f62b3484f 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/ListStyleFacet-test.tsx.snap
@@ -6,16 +6,10 @@ exports[`should be disabled 1`] = `
   property="foo"
 >
   <FacetHeader
+    disabled={true}
+    disabledHelper="Disabled helper description"
     fetching={false}
-    name={
-      <Tooltip
-        overlay="Disabled helper description"
-      >
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     open={false}
     values={Array []}
@@ -30,13 +24,7 @@ exports[`should display all selected items 1`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -118,13 +106,7 @@ exports[`should render 1`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -193,13 +175,7 @@ exports[`should search 1`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -259,13 +235,7 @@ exports[`should search 2`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -336,13 +306,7 @@ exports[`should search 3`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -411,13 +375,7 @@ exports[`should search 4`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}
@@ -451,13 +409,7 @@ exports[`should search 5`] = `
 >
   <FacetHeader
     fetching={false}
-    name={
-      <Tooltip>
-        <span>
-          facet header
-        </span>
-      </Tooltip>
-    }
+    name="facet header"
     onClear={[Function]}
     onClick={[Function]}
     open={true}