* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import * as classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import AutoOrganizationBind from './AutoOrganizationBind';
-import RemoteOrganizationChoose from './RemoteOrganizationChoose';
import OrganizationDetailsForm from './OrganizationDetailsForm';
-import { Query } from './utils';
-import RadioToggle from '../../../components/controls/RadioToggle';
+import OrganizationDetailsStep from './OrganizationDetailsStep';
+import PlanStep from './PlanStep';
+import { Step } from './utils';
import { DeleteButton } from '../../../components/ui/buttons';
+import RadioToggle from '../../../components/controls/RadioToggle';
import { bindAlmOrganization } from '../../../api/alm-integration';
import { sanitizeAlmId } from '../../../helpers/almIntegrations';
import { translate } from '../../../helpers/l10n';
import { getBaseUrl } from '../../../helpers/urls';
-export enum Filters {
+enum Filters {
Bind = 'bind',
Create = 'create'
}
interface Props {
almApplication: T.AlmApplication;
- almInstallId?: string;
- almOrganization?: T.AlmOrganization;
- almUnboundApplications: T.AlmUnboundApplication[];
- boundOrganization?: T.OrganizationBase;
+ almInstallId: string;
+ almOrganization: T.AlmOrganization;
className?: string;
createOrganization: (
- organization: T.OrganizationBase & { installationId?: string }
- ) => Promise<T.Organization>;
+ organization: T.Organization & { installationId?: string }
+ ) => Promise<string>;
+ handleCancelImport: () => void;
+ handleOrgDetailsFinish: (organization: T.Organization) => Promise<void>;
+ handleOrgDetailsStepOpen: () => void;
+ onDone: () => void;
onOrgCreated: (organization: string, justCreated?: boolean) => void;
+ onUpgradeFail: () => void;
+ organization?: T.Organization;
+ step: Step;
+ subscriptionPlans?: T.SubscriptionPlan[];
unboundOrganizations: T.Organization[];
- updateUrlQuery: (query: Partial<Query>) => void;
}
interface State {
}
handleBindOrganization = (organization: string) => {
- if (this.props.almInstallId) {
- return bindAlmOrganization({
- organization,
- installationId: this.props.almInstallId
- }).then(() => this.props.onOrgCreated(organization, false));
- }
- return Promise.reject();
+ return bindAlmOrganization({
+ organization,
+ installationId: this.props.almInstallId
+ }).then(() => this.props.onOrgCreated(organization, false));
};
- handleCancelImport = () => {
- this.props.updateUrlQuery({ almInstallId: undefined, almKey: undefined });
- };
-
- handleCreateOrganization = (organization: Required<T.OrganizationBase>) => {
- return this.props
- .createOrganization({
- avatar: organization.avatar,
- description: organization.description,
- installationId: this.props.almInstallId,
- key: organization.key,
- name: organization.name || organization.key,
- url: organization.url
- })
- .then(({ key }) => this.props.onOrgCreated(key));
+ handleCreateOrganization = () => {
+ const { organization } = this.props;
+ if (!organization) {
+ return Promise.reject();
+ }
+ return this.props.createOrganization({
+ ...organization,
+ installationId: this.props.almInstallId
+ });
};
handleOptionChange = (filter: Filters) => {
this.setState({ filter });
};
- renderContent = (almOrganization: T.AlmOrganization) => {
- const { almApplication, unboundOrganizations } = this.props;
-
+ render() {
+ const {
+ almApplication,
+ almOrganization,
+ className,
+ organization,
+ step,
+ subscriptionPlans,
+ unboundOrganizations
+ } = this.props;
const { filter } = this.state;
const hasUnboundOrgs = unboundOrganizations.length > 0;
return (
- <div className="boxed-group-inner">
- <div className="huge-spacer-bottom">
- <p className="display-flex-center big-spacer-bottom">
- <FormattedMessage
- defaultMessage={translate('onboarding.import_organization_x')}
- id="onboarding.import_organization_x"
- values={{
- avatar: (
- <img
- alt={almApplication.name}
- className="little-spacer-left"
- src={`${getBaseUrl()}/images/sonarcloud/${sanitizeAlmId(
- almApplication.key
- )}.svg`}
- width={16}
- />
- ),
- name: <strong>{almOrganization.name}</strong>
- }}
- />
- <DeleteButton className="little-spacer-left" onClick={this.handleCancelImport} />
- </p>
+ <div className={className}>
+ <OrganizationDetailsStep
+ finished={organization !== undefined}
+ onOpen={this.props.handleOrgDetailsStepOpen}
+ open={step === Step.OrganizationDetails}
+ organization={organization}
+ stepTitle={translate('onboarding.import_organization.import_org_details')}>
+ <div className="huge-spacer-bottom">
+ <p className="display-flex-center big-spacer-bottom">
+ <FormattedMessage
+ defaultMessage={translate('onboarding.import_organization_x')}
+ id="onboarding.import_organization_x"
+ values={{
+ avatar: (
+ <img
+ alt={almApplication.name}
+ className="little-spacer-left"
+ src={`${getBaseUrl()}/images/sonarcloud/${sanitizeAlmId(
+ almApplication.key
+ )}.svg`}
+ width={16}
+ />
+ ),
+ name: <strong>{almOrganization.name}</strong>
+ }}
+ />
+ <DeleteButton
+ className="little-spacer-left"
+ onClick={this.props.handleCancelImport}
+ />
+ </p>
- {hasUnboundOrgs && (
- <RadioToggle
- name="filter"
- onCheck={this.handleOptionChange}
- options={[
- {
- label: translate('onboarding.import_organization.create_new'),
- value: Filters.Create
- },
- {
- label: translate('onboarding.import_organization.bind_existing'),
- value: Filters.Bind
- }
- ]}
- value={filter}
+ {hasUnboundOrgs && (
+ <RadioToggle
+ name="filter"
+ onCheck={this.handleOptionChange}
+ options={[
+ {
+ label: translate('onboarding.import_organization.create_new'),
+ value: Filters.Create
+ },
+ {
+ label: translate('onboarding.import_organization.bind_existing'),
+ value: Filters.Bind
+ }
+ ]}
+ value={filter}
+ />
+ )}
+ </div>
+
+ {filter === Filters.Create && (
+ <OrganizationDetailsForm
+ onContinue={this.props.handleOrgDetailsFinish}
+ organization={almOrganization}
+ submitText={translate('continue')}
/>
)}
- </div>
-
- {filter === Filters.Create && (
- <OrganizationDetailsForm
- onContinue={this.handleCreateOrganization}
- organization={almOrganization}
- submitText={translate('onboarding.import_organization.import')}
- />
- )}
- {filter === Filters.Bind && (
- <AutoOrganizationBind
- onBindOrganization={this.handleBindOrganization}
- unboundOrganizations={unboundOrganizations}
- />
- )}
- </div>
- );
- };
-
- render() {
- const { almInstallId, almOrganization, boundOrganization, className } = this.props;
-
- return (
- <div className={classNames('boxed-group', className)}>
- <div className="boxed-group-header">
- <h2>{translate('onboarding.import_organization.import_org_details')}</h2>
- </div>
+ {filter === Filters.Bind && (
+ <AutoOrganizationBind
+ onBindOrganization={this.handleBindOrganization}
+ unboundOrganizations={unboundOrganizations}
+ />
+ )}
+ </OrganizationDetailsStep>
- {almInstallId && almOrganization && !boundOrganization ? (
- this.renderContent(almOrganization)
- ) : (
- <RemoteOrganizationChoose
- almApplication={this.props.almApplication}
- almInstallId={almInstallId}
- almOrganization={almOrganization}
- almUnboundApplications={this.props.almUnboundApplications}
- boundOrganization={boundOrganization}
- />
- )}
+ {subscriptionPlans !== undefined &&
+ filter !== Filters.Bind && (
+ <PlanStep
+ createOrganization={this.handleCreateOrganization}
+ onDone={this.props.onDone}
+ onUpgradeFail={this.props.onUpgradeFail}
+ onlyPaid={false /* TODO */}
+ open={step === Step.Plan}
+ subscriptionPlans={subscriptionPlans}
+ />
+ )}
</div>
);
}
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import OrganizationDetailsForm from './OrganizationDetailsForm';
-import { Query } from './utils';
+import OrganizationDetailsStep from './OrganizationDetailsStep';
+import PlanStep from './PlanStep';
+import { Step } from './utils';
import { DeleteButton } from '../../../components/ui/buttons';
import { getBaseUrl } from '../../../helpers/urls';
import { translate } from '../../../helpers/l10n';
almApplication: T.AlmApplication;
almInstallId?: string;
almOrganization: T.AlmOrganization;
+ handleCancelImport: () => void;
+ handleOrgDetailsFinish: (organization: T.Organization) => Promise<void>;
+ handleOrgDetailsStepOpen: () => void;
importPersonalOrg: T.Organization;
- onOrgCreated: (organization: string) => void;
+ onDone: () => void;
+ organization?: T.Organization;
+ step: Step;
+ subscriptionPlans?: T.SubscriptionPlan[];
updateOrganization: (
- organization: T.OrganizationBase & { installationId?: string }
- ) => Promise<T.Organization>;
- updateUrlQuery: (query: Partial<Query>) => void;
+ organization: T.Organization & { installationId?: string }
+ ) => Promise<string>;
}
export default class AutoPersonalOrganizationBind extends React.PureComponent<Props> {
- handleCancelImport = () => {
- this.props.updateUrlQuery({ almInstallId: undefined, almKey: undefined });
+ handleCreateOrganization = () => {
+ const { organization } = this.props;
+ if (!organization) {
+ return Promise.reject();
+ }
+ return this.props.updateOrganization({
+ ...organization,
+ installationId: this.props.almInstallId
+ });
};
- handleCreateOrganization = (organization: Required<T.OrganizationBase>) => {
- return this.props
- .updateOrganization({
- avatar: organization.avatar,
- description: organization.description,
- installationId: this.props.almInstallId,
- key: this.props.importPersonalOrg.key,
- name: organization.name || organization.key,
- url: organization.url
- })
- .then(({ key }) => this.props.onOrgCreated(key));
+ handleOrgDetailsFinish = (organization: T.Organization) => {
+ return this.props.handleOrgDetailsFinish({
+ ...organization,
+ key: this.props.importPersonalOrg.key
+ });
};
render() {
- const { almApplication, importPersonalOrg } = this.props;
+ const { almApplication, importPersonalOrg, organization, step, subscriptionPlans } = this.props;
return (
- <div className="boxed-group">
- <div className="boxed-group-inner">
+ <>
+ <OrganizationDetailsStep
+ finished={organization !== undefined}
+ onOpen={this.props.handleOrgDetailsStepOpen}
+ open={step === Step.OrganizationDetails}
+ organization={organization}
+ stepTitle={translate('onboarding.import_organization.personal.import_org_details')}>
<div className="display-flex-center big-spacer-bottom">
<FormattedMessage
defaultMessage={translate('onboarding.import_personal_organization_x')}
personalName: importPersonalOrg && <strong>{importPersonalOrg.name}</strong>
}}
/>
- <DeleteButton className="little-spacer-left" onClick={this.handleCancelImport} />
+ <DeleteButton className="little-spacer-left" onClick={this.props.handleCancelImport} />
</div>
<OrganizationDetailsForm
keyReadOnly={true}
- onContinue={this.handleCreateOrganization}
+ onContinue={this.handleOrgDetailsFinish}
organization={importPersonalOrg}
- submitText={translate('onboarding.import_organization.bind')}
+ submitText={translate('continue')}
/>
- </div>
- </div>
+ </OrganizationDetailsStep>
+ {subscriptionPlans !== undefined && (
+ <PlanStep
+ createOrganization={this.handleCreateOrganization}
+ onDone={this.props.onDone}
+ onlyPaid={false /* TODO */}
+ open={step === Step.Plan}
+ subscriptionPlans={subscriptionPlans}
+ />
+ )}
+ </>
);
}
}
parseQuery,
serializeQuery,
Query,
- ORGANIZATION_IMPORT_BINDING_IN_PROGRESS_TIMESTAMP
+ ORGANIZATION_IMPORT_BINDING_IN_PROGRESS_TIMESTAMP,
+ Step
} from './utils';
import AlmApplicationInstalling from './AlmApplicationInstalling';
import AutoOrganizationCreate from './AutoOrganizationCreate';
import AutoPersonalOrganizationBind from './AutoPersonalOrganizationBind';
import ManualOrganizationCreate from './ManualOrganizationCreate';
+import RemoteOrganizationChoose from './RemoteOrganizationChoose';
import DeferredSpinner from '../../../components/common/DeferredSpinner';
import Tabs from '../../../components/controls/Tabs';
import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn';
interface Props {
createOrganization: (
- organization: T.OrganizationBase & { installationId?: string }
- ) => Promise<T.Organization>;
+ organization: T.Organization & { installationId?: string }
+ ) => Promise<string>;
currentUser: T.LoggedInUser;
deleteOrganization: (key: string) => Promise<void>;
updateOrganization: (
- organization: T.OrganizationBase & { installationId?: string }
- ) => Promise<T.Organization>;
+ organization: T.Organization & { installationId?: string }
+ ) => Promise<string>;
userOrganizations: T.Organization[];
skipOnboarding: () => void;
}
boundOrganization?: T.OrganizationBase;
loading: boolean;
organization?: T.Organization;
+ step: Step;
subscriptionPlans?: T.SubscriptionPlan[];
}
export class CreateOrganization extends React.PureComponent<Props & WithRouterProps, State> {
mounted = false;
- state: State = { almOrgLoading: false, almUnboundApplications: [], loading: true };
+ state: State = {
+ almOrgLoading: false,
+ almUnboundApplications: [],
+ loading: true,
+ step: Step.OrganizationDetails
+ };
componentDidMount() {
this.mounted = true;
}
}
+ deleteOrganization = () => {
+ if (this.state.organization) {
+ this.props.deleteOrganization(this.state.organization.key);
+ }
+ };
+
fetchAlmApplication = () => {
return getAlmAppInfo().then(({ application }) => {
if (this.mounted) {
});
};
- fetchAlmUnboundApplications = () => {
- return listUnboundApplications().then(almUnboundApplications => {
- if (this.mounted) {
- this.setState({ almUnboundApplications });
- }
- });
- };
-
- hasAutoImport(state: State, paid?: boolean): state is StateWithAutoImport {
- return Boolean(state.almApplication && !paid);
- }
-
- setValidOrgKey = (almOrganization: T.AlmOrganization) => {
- const key = slugify(almOrganization.key);
- const keys = [key, ...times(9, i => `${key}-${i + 1}`)];
- return api
- .getOrganizations({ organizations: keys.join(',') })
- .then(
- ({ organizations }) => {
- const availableKey = keys.find(key => !organizations.find(o => o.key === key));
- return availableKey || `${key}-${Math.ceil(Math.random() * 1000) + 10}`;
- },
- () => key
- )
- .then(key => {
- return { almOrganization: { ...almOrganization, key } };
- });
- };
-
fetchAlmOrganization = (installationId: string) => {
this.setState({ almOrgLoading: true });
return getAlmOrganization({ installationId })
);
};
+ fetchAlmUnboundApplications = () => {
+ return listUnboundApplications().then(almUnboundApplications => {
+ if (this.mounted) {
+ this.setState({ almUnboundApplications });
+ }
+ });
+ };
+
fetchSubscriptionPlans = () => {
return getSubscriptionPlans().then(subscriptionPlans => {
if (this.mounted) {
});
};
+ handleCancelImport = () => {
+ this.updateUrlQuery({ almInstallId: undefined, almKey: undefined });
+ };
+
handleOrgCreated = (organization: string, justCreated = true) => {
this.props.skipOnboarding();
if (this.isStoredTimestampValid(ORGANIZATION_IMPORT_REDIRECT_TO_PROJECT_TIMESTAMP)) {
}
};
+ handleOrgDetailsFinish = (organization: T.Organization) => {
+ this.setState({ organization, step: Step.Plan });
+ return Promise.resolve();
+ };
+
+ handleOrgDetailsStepOpen = () => {
+ this.setState({ step: Step.OrganizationDetails });
+ };
+
+ handlePlanDone = () => {
+ if (this.state.organization) {
+ this.handleOrgCreated(this.state.organization.key);
+ }
+ };
+
+ hasAutoImport(state: State): state is StateWithAutoImport {
+ return Boolean(state.almApplication);
+ }
+
isStoredTimestampValid = (timestampKey: string) => {
const storedTimestamp = get(timestampKey);
remove(timestampKey);
this.updateUrlState({ tab });
};
+ setValidOrgKey = (almOrganization: T.AlmOrganization) => {
+ const key = slugify(almOrganization.key);
+ const keys = [key, ...times(9, i => `${key}-${i + 1}`)];
+ return api
+ .getOrganizations({ organizations: keys.join(',') })
+ .then(
+ ({ organizations }) => {
+ const availableKey = keys.find(key => !organizations.find(o => o.key === key));
+ return availableKey || `${key}-${Math.ceil(Math.random() * 1000) + 10}`;
+ },
+ () => key
+ )
+ .then(key => {
+ return { almOrganization: { ...almOrganization, key } };
+ });
+ };
+
stopLoading = () => {
if (this.mounted) {
this.setState({ loading: false });
renderContent = (almInstallId?: string, importPersonalOrg?: T.Organization) => {
const { currentUser, location } = this.props;
const { state } = this;
- const { almOrganization } = state;
+ const { organization, step, subscriptionPlans } = state;
const { paid, tab = 'auto' } = (location.state || {}) as LocationState;
- if (importPersonalOrg && almOrganization && state.almApplication) {
+ const commonProps = {
+ handleOrgDetailsFinish: this.handleOrgDetailsFinish,
+ handleOrgDetailsStepOpen: this.handleOrgDetailsStepOpen,
+ onDone: this.handlePlanDone,
+ organization,
+ step,
+ subscriptionPlans
+ };
+
+ if (!this.hasAutoImport(state)) {
+ return (
+ <ManualOrganizationCreate
+ {...commonProps}
+ createOrganization={this.props.createOrganization}
+ onUpgradeFail={this.deleteOrganization}
+ onlyPaid={paid}
+ organization={this.state.organization}
+ step={this.state.step}
+ />
+ );
+ }
+
+ const { almApplication, almOrganization, boundOrganization } = state;
+
+ if (importPersonalOrg && almOrganization && almApplication) {
return (
<AutoPersonalOrganizationBind
- almApplication={state.almApplication}
+ {...commonProps}
+ almApplication={almApplication}
almInstallId={almInstallId}
almOrganization={almOrganization}
+ handleCancelImport={this.handleCancelImport}
importPersonalOrg={importPersonalOrg}
- onOrgCreated={this.handleOrgCreated}
+ subscriptionPlans={subscriptionPlans}
updateOrganization={this.props.updateOrganization}
- updateUrlQuery={this.updateUrlQuery}
/>
);
}
return (
<>
- {this.hasAutoImport(state, paid) && (
- <Tabs<TabKeys>
- onChange={this.onTabChange}
- selected={tab || 'auto'}
- tabs={[
- {
- key: 'auto',
- node: translate('onboarding.import_organization', state.almApplication.key)
- },
- {
- key: 'manual',
- node: translate('onboarding.create_organization.create_manually')
- }
- ]}
- />
- )}
+ <Tabs<TabKeys>
+ onChange={this.onTabChange}
+ selected={tab || 'auto'}
+ tabs={[
+ {
+ key: 'auto',
+ node: translate('onboarding.import_organization', almApplication.key)
+ },
+ {
+ key: 'manual',
+ node: translate('onboarding.create_organization.create_manually')
+ }
+ ]}
+ />
<ManualOrganizationCreate
- className={classNames({ hidden: tab !== 'manual' && this.hasAutoImport(state, paid) })}
+ {...commonProps}
+ className={classNames({ hidden: tab !== 'manual' && this.hasAutoImport(state) })}
createOrganization={this.props.createOrganization}
- deleteOrganization={this.props.deleteOrganization}
- onOrgCreated={this.handleOrgCreated}
+ onUpgradeFail={this.deleteOrganization}
onlyPaid={paid}
- subscriptionPlans={this.state.subscriptionPlans}
/>
- {this.hasAutoImport(state, paid) && (
+ {almInstallId && almOrganization && !boundOrganization ? (
<AutoOrganizationCreate
- almApplication={state.almApplication}
+ {...commonProps}
+ almApplication={almApplication}
almInstallId={almInstallId}
almOrganization={almOrganization}
- almUnboundApplications={this.state.almUnboundApplications}
- boundOrganization={this.state.boundOrganization}
className={classNames({ hidden: tab !== 'auto' })}
createOrganization={this.props.createOrganization}
+ handleCancelImport={this.handleCancelImport}
onOrgCreated={this.handleOrgCreated}
+ onUpgradeFail={this.deleteOrganization}
unboundOrganizations={this.props.userOrganizations.filter(
({ actions = {}, alm, key }) =>
!alm && key !== currentUser.personalOrganization && actions.admin
)}
- updateUrlQuery={this.updateUrlQuery}
+ />
+ ) : (
+ <RemoteOrganizationChoose
+ almApplication={almApplication}
+ almInstallId={almInstallId}
+ almOrganization={almOrganization}
+ almUnboundApplications={state.almUnboundApplications}
+ boundOrganization={boundOrganization}
+ className={classNames({ hidden: tab !== 'auto' })}
/>
)}
</>
}
}
-function createOrganization(organization: T.OrganizationBase & { installationId?: string }) {
+function createOrganization(organization: T.Organization & { installationId?: string }) {
return (dispatch: Dispatch) => {
- return api.createOrganization(organization).then((organization: T.Organization) => {
- dispatch(actions.createOrganization(organization));
- return organization;
- });
+ return api
+ .createOrganization({ ...organization, name: organization.name || organization.key })
+ .then((organization: T.Organization) => {
+ dispatch(actions.createOrganization(organization));
+ return organization.key;
+ });
};
}
-function updateOrganization(
- organization: T.OrganizationBase & { key: string; installationId?: string }
-) {
+function updateOrganization(organization: T.Organization & { installationId?: string }) {
return (dispatch: Dispatch) => {
const { key, installationId, ...changes } = organization;
const promises = [api.updateOrganization(key, changes)];
}
return Promise.all(promises).then(() => {
dispatch(actions.updateOrganization(key, changes));
- return organization;
+ return organization.key;
});
};
}
import OrganizationDetailsForm from './OrganizationDetailsForm';
import OrganizationDetailsStep from './OrganizationDetailsStep';
import PlanStep from './PlanStep';
-import { formatPrice } from './utils';
+import { Step } from './utils';
import { translate } from '../../../helpers/l10n';
interface Props {
- createOrganization: (organization: T.OrganizationBase) => Promise<T.Organization>;
+ createOrganization: (organization: T.Organization) => Promise<string>;
className?: string;
- deleteOrganization: (key: string) => Promise<void>;
- onOrgCreated: (organization: string) => void;
+ onUpgradeFail: () => void;
+ handleOrgDetailsFinish: (organization: T.Organization) => Promise<void>;
+ handleOrgDetailsStepOpen: () => void;
+ onDone: () => void;
onlyPaid?: boolean;
- subscriptionPlans?: T.SubscriptionPlan[];
-}
-
-enum Step {
- OrganizationDetails,
- Plan
-}
-
-interface State {
organization?: T.Organization;
step: Step;
+ subscriptionPlans?: T.SubscriptionPlan[];
}
-export default class ManualOrganizationCreate extends React.PureComponent<Props, State> {
- mounted = false;
- state: State = { step: Step.OrganizationDetails };
-
- componentDidMount() {
- this.mounted = true;
- }
-
- componentWillUnmount() {
- this.mounted = false;
- }
-
- handleOrganizationDetailsStepOpen = () => {
- this.setState({ step: Step.OrganizationDetails });
- };
-
- handleOrganizationDetailsFinish = (organization: Required<T.OrganizationBase>) => {
- this.setState({ organization, step: Step.Plan });
- return Promise.resolve();
- };
-
- handlePaidPlanChoose = () => {
- if (this.state.organization) {
- this.props.onOrgCreated(this.state.organization.key);
- }
- };
-
- handleFreePlanChoose = () => {
- return this.createOrganization().then(key => {
- this.props.onOrgCreated(key);
- });
- };
-
- createOrganization = () => {
- const { organization } = this.state;
- if (organization) {
- return this.props
- .createOrganization({
- avatar: organization.avatar,
- description: organization.description,
- key: organization.key,
- name: organization.name || organization.key,
- url: organization.url
- })
- .then(({ key }) => key);
- } else {
+export default class ManualOrganizationCreate extends React.PureComponent<Props> {
+ handleCreateOrganization = () => {
+ const { organization } = this.props;
+ if (!organization) {
return Promise.reject();
}
- };
-
- deleteOrganization = () => {
- const { organization } = this.state;
- if (organization) {
- this.props.deleteOrganization(organization.key).catch(() => {});
- }
+ return this.props.createOrganization(organization);
};
render() {
- const { className, subscriptionPlans } = this.props;
- const startedPrice = subscriptionPlans && subscriptionPlans[0] && subscriptionPlans[0].price;
- const formattedPrice = formatPrice(startedPrice);
-
+ const { className, organization, subscriptionPlans } = this.props;
return (
<div className={className}>
<OrganizationDetailsStep
- finished={this.state.organization !== undefined}
- onOpen={this.handleOrganizationDetailsStepOpen}
- open={this.state.step === Step.OrganizationDetails}
- organization={this.state.organization}>
+ finished={organization !== undefined}
+ onOpen={this.props.handleOrgDetailsStepOpen}
+ open={this.props.step === Step.OrganizationDetails}
+ organization={organization}>
<OrganizationDetailsForm
- onContinue={this.handleOrganizationDetailsFinish}
- organization={this.state.organization}
+ onContinue={this.props.handleOrgDetailsFinish}
+ organization={organization}
submitText={translate('continue')}
/>
</OrganizationDetailsStep>
{subscriptionPlans !== undefined && (
<PlanStep
- createOrganization={this.createOrganization}
- deleteOrganization={this.deleteOrganization}
- onFreePlanChoose={this.handleFreePlanChoose}
- onPaidPlanChoose={this.handlePaidPlanChoose}
+ createOrganization={this.handleCreateOrganization}
+ onDone={this.props.onDone}
+ onUpgradeFail={this.props.onUpgradeFail}
onlyPaid={this.props.onlyPaid}
- open={this.state.step === Step.Plan}
- startingPrice={formattedPrice}
+ open={this.props.step === Step.Plan}
subscriptionPlans={subscriptionPlans}
/>
)}
interface Props {
keyReadOnly?: boolean;
- onContinue: (organization: RequiredOrganization) => Promise<void>;
- organization?: T.OrganizationBase & { key: string };
+ onContinue: (organization: T.Organization) => Promise<void>;
+ organization?: T.Organization;
submitText: string;
}
this.setState({ url });
};
- handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const { state } = this;
if (this.canSubmit(state)) {
finished: boolean;
onOpen: () => void;
open: boolean;
- organization?: T.OrganizationBase & { key: string };
+ organization?: T.Organization;
+ stepTitle?: string;
}
export default class OrganizationDetailsStep extends React.PureComponent<Props> {
renderForm = () => {
renderForm={this.renderForm}
renderResult={this.renderResult}
stepNumber={1}
- stepTitle={translate('onboarding.create_organization.enter_org_details')}
+ stepTitle={
+ this.props.stepTitle || translate('onboarding.create_organization.enter_org_details')
+ }
/>
);
}
import * as React from 'react';
import BillingFormShim from './BillingFormShim';
import PlanSelect, { Plan } from './PlanSelect';
+import { formatPrice } from './utils';
import Step from '../../tutorials/components/Step';
import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
import { translate } from '../../../helpers/l10n';
interface Props {
createOrganization: () => Promise<string>;
- deleteOrganization: () => void;
- onFreePlanChoose: () => Promise<void>;
- onPaidPlanChoose: () => void;
+ onDone: () => void;
+ onUpgradeFail?: () => void;
onlyPaid?: boolean;
open: boolean;
- startingPrice: string;
subscriptionPlans: T.SubscriptionPlan[];
}
}
};
- handleFreePlanSubmit = () => {
+ handleFreePlanSubmit = (event: React.FormEvent) => {
+ event.preventDefault();
this.setState({ submitting: true });
- this.props.onFreePlanChoose().then(this.stopSubmitting, this.stopSubmitting);
+ return this.props.createOrganization().then(() => {
+ this.props.onDone();
+ this.stopSubmitting();
+ }, this.stopSubmitting);
};
renderForm = () => {
const { submitting } = this.state;
+ const { subscriptionPlans } = this.props;
+ const startedPrice = subscriptionPlans && subscriptionPlans[0] && subscriptionPlans[0].price;
return (
<div className="boxed-group-inner">
{this.state.ready && (
<PlanSelect
onChange={this.handlePlanChange}
plan={this.state.plan}
- startingPrice={this.props.startingPrice}
+ startingPrice={formatPrice(startedPrice)}
/>
)}
{this.state.plan === Plan.Paid ? (
<BillingForm
- onCommit={this.props.onPaidPlanChoose}
- onFailToUpgrade={this.props.deleteOrganization}
+ onCommit={this.props.onDone}
+ onFailToUpgrade={this.props.onUpgradeFail}
organizationKey={this.props.createOrganization}
subscriptionPlans={this.props.subscriptionPlans}>
{({ onSubmit, renderFormFields, renderSubmitGroup }) => (
- <form onSubmit={onSubmit}>
+ <form id="organization-paid-plan-form" onSubmit={onSubmit}>
{renderFormFields()}
<div className="billing-input-large big-spacer-top">
{renderSubmitGroup(
)}
</BillingForm>
) : (
- <div className="display-flex-center big-spacer-top">
- <SubmitButton disabled={submitting} onClick={this.handleFreePlanSubmit}>
+ <form
+ className="display-flex-center big-spacer-top"
+ id="organization-free-plan-form"
+ onSubmit={this.handleFreePlanSubmit}>
+ <SubmitButton disabled={submitting}>
{translate('my_account.create_organization')}
</SubmitButton>
{submitting && <DeferredSpinner className="spacer-left" />}
- </div>
+ </form>
)}
</>
)}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import * as classNames from 'classnames';
import { WithRouterProps, withRouter } from 'react-router';
import { FormattedMessage } from 'react-intl';
import { sortBy } from 'lodash';
almOrganization?: T.AlmOrganization;
almUnboundApplications: T.AlmUnboundApplication[];
boundOrganization?: T.OrganizationBase;
+ className?: string;
}
interface State {
almInstallId,
almOrganization,
almUnboundApplications,
- boundOrganization
+ boundOrganization,
+ className
} = this.props;
const { unboundInstallationId } = this.state;
return (
- <div className="boxed-group-inner">
- {almInstallId &&
- !almOrganization && (
- <Alert className="big-spacer-bottom width-60" variant="error">
- <div className="markdown">
- {translate('onboarding.import_organization.org_not_found')}
- <ul>
- <li>{translate('onboarding.import_organization.org_not_found.tips_1')}</li>
- <li>{translate('onboarding.import_organization.org_not_found.tips_2')}</li>
- </ul>
- </div>
- </Alert>
- )}
- {almOrganization &&
- boundOrganization && (
- <Alert className="big-spacer-bottom width-60" variant="error">
- <FormattedMessage
- defaultMessage={translate('onboarding.import_organization.already_bound_x')}
- id="onboarding.import_organization.already_bound_x"
- values={{
- avatar: (
- <img
- alt={almApplication.name}
- className="little-spacer-left"
- src={`${getBaseUrl()}/images/sonarcloud/${sanitizeAlmId(
+ <div className={classNames('boxed-group', className)}>
+ <div className="boxed-group-header">
+ <h2>{translate('onboarding.import_organization.import_org_details')}</h2>
+ </div>
+ <div className="boxed-group-inner">
+ {almInstallId &&
+ !almOrganization && (
+ <Alert className="big-spacer-bottom width-60" variant="error">
+ <div className="markdown">
+ {translate('onboarding.import_organization.org_not_found')}
+ <ul>
+ <li>{translate('onboarding.import_organization.org_not_found.tips_1')}</li>
+ <li>{translate('onboarding.import_organization.org_not_found.tips_2')}</li>
+ </ul>
+ </div>
+ </Alert>
+ )}
+ {almOrganization &&
+ boundOrganization && (
+ <Alert className="big-spacer-bottom width-60" variant="error">
+ <FormattedMessage
+ defaultMessage={translate('onboarding.import_organization.already_bound_x')}
+ id="onboarding.import_organization.already_bound_x"
+ values={{
+ avatar: (
+ <img
+ alt={almApplication.name}
+ className="little-spacer-left"
+ src={`${getBaseUrl()}/images/sonarcloud/${sanitizeAlmId(
+ almApplication.key
+ )}.svg`}
+ width={16}
+ />
+ ),
+ name: <strong>{almOrganization.name}</strong>,
+ boundAvatar: (
+ <OrganizationAvatar
+ className="little-spacer-left"
+ organization={boundOrganization}
+ small={true}
+ />
+ ),
+ boundName: <strong>{boundOrganization.name}</strong>
+ }}
+ />
+ </Alert>
+ )}
+ <div className="display-flex-center">
+ <div className="display-inline-block">
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={almApplication}
+ onClick={this.handleInstallAppClick}
+ small={true}
+ url={almApplication.installationUrl}>
+ {translate(
+ 'onboarding.import_organization.choose_organization_button',
+ almApplication.key
+ )}
+ </IdentityProviderLink>
+ </div>
+ {almUnboundApplications.length > 0 && (
+ <div className="display-flex-stretch">
+ <div className="vertical-pipe-separator">
+ <div className="vertical-separator " />
+ <span className="note">{translate('or')}</span>
+ <div className="vertical-separator" />
+ </div>
+ <form className="big-spacer-top big-spacer-bottom" onSubmit={this.handleSubmit}>
+ <div className="form-field abs-width-400">
+ <label htmlFor="select-unbound-installation">
+ {translate(
+ 'onboarding.import_organization.choose_unbound_installation',
almApplication.key
- )}.svg`}
- width={16}
+ )}
+ </label>
+ <Select
+ className="input-super-large"
+ clearable={false}
+ id="select-unbound-installation"
+ labelKey="name"
+ onChange={this.handleInstallationChange}
+ optionRenderer={this.renderOption}
+ options={sortBy(almUnboundApplications, o => o.name.toLowerCase())}
+ placeholder={translate('onboarding.import_organization.choose_organization')}
+ value={unboundInstallationId}
+ valueKey="installationId"
+ valueRenderer={this.renderOption}
/>
- ),
- name: <strong>{almOrganization.name}</strong>,
- boundAvatar: (
- <OrganizationAvatar
- className="little-spacer-left"
- organization={boundOrganization}
- small={true}
- />
- ),
- boundName: <strong>{boundOrganization.name}</strong>
- }}
- />
- </Alert>
- )}
- <div className="display-flex-center">
- <div className="display-inline-block">
- <IdentityProviderLink
- className="display-inline-block"
- identityProvider={almApplication}
- onClick={this.handleInstallAppClick}
- small={true}
- url={almApplication.installationUrl}>
- {translate(
- 'onboarding.import_organization.choose_organization_button',
- almApplication.key
- )}
- </IdentityProviderLink>
- </div>
- {almUnboundApplications.length > 0 && (
- <div className="display-flex-stretch">
- <div className="vertical-pipe-separator">
- <div className="vertical-separator " />
- <span className="note">{translate('or')}</span>
- <div className="vertical-separator" />
+ </div>
+ <SubmitButton disabled={!unboundInstallationId}>
+ {translate('continue')}
+ </SubmitButton>
+ </form>
</div>
- <form className="big-spacer-top big-spacer-bottom" onSubmit={this.handleSubmit}>
- <div className="form-field abs-width-400">
- <label htmlFor="select-unbound-installation">
- {translate(
- 'onboarding.import_organization.choose_unbound_installation',
- almApplication.key
- )}
- </label>
- <Select
- className="input-super-large"
- clearable={false}
- id="select-unbound-installation"
- labelKey="name"
- onChange={this.handleInstallationChange}
- optionRenderer={this.renderOption}
- options={sortBy(almUnboundApplications, o => o.name.toLowerCase())}
- placeholder={translate('onboarding.import_organization.choose_organization')}
- value={unboundInstallationId}
- valueKey="installationId"
- valueRenderer={this.renderOption}
- />
- </div>
- <SubmitButton disabled={!unboundInstallationId}>
- {translate('continue')}
- </SubmitButton>
- </form>
- </div>
- )}
+ )}
+ </div>
</div>
</div>
);
import AutoOrganizationCreate from '../AutoOrganizationCreate';
import { waitAndUpdate, click } from '../../../../helpers/testUtils';
import { bindAlmOrganization } from '../../../../api/alm-integration';
+import { Step } from '../utils';
jest.mock('../../../../api/alm-integration', () => ({
bindAlmOrganization: jest.fn().mockResolvedValue({})
url: 'http://example.com/foo'
};
-it('should render with import org button', () => {
- expect(shallowRender()).toMatchSnapshot();
-});
-
it('should render prefilled and create org', async () => {
const createOrganization = jest.fn().mockResolvedValue({ key: 'foo' });
- const onOrgCreated = jest.fn();
- const wrapper = shallowRender({
- almInstallId: 'id-foo',
- almOrganization: { ...organization, personal: false },
- createOrganization,
- onOrgCreated
- });
+ const handleOrgDetailsFinish = jest.fn();
+ const wrapper = shallowRender({ createOrganization, handleOrgDetailsFinish });
expect(wrapper).toMatchSnapshot();
wrapper.find('OrganizationDetailsForm').prop<Function>('onContinue')(organization);
await waitAndUpdate(wrapper);
+ expect(handleOrgDetailsFinish).toBeCalled();
+ wrapper.setProps({ organization });
+ wrapper.find('PlanStep').prop<Function>('createOrganization')();
expect(createOrganization).toBeCalledWith({ ...organization, installationId: 'id-foo' });
- expect(onOrgCreated).toBeCalledWith('foo');
});
it('should allow to cancel org import', () => {
- const updateUrlQuery = jest.fn().mockResolvedValue({ key: 'foo' });
- const wrapper = shallowRender({
- almInstallId: 'id-foo',
- almOrganization: { ...organization, personal: false },
- updateUrlQuery
- });
+ const handleCancelImport = jest.fn().mockResolvedValue({ key: 'foo' });
+ const wrapper = shallowRender({ handleCancelImport });
click(wrapper.find('DeleteButton'));
- expect(updateUrlQuery).toBeCalledWith({ almInstallId: undefined, almKey: undefined });
+ expect(handleCancelImport).toBeCalled();
});
it('should display choice between import or creation', () => {
- const wrapper = shallowRender({
- almInstallId: 'id-foo',
- almOrganization: { ...organization, personal: false },
- unboundOrganizations: [organization]
- });
+ const wrapper = shallowRender({ unboundOrganizations: [organization] });
expect(wrapper).toMatchSnapshot();
wrapper.find('RadioToggle').prop<Function>('onCheck')('create');
it('should bind existing organization', async () => {
const onOrgCreated = jest.fn();
- const wrapper = shallowRender({
- almInstallId: 'id-foo',
- almOrganization: { ...organization, personal: false },
- onOrgCreated,
- unboundOrganizations: [organization]
- });
+ const wrapper = shallowRender({ onOrgCreated, unboundOrganizations: [organization] });
wrapper.find('RadioToggle').prop<Function>('onCheck')('bind');
wrapper.update();
key: 'bitbucket',
name: 'BitBucket'
}}
- almUnboundApplications={[]}
+ almInstallId="id-foo"
+ almOrganization={{ ...organization, personal: false }}
createOrganization={jest.fn()}
+ handleCancelImport={jest.fn()}
+ handleOrgDetailsFinish={jest.fn()}
+ handleOrgDetailsStepOpen={jest.fn()}
+ onDone={jest.fn()}
onOrgCreated={jest.fn()}
+ onUpgradeFail={jest.fn()}
+ step={Step.OrganizationDetails}
+ subscriptionPlans={[{ maxNcloc: 100000, price: 10 }, { maxNcloc: 250000, price: 75 }]}
unboundOrganizations={[]}
- updateUrlQuery={jest.fn()}
{...props}
/>
);
import { shallow } from 'enzyme';
import AutoPersonalOrganizationBind from '../AutoPersonalOrganizationBind';
import { waitAndUpdate, click } from '../../../../helpers/testUtils';
+import { Step } from '../utils';
const personalOrg = { key: 'personalorg', name: 'Personal Org' };
+const almOrganization = {
+ avatar: 'http://example.com/avatar',
+ description: 'description-foo',
+ key: 'key-foo',
+ name: 'name-foo',
+ personal: true,
+ url: 'http://example.com/foo'
+};
it('should render correctly', async () => {
const updateOrganization = jest.fn().mockResolvedValue({ key: personalOrg.key });
- const onOrgCreated = jest.fn();
+ const handleOrgDetailsFinish = jest.fn();
const wrapper = shallowRender({
almInstallId: 'id-foo',
importPersonalOrg: personalOrg,
- onOrgCreated,
+ handleOrgDetailsFinish,
updateOrganization
});
wrapper.find('OrganizationDetailsForm').prop<Function>('onContinue')(personalOrg);
await waitAndUpdate(wrapper);
+ expect(handleOrgDetailsFinish).toBeCalled();
+ wrapper.setProps({ organization: personalOrg });
+ wrapper.find('PlanStep').prop<Function>('createOrganization')();
expect(updateOrganization).toBeCalledWith({ ...personalOrg, installationId: 'id-foo' });
- expect(onOrgCreated).toBeCalledWith(personalOrg.key);
});
it('should allow to cancel org import', () => {
- const updateUrlQuery = jest.fn();
+ const handleCancelImport = jest.fn();
const wrapper = shallowRender({
almInstallId: 'id-foo',
importPersonalOrg: personalOrg,
- updateUrlQuery
+ handleCancelImport
});
click(wrapper.find('DeleteButton'));
- expect(updateUrlQuery).toBeCalledWith({ almInstallId: undefined, almKey: undefined });
+ expect(handleCancelImport).toBeCalled();
});
function shallowRender(props: Partial<AutoPersonalOrganizationBind['props']> = {}) {
key: 'bitbucket',
name: 'BitBucket'
}}
- almOrganization={{
- avatar: 'http://example.com/avatar',
- description: 'description-foo',
- key: 'key-foo',
- name: 'name-foo',
- personal: true,
- url: 'http://example.com/foo'
- }}
+ almOrganization={almOrganization}
+ handleCancelImport={jest.fn()}
+ handleOrgDetailsFinish={jest.fn()}
+ handleOrgDetailsStepOpen={jest.fn()}
importPersonalOrg={{ key: 'personalorg', name: 'Personal Org' }}
- onOrgCreated={jest.fn()}
+ onDone={jest.fn()}
+ step={Step.OrganizationDetails}
+ subscriptionPlans={[{ maxNcloc: 100000, price: 10 }, { maxNcloc: 250000, price: 75 }]}
updateOrganization={jest.fn()}
- updateUrlQuery={jest.fn()}
{...props}
/>
);
showOnboardingTutorial: false
};
+const almOrganization = {
+ avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
+ key: 'Foo&Bar',
+ name: 'Foo & Bar',
+ personal: true
+};
+
+const boundOrganization = { key: 'foobar', name: 'Foo & Bar' };
+
beforeEach(() => {
(getAlmAppInfo as jest.Mock<any>).mockClear();
(getAlmOrganization as jest.Mock<any>).mockClear();
expect(wrapper).toMatchSnapshot();
});
-it('should slugify and find a uniq organization key', async () => {
+it('should render with organization bind page', async () => {
(getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({
almOrganization: {
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
- key: 'Foo&Bar',
- name: 'Foo & Bar',
- personal: true
+ key: 'foo',
+ name: 'Foo',
+ avatar: 'my-avatar',
+ personal: false
}
});
+ const wrapper = shallowRender({
+ currentUser: { ...user, externalProvider: 'github' },
+ location: { query: { installation_id: 'foo' } } as Location
+ });
+ expect(wrapper).toMatchSnapshot();
+ await waitAndUpdate(wrapper);
+ expect(wrapper).toMatchSnapshot();
+});
+
+it('should slugify and find a uniq organization key', async () => {
+ (getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({ almOrganization });
(getOrganizations as jest.Mock<any>).mockResolvedValueOnce({
organizations: [{ key: 'foo-and-bar' }, { key: 'foo-and-bar-1' }]
});
(wrapper.find('Tabs').prop('onChange') as Function)('manual');
expect(wrapper.find('ManualOrganizationCreate').hasClass('hidden')).toBeFalsy();
- expect(wrapper.find('AutoOrganizationCreate').hasClass('hidden')).toBeTruthy();
+ expect(wrapper.find('withRouter(RemoteOrganizationChoose)').hasClass('hidden')).toBeTruthy();
(wrapper.find('Tabs').prop('onChange') as Function)('auto');
- expect(wrapper.find('AutoOrganizationCreate').hasClass('hidden')).toBeFalsy();
+ expect(wrapper.find('withRouter(RemoteOrganizationChoose)').hasClass('hidden')).toBeFalsy();
expect(wrapper.find('ManualOrganizationCreate').hasClass('hidden')).toBeTruthy();
});
const wrapper = shallowRender({ currentUser: { ...user, externalProvider: 'github' } });
await waitAndUpdate(wrapper);
expect(getAlmOrganization).not.toHaveBeenCalled();
- wrapper.setProps({ location: { query: { installation_id: 'foo' } } });
+ wrapper.setProps({ location: { query: { installation_id: 'foo' } } as Location });
expect(getAlmOrganization).toHaveBeenCalledWith({ installationId: 'foo' });
- wrapper.setProps({ location: { query: {} } });
+ wrapper.setProps({ location: { query: {} } as Location });
expect(wrapper.state('almOrganization')).toBeUndefined();
expect(listUnboundApplications).toHaveBeenCalledTimes(2);
});
const wrapper = shallowRender({ router: mockRouter({ push }) });
await waitAndUpdate(wrapper);
- wrapper.find('ManualOrganizationCreate').prop<Function>('onOrgCreated')('foo');
+ wrapper.setState({ organization: boundOrganization });
+ wrapper.instance().handleOrgCreated('foo');
expect(push).toHaveBeenCalledWith({
pathname: '/organizations/foo',
state: { justCreated: true }
});
- (get as jest.Mock<any>).mockReturnValueOnce('0');
- wrapper.find('ManualOrganizationCreate').prop<Function>('onOrgCreated')('foo', false);
+ wrapper.instance().handleOrgCreated('foo', false);
expect(push).toHaveBeenCalledWith({
pathname: '/organizations/foo',
state: { justCreated: false }
await waitAndUpdate(wrapper);
(get as jest.Mock<any>).mockReturnValueOnce(Date.now().toString());
- wrapper.find('ManualOrganizationCreate').prop<Function>('onOrgCreated')('foo');
+ wrapper.instance().handleOrgCreated('foo');
expect(get).toHaveBeenCalled();
expect(remove).toHaveBeenCalled();
expect(push).toHaveBeenCalledWith({
state: { organization: 'foo', tab: 'manual' }
});
- wrapper.setState({ almOrganization: { key: 'foo', name: 'Foo', avatar: 'my-avatar' } });
+ wrapper.setState({
+ almOrganization: { key: 'foo', name: 'Foo', avatar: 'my-avatar', personal: false }
+ });
(get as jest.Mock<any>).mockReturnValueOnce(Date.now().toString());
- wrapper.find('ManualOrganizationCreate').prop<Function>('onOrgCreated')('foo');
+ wrapper.instance().handleOrgCreated('foo');
expect(push).toHaveBeenCalledWith({
pathname: '/projects/create',
state: { organization: 'foo', tab: 'auto' }
it('should display AutoOrganizationCreate with already bound organization', async () => {
(getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({
- almOrganization: {
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
- key: 'Foo&Bar',
- name: 'Foo & Bar',
- personal: true
- },
- boundOrganization: { key: 'foobar', name: 'Foo & Bar' }
+ almOrganization: { ...almOrganization, personal: false },
+ boundOrganization
});
(get as jest.Mock<any>).mockReturnValueOnce(Date.now().toString());
const push = jest.fn();
expect(remove).toHaveBeenCalled();
expect(getAlmOrganization).toHaveBeenCalledWith({ installationId: 'foo' });
expect(push).not.toHaveBeenCalled();
- expect(wrapper.find('AutoOrganizationCreate').prop('boundOrganization')).toEqual({
+ expect(wrapper.find('withRouter(RemoteOrganizationChoose)').prop('boundOrganization')).toEqual({
key: 'foobar',
name: 'Foo & Bar'
});
it('should redirect to org page when already bound and no binding in progress', async () => {
(getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({
- almOrganization: {
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
- key: 'Foo&Bar',
- name: 'Foo & Bar',
- personal: true
- },
- boundOrganization: { key: 'foobar', name: 'Foo & Bar' }
+ almOrganization,
+ boundOrganization
});
const push = jest.fn();
const wrapper = shallowRender({
expect(push).toHaveBeenCalledWith({ pathname: '/organizations/foobar' });
});
+it('should roll back after upgrade failure', async () => {
+ const deleteOrganization = jest.fn();
+ const wrapper = shallowRender({ deleteOrganization });
+ await waitAndUpdate(wrapper);
+ wrapper.setState({ organization: boundOrganization });
+ wrapper.find('ManualOrganizationCreate').prop<Function>('onUpgradeFail')();
+ expect(deleteOrganization).toBeCalled();
+});
+
+it('should cancel imports', async () => {
+ const push = jest.fn();
+ const wrapper = shallowRender({ router: mockRouter({ push }) });
+ await waitAndUpdate(wrapper);
+ wrapper.instance().handleCancelImport();
+ expect(push).toBeCalledWith({ query: {} });
+});
+
function shallowRender(props: Partial<CreateOrganization['props']> = {}) {
- return shallow(
+ return shallow<CreateOrganization>(
<CreateOrganization
createOrganization={jest.fn()}
currentUser={user}
import { shallow } from 'enzyme';
import ManualOrganizationCreate from '../ManualOrganizationCreate';
import { waitAndUpdate } from '../../../../helpers/testUtils';
+import { Step } from '../utils';
const organization = {
avatar: 'http://example.com/avatar',
it('should render and create organization', async () => {
const createOrganization = jest.fn().mockResolvedValue({ key: 'foo' });
- const onOrgCreated = jest.fn();
- const wrapper = shallowRender({ createOrganization, onOrgCreated });
+ const onDone = jest.fn();
+ const handleOrgDetailsFinish = jest.fn();
+ const wrapper = shallowRender({ createOrganization, handleOrgDetailsFinish, onDone });
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
wrapper.find('OrganizationDetailsForm').prop<Function>('onContinue')(organization);
await waitAndUpdate(wrapper);
+ expect(handleOrgDetailsFinish).toHaveBeenCalled();
+ wrapper.setProps({ step: Step.Plan });
expect(wrapper).toMatchSnapshot();
-
- wrapper.find('PlanStep').prop<Function>('onFreePlanChoose')();
- await waitAndUpdate(wrapper);
- expect(createOrganization).toBeCalledWith(organization);
- expect(onOrgCreated).toBeCalledWith('foo');
});
it('should preselect paid plan', async () => {
expect(wrapper.find('PlanStep').prop('onlyPaid')).toBe(true);
});
-it('should roll back after upgrade failure', async () => {
- const createOrganization = jest.fn().mockResolvedValue({ key: 'foo' });
- const deleteOrganization = jest.fn().mockResolvedValue(undefined);
- const wrapper = shallowRender({ createOrganization, deleteOrganization });
- await waitAndUpdate(wrapper);
-
- wrapper.find('OrganizationDetailsForm').prop<Function>('onContinue')(organization);
- await waitAndUpdate(wrapper);
-
- wrapper.find('PlanStep').prop<Function>('createOrganization')();
- expect(createOrganization).toBeCalledWith(organization);
-
- wrapper.find('PlanStep').prop<Function>('deleteOrganization')();
- expect(deleteOrganization).toBeCalledWith(organization.key);
-});
-
function shallowRender(props: Partial<ManualOrganizationCreate['props']> = {}) {
return shallow(
<ManualOrganizationCreate
createOrganization={jest.fn()}
- deleteOrganization={jest.fn()}
- onOrgCreated={jest.fn()}
+ handleOrgDetailsFinish={jest.fn()}
+ handleOrgDetailsStepOpen={jest.fn()}
+ onDone={jest.fn()}
+ onUpgradeFail={jest.fn()}
+ step={Step.OrganizationDetails}
subscriptionPlans={[{ maxNcloc: 100000, price: 10 }, { maxNcloc: 250000, price: 75 }]}
{...props}
/>
import * as React from 'react';
import { shallow } from 'enzyme';
import PlanStep from '../PlanStep';
-import { waitAndUpdate, click } from '../../../../helpers/testUtils';
+import { waitAndUpdate, submit } from '../../../../helpers/testUtils';
import { Plan } from '../PlanSelect';
jest.mock('../../../../app/components/extensions/utils', () => ({
getExtensionStart: jest.fn().mockResolvedValue(undefined)
}));
+const subscriptionPlans = [{ maxNcloc: 1000, price: 100 }];
+
it('should render and use free plan', async () => {
- const onFreePlanChoose = jest.fn().mockResolvedValue(undefined);
+ const onDone = jest.fn();
+ const createOrganization = jest.fn().mockResolvedValue('org');
const wrapper = shallow(
<PlanStep
- createOrganization={jest.fn().mockResolvedValue('org')}
- deleteOrganization={jest.fn().mockResolvedValue(undefined)}
- onFreePlanChoose={onFreePlanChoose}
- onPaidPlanChoose={jest.fn()}
+ createOrganization={createOrganization}
+ onDone={onDone}
+ onUpgradeFail={jest.fn()}
open={true}
- startingPrice="10"
- subscriptionPlans={[]}
+ subscriptionPlans={subscriptionPlans}
/>
);
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
expect(wrapper.dive()).toMatchSnapshot();
- click(wrapper.dive().find('SubmitButton'));
- expect(onFreePlanChoose).toBeCalled();
+ submit(wrapper.dive().find('form'));
+ await waitAndUpdate(wrapper);
+ expect(createOrganization).toBeCalled();
+ expect(onDone).toBeCalled();
});
it('should upgrade', async () => {
- const onPaidPlanChoose = jest.fn();
+ const onDone = jest.fn();
const wrapper = shallow(
<PlanStep
createOrganization={jest.fn().mockResolvedValue('org')}
- deleteOrganization={jest.fn().mockResolvedValue(undefined)}
- onFreePlanChoose={jest.fn().mockResolvedValue(undefined)}
- onPaidPlanChoose={onPaidPlanChoose}
+ onDone={onDone}
+ onUpgradeFail={jest.fn()}
open={true}
- startingPrice="10"
- subscriptionPlans={[]}
+ subscriptionPlans={subscriptionPlans}
/>
);
await waitAndUpdate(wrapper);
.dive()
.find('Connect(withCurrentUser(BillingFormShim))')
.prop<Function>('onCommit')();
- expect(onPaidPlanChoose).toBeCalled();
+ expect(onDone).toBeCalled();
});
it('should preselect paid plan', async () => {
const wrapper = shallow(
<PlanStep
createOrganization={jest.fn()}
- deleteOrganization={jest.fn().mockResolvedValue(undefined)}
- onFreePlanChoose={jest.fn().mockResolvedValue(undefined)}
- onPaidPlanChoose={jest.fn()}
+ onDone={jest.fn()}
+ onUpgradeFail={jest.fn()}
onlyPaid={true}
open={true}
- startingPrice="10"
- subscriptionPlans={[]}
+ subscriptionPlans={subscriptionPlans}
/>
);
await waitAndUpdate(wrapper);
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should display choice between import or creation 1`] = `
-<div
- className="boxed-group"
->
- <div
- className="boxed-group-header"
- >
- <h2>
- onboarding.import_organization.import_org_details
- </h2>
- </div>
- <div
- className="boxed-group-inner"
+<div>
+ <OrganizationDetailsStep
+ finished={false}
+ onOpen={[MockFunction]}
+ open={true}
+ stepTitle="onboarding.import_organization.import_org_details"
>
<div
className="huge-spacer-bottom"
/>
<DeleteButton
className="little-spacer-left"
- onClick={[Function]}
+ onClick={[MockFunction]}
/>
</p>
<RadioToggle
value={null}
/>
</div>
- </div>
+ </OrganizationDetailsStep>
+ <PlanStep
+ createOrganization={[Function]}
+ onDone={[MockFunction]}
+ onUpgradeFail={[MockFunction]}
+ onlyPaid={false}
+ open={false}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
+ />
</div>
`;
exports[`should render prefilled and create org 1`] = `
-<div
- className="boxed-group"
->
- <div
- className="boxed-group-header"
- >
- <h2>
- onboarding.import_organization.import_org_details
- </h2>
- </div>
- <div
- className="boxed-group-inner"
+<div>
+ <OrganizationDetailsStep
+ finished={false}
+ onOpen={[MockFunction]}
+ open={true}
+ stepTitle="onboarding.import_organization.import_org_details"
>
<div
className="huge-spacer-bottom"
/>
<DeleteButton
className="little-spacer-left"
- onClick={[Function]}
+ onClick={[MockFunction]}
/>
</p>
</div>
<OrganizationDetailsForm
- onContinue={[Function]}
+ onContinue={[MockFunction]}
organization={
Object {
"avatar": "http://example.com/avatar",
"url": "http://example.com/foo",
}
}
- submitText="onboarding.import_organization.import"
+ submitText="continue"
/>
- </div>
-</div>
-`;
-
-exports[`should render with import org button 1`] = `
-<div
- className="boxed-group"
->
- <div
- className="boxed-group-header"
- >
- <h2>
- onboarding.import_organization.import_org_details
- </h2>
- </div>
- <withRouter(RemoteOrganizationChoose)
- almApplication={
- Object {
- "backgroundColor": "#0052CC",
- "iconPath": "\\"/static/authbitbucket/bitbucket.svg\\"",
- "installationUrl": "https://bitbucket.org/install/app",
- "key": "bitbucket",
- "name": "BitBucket",
- }
+ </OrganizationDetailsStep>
+ <PlanStep
+ createOrganization={[Function]}
+ onDone={[MockFunction]}
+ onUpgradeFail={[MockFunction]}
+ onlyPaid={false}
+ open={false}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
}
- almUnboundApplications={Array []}
/>
</div>
`;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render correctly 1`] = `
-<div
- className="boxed-group"
->
- <div
- className="boxed-group-inner"
+<Fragment>
+ <OrganizationDetailsStep
+ finished={false}
+ onOpen={[MockFunction]}
+ open={true}
+ stepTitle="onboarding.import_organization.personal.import_org_details"
>
<div
className="display-flex-center big-spacer-bottom"
/>
<DeleteButton
className="little-spacer-left"
- onClick={[Function]}
+ onClick={[MockFunction]}
/>
</div>
<OrganizationDetailsForm
"name": "Personal Org",
}
}
- submitText="onboarding.import_organization.bind"
+ submitText="continue"
/>
- </div>
-</div>
+ </OrganizationDetailsStep>
+ <PlanStep
+ createOrganization={[Function]}
+ onDone={[MockFunction]}
+ onlyPaid={false}
+ open={false}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
+ />
+</Fragment>
`;
"personal": true,
}
}
+ handleCancelImport={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
importPersonalOrg={
Object {
"actions": Object {
"name": "Foo",
}
}
- onOrgCreated={[Function]}
+ onDone={[Function]}
+ step={0}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
updateOrganization={[MockFunction]}
- updateUrlQuery={[Function]}
/>
</div>
</Fragment>
<ManualOrganizationCreate
className="hidden"
createOrganization={[MockFunction]}
- deleteOrganization={[MockFunction]}
- onOrgCreated={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
subscriptionPlans={
Array [
Object {
]
}
/>
- <AutoOrganizationCreate
+ <withRouter(RemoteOrganizationChoose)
almApplication={
Object {
"backgroundColor": "blue",
}
almUnboundApplications={Array []}
className=""
- createOrganization={[MockFunction]}
- onOrgCreated={[Function]}
- unboundOrganizations={
- Array [
- Object {
- "actions": Object {
- "admin": true,
- },
- "key": "foo",
- "name": "Foo",
- },
- ]
- }
- updateUrlQuery={[Function]}
/>
</div>
</Fragment>
<ManualOrganizationCreate
className="hidden"
createOrganization={[MockFunction]}
- deleteOrganization={[MockFunction]}
- onOrgCreated={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
subscriptionPlans={
Array [
Object {
"url": "https://www.sonarsource.com",
}
}
- almUnboundApplications={Array []}
className=""
createOrganization={[MockFunction]}
+ handleCancelImport={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
onOrgCreated={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
unboundOrganizations={
Array [
Object {
},
]
}
- updateUrlQuery={[Function]}
/>
</div>
</Fragment>
</p>
</header>
<ManualOrganizationCreate
- className=""
createOrganization={[MockFunction]}
- deleteOrganization={[MockFunction]}
- onOrgCreated={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
subscriptionPlans={
Array [
Object {
</Fragment>
`;
-exports[`should switch tabs 1`] = `
+exports[`should render with organization bind page 1`] = `
+<AlmApplicationInstalling
+ almKey="github"
+/>
+`;
+
+exports[`should render with organization bind page 2`] = `
<Fragment>
<HelmetWrapper
defer={true}
<ManualOrganizationCreate
className="hidden"
createOrganization={[MockFunction]}
- deleteOrganization={[MockFunction]}
- onOrgCreated={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
subscriptionPlans={
Array [
Object {
"name": "GitHub",
}
}
- almUnboundApplications={Array []}
+ almInstallId="foo"
+ almOrganization={
+ Object {
+ "avatar": "my-avatar",
+ "key": "foo",
+ "name": "Foo",
+ "personal": false,
+ }
+ }
className=""
createOrganization={[MockFunction]}
+ handleCancelImport={[Function]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
onOrgCreated={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
unboundOrganizations={
Array [
Object {
},
]
}
- updateUrlQuery={[Function]}
+ />
+ </div>
+</Fragment>
+`;
+
+exports[`should switch tabs 1`] = `
+<Fragment>
+ <HelmetWrapper
+ defer={true}
+ encodeSpecialCharacters={true}
+ title="onboarding.create_organization.page.header"
+ titleTemplate="%s"
+ />
+ <div
+ className="sonarcloud page page-limited"
+ >
+ <header
+ className="page-header"
+ >
+ <h1
+ className="page-title big-spacer-bottom"
+ >
+ onboarding.create_organization.page.header
+ </h1>
+ <p
+ className="page-description"
+ >
+ <FormattedMessage
+ defaultMessage="onboarding.create_organization.page.description"
+ id="onboarding.create_organization.page.description"
+ values={
+ Object {
+ "break": <br />,
+ "more": <Link
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ target="_blank"
+ to="/documentation/sonarcloud-pricing/"
+ >
+ learn_more
+ </Link>,
+ "price": "billing.price_format.10",
+ }
+ }
+ />
+ </p>
+ </header>
+ <Tabs
+ onChange={[Function]}
+ selected="auto"
+ tabs={
+ Array [
+ Object {
+ "key": "auto",
+ "node": "onboarding.import_organization.github",
+ },
+ Object {
+ "key": "manual",
+ "node": "onboarding.create_organization.create_manually",
+ },
+ ]
+ }
+ />
+ <ManualOrganizationCreate
+ className="hidden"
+ createOrganization={[MockFunction]}
+ handleOrgDetailsFinish={[Function]}
+ handleOrgDetailsStepOpen={[Function]}
+ onDone={[Function]}
+ onUpgradeFail={[Function]}
+ step={0}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 100000,
+ "price": 10,
+ },
+ Object {
+ "maxNcloc": 250000,
+ "price": 75,
+ },
+ ]
+ }
+ />
+ <withRouter(RemoteOrganizationChoose)
+ almApplication={
+ Object {
+ "backgroundColor": "blue",
+ "iconPath": "icon/path",
+ "installationUrl": "https://alm.installation.url",
+ "key": "github",
+ "name": "GitHub",
+ }
+ }
+ almUnboundApplications={Array []}
+ className=""
/>
</div>
</Fragment>
<div>
<OrganizationDetailsStep
finished={false}
- onOpen={[Function]}
+ onOpen={[MockFunction]}
open={true}
>
<OrganizationDetailsForm
- onContinue={[Function]}
+ onContinue={[MockFunction]}
submitText="continue"
/>
</OrganizationDetailsStep>
<PlanStep
createOrganization={[Function]}
- deleteOrganization={[Function]}
- onFreePlanChoose={[Function]}
- onPaidPlanChoose={[Function]}
+ onDone={[MockFunction]}
+ onUpgradeFail={[MockFunction]}
open={false}
- startingPrice="billing.price_format.10"
subscriptionPlans={
Array [
Object {
exports[`should render and create organization 2`] = `
<div>
<OrganizationDetailsStep
- finished={true}
- onOpen={[Function]}
+ finished={false}
+ onOpen={[MockFunction]}
open={false}
- organization={
- Object {
- "avatar": "http://example.com/avatar",
- "description": "description-foo",
- "key": "key-foo",
- "name": "name-foo",
- "url": "http://example.com/foo",
- }
- }
>
<OrganizationDetailsForm
- onContinue={[Function]}
- organization={
- Object {
- "avatar": "http://example.com/avatar",
- "description": "description-foo",
- "key": "key-foo",
- "name": "name-foo",
- "url": "http://example.com/foo",
+ onContinue={
+ [MockFunction] {
+ "calls": Array [
+ Array [
+ Object {
+ "avatar": "http://example.com/avatar",
+ "description": "description-foo",
+ "key": "key-foo",
+ "name": "name-foo",
+ "url": "http://example.com/foo",
+ },
+ ],
+ ],
+ "results": Array [
+ Object {
+ "isThrow": false,
+ "value": undefined,
+ },
+ ],
}
}
submitText="continue"
</OrganizationDetailsStep>
<PlanStep
createOrganization={[Function]}
- deleteOrganization={[Function]}
- onFreePlanChoose={[Function]}
- onPaidPlanChoose={[Function]}
+ onDone={[MockFunction]}
+ onUpgradeFail={[MockFunction]}
open={true}
- startingPrice="billing.price_format.10"
subscriptionPlans={
Array [
Object {
onCommit={[MockFunction]}
onFailToUpgrade={[MockFunction]}
organizationKey={[MockFunction]}
- subscriptionPlans={Array []}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 1000,
+ "price": 100,
+ },
+ ]
+ }
>
<Component />
</Connect(withCurrentUser(BillingFormShim))>
<PlanSelect
onChange={[Function]}
plan="free"
- startingPrice="10"
+ startingPrice="billing.price_format.100"
/>
- <div
+ <form
className="display-flex-center big-spacer-top"
+ id="organization-free-plan-form"
+ onSubmit={[Function]}
>
<SubmitButton
disabled={false}
- onClick={[Function]}
>
my_account.create_organization
</SubmitButton>
- </div>
+ </form>
</div>
</div>
</div>
<PlanSelect
onChange={[Function]}
plan="paid"
- startingPrice="10"
+ startingPrice="billing.price_format.100"
/>
<Connect(withCurrentUser(BillingFormShim))
onCommit={[MockFunction]}
onFailToUpgrade={[MockFunction]}
organizationKey={[MockFunction]}
- subscriptionPlans={Array []}
+ subscriptionPlans={
+ Array [
+ Object {
+ "maxNcloc": 1000,
+ "price": 100,
+ },
+ ]
+ }
>
<Component />
</Connect(withCurrentUser(BillingFormShim))>
exports[`should display unbound installations 1`] = `
<div
- className="boxed-group-inner"
+ className="boxed-group"
>
<div
- className="display-flex-center"
+ className="boxed-group-header"
+ >
+ <h2>
+ onboarding.import_organization.import_org_details
+ </h2>
+ </div>
+ <div
+ className="boxed-group-inner"
>
<div
- className="display-inline-block"
- >
- <IdentityProviderLink
- className="display-inline-block"
- identityProvider={
- Object {
- "backgroundColor": "blue",
- "iconPath": "icon/path",
- "installationUrl": "https://alm.application.url",
- "key": "github",
- "name": "GitHub",
- }
- }
- onClick={[Function]}
- small={true}
- url="https://alm.application.url"
- >
- onboarding.import_organization.choose_organization_button.github
- </IdentityProviderLink>
- </div>
- <div
- className="display-flex-stretch"
+ className="display-flex-center"
>
<div
- className="vertical-pipe-separator"
+ className="display-inline-block"
>
- <div
- className="vertical-separator "
- />
- <span
- className="note"
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={
+ Object {
+ "backgroundColor": "blue",
+ "iconPath": "icon/path",
+ "installationUrl": "https://alm.application.url",
+ "key": "github",
+ "name": "GitHub",
+ }
+ }
+ onClick={[Function]}
+ small={true}
+ url="https://alm.application.url"
>
- or
- </span>
- <div
- className="vertical-separator"
- />
+ onboarding.import_organization.choose_organization_button.github
+ </IdentityProviderLink>
</div>
- <form
- className="big-spacer-top big-spacer-bottom"
- onSubmit={[Function]}
+ <div
+ className="display-flex-stretch"
>
<div
- className="form-field abs-width-400"
+ className="vertical-pipe-separator"
>
- <label
- htmlFor="select-unbound-installation"
+ <div
+ className="vertical-separator "
+ />
+ <span
+ className="note"
>
- onboarding.import_organization.choose_unbound_installation.github
- </label>
- <Select
- className="input-super-large"
- clearable={false}
- id="select-unbound-installation"
- labelKey="name"
- onChange={[Function]}
- optionRenderer={[Function]}
- options={
- Array [
- Object {
- "installationId": "12345",
- "key": "foo",
- "name": "Foo",
- },
- ]
- }
- placeholder="onboarding.import_organization.choose_organization"
- value=""
- valueKey="installationId"
- valueRenderer={[Function]}
+ or
+ </span>
+ <div
+ className="vertical-separator"
/>
</div>
- <SubmitButton
- disabled={true}
+ <form
+ className="big-spacer-top big-spacer-bottom"
+ onSubmit={[Function]}
>
- continue
- </SubmitButton>
- </form>
+ <div
+ className="form-field abs-width-400"
+ >
+ <label
+ htmlFor="select-unbound-installation"
+ >
+ onboarding.import_organization.choose_unbound_installation.github
+ </label>
+ <Select
+ className="input-super-large"
+ clearable={false}
+ id="select-unbound-installation"
+ labelKey="name"
+ onChange={[Function]}
+ optionRenderer={[Function]}
+ options={
+ Array [
+ Object {
+ "installationId": "12345",
+ "key": "foo",
+ "name": "Foo",
+ },
+ ]
+ }
+ placeholder="onboarding.import_organization.choose_organization"
+ value=""
+ valueKey="installationId"
+ valueRenderer={[Function]}
+ />
+ </div>
+ <SubmitButton
+ disabled={true}
+ >
+ continue
+ </SubmitButton>
+ </form>
+ </div>
</div>
</div>
</div>
exports[`should render 1`] = `
<div
- className="boxed-group-inner"
+ className="boxed-group"
>
<div
- className="display-flex-center"
+ className="boxed-group-header"
+ >
+ <h2>
+ onboarding.import_organization.import_org_details
+ </h2>
+ </div>
+ <div
+ className="boxed-group-inner"
>
<div
- className="display-inline-block"
+ className="display-flex-center"
>
- <IdentityProviderLink
+ <div
className="display-inline-block"
- identityProvider={
- Object {
- "backgroundColor": "blue",
- "iconPath": "icon/path",
- "installationUrl": "https://alm.application.url",
- "key": "github",
- "name": "GitHub",
- }
- }
- onClick={[Function]}
- small={true}
- url="https://alm.application.url"
>
- onboarding.import_organization.choose_organization_button.github
- </IdentityProviderLink>
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={
+ Object {
+ "backgroundColor": "blue",
+ "iconPath": "icon/path",
+ "installationUrl": "https://alm.application.url",
+ "key": "github",
+ "name": "GitHub",
+ }
+ }
+ onClick={[Function]}
+ small={true}
+ url="https://alm.application.url"
+ >
+ onboarding.import_organization.choose_organization_button.github
+ </IdentityProviderLink>
+ </div>
</div>
</div>
</div>
export const ORGANIZATION_IMPORT_REDIRECT_TO_PROJECT_TIMESTAMP =
'sonarcloud.import_org.redirect_to_projects';
+export enum Step {
+ OrganizationDetails,
+ Plan
+}
+
export function formatPrice(price?: number, noSign?: boolean) {
const priceFormatted = formatMeasure(price, 'FLOAT')
.replace(/[.|,]0$/, '')
onboarding.import_organization.installing.bitbucket=Finalize installation of the Bitbucket application..
onboarding.import_organization.installing.github=Finalize installation of the GitHub application...
onboarding.import_organization.personal.page.header=Bind to your personal organization
+onboarding.import_organization.personal.import_org_details=Import personal organization details
onboarding.import_organization.private.disabled=Selecting private repository is not available yet and will come soon. Meanwhile, you need to create the project manually.
onboarding.import_organization.bitbucket=Import from BitBucket teams
onboarding.import_organization.github=Import from GitHub organizations
projects / sonarqube.git / commitdiff