const { open, value } = this.props;
const headerId = `facet_${this.property}`;
const count = value ? 1 : undefined;
+
return (
<FacetBox
className="it__search-navigator-facet-box"
- clearIconLabel={translate('clear')}
data-property={this.property}
id={headerId}
name={translate('coding_rules.facet.available_since')}
const property = 'profile';
const headerId = `facet_${property}`;
-
const count = value ? 1 : undefined;
return (
onClear={this.handleClear}
onClick={this.handleHeaderClick}
open={open}
- clearIconLabel={translate('clear')}
count={count}
help={
<DocHelpTooltip
return (
<ListStyleFacet<string>
facetHeader={translate('coding_rules.facet.repositories')}
- showMoreAriaLabel={translate('coding_rules.facet.repository.show_more')}
- showLessAriaLabel={translate('coding_rules.facet.repository.show_less')}
fetching={false}
getFacetItemText={this.renderTextName}
getSearchResultKey={(rep) => rep}
getFacetItemText={this.getTagName}
getSearchResultKey={(tag) => tag}
getSearchResultText={(tag) => tag}
- showMoreAriaLabel={translate('coding_rules.facet.tag.show_more')}
- showLessAriaLabel={translate('coding_rules.facet.tag.show_less')}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
<Checkbox
ariaLabel={translate('issues.select_all_issues')}
checked={thirdState ? 'indeterminate' : isChecked}
- className="sw-mr-2"
+ className="sw-ml-4 sw-mr-3"
id="issues-selection"
isDisabled={issues.length === 0}
onCheck={this.handleCheckAll}
}
}
- renderIssueComponentList = (issues: Issue[], index: number) => {
+ renderIssueComponentList = ([key, issues]: [string, Issue[]]) => {
const { branchLike, checked, component, openPopup, selectedIssue } = this.props;
return (
- <React.Fragment key={index}>
- <li>
- <ComponentBreadcrumbs component={component} issue={issues[0]} />
- </li>
+ <li key={key}>
+ <ComponentBreadcrumbs component={component} issue={issues[0]} />
<ul>
{issues.map((issue) => (
<IssueItem
/>
))}
</ul>
- </React.Fragment>
+ </li>
);
};
const issuesByComponent = groupBy(issues, (issue) => `(${issue.component} : ${issue.branch})`);
- return <ul>{Object.values(issuesByComponent).map(this.renderIssueComponentList)}</ul>;
+ return <ul>{Object.entries(issuesByComponent).map(this.renderIssueComponentList)}</ul>;
}
}
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={count}
countLabel={translateWithParameters('x_selected', count)}
data-property={this.property}
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={intl.formatMessage({ id: 'clear' })}
count={nbSelectedItems}
countLabel={intl.formatMessage({ id: 'x_selected' }, { '0': nbSelectedItems })}
data-property={property}
showMoreAriaLabel,
showLessAriaLabel,
values,
+ facetHeader,
} = this.props;
if (!stats) {
<ListStyleFacetFooter
nbShown={limitedList.length + selectedBelowLimit.length}
showLess={this.state.showFullList ? this.hideFullList : undefined}
- showLessAriaLabel={showLessAriaLabel}
+ showMoreAriaLabel={
+ showMoreAriaLabel ?? translateWithParameters('show_more_filter_x', facetHeader)
+ }
+ showLessAriaLabel={
+ showLessAriaLabel ?? translateWithParameters('show_less_filter_x', facetHeader)
+ }
showMore={this.showFullList}
- showMoreAriaLabel={showMoreAriaLabel}
total={sortedItems.length}
/>
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={nbSelectedItems}
countLabel={translateWithParameters('x_selected', nbSelectedItems)}
data-property={property}
}, [newCodeSelected, onChange]);
return (
- <FacetItemsList label={translate('issues.facet', PROPERTY)}>
- <FacetItem
- active={newCodeSelected}
- className="it__search-navigator-facet"
- name={translate('issues.new_code')}
- onClick={handleClick}
- value={newCodeSelected ? CodeScope.New : CodeScope.Overall}
- />
-
+ <>
+ <FacetItemsList label={translate('issues.facet', PROPERTY)}>
+ <FacetItem
+ active={newCodeSelected}
+ className="it__search-navigator-facet"
+ name={translate('issues.new_code')}
+ onClick={handleClick}
+ value={newCodeSelected ? CodeScope.New : CodeScope.Overall}
+ />
+ </FacetItemsList>
<BasicSeparator className="sw-mb-5 sw-mt-4" />
- </FacetItemsList>
+ </>
);
}
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={intl.formatMessage({ id: 'clear' })}
count={value ? 1 : 0}
onClear={() => props.onChange({ [property]: undefined })}
onClick={() => onToggle(property)}
import { IconProject, Spinner } from '@sonarsource/echoes-react';
import { omit } from 'lodash';
+import { useIntl } from 'react-intl';
import { ComponentQualifier } from '~sonar-aligned/types/component';
import { MetricKey } from '~sonar-aligned/types/metrics';
import { getTree, searchProjects } from '../../../api/components';
referencedComponents,
stats,
} = props;
+ const intl = useIntl();
const handleSearch = (
query: string,
return (
<ListStyleFacet<SearchedProject>
- facetHeader={translate('issues.facet.projects')}
+ facetHeader={intl.formatMessage({ id: 'issues.facet.projects' })}
fetching={fetching}
getFacetItemText={getProjectName}
getSearchResultKey={(project) => project.key}
import { IconFile, IconFileCode } from '@sonarsource/echoes-react';
import { without } from 'lodash';
+import { useIntl } from 'react-intl';
import { FacetBox, FacetItem } from '~design-system';
import { SOURCE_SCOPES } from '../../../helpers/constants';
import { translate, translateWithParameters } from '../../../helpers/l10n';
export function ScopeFacet(props: ScopeFacetProps) {
const { fetching, open, scopes = [], stats = {} } = props;
+ const intl = useIntl();
const nbSelectableItems = SOURCE_SCOPES.filter(({ scope }) => stats[scope]).length;
const nbSelectedItems = scopes.length;
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={nbSelectedItems}
countLabel={translateWithParameters('x_selected', nbSelectedItems)}
data-property={property}
id={headerId}
loading={fetching}
- name={translate('issues.facet.scopes')}
+ name={intl.formatMessage({ id: 'issues.facet.scopes' })}
onClear={() => props.onChange({ scopes: [] })}
onClick={() => props.onToggle('scopes')}
open={open}
import { without } from 'lodash';
import * as React from 'react';
+import { useIntl } from 'react-intl';
import { FacetBox, FacetItem } from '~design-system';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { Dict } from '../../../types/types';
help,
renderIcon,
} = props;
+ const intl = useIntl();
const nbSelectableItems = listItems.filter((item) => stats[item]).length;
const nbSelectedItems = selectedItems.length;
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={nbSelectedItems}
countLabel={translateWithParameters('x_selected', nbSelectedItems)}
data-property={property}
id={headerId}
loading={fetching}
- name={translate('issues.facet', property)}
+ name={intl.formatMessage({ id: `issues.facet.${property}` })}
onClear={() => props.onChange({ [property]: [] })}
onClick={() => props.onToggle(property)}
open={open}
render() {
const { open } = this.props;
-
const count = this.getValues().length;
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={count}
countLabel={translateWithParameters('x_selected', count)}
data-property={this.property}
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={nbSelectedItems}
countLabel={translateWithParameters('x_selected', nbSelectedItems)}
data-property={this.property}
return (
<FacetBox
className="it__search-navigator-facet-box it__search-navigator-facet-header"
- clearIconLabel={translate('clear')}
count={nbSelectedItems}
countLabel={translateWithParameters('x_selected', nbSelectedItems)}
data-property={FACET_NAME}
import { uniqBy } from 'lodash';
import * as React from 'react';
+import { useIntl } from 'react-intl';
import { RawQuery } from '~sonar-aligned/types/router';
import withLanguagesContext from '../../../app/components/languages/withLanguagesContext';
import { translate } from '../../../helpers/l10n';
export function LanguagesFilter(props: Props) {
const { facet, languages, loadSearchResultCount, query, onQueryChange, value = [] } = props;
+ const intl = useIntl();
const searchOptions = React.useMemo(() => {
// add any language that presents in the facet, but might not be installed
return (
<ListStyleFacet<Language>
- facetHeader={translate('projects.facets.languages')}
+ facetHeader={intl.formatMessage({ id: 'projects.facets.languages' })}
fetching={false}
getFacetItemText={renderLanguageName}
getSearchResultKey={(language) => language.key}
})}
data-property={property}
loading={fetching}
- clearIconLabel={translate('clear')}
count={values.length}
id={headerId}
name={headerName ?? translate('coding_rules.facet', property)}
className={classNames('it__issue-item sw-p-3 sw-mb-4 sw-rounded-1 sw-bg-white', {
selected,
})}
- role="region"
- aria-label={issue.message}
ref={nodeRef}
>
- <div className="sw-flex sw-gap-3">
+ <section aria-label={issue.message} className="sw-flex sw-gap-3">
{hasCheckbox && (
<span className="sw-mt-1/2 sw-ml-1 sw-self-start">
<Checkbox
<IssueMetaBar issue={issue} />
</div>
</div>
- </div>
+ </section>
</IssueItem>
);
}
import classNames from 'classnames';
import { uniqueId } from 'lodash';
import * as React from 'react';
+import { useIntl } from 'react-intl';
import tw from 'twin.macro';
import { themeColor } from '../helpers';
import { BareButton } from '../sonar-aligned/components/buttons';
open = false,
tooltipComponent,
} = props;
+ const intl = useIntl();
const clearable = !disabled && Boolean(onClear) && count !== undefined && count > 0;
const counter = count ?? 0;
<Tooltip content={clearIconLabel}>
<ClearIcon
Icon={CloseIcon}
- aria-label={clearIconLabel ?? ''}
+ aria-label={
+ clearIconLabel ?? intl.formatMessage({ id: 'clear_x_filter' }, { '0': name })
+ }
data-testid={`clear-${name}`}
onClick={onClear}
size="small"
short_number_suffix.k=k
short_number_suffix.m=M
show_less=Show Less
+show_less_filter_x=Show less results for "{0}" filter
show_more=Show More
+show_more_filter_x=Show more results for "{0}" filter
show_all=Show All
show_them=Show Them
should_be_unique=Should be unique
coding_rules.facet.rule_key=Rule
coding_rules.facet.types=Type
coding_rules.facet.prioritizedRule=Prioritized Rules
-
-coding_rules.facet.language.show_more=Show more languages
-coding_rules.facet.language.show_less=Show less languages
-coding_rules.facet.tag.show_more=Show more tags
-coding_rules.facet.tag.show_less=Show less tags
-coding_rules.facet.repository.show_more=Show more repositories
-coding_rules.facet.repository.show_less=Show less repositories
coding_rules.facet.security_hotspots.show_only=Show Security Hotspots Only
-
coding_rules.facets.languages=Languages
coding_rules.facets.tags=Tags
coding_rules.facets.repositories=Repositories