From 37a16f673702a7475766338feac6f235ff513509 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Wed, 25 Oct 2017 10:31:38 +0200 Subject: [PATCH] SONAR-9936 Add loading spinner when doing the license preview --- .../main/js/app/components/AdminContainer.tsx | 4 +- .../components/LicenseEditionSet.tsx | 60 +++++++++++++------ .../LicenseEditionSet-test.tsx.snap | 15 +++++ .../js/components/common/DeferredSpinner.tsx | 7 ++- .../src/main/js/store/marketplace/actions.ts | 2 +- .../resources/org/sonar/l10n/core.properties | 1 + 6 files changed, 66 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 { } 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 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 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 } } ); + }; fetchFormData = () => { getFormData().then( @@ -85,7 +89,7 @@ export default class LicenseEditionSet extends React.PureComponent this.setState({ formData }); } }, - () => {} + () => { } ); }; @@ -111,13 +115,33 @@ export default class LicenseEditionSet extends React.PureComponent }; 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 ( +

+ {translateWithParameters( + 'marketplace.license_preview_status.' + previewStatus, + licenseEdition ? licenseEdition.name : translate('marketplace.commercial_edition') + )} +

+ ); + } + render() { const { className, edition } = this.props; - const { license, licenseEdition, previewStatus } = this.state; + const { license, loading } = this.state; return (
@@ -137,19 +161,19 @@ export default class LicenseEditionSet extends React.PureComponent style={{ resize: 'none' }} value={license} /> - {previewStatus && ( -

- {translateWithParameters( - 'marketplace.license_preview_status.' + previewStatus, - licenseEdition ? licenseEdition.name : translate('marketplace.commercial_edition') - )} -

- )} + + + + {translate('marketplace.checking_license')} +

+ }> + {this.renderAlert()} + + {edition && ( + + + marketplace.checking_license +

+ } + loading={false} + timeout={100} + /> { render() { if (this.state.showSpinner) { - return ; + return ( + this.props.customSpinner || + ); } 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 { - getEditionStatus().then(status => setEditionStatus(status)(dispatch), () => { }); + getEditionStatus().then(status => setEditionStatus(status)(dispatch), () => {}); editionTimer = undefined; }, 2000); } diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 3b7da354e46..5533b2f3cc6 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -2073,6 +2073,7 @@ marketplace.installing=Installing... marketplace.uninstall_x=Uninstall {0} marketplace.uninstall_x_confirmation=Are you sure you want to uninstall {0}? marketplace.pending=Pending... +marketplace.checking_license=Checking your license... marketplace._installed=installed marketplace.available_under_commercial_license=Available under our commercial editions marketplace.learn_more=Learn more -- 2.39.5