sonarsourceSecurity={props.query.sonarsourceSecurity}
sonarsourceSecurityOpen={!!props.openFacets.sonarsourceSecurity}
sonarsourceSecurityStats={props.facets && props.facets.sonarsourceSecurity}
+ forceShow={true}
/>
<AvailableSinceFacet
onChange={props.onFilterChange}
fetchingOwaspTop10={false}
fetchingOwaspTop10-2021={false}
fetchingSonarSourceSecurity={false}
+ forceShow={true}
onChange={[MockFunction]}
onToggle={[MockFunction]}
open={false}
it('should support OWASP Top 10 version 2021', async () => {
const user = userEvent.setup();
renderIssueApp();
+ await user.click(ui.showFiltersButton().get());
await user.click(screen.getByRole('button', { name: 'issues.facet.standards' }));
const owaspTop102021 = screen.getByRole('button', { name: 'issues.facet.owaspTop10_2021' });
expect(owaspTop102021).toBeInTheDocument();
const user = userEvent.setup();
renderIssueApp();
await waitOnDataLoaded();
+ await user.click(ui.showFiltersButton().get());
// Ensure issue type filter is unchecked
await user.click(ui.typeFacet.get());
const user = userEvent.setup();
renderIssueApp();
await waitOnDataLoaded();
+ await user.click(ui.showFiltersButton().get());
// Select a characteristic
await user.click(ui.clearCharacteristicFilter.get());
issuesHandler.setCurrentUser(currentUser);
renderIssueApp(currentUser);
await waitOnDataLoaded();
+ await user.click(ui.showFiltersButton().get());
// Select a specific date range such that only one issue matches
await user.click(ui.creationDateFacet.get());
renderIssueApp();
+ await user.click(ui.showFiltersButton().get());
await user.click(await ui.ruleFacet.find());
await user.type(ui.ruleFacetSearch.get(), 'rule');
expect(within(ui.ruleFacetList.get()).getAllByRole('checkbox')).toHaveLength(2);
})
).toBeInTheDocument();
+ await user.click(await ui.typeFacet.find());
await user.click(ui.vulnerabilityIssueTypeFilter.get());
// after changing the issue type filter, search field is reset, so we type again
await user.type(ui.ruleFacetSearch.get(), 'rule');
renderIssueApp();
+ await user.click(ui.showFiltersButton().get());
await user.click(await ui.languageFacet.find());
expect(await ui.languageFacetList.find()).toBeInTheDocument();
expect(
await user.click(ui.languageFacet.get());
expect(ui.languageFacetList.query()).not.toBeInTheDocument();
+ await user.click(await ui.typeFacet.find());
await user.click(ui.vulnerabilityIssueTypeFilter.get());
await user.click(ui.languageFacet.get());
expect(await ui.languageFacetList.find()).toBeInTheDocument();
import EmptySearch from '../../../components/common/EmptySearch';
import FiltersHeader from '../../../components/common/FiltersHeader';
import ScreenPositionHelper from '../../../components/common/ScreenPositionHelper';
+import { Button } from '../../../components/controls/buttons';
import ButtonToggle from '../../../components/controls/ButtonToggle';
import Checkbox from '../../../components/controls/Checkbox';
import HelpTooltip from '../../../components/controls/HelpTooltip';
import ListFooter from '../../../components/controls/ListFooter';
-import { Button } from '../../../components/controls/buttons';
import Suggestions from '../../../components/embed-docs-modal/Suggestions';
import withIndexationGuard from '../../../components/hoc/withIndexationGuard';
import { Location, Router, withRouter } from '../../../components/hoc/withRouter';
import * as actions from '../actions';
import ConciseIssuesList from '../conciseIssuesList/ConciseIssuesList';
import ConciseIssuesListHeader from '../conciseIssuesList/ConciseIssuesListHeader';
+import FiltersVisibilityButton from '../sidebar/FiltersVisibilityButton';
import Sidebar from '../sidebar/Sidebar';
import '../styles.css';
import {
- OpenFacets,
- Query,
- STANDARDS,
areMyIssuesSelected,
areQueriesEqual,
getOpen,
getOpenIssue,
+ OpenFacets,
parseFacets,
parseQuery,
+ Query,
saveMyIssues,
serializeQuery,
shouldOpenSonarSourceSecurityFacet,
shouldOpenStandardsChildFacet,
shouldOpenStandardsFacet,
+ STANDARDS,
} from '../utils';
import BulkChangeModal, { MAX_PAGE_SIZE } from './BulkChangeModal';
import IssueHeader from './IssueHeader';
loadingMore: boolean;
locationsNavigator: boolean;
myIssues: boolean;
+ showAllFilters: boolean;
openFacets: OpenFacets;
openIssue?: Issue;
openPopup?: { issue: string; name: string };
loadingMore: false,
locationsNavigator: false,
myIssues: areMyIssuesSelected(props.location.query),
+ showAllFilters: false,
openFacets: {
characteristics: {
[IssueCharacteristicFitFor.Production]: true,
return translateWithParameters('issues.bulk_change_X_issues', count);
};
+ handleShowFiltersChange = (showAllFilters: boolean) => {
+ this.setState({
+ showAllFilters,
+ });
+ };
+
handleFilterChange = (changes: Partial<Query>) => {
this.props.router.push({
pathname: this.props.location.pathname,
renderFacets() {
const { component, currentUser, branchLike } = this.props;
- const { query } = this.state;
+ const { query, showAllFilters } = this.state;
return (
<div className="layout-page-filters">
onFilterChange={this.handleFilterChange}
openFacets={this.state.openFacets}
query={query}
+ showAllFilters={showAllFilters}
referencedComponentsById={this.state.referencedComponentsById}
referencedComponentsByKey={this.state.referencedComponentsByKey}
referencedLanguages={this.state.referencedLanguages}
referencedRules={this.state.referencedRules}
referencedUsers={this.state.referencedUsers}
/>
+ <FiltersVisibilityButton
+ showAllFilters={showAllFilters}
+ onClick={this.handleShowFiltersChange}
+ />
</div>
);
}
query: Query;
stats: Dict<number> | undefined;
referencedUsers: Dict<UserBase>;
+ forceShow: boolean;
}
export default class AssigneeFacet extends React.PureComponent<Props> {
};
render() {
- const values = [...this.props.assignees];
- if (!this.props.assigned) {
+ const { forceShow, assignees, assigned, stats, open, fetching, query } = this.props;
+ const values = [...assignees];
+ if (!assigned) {
values.push('');
}
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<UserBase>
facetHeader={translate('issues.facet.assignees')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getAssigneeName}
getSearchResultKey={(user) => user.login}
getSearchResultText={(user) => user.name || user.login}
onItemClick={this.handleItemClick}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
+ open={open}
property="assignees"
- query={omit(this.props.query, 'assigned', 'assignees')}
+ query={omit(query, 'assigned', 'assignees')}
renderFacetItem={this.renderFacetItem}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_users')}
- stats={this.props.stats}
+ stats={stats}
values={values}
/>
);
query: Query;
stats: Dict<number> | undefined;
author: string[];
+ forceShow: boolean;
}
const SEARCH_SIZE = 100;
};
render() {
+ const { forceShow, fetching, open, stats, author, query } = this.props;
+
+ if (author.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<string>
facetHeader={translate('issues.facet.authors')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.identity}
getSearchResultKey={this.identity}
getSearchResultText={this.identity}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
+ open={open}
property="author"
- query={omit(this.props.query, 'author')}
+ query={omit(query, 'author')}
renderFacetItem={this.identity}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_authors')}
- stats={this.props.stats}
- values={this.props.author}
+ stats={stats}
+ values={author}
/>
);
}
{this.props.open && (
<>
- <FacetItemsList>{availableCharacteristics.map(this.renderItem)}</FacetItemsList>
+ <FacetItemsList label={this.property}>
+ {availableCharacteristics.map(this.renderItem)}
+ </FacetItemsList>
<MultipleSelectionHint
options={Object.keys(availableCharacteristics).length}
values={values.length}
open: boolean;
inNewCodePeriod: boolean;
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
export class CreationDateFacet extends React.PureComponent<Props & WrappedComponentProps> {
if (createdAt) {
return (
<div className="search-navigator-facet-container">
- <DateTimeFormatter date={this.props.createdAt} />
+ <DateTimeFormatter date={createdAt} />
<br />
<span className="note">
- <DateFromNow date={this.props.createdAt} />
+ <DateFromNow date={createdAt} />
</span>
</div>
);
}
render() {
- const { fetching, open } = this.props;
+ const { forceShow, open, fetching } = this.props;
+ const values = this.getValues();
+
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
return (
<FacetBox property={this.property}>
import { BranchLike } from '../../../types/branch-like';
import { TreeComponentWithPath } from '../../../types/component';
import { Facet } from '../../../types/issues';
+import { MetricKey } from '../../../types/metrics';
import { Query } from '../utils';
interface Props {
open: boolean;
query: Query;
stats: Facet | undefined;
+ forceShow: boolean;
}
export default class DirectoryFacet extends React.PureComponent<Props> {
};
loadSearchResultCount = (directories: TreeComponentWithPath[]) => {
- return this.props.loadSearchResultCount('directories', {
+ return this.props.loadSearchResultCount(MetricKey.directories, {
directories: directories.map((directory) => directory.path),
});
};
};
render() {
+ const { forceShow, directories, stats, fetching, open, query } = this.props;
+
+ if (directories.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<TreeComponentWithPath>
facetHeader={translate('issues.facet.directories')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getFacetItemText}
getSearchResultKey={this.getSearchResultKey}
getSearchResultText={this.getSearchResultText}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
- property="directories"
- query={omit(this.props.query, 'directories')}
+ open={open}
+ property={MetricKey.directories}
+ query={omit(query, MetricKey.directories)}
renderFacetItem={this.renderFacetItem}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_directories')}
- stats={this.props.stats}
- values={this.props.directories}
+ stats={stats}
+ values={directories}
/>
);
}
import { BranchLike } from '../../../types/branch-like';
import { TreeComponentWithPath } from '../../../types/component';
import { Facet } from '../../../types/issues';
+import { MetricKey } from '../../../types/metrics';
import { Query } from '../utils';
interface Props {
open: boolean;
query: Query;
stats: Facet | undefined;
+ forceShow: boolean;
}
const MAX_PATH_LENGTH = 15;
};
loadSearchResultCount = (files: TreeComponentWithPath[]) => {
- return this.props.loadSearchResultCount('files', {
+ return this.props.loadSearchResultCount(MetricKey.files, {
files: files
.map((file) => {
return file.path;
};
render() {
+ const { forceShow, files, fetching, open, query, stats } = this.props;
+
+ if (files.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<TreeComponentWithPath>
facetHeader={translate('issues.facet.files')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getFacetItemText}
getSearchResultKey={this.getSearchResultKey}
getSearchResultText={this.getSearchResultText}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
- property="files"
- query={omit(this.props.query, 'files')}
+ open={open}
+ property={MetricKey.files}
+ query={omit(query, MetricKey.files)}
renderFacetItem={this.renderFacetItem}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_files')}
- stats={this.props.stats}
- values={this.props.files}
+ stats={stats}
+ values={files}
/>
);
}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+import { Button } from '../../../components/controls/buttons';
+import { translate } from '../../../helpers/l10n';
+
+interface Props {
+ showAllFilters: boolean;
+ onClick: (val: boolean) => void;
+}
+
+export default function FiltersVisibilityButton(props: Props) {
+ const { showAllFilters } = props;
+
+ return (
+ <div className="display-flex-justify-center spacer-top">
+ <Button
+ onClick={() => props.onClick(!showAllFilters)}
+ className={classNames({ it__show_more_facets: !showAllFilters })}
+ >
+ {translate(showAllFilters ? 'issues.show_less_filters' : 'issues.show_more_filters')}
+ </Button>
+ </div>
+ );
+}
query: Query;
referencedLanguages: Dict<ReferencedLanguage>;
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
class LanguageFacet extends React.PureComponent<Props> {
};
render() {
+ const { forceShow, stats, selectedLanguages, open, fetching, query } = this.props;
+
+ if (selectedLanguages.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<Language>
facetHeader={translate('issues.facet.languages')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getLanguageName}
getSearchResultKey={(language) => language.key}
getSearchResultText={(language) => language.name}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
+ open={open}
property="languages"
- query={omit(this.props.query, 'languages')}
+ query={omit(query, 'languages')}
renderFacetItem={this.getLanguageName}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_languages')}
- stats={this.props.stats}
- values={this.props.selectedLanguages}
+ stats={stats}
+ values={selectedLanguages}
/>
);
}
import { highlightTerm } from '../../../helpers/search';
import { ComponentQualifier } from '../../../types/component';
import { Facet, ReferencedComponent } from '../../../types/issues';
+import { MetricKey } from '../../../types/metrics';
import { Component, Dict, Paging } from '../../../types/types';
import { Query } from '../utils';
query: Query;
referencedComponents: Dict<ReferencedComponent>;
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
interface SearchedProject {
};
loadSearchResultCount = (projects: SearchedProject[]) => {
- return this.props.loadSearchResultCount('projects', {
+ return this.props.loadSearchResultCount(MetricKey.projects, {
projects: projects.map((project) => project.key),
});
};
);
render() {
+ const { forceShow, projects, stats, open, fetching, query } = this.props;
+
+ if (projects.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<SearchedProject>
facetHeader={translate('issues.facet.projects')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getProjectName}
getSearchResultKey={(project) => project.key}
getSearchResultText={(project) => project.name}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
- property="projects"
- query={omit(this.props.query, 'projects')}
+ open={open}
+ property={MetricKey.projects}
+ query={omit(query, MetricKey.projects)}
renderFacetItem={this.renderFacetItem}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_projects')}
- stats={this.props.stats}
- values={this.props.projects}
+ stats={stats}
+ values={projects}
/>
);
}
resolved: boolean;
resolutions: string[];
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
const RESOLUTIONS = [
};
handleItemClick = (itemValue: string, multiple: boolean) => {
- const { resolutions } = this.props;
+ const { resolutions, resolved } = this.props;
if (itemValue === '') {
// unresolved
- this.props.onChange({ resolved: !this.props.resolved, resolutions: [] });
+ this.props.onChange({ resolved: !resolved, resolutions: [] });
} else if (multiple) {
const newValue = orderBy(
resolutions.includes(itemValue)
};
render() {
- const { fetching, open, resolutions, stats = {} } = this.props;
+ const { resolutions, stats = {}, forceShow, fetching, open } = this.props;
const values = resolutions.map((resolution) => this.getFacetItemName(resolution));
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<FacetBox property={this.property}>
<FacetHeader
query: Query;
referencedRules: Dict<ReferencedRule>;
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
export default class RuleFacet extends React.PureComponent<Props> {
};
render() {
- const { fetching, open, query, stats } = this.props;
+ const { forceShow, stats, query, open, fetching } = this.props;
+
+ if (query.rules.length < 1 && !forceShow) {
+ return null;
+ }
return (
<ListStyleFacet<Rule>
open: boolean;
scopes: string[];
stats: Dict<number> | undefined;
+ forceShow: boolean;
}
export default function ScopeFacet(props: ScopeFacetProps) {
- const { fetching, open, scopes = [], stats = {} } = props;
+ const { fetching, open, scopes = [], stats = {}, forceShow } = props;
const values = scopes.map((scope) => translate('issue.scope', scope));
const property = 'scopes';
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
return (
<FacetBox property={property}>
referencedLanguages: Dict<ReferencedLanguage>;
referencedRules: Dict<ReferencedRule>;
referencedUsers: Dict<UserBase>;
+ showAllFilters: boolean;
}
export class Sidebar extends React.PureComponent<Props> {
renderComponentFacets() {
- const { component, facets, loadingFacets, openFacets, query, branchLike } = this.props;
+ const {
+ component,
+ facets,
+ loadingFacets,
+ openFacets,
+ query,
+ branchLike,
+ showAllFilters,
+ loadSearchResultCount,
+ } = this.props;
const hasFileOrDirectory =
!isApplication(component?.qualifier) && !isPortfolioLike(component?.qualifier);
if (!component || !hasFileOrDirectory) {
}
const commonProps = {
componentKey: component.key,
- loadSearchResultCount: this.props.loadSearchResultCount,
+ loadSearchResultCount,
onChange: this.props.onFilterChange,
onToggle: this.props.onFacetToggle,
query,
fetching={loadingFacets.directories === true}
open={!!openFacets.directories}
stats={facets.directories}
+ forceShow={showAllFilters}
{...commonProps}
/>
)}
files={query.files}
open={!!openFacets.files}
stats={facets.files}
+ forceShow={showAllFilters}
{...commonProps}
/>
</>
openFacets,
query,
branchLike,
+ showAllFilters,
+ loadingFacets,
+ loadSearchResultCount,
+ referencedRules,
+ referencedLanguages,
+ referencedComponentsByKey,
+ referencedUsers,
} = this.props;
const disableDeveloperAggregatedInfo =
<>
{displayPeriodFilter && (
<PeriodFilter
- fetching={this.props.loadingFacets.period === true}
+ fetching={loadingFacets.period === true}
onChange={this.props.onFilterChange}
stats={facets.period}
newCodeSelected={query.inNewCodePeriod}
/>
)}
<CharacteristicFacet
- fetching={this.props.loadingFacets.characteristics === true}
+ fetching={loadingFacets.characteristics === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={openFacets.characteristics?.[IssueCharacteristicFitFor.Production]}
characteristics={query.characteristics as IssueCharacteristic[]}
/>
<SeverityFacet
- fetching={this.props.loadingFacets.severities === true}
+ fetching={loadingFacets.severities === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.severities}
stats={facets.severities}
/>
<TypeFacet
- fetching={this.props.loadingFacets.types === true}
+ fetching={loadingFacets.types === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.types}
stats={facets.types}
types={query.types}
+ forceShow={showAllFilters}
/>
+
<ScopeFacet
- fetching={this.props.loadingFacets.scopes === true}
+ fetching={loadingFacets.scopes === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.scopes}
stats={facets.scopes}
scopes={query.scopes}
+ forceShow={showAllFilters}
/>
+
<ResolutionFacet
- fetching={this.props.loadingFacets.resolutions === true}
+ fetching={loadingFacets.resolutions === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.resolutions}
resolutions={query.resolutions}
resolved={query.resolved}
stats={facets.resolutions}
+ forceShow={showAllFilters}
/>
<StatusFacet
- fetching={this.props.loadingFacets.statuses === true}
+ fetching={loadingFacets.statuses === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.statuses}
stats={facets.statuses}
statuses={query.statuses}
+ forceShow={showAllFilters}
/>
<StandardFacet
cwe={query.cwe}
cweOpen={!!openFacets.cwe}
cweStats={facets.cwe}
- fetchingCwe={this.props.loadingFacets.cwe === true}
- fetchingOwaspTop10={this.props.loadingFacets.owaspTop10 === true}
- fetchingOwaspTop10-2021={this.props.loadingFacets['owaspTop10-2021'] === true}
- fetchingSonarSourceSecurity={this.props.loadingFacets.sonarsourceSecurity === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetchingCwe={loadingFacets.cwe === true}
+ fetchingOwaspTop10={loadingFacets.owaspTop10 === true}
+ fetchingOwaspTop10-2021={loadingFacets['owaspTop10-2021'] === true}
+ fetchingSonarSourceSecurity={loadingFacets.sonarsourceSecurity === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.standards}
sonarsourceSecurity={query.sonarsourceSecurity}
sonarsourceSecurityOpen={!!openFacets.sonarsourceSecurity}
sonarsourceSecurityStats={facets.sonarsourceSecurity}
+ forceShow={showAllFilters}
/>
<CreationDateFacet
component={component}
createdAt={query.createdAt}
createdBefore={query.createdBefore}
createdInLast={query.createdInLast}
- fetching={this.props.loadingFacets.createdAt === true}
+ fetching={loadingFacets.createdAt === true}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.createdAt}
inNewCodePeriod={query.inNewCodePeriod}
stats={facets.createdAt}
+ forceShow={showAllFilters}
/>
<LanguageFacet
- fetching={this.props.loadingFacets.languages === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.languages === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.languages}
query={query}
- referencedLanguages={this.props.referencedLanguages}
+ referencedLanguages={referencedLanguages}
selectedLanguages={query.languages}
stats={facets.languages}
+ forceShow={showAllFilters}
/>
<RuleFacet
- fetching={this.props.loadingFacets.rules === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.rules === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.rules}
query={query}
- referencedRules={this.props.referencedRules}
+ referencedRules={referencedRules}
stats={facets.rules}
+ forceShow={showAllFilters}
/>
<TagFacet
component={component}
branch={branch}
- fetching={this.props.loadingFacets.tags === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.tags === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.tags}
query={query}
stats={facets.tags}
tags={query.tags}
+ forceShow={showAllFilters}
/>
{displayProjectsFacet && (
<ProjectFacet
component={component}
- fetching={this.props.loadingFacets.projects === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.projects === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.projects}
projects={query.projects}
query={query}
- referencedComponents={this.props.referencedComponentsByKey}
+ referencedComponents={referencedComponentsByKey}
stats={facets.projects}
+ forceShow={showAllFilters}
/>
)}
{this.renderComponentFacets()}
<AssigneeFacet
assigned={query.assigned}
assignees={query.assignees}
- fetching={this.props.loadingFacets.assignees === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.assignees === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.assignees}
query={query}
- referencedUsers={this.props.referencedUsers}
+ referencedUsers={referencedUsers}
stats={facets.assignees}
+ forceShow={showAllFilters}
/>
)}
{displayAuthorFacet && !disableDeveloperAggregatedInfo && (
<AuthorFacet
author={query.author}
component={component}
- fetching={this.props.loadingFacets.author === true}
- loadSearchResultCount={this.props.loadSearchResultCount}
+ fetching={loadingFacets.author === true}
+ loadSearchResultCount={loadSearchResultCount}
onChange={this.props.onFilterChange}
onToggle={this.props.onFacetToggle}
open={!!openFacets.author}
query={query}
stats={facets.author}
+ forceShow={showAllFilters}
/>
)}
</>
sonarsourceSecurity: string[];
sonarsourceSecurityOpen: boolean;
sonarsourceSecurityStats: Dict<number> | undefined;
+ forceShow: boolean;
}
interface State {
this.mounted = true;
// load standards.json only if the facet is open, or there is a selected value
- if (
- this.props.open ||
- this.props.owaspTop10.length > 0 ||
- this.props['owaspTop10-2021'].length > 0 ||
- this.props.cwe.length > 0 ||
- this.props.sonarsourceSecurity.length > 0
- ) {
+ if (this.isFacetVisible() || this.props.open) {
this.loadStandards();
}
}
componentDidUpdate(prevProps: Props) {
- if (!prevProps.open && this.props.open) {
+ if (!prevProps.open && this.props.open && this.isFacetVisible()) {
this.loadStandards();
}
}
};
getValues = () => {
+ const { sonarsourceSecurity, owaspTop10, 'owaspTop10-2021': owaspTop2021, cwe } = this.props;
+ const { standards } = this.state;
return [
- ...this.props.sonarsourceSecurity.map((item) =>
- renderSonarSourceSecurityCategory(this.state.standards, item, true)
+ ...sonarsourceSecurity.map((item) =>
+ renderSonarSourceSecurityCategory(standards, item, true)
),
- ...this.props.owaspTop10.map((item) =>
- renderOwaspTop10Category(this.state.standards, item, true)
- ),
- ...this.props['owaspTop10-2021'].map((item) =>
- renderOwaspTop102021Category(this.state.standards, item, true)
- ),
- ...this.props.cwe.map((item) => renderCWECategory(this.state.standards, item)),
+ ...owaspTop10.map((item) => renderOwaspTop10Category(standards, item, true)),
+ ...owaspTop2021.map((item) => renderOwaspTop102021Category(standards, item, true)),
+ ...cwe.map((item) => renderCWECategory(standards, item)),
];
};
: Promise.resolve({});
};
+ isFacetVisible = () => {
+ const {
+ forceShow,
+ cwe,
+ sonarsourceSecurity,
+ owaspTop10,
+ 'owaspTop10-2021': owaspTop2021,
+ } = this.props;
+ const values = [...cwe, ...sonarsourceSecurity, ...owaspTop10, ...owaspTop2021];
+
+ return !(values.length < 1 && !forceShow);
+ };
+
renderList = (
statsProp: StatsProp,
valuesProp: ValuesProp,
}
renderSonarSourceSecurityList() {
- const stats = this.props.sonarsourceSecurityStats;
- const values = this.props.sonarsourceSecurity;
+ const { sonarsourceSecurityStats: stats, sonarsourceSecurity: values } = this.props;
+ const { standards, showFullSonarSourceList } = this.state;
if (!stats) {
return null;
const sortedItems = sortBy(
Object.keys(stats),
(key) => -stats[key],
- (key) => renderSonarSourceSecurityCategory(this.state.standards, key)
+ (key) => renderSonarSourceSecurityCategory(standards, key)
);
- const limitedList = this.state.showFullSonarSourceList
+ const limitedList = showFullSonarSourceList
? sortedItems
: sortedItems.slice(0, INITIAL_FACET_COUNT);
// make sure all selected items are displayed
- const selectedBelowLimit = this.state.showFullSonarSourceList
+ const selectedBelowLimit = showFullSonarSourceList
? []
: sortedItems.slice(INITIAL_FACET_COUNT).filter((item) => values.includes(item));
sonarsourceSecurity,
sonarsourceSecurityOpen,
} = this.props;
+ const { standards } = this.state;
+
return (
<>
<FacetBox className="is-inner" property={SecurityStandard.SONARSOURCE}>
onClick={this.handleSonarSourceSecurityHeaderClick}
open={sonarsourceSecurityOpen}
values={sonarsourceSecurity.map((item) =>
- renderSonarSourceSecurityCategory(this.state.standards, item)
+ renderSonarSourceSecurityCategory(standards, item)
)}
/>
{sonarsourceSecurityOpen && (
name={translate('issues.facet.owaspTop10_2021')}
onClick={this.handleOwaspTop102021HeaderClick}
open={owaspTop102021Open}
- values={owaspTop102021.map((item) =>
- renderOwaspTop102021Category(this.state.standards, item)
- )}
+ values={owaspTop102021.map((item) => renderOwaspTop102021Category(standards, item))}
/>
{owaspTop102021Open && (
<>
className="is-inner"
facetHeader={translate('issues.facet.cwe')}
fetching={fetchingCwe}
- getFacetItemText={(item) => renderCWECategory(this.state.standards, item)}
+ getFacetItemText={(item) => renderCWECategory(standards, item)}
getSearchResultKey={(item) => item}
- getSearchResultText={(item) => renderCWECategory(this.state.standards, item)}
+ getSearchResultText={(item) => renderCWECategory(standards, item)}
loadSearchResultCount={this.loadCWESearchResultCount}
onChange={this.props.onChange}
onSearch={this.handleCWESearch}
open={cweOpen}
property={SecurityStandard.CWE}
query={omit(query, 'cwe')}
- renderFacetItem={(item) => renderCWECategory(this.state.standards, item)}
+ renderFacetItem={(item) => renderCWECategory(standards, item)}
renderSearchResult={(item, query) =>
- highlightTerm(renderCWECategory(this.state.standards, item), query)
+ highlightTerm(renderCWECategory(standards, item), query)
}
searchPlaceholder={translate('search.search_for_cwe')}
stats={cweStats}
render() {
const { open } = this.props;
+ if (!this.isFacetVisible()) {
+ return null;
+ }
+
return (
<FacetBox property={this.property}>
<FacetHeader
open: boolean;
stats: Dict<number> | undefined;
statuses: string[];
+ forceShow: boolean;
}
const STATUSES = ['OPEN', 'CONFIRMED', 'REOPENED', 'RESOLVED', 'CLOSED'];
}
renderItem = (status: string) => {
- const active = this.props.statuses.includes(status);
+ const { statuses } = this.props;
+ const active = statuses.includes(status);
const stat = this.getStat(status);
return (
};
render() {
- const { fetching, open, statuses, stats = {} } = this.props;
+ const { statuses, stats = {}, forceShow, fetching, open } = this.props;
const values = statuses.map((status) => translate('issue.status', status));
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<FacetBox property={this.property}>
<FacetHeader
query: Query;
stats: Dict<number> | undefined;
tags: string[];
+ forceShow: boolean;
}
const SEARCH_SIZE = 100;
);
render() {
+ const { forceShow, tags, fetching, stats, open, query } = this.props;
+
+ if (tags.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<ListStyleFacet<string>
facetHeader={translate('issues.facet.tags')}
- fetching={this.props.fetching}
+ fetching={fetching}
getFacetItemText={this.getTagName}
getSearchResultKey={(tag) => tag}
getSearchResultText={(tag) => tag}
onChange={this.props.onChange}
onSearch={this.handleSearch}
onToggle={this.props.onToggle}
- open={this.props.open}
+ open={open}
property="tags"
- query={omit(this.props.query, 'tags')}
+ query={omit(query, 'tags')}
renderFacetItem={this.renderTag}
renderSearchResult={this.renderSearchResult}
searchPlaceholder={translate('search.search_for_tags')}
- stats={this.props.stats}
- values={this.props.tags}
+ stats={stats}
+ values={tags}
/>
);
}
open: boolean;
stats: Dict<number> | undefined;
types: string[];
+ forceShow: boolean;
}
export default class TypeFacet extends React.PureComponent<Props> {
};
render() {
- const { fetching, open, types, stats = {} } = this.props;
+ const { types, stats = {}, forceShow, open, fetching } = this.props;
const values = types.map((type) => translate('issue.type', type));
+ if (values.length < 1 && !forceShow) {
+ return null;
+ }
+
return (
<FacetBox property={this.property}>
<FacetHeader
import { mockAppState } from '../../../../helpers/testMocks';
import { renderComponent } from '../../../../helpers/testReactTestingUtils';
import { ComponentQualifier } from '../../../../types/component';
+import { IssueSeverity } from '../../../../types/issues';
import { GlobalSettingKeys } from '../../../../types/settings';
import { Sidebar } from '../Sidebar';
]);
});
+it('should render only main visible facets: Characteristics & Severity', () => {
+ renderSidebar({
+ component: mockComponent(),
+ showAllFilters: false,
+ query: mockQuery({ assigned: true }),
+ });
+
+ expect(screen.getAllByRole('button').map((button) => button.textContent)).toStrictEqual([
+ 'issues.facet.characteristics.PRODUCTION',
+ 'issues.facet.characteristics.DEVELOPMENT',
+ 'issues.facet.severities',
+ ]);
+});
+
+it('should render secondary facets with filters applied eventhough "Show more filters" button isn`t toggled', () => {
+ renderSidebar({
+ component: mockComponent(),
+ showAllFilters: false,
+ query: mockQuery({
+ assigned: false,
+ tags: ['tag'],
+ rules: ['rule'],
+ directories: ['directory'],
+ cwe: ['security'],
+ languages: ['java'],
+ severities: [IssueSeverity.Blocker],
+ }),
+ });
+
+ expect(screen.getAllByRole('button').map((button) => button.textContent)).toStrictEqual([
+ 'issues.facet.characteristics.PRODUCTION',
+ 'issues.facet.characteristics.DEVELOPMENT',
+ 'issues.facet.severities',
+ 'clear',
+ 'issues.facet.standards',
+ 'clear',
+ 'issues.facet.languages',
+ 'clear',
+ 'issues.facet.rules',
+ 'clear',
+ 'issues.facet.tags',
+ 'clear',
+ 'issues.facet.directories',
+ 'clear',
+ 'issues.facet.assignees',
+ 'clear',
+ ]);
+});
+
it.each([
['week', '1w'],
['month', '1m'],
referencedLanguages={{}}
referencedRules={{}}
referencedUsers={{}}
+ showAllFilters={true}
{...props}
/>
);
dateInputYearSelect: byRole('combobox', { name: 'Year:' }),
clearAllFilters: byRole('button', { name: 'clear_all_filters' }),
+ showFiltersButton: (showMore = true) =>
+ byRole('button', { name: `issues.show_${showMore ? 'more' : 'less'}_filters` }),
ruleFacetList: byRole('list', { name: 'rules' }),
languageFacetList: byRole('list', { name: 'languages' }),
issues.x_more_locations=+ {0} more locations
issues.not_all_issue_show=Not all issues are included
issues.not_all_issue_show_why=You do not have access to all projects in this portfolio
+issues.show_more_filters=Show more filters
+issues.show_less_filters=Show less filters
#------------------------------------------------------------------------------
#
projects / sonarqube.git / commitdiff