From d2030207ca79237d596b3e452598ac455b8fdd5f Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Thu, 25 Aug 2022 12:33:16 +0200 Subject: [PATCH] SONAR-16823 Buttons have same name but different actions --- .../js/apps/coding-rules/components/Facet.tsx | 9 +-- .../main/js/components/facet/FacetHeader.tsx | 30 +++++--- .../js/components/facet/ListStyleFacet.tsx | 9 +-- .../components/facet/__tests__/Facet-it.tsx | 2 +- .../ListStyleFacet-test.tsx.snap | 68 +++---------------- .../resources/org/sonar/l10n/core.properties | 1 + 6 files changed, 38 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 { className={classNames({ 'search-navigator-facet-box-forbidden': disabled })} property={this.props.property}> - {translate('coding_rules.facet', this.props.property)} - - } + 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 { } 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 ? ( + + {name} + + ) : ( + name + ); return (
{this.props.onClick ? ( @@ -77,27 +86,27 @@ export default class FacetHeader extends React.PureComponent { className="button-link" type="button" onClick={this.handleClick} - aria-expanded={this.props.open} + aria-expanded={open} tabIndex={0}> - - {this.props.name} + + {header} {this.renderHelper()} ) : ( - {this.props.name} + {header} {this.renderHelper()} )} - {this.props.children} + {children} {this.renderValueIndicator()} - {this.props.fetching && ( + {fetching && ( @@ -106,6 +115,7 @@ export default class FacetHeader extends React.PureComponent { {showClearButton && ( 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 extends React.Component, State - {this.props.facetHeader} - - } + 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" > - - facet header - - - } + name="facet header" onClear={[Function]} open={false} values={Array []} @@ -30,13 +24,7 @@ exports[`should display all selected items 1`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -118,13 +106,7 @@ exports[`should render 1`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -193,13 +175,7 @@ exports[`should search 1`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -259,13 +235,7 @@ exports[`should search 2`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -336,13 +306,7 @@ exports[`should search 3`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -411,13 +375,7 @@ exports[`should search 4`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} @@ -451,13 +409,7 @@ exports[`should search 5`] = ` > - - facet header - - - } + name="facet header" onClear={[Function]} onClick={[Function]} open={true} 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 55fa7879a30..f11fd232448 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -251,6 +251,7 @@ assigned_to=Assigned to bulk_change=Bulk Change bulleted_point=Bulleted point clear=Clear +clear_x_filter=Clear {0} Filters clear_all_filters=Clear All Filters coding_rules=Rules copy_to_clipboard=Click to copy to clipboard -- 2.39.5