SONAR-12167 Prevent facet spinner from overlapping with button

9 files changed, 14 insertions, 38 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
index ba6b59c2df9..13bf358cbc1 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
@@ -32,7 +32,6 @@ import DateRangeInput from '../../../components/controls/DateRangeInput';
 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;
@@ -279,6 +278,7 @@ class CreationDateFacet extends React.PureComponent<Props & InjectedIntlProps> {
     return (
       <FacetBox property={this.property}>
         <FacetHeader
+          fetching={this.props.fetching}
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
@@ -286,7 +286,6 @@ class CreationDateFacet extends React.PureComponent<Props & InjectedIntlProps> {
           values={this.getValues()}
         />
 
-        <DeferredSpinner loading={this.props.fetching} />
         {this.props.open && this.renderInner()}
       </FacetBox>
     );
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.tsx
index 958245f1ad6..8a667b7d93d 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/ResolutionFacet.tsx
@@ -25,7 +25,6 @@ import FacetHeader from '../../../components/facet/FacetHeader';
 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 {
@@ -116,6 +115,7 @@ export default class ResolutionFacet extends React.PureComponent<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}
@@ -123,7 +123,6 @@ export default class ResolutionFacet extends React.PureComponent<Props> {
           values={values}
         />
 
-        <DeferredSpinner loading={this.props.fetching} />
         {this.props.open && (
           <>
             <FacetItemsList>{RESOLUTIONS.map(this.renderItem)}</FacetItemsList>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
index 4bd9b25755a..0a8916e945d 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
@@ -26,7 +26,6 @@ import FacetItem from '../../../components/facet/FacetItem';
 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 {
@@ -100,6 +99,7 @@ export default class SeverityFacet extends React.PureComponent<Props> {
     return (
       <FacetBox property={this.property}>
         <FacetHeader
+          fetching={this.props.fetching}
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
@@ -107,7 +107,6 @@ export default class SeverityFacet extends React.PureComponent<Props> {
           values={values}
         />
 
-        <DeferredSpinner loading={this.props.fetching} />
         {this.props.open && (
           <>
             <FacetItemsList>{SEVERITIES.map(this.renderItem)}</FacetItemsList>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
index 51dde5811c3..d932ecdc790 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/StandardFacet.tsx
@@ -19,7 +19,6 @@
  */
 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';
@@ -300,6 +299,7 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
       <>
         <FacetBox className="is-inner" property="sonarsourceSecurity">
           <FacetHeader
+            fetching={this.props.fetchingSonarSourceSecurity}
             name={translate('issues.facet.sonarsourceSecurity')}
             onClick={this.handleSonarSourceSecurityHeaderClick}
             open={this.props.sonarsourceSecurityOpen}
@@ -307,7 +307,6 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
               renderSonarSourceSecurityCategory(this.state.standards, item)
             )}
           />
-          <DeferredSpinner loading={this.props.fetchingSonarSourceSecurity} />
           {this.props.sonarsourceSecurityOpen && (
             <>
               {this.renderSonarSourceSecurityList()}
@@ -317,6 +316,7 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
         </FacetBox>
         <FacetBox className="is-inner" property="owaspTop10">
           <FacetHeader
+            fetching={this.props.fetchingOwaspTop10}
             name={translate('issues.facet.owaspTop10')}
             onClick={this.handleOwaspTop10HeaderClick}
             open={this.props.owaspTop10Open}
@@ -324,7 +324,6 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
               renderOwaspTop10Category(this.state.standards, item)
             )}
           />
-          <DeferredSpinner loading={this.props.fetchingOwaspTop10} />
           {this.props.owaspTop10Open && (
             <>
               {this.renderOwaspTop10List()}
@@ -334,6 +333,7 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
         </FacetBox>
         <FacetBox className="is-inner" property="sansTop25">
           <FacetHeader
+            fetching={this.props.fetchingSansTop25}
             name={translate('issues.facet.sansTop25')}
             onClick={this.handleSansTop25HeaderClick}
             open={this.props.sansTop25Open}
@@ -341,7 +341,6 @@ export default class StandardFacet extends React.PureComponent<Props, State> {
               renderSansTop25Category(this.state.standards, item)
             )}
           />
-          <DeferredSpinner loading={this.props.fetchingSansTop25} />
           {this.props.sansTop25Open && (
             <>
               {this.renderSansTop25List()}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.tsx
index ea83e7a20c2..33ef4e83e7d 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/StatusFacet.tsx
@@ -26,7 +26,6 @@ import FacetItem from '../../../components/facet/FacetItem';
 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 {
@@ -100,6 +99,7 @@ export default class StatusFacet extends React.PureComponent<Props> {
     return (
       <FacetBox property={this.property}>
         <FacetHeader
+          fetching={this.props.fetching}
           name={translate('issues.facet', this.property)}
           onClear={this.handleClear}
           onClick={this.handleHeaderClick}
@@ -107,7 +107,6 @@ export default class StatusFacet extends React.PureComponent<Props> {
           values={values}
         />
 
-        <DeferredSpinner loading={this.props.fetching} />
         {this.props.open && (
           <>
             <FacetItemsList title={translate('issues')}>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx
index 3c4b92588bd..bf3d9f9f428 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/TypeFacet.tsx
@@ -21,7 +21,6 @@ import * as React from 'react';
 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';
@@ -143,6 +142,7 @@ export class TypeFacet extends React.PureComponent<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}
@@ -150,7 +150,6 @@ export class TypeFacet extends React.PureComponent<Props> {
           values={values}
         />
 
-        <DeferredSpinner loading={this.props.fetching} />
         {this.props.open && (
           <>
             <FacetItemsList>{ISSUE_TYPES.map(this.renderItem)}</FacetItemsList>
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap
index 363f646c08b..a38caf5b816 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StandardFacet-test.tsx.snap
@@ -20,15 +20,12 @@ exports[`should render empty sub-facet 1`] = `
   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"
   >
@@ -64,6 +61,7 @@ exports[`should render sub-facets 1`] = `
     property="sonarsourceSecurity"
   >
     <FacetHeader
+      fetching={false}
       name="issues.facet.sonarsourceSecurity"
       onClick={[Function]}
       open={true}
@@ -73,10 +71,6 @@ exports[`should render sub-facets 1`] = `
         ]
       }
     />
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
-    />
     <FacetItemsList>
       <FacetItem
         active={true}
@@ -101,6 +95,7 @@ exports[`should render sub-facets 1`] = `
     property="owaspTop10"
   >
     <FacetHeader
+      fetching={false}
       name="issues.facet.owaspTop10"
       onClick={[Function]}
       open={true}
@@ -110,10 +105,6 @@ exports[`should render sub-facets 1`] = `
         ]
       }
     />
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
-    />
     <FacetItemsList>
       <FacetItem
         active={false}
@@ -150,6 +141,7 @@ exports[`should render sub-facets 1`] = `
     property="sansTop25"
   >
     <FacetHeader
+      fetching={false}
       name="issues.facet.sansTop25"
       onClick={[Function]}
       open={true}
@@ -159,10 +151,6 @@ exports[`should render sub-facets 1`] = `
         ]
       }
     />
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
-    />
     <FacetItemsList>
       <FacetItem
         active={false}
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StatusFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StatusFacet-test.tsx.snap
index 9d01da1c88e..e3e5366f6a1 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StatusFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/StatusFacet-test.tsx.snap
@@ -5,16 +5,13 @@ exports[`should render correctly 1`] = `
   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"
   >
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/TypeFacet-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/TypeFacet-test.tsx.snap
index 2f78c19d462..47aafc2c20b 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/TypeFacet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/__tests__/__snapshots__/TypeFacet-test.tsx.snap
@@ -99,6 +99,7 @@ exports[`should render open by default 1`] = `
 >
   <FacetHeader
     clearLabel="reset_verb"
+    fetching={false}
     name="issues.facet.types"
     onClear={[Function]}
     onClick={[Function]}
@@ -110,10 +111,6 @@ exports[`should render open by default 1`] = `
       ]
     }
   />
-  <DeferredSpinner
-    loading={false}
-    timeout={100}
-  />
   <FacetItemsList>
     <FacetItem
       active={false}