import { isSameDay, parseDate } from '../../../helpers/dates';
import { translate } from '../../../helpers/l10n';
import { formatMeasure } from '../../../helpers/measures';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
interface Props {
component: T.Component | undefined;
return (
<FacetBox property={this.property}>
<FacetHeader
+ fetching={this.props.fetching}
name={translate('issues.facet', this.property)}
onClear={this.handleClear}
onClick={this.handleHeaderClick}
values={this.getValues()}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && this.renderInner()}
</FacetBox>
);
import FacetItem from '../../../components/facet/FacetItem';
import FacetItemsList from '../../../components/facet/FacetItemsList';
import { translate } from '../../../helpers/l10n';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import MultipleSelectionHint from '../../../components/facet/MultipleSelectionHint';
interface Props {
<FacetBox property={this.property}>
<FacetHeader
clearLabel="reset_verb"
+ fetching={this.props.fetching}
name={translate('issues.facet', this.property)}
onClear={this.handleClear}
onClick={this.handleHeaderClick}
values={values}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && (
<>
<FacetItemsList>{RESOLUTIONS.map(this.renderItem)}</FacetItemsList>
import FacetItemsList from '../../../components/facet/FacetItemsList';
import SeverityHelper from '../../../components/shared/SeverityHelper';
import { translate } from '../../../helpers/l10n';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import MultipleSelectionHint from '../../../components/facet/MultipleSelectionHint';
interface Props {
return (
<FacetBox property={this.property}>
<FacetHeader
+ fetching={this.props.fetching}
name={translate('issues.facet', this.property)}
onClear={this.handleClear}
onClick={this.handleHeaderClick}
values={values}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && (
<>
<FacetItemsList>{SEVERITIES.map(this.renderItem)}</FacetItemsList>
*/
import * as React from 'react';
import { sortBy, without, omit } from 'lodash';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import FacetBox from '../../../components/facet/FacetBox';
import FacetHeader from '../../../components/facet/FacetHeader';
import FacetItem from '../../../components/facet/FacetItem';
<>
<FacetBox className="is-inner" property="sonarsourceSecurity">
<FacetHeader
+ fetching={this.props.fetchingSonarSourceSecurity}
name={translate('issues.facet.sonarsourceSecurity')}
onClick={this.handleSonarSourceSecurityHeaderClick}
open={this.props.sonarsourceSecurityOpen}
renderSonarSourceSecurityCategory(this.state.standards, item)
)}
/>
- <DeferredSpinner loading={this.props.fetchingSonarSourceSecurity} />
{this.props.sonarsourceSecurityOpen && (
<>
{this.renderSonarSourceSecurityList()}
</FacetBox>
<FacetBox className="is-inner" property="owaspTop10">
<FacetHeader
+ fetching={this.props.fetchingOwaspTop10}
name={translate('issues.facet.owaspTop10')}
onClick={this.handleOwaspTop10HeaderClick}
open={this.props.owaspTop10Open}
renderOwaspTop10Category(this.state.standards, item)
)}
/>
- <DeferredSpinner loading={this.props.fetchingOwaspTop10} />
{this.props.owaspTop10Open && (
<>
{this.renderOwaspTop10List()}
</FacetBox>
<FacetBox className="is-inner" property="sansTop25">
<FacetHeader
+ fetching={this.props.fetchingSansTop25}
name={translate('issues.facet.sansTop25')}
onClick={this.handleSansTop25HeaderClick}
open={this.props.sansTop25Open}
renderSansTop25Category(this.state.standards, item)
)}
/>
- <DeferredSpinner loading={this.props.fetchingSansTop25} />
{this.props.sansTop25Open && (
<>
{this.renderSansTop25List()}
import FacetItemsList from '../../../components/facet/FacetItemsList';
import StatusHelper from '../../../components/shared/StatusHelper';
import { translate } from '../../../helpers/l10n';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import MultipleSelectionHint from '../../../components/facet/MultipleSelectionHint';
interface Props {
return (
<FacetBox property={this.property}>
<FacetHeader
+ fetching={this.props.fetching}
name={translate('issues.facet', this.property)}
onClear={this.handleClear}
onClick={this.handleHeaderClick}
values={values}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && (
<>
<FacetItemsList title={translate('issues')}>
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { orderBy, without } from 'lodash';
-import DeferredSpinner from '../../../components/common/DeferredSpinner';
import FacetBox from '../../../components/facet/FacetBox';
import FacetHeader from '../../../components/facet/FacetHeader';
import FacetItem from '../../../components/facet/FacetItem';
<FacetBox property={this.property}>
<FacetHeader
clearLabel="reset_verb"
+ fetching={this.props.fetching}
name={translate('issues.facet', this.property)}
onClear={this.handleClear}
onClick={this.handleHeaderClick}
values={values}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && (
<>
<FacetItemsList>{ISSUE_TYPES.map(this.renderItem)}</FacetItemsList>
property="sansTop25"
>
<FacetHeader
+ fetching={false}
name="issues.facet.sansTop25"
onClick={[Function]}
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<div
className="search-navigator-facet-empty little-spacer-top"
>
property="sonarsourceSecurity"
>
<FacetHeader
+ fetching={false}
name="issues.facet.sonarsourceSecurity"
onClick={[Function]}
open={true}
]
}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<FacetItemsList>
<FacetItem
active={true}
property="owaspTop10"
>
<FacetHeader
+ fetching={false}
name="issues.facet.owaspTop10"
onClick={[Function]}
open={true}
]
}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<FacetItemsList>
<FacetItem
active={false}
property="sansTop25"
>
<FacetHeader
+ fetching={false}
name="issues.facet.sansTop25"
onClick={[Function]}
open={true}
]
}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<FacetItemsList>
<FacetItem
active={false}
property="statuses"
>
<FacetHeader
+ fetching={false}
name="issues.facet.statuses"
onClear={[Function]}
onClick={[Function]}
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<FacetItemsList
title="issues"
>
>
<FacetHeader
clearLabel="reset_verb"
+ fetching={false}
name="issues.facet.types"
onClear={[Function]}
onClick={[Function]}
]
}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<FacetItemsList>
<FacetItem
active={false}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import OpenCloseIcon from '../icons-components/OpenCloseIcon';
-import HelpTooltip from '../controls/HelpTooltip';
import { Button } from '../ui/buttons';
+import DeferredSpinner from '../common/DeferredSpinner';
+import HelpTooltip from '../controls/HelpTooltip';
+import OpenCloseIcon from '../icons-components/OpenCloseIcon';
import { translate, translateWithParameters } from '../../helpers/l10n';
interface Props {
children?: React.ReactNode;
clearLabel?: string;
+ fetching?: boolean;
helper?: string;
name: React.ReactNode;
onClear?: () => void;
this.props.values != null && this.props.values.length > 0 && this.props.onClear != null;
return (
- <div className="search-navigator-facet-header-wrapper">
+ <div className="search-navigator-facet-header-wrapper display-flex-center">
{this.props.onClick ? (
<span className="search-navigator-facet-header display-flex-center">
<a href="#" onClick={this.handleClick}>
{this.renderValueIndicator()}
</span>
+ {this.props.fetching && (
+ <span className="little-spacer-right">
+ <DeferredSpinner />
+ </span>
+ )}
+
{showClearButton && (
<Button
className="search-navigator-facet-header-button button-small button-red"
import ListStyleFacetFooter from './ListStyleFacetFooter';
import MultipleSelectionHint from './MultipleSelectionHint';
import { Alert } from '../ui/Alert';
-import DeferredSpinner from '../common/DeferredSpinner';
import ListFooter from '../controls/ListFooter';
import SearchBox from '../controls/SearchBox';
import Tooltip from '../controls/Tooltip';
})}
property={this.props.property}>
<FacetHeader
+ fetching={this.props.fetching}
name={
<Tooltip overlay={disabled ? this.props.disabledHelper : undefined}>
<span>{this.props.facetHeader}</span>
values={values}
/>
- <DeferredSpinner loading={this.props.fetching} />
{this.props.open && !disabled && (
<>
{this.renderSearch()}
expect(shallow(<FacetHeader name="foo" open={false} />)).toMatchSnapshot();
});
+it('should render with a spinner if loading', () => {
+ expect(shallow(<FacetHeader fetching={true} name="foo" open={false} />)).toMatchSnapshot();
+});
+
it('should call onClick', () => {
const onClick = jest.fn();
const wrapper = shallow(<FacetHeader name="foo" onClick={onClick} open={false} />);
exports[`should clear 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
exports[`should render closed facet with value 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
exports[`should render closed facet without value 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
exports[`should render open facet with value 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
exports[`should render open facet without value 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
</div>
`;
+exports[`should render with a spinner if loading 1`] = `
+<div
+ className="search-navigator-facet-header-wrapper display-flex-center"
+>
+ <span
+ className="search-navigator-facet-header display-flex-center"
+ >
+ foo
+ </span>
+ <span
+ className="search-navigator-facet-header-value spacer-left spacer-right "
+ />
+ <span
+ className="little-spacer-right"
+ >
+ <DeferredSpinner
+ timeout={100}
+ />
+ </span>
+</div>
+`;
+
exports[`should render without link 1`] = `
<div
- className="search-navigator-facet-header-wrapper"
+ className="search-navigator-facet-header-wrapper display-flex-center"
>
<span
className="search-navigator-facet-header display-flex-center"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip
overlay="Disabled helper description"
open={false}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
</FacetBox>
`;
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
]
}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
property="foo"
>
<FacetHeader
+ fetching={false}
name={
<Tooltip>
<span>
open={true}
values={Array []}
/>
- <DeferredSpinner
- loading={false}
- timeout={100}
- />
<SearchBox
autoFocus={false}
className="little-spacer-top spacer-bottom"
color: var(--secondFontColor);
}
-.search-navigator-facet-box > .spinner {
- float: right;
- margin-top: -24px;
-}
-
.search-navigator-facet {
position: relative;
display: inline-flex;