SONAR-9936 Add loading spinner when doing the license preview

5 files changed, 65 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/js/app/components/AdminContainer.tsx b/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
index bf12d09e0a1..4060464e1d9 100644
--- a/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/AdminContainer.tsx
@@ -67,10 +67,10 @@ class AdminContainer extends React.PureComponent<Props> {
   }
 
   fetchNavigationSettings = () =>
-    getSettingsNavigation().then(r => this.props.setAdminPages(r.extensions), () => { });
+    getSettingsNavigation().then(r => this.props.setAdminPages(r.extensions), () => {});
 
   fetchEditionStatus = () =>
-    getEditionStatus().then(editionStatus => this.props.setEditionStatus(editionStatus), () => { });
+    getEditionStatus().then(editionStatus => this.props.setEditionStatus(editionStatus), () => {});
 
   render() {
     const { adminPages, organizationsEnabled } = this.props.appState;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/LicenseEditionSet.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/LicenseEditionSet.tsx
index 58b58f371a7..3ec3bb3485b 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/LicenseEditionSet.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/LicenseEditionSet.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { stringify } from 'querystring';
 import { debounce } from 'lodash';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import { omitNil } from '../../../helpers/request';
 import { Edition, getFormData, getLicensePreview } from '../../../api/marketplace';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -35,6 +36,7 @@ export interface Props {
 interface State {
   license: string;
   licenseEdition?: Edition;
+  loading: boolean;
   previewStatus?: string;
   formData?: {
     serverId?: string;
@@ -47,7 +49,7 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
 
   constructor(props: Props) {
     super(props);
-    this.state = { license: '' };
+    this.state = { license: '', loading: false };
     this.fetchLicensePreview = debounce(this.fetchLicensePreview, 100);
   }
 
@@ -60,7 +62,8 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
     this.mounted = false;
   }
 
-  fetchLicensePreview = (license: string) =>
+  fetchLicensePreview = (license: string) => {
+    this.setState({ loading: true });
     getLicensePreview({ license }).then(
       ({ previewStatus, nextEditionKey }) => {
         if (this.mounted) {
@@ -77,6 +80,7 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
         }
       }
     );
+  };
 
   fetchFormData = () => {
     getFormData().then(
@@ -85,7 +89,7 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
           this.setState({ formData });
         }
       },
-      () => {}
+      () => { }
     );
   };
 
@@ -111,13 +115,33 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
   };
 
   updateLicense = (license: string, licenseEdition?: Edition, previewStatus?: string) => {
-    this.setState({ license, licenseEdition, previewStatus });
+    this.setState({ license, licenseEdition, loading: false, previewStatus });
     this.props.updateLicense(license, previewStatus);
   };
 
+  renderAlert() {
+    const { licenseEdition, previewStatus } = this.state;
+    if (!previewStatus) {
+      return undefined;
+    }
+    return (
+      <p
+        className={classNames('alert spacer-top', {
+          'alert-warning': previewStatus === 'AUTOMATIC_INSTALL',
+          'alert-success': previewStatus === 'NO_INSTALL',
+          'alert-danger': previewStatus === 'MANUAL_INSTALL'
+        })}>
+        {translateWithParameters(
+          'marketplace.license_preview_status.' + previewStatus,
+          licenseEdition ? licenseEdition.name : translate('marketplace.commercial_edition')
+        )}
+      </p>
+    );
+  }
+
   render() {
     const { className, edition } = this.props;
-    const { license, licenseEdition, previewStatus } = this.state;
+    const { license, loading } = this.state;
 
     return (
       <div className={className}>
@@ -137,19 +161,19 @@ export default class LicenseEditionSet extends React.PureComponent<Props, State>
           style={{ resize: 'none' }}
           value={license}
         />
-        {previewStatus && (
-          <p
-            className={classNames('alert spacer-top', {
-              'alert-warning': previewStatus === 'AUTOMATIC_INSTALL',
-              'alert-success': previewStatus === 'NO_INSTALL',
-              'alert-danger': previewStatus === 'MANUAL_INSTALL'
-            })}>
-            {translateWithParameters(
-              'marketplace.license_preview_status.' + previewStatus,
-              licenseEdition ? licenseEdition.name : translate('marketplace.commercial_edition')
-            )}
-          </p>
-        )}
+
+        <DeferredSpinner
+          className="spacer-top"
+          loading={loading}
+          customSpinner={
+            <p className="spacer-top">
+              <i className="spinner spacer-right text-bottom" />
+              {translate('marketplace.checking_license')}
+            </p>
+          }>
+          {this.renderAlert()}
+        </DeferredSpinner>
+
         {edition && (
           <a
             className="display-inline-block spacer-top"
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/LicenseEditionSet-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/LicenseEditionSet-test.tsx.snap
index 4534dd328d2..b990a23a26c 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/LicenseEditionSet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/LicenseEditionSet-test.tsx.snap
@@ -51,6 +51,21 @@ exports[`should display correctly 1`] = `
     }
     value=""
   />
+  <DeferredSpinner
+    className="spacer-top"
+    customSpinner={
+      <p
+        className="spacer-top"
+      >
+        <i
+          className="spinner spacer-right text-bottom"
+        />
+        marketplace.checking_license
+      </p>
+    }
+    loading={false}
+    timeout={100}
+  />
   <a
     className="display-inline-block spacer-top"
     href="license_url"
diff --git a/server/sonar-web/src/main/js/components/common/DeferredSpinner.tsx b/server/sonar-web/src/main/js/components/common/DeferredSpinner.tsx
index a840e2ea6f5..5c434d380d8 100644
--- a/server/sonar-web/src/main/js/components/common/DeferredSpinner.tsx
+++ b/server/sonar-web/src/main/js/components/common/DeferredSpinner.tsx
@@ -24,7 +24,8 @@ interface Props {
   children?: JSX.Element;
   className?: string;
   loading?: boolean;
-  timeout: number;
+  customSpinner?: JSX.Element;
+  timeout?: number;
 }
 
 interface State {
@@ -71,7 +72,9 @@ export default class DeferredSpinner extends React.PureComponent<Props, State> {
 
   render() {
     if (this.state.showSpinner) {
-      return <i className={classNames('spinner', this.props.className)} />;
+      return (
+        this.props.customSpinner || <i className={classNames('spinner', this.props.className)} />
+      );
     }
     return (this.props.children as JSX.Element) || null;
   }
diff --git a/server/sonar-web/src/main/js/store/marketplace/actions.ts b/server/sonar-web/src/main/js/store/marketplace/actions.ts
index e174708803f..29785938179 100644
--- a/server/sonar-web/src/main/js/store/marketplace/actions.ts
+++ b/server/sonar-web/src/main/js/store/marketplace/actions.ts
@@ -56,7 +56,7 @@ export const setEditionStatus = (status: EditionStatus) => (dispatch: Dispatch<A
   }
   if (status.installationStatus === 'AUTOMATIC_IN_PROGRESS') {
     editionTimer = window.setTimeout(() => {
-      getEditionStatus().then(status => setEditionStatus(status)(dispatch), () => { });
+      getEditionStatus().then(status => setEditionStatus(status)(dispatch), () => {});
       editionTimer = undefined;
     }, 2000);
   }