* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import { getJSON, postJSON, post } from '../helpers/request';
-import { AlmRepository, AlmApplication, AlmOrganization } from '../app/types';
+import {
+ AlmApplication,
+ AlmOrganization,
+ AlmRepository,
+ AlmUnboundApplication
+} from '../app/types';
import throwGlobalError from '../app/utils/throwGlobalError';
export function bindAlmOrganization(data: { installationId: string; organization: string }) {
return getJSON('/api/alm_integration/list_repositories', data).catch(throwGlobalError);
}
+export function listUnboundApplications(): Promise<{ applications: AlmUnboundApplication[] }> {
+ return getJSON('/api/alm_integration/list_unbound_applications').catch(throwGlobalError);
+}
+
export function provisionProject(data: {
installationKeys: string[];
organization: string;
{branchMeasures &&
branchMeasures.length > 0 && (
<>
- <span className="vertical-separator" />
+ <span className="vertical-separator big-spacer-left big-spacer-right" />
<BranchMeasures
branchLike={branchLike}
componentKey={component.key}
}
/>
<span
- className="vertical-separator"
+ className="vertical-separator big-spacer-left big-spacer-right"
/>
<BranchMeasures
branchLike={
align-items: center;
}
+.display-flex-stretch {
+ display: flex !important;
+ align-items: stretch;
+}
+
.display-inline-flex-baseline {
display: inline-flex !important;
align-items: baseline;
}
.vertical-separator {
- margin-left: calc(2 * var(--gridSize));
- margin-right: calc(2 * var(--gridSize));
+ width: 1px;
+ min-height: 16px;
+ flex-grow: 1;
+ background-color: var(--barBorderColor);
+}
+
+.vertical-pipe-separator {
+ display: flex;
+ flex-direction: column;
+ margin-right: 60px;
}
-.vertical-separator:after {
- content: '|';
- color: var(--barBorderColor);
+.vertical-pipe-separator > .vertical-separator {
+ margin: 4px auto;
}
.capitalize {
export interface AlmApplication extends IdentityProvider {
installationUrl: string;
}
+
export interface AlmOrganization extends OrganizationBase {
key: string;
personal: boolean;
linkedProjectName?: string;
}
+export interface AlmUnboundApplication {
+ installationId: string;
+ name: string;
+}
+
export interface Analysis {
date: string;
events: AnalysisEvent[];
import {
AlmApplication,
AlmOrganization,
- OrganizationBase,
- Organization
+ AlmUnboundApplication,
+ Organization,
+ OrganizationBase
} from '../../../app/types';
import { bindAlmOrganization } from '../../../api/alm-integration';
import { sanitizeAlmId } from '../../../helpers/almIntegrations';
almApplication: AlmApplication;
almInstallId?: string;
almOrganization?: AlmOrganization;
+ almUnboundApplications: AlmUnboundApplication[];
createOrganization: (
organization: OrganizationBase & { installationId?: string }
) => Promise<Organization>;
<ChooseRemoteOrganizationStep
almApplication={this.props.almApplication}
almInstallId={almInstallId}
+ almUnboundApplications={this.props.almUnboundApplications}
/>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { WithRouterProps, withRouter } from 'react-router';
+import { sortBy } from 'lodash';
+import { serializeQuery } from './utils';
import IdentityProviderLink from '../../../components/ui/IdentityProviderLink';
+import Select from '../../../components/controls/Select';
import Step from '../../tutorials/components/Step';
-import { translate } from '../../../helpers/l10n';
-import { AlmApplication } from '../../../app/types';
import { Alert } from '../../../components/ui/Alert';
+import { SubmitButton } from '../../../components/ui/buttons';
+import { AlmApplication, AlmUnboundApplication } from '../../../app/types';
+import { getBaseUrl } from '../../../helpers/urls';
+import { sanitizeAlmId } from '../../../helpers/almIntegrations';
+import { translate } from '../../../helpers/l10n';
interface Props {
almApplication: AlmApplication;
almInstallId?: string;
+ almUnboundApplications: AlmUnboundApplication[];
+}
+
+interface State {
+ unboundInstallationId: string;
}
-export default class ChooseRemoteOrganizationStep extends React.PureComponent<Props> {
+export class ChooseRemoteOrganizationStep extends React.PureComponent<
+ Props & WithRouterProps,
+ State
+> {
+ state: State = { unboundInstallationId: '' };
+
+ handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+
+ const { unboundInstallationId } = this.state;
+ if (unboundInstallationId) {
+ this.props.router.push({
+ pathname: '/create-organization',
+ query: serializeQuery({
+ almInstallId: unboundInstallationId,
+ almKey: this.props.almApplication.key
+ })
+ });
+ }
+ };
+
+ handleInstallationChange = ({ installationId }: AlmUnboundApplication) => {
+ this.setState({ unboundInstallationId: installationId });
+ };
+
+ renderOption = (organization: AlmUnboundApplication) => {
+ const { almApplication } = this.props;
+ return (
+ <span>
+ <img
+ alt={almApplication.name}
+ className="spacer-right"
+ height={14}
+ src={`${getBaseUrl()}/images/sonarcloud/${sanitizeAlmId(almApplication.key)}.svg`}
+ />
+ {organization.name}
+ </span>
+ );
+ };
+
renderForm = () => {
- const { almApplication, almInstallId } = this.props;
+ const { almApplication, almInstallId, almUnboundApplications } = this.props;
+ const { unboundInstallationId } = this.state;
return (
<div className="boxed-group-inner">
{almInstallId && (
</ul>
</Alert>
)}
- <IdentityProviderLink
- className="display-inline-block"
- identityProvider={almApplication}
- small={true}
- url={almApplication.installationUrl}>
- {translate(
- 'onboarding.import_organization.choose_organization_button',
- almApplication.key
+ <div className="display-flex-center">
+ <div className="display-inline-block abs-width-400">
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={almApplication}
+ 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
+ )}
+ </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>
)}
- </IdentityProviderLink>
+ </div>
</div>
);
};
);
}
}
+
+export default withRouter(ChooseRemoteOrganizationStep);
import { whenLoggedIn } from '../../../components/hoc/whenLoggedIn';
import { withUserOrganizations } from '../../../components/hoc/withUserOrganizations';
import {
+ bindAlmOrganization,
getAlmAppInfo,
getAlmOrganization,
- bindAlmOrganization
+ listUnboundApplications
} from '../../../api/alm-integration';
import { getSubscriptionPlans } from '../../../api/billing';
import {
- LoggedInUser,
- Organization,
- SubscriptionPlan,
AlmApplication,
AlmOrganization,
- OrganizationBase
+ AlmUnboundApplication,
+ LoggedInUser,
+ Organization,
+ OrganizationBase,
+ SubscriptionPlan
} from '../../../app/types';
import { hasAdvancedALMIntegration, isPersonal } from '../../../helpers/almIntegrations';
import { translate } from '../../../helpers/l10n';
almApplication?: AlmApplication;
almOrganization?: AlmOrganization;
almOrgLoading: boolean;
+ almUnboundApplications: AlmUnboundApplication[];
loading: boolean;
organization?: Organization;
subscriptionPlans?: SubscriptionPlan[];
export class CreateOrganization extends React.PureComponent<Props & WithRouterProps, State> {
mounted = false;
- state: State = { almOrgLoading: false, loading: true };
+ state: State = { almOrgLoading: false, almUnboundApplications: [], loading: true };
componentDidMount() {
this.mounted = true;
const query = parseQuery(this.props.location.query);
if (query.almInstallId) {
this.fetchAlmOrganization(query.almInstallId);
+ } else {
+ initRequests.push(this.fetchAlmUnboundApplications());
}
}
Promise.all(initRequests).then(this.stopLoading, this.stopLoading);
}
+ componentDidUpdate(prevProps: WithRouterProps) {
+ const prevQuery = parseQuery(prevProps.location.query);
+ const query = parseQuery(this.props.location.query);
+ if (this.state.almApplication && prevQuery.almInstallId !== query.almInstallId) {
+ if (query.almInstallId) {
+ this.fetchAlmOrganization(query.almInstallId);
+ } else {
+ this.setState({ almOrganization: undefined, loading: true });
+ this.fetchAlmUnboundApplications().then(this.stopLoading, this.stopLoading);
+ }
+ }
+ }
+
componentWillUnmount() {
this.mounted = false;
document.body.classList.remove('white-page');
});
};
+ fetchAlmUnboundApplications = () => {
+ return listUnboundApplications().then(({ applications }) => {
+ if (this.mounted) {
+ this.setState({ almUnboundApplications: applications });
+ }
+ });
+ };
+
fetchValidOrgKey = (almOrganization: AlmOrganization) => {
const key = slugify(almOrganization.key);
const keys = [key, ...times(9, i => `${key}-${i + 1}`)];
almApplication={almApplication}
almInstallId={almInstallId}
almOrganization={almOrganization}
+ almUnboundApplications={this.state.almUnboundApplications}
createOrganization={this.props.createOrganization}
onOrgCreated={this.handleOrgCreated}
unboundOrganizations={this.props.userOrganizations.filter(
key: 'bitbucket',
name: 'BitBucket'
}}
+ almUnboundApplications={[]}
createOrganization={jest.fn()}
onOrgCreated={jest.fn()}
unboundOrganizations={[]}
*/
import * as React from 'react';
import { shallow } from 'enzyme';
-import ChooseRemoteOrganizationStep from '../ChooseRemoteOrganizationStep';
+import { ChooseRemoteOrganizationStep } from '../ChooseRemoteOrganizationStep';
+import { mockRouter, submit } from '../../../../helpers/testUtils';
it('should render', () => {
expect(shallowRender()).toMatchSnapshot();
expect(shallowRender({ almInstallId: 'foo' }).find('Alert')).toMatchSnapshot();
});
+it('should display unbound installations', () => {
+ const installation = { installationId: '12345', name: 'Foo' };
+ const push = jest.fn();
+ const wrapper = shallowRender({
+ almUnboundApplications: [installation],
+ router: mockRouter({ push })
+ });
+ expect(wrapper).toMatchSnapshot();
+
+ wrapper.find('Select').prop<Function>('onChange')(installation);
+ submit(wrapper.find('form'));
+ expect(push).toHaveBeenCalledWith({
+ pathname: '/create-organization',
+ query: { installation_id: installation.installationId } // eslint-disable-line camelcase
+ });
+});
+
function shallowRender(props: Partial<ChooseRemoteOrganizationStep['props']> = {}) {
return shallow(
+ // @ts-ignore avoid passing everything from WithRouterProps
<ChooseRemoteOrganizationStep
almApplication={{
backgroundColor: 'blue',
key: 'github',
name: 'GitHub'
}}
+ almUnboundApplications={[]}
+ router={mockRouter()}
{...props}
/>
).dive();
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { times } from 'lodash';
import { Location } from 'history';
import { shallow } from 'enzyme';
import { CreateOrganization } from '../CreateOrganization';
import { mockRouter, waitAndUpdate } from '../../../../helpers/testUtils';
import { LoggedInUser } from '../../../../app/types';
-import { getAlmOrganization } from '../../../../api/alm-integration';
+import {
+ getAlmAppInfo,
+ getAlmOrganization,
+ listUnboundApplications
+} from '../../../../api/alm-integration';
+import { getSubscriptionPlans } from '../../../../api/billing';
+import { getOrganizations } from '../../../../api/organizations';
jest.mock('../../../../api/billing', () => ({
getSubscriptionPlans: jest
}
}),
getAlmOrganization: jest.fn().mockResolvedValue({
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
+ avatar: 'my-avatar',
description: 'Continuous Code Quality',
key: 'sonarsource',
name: 'SonarSource',
personal: false,
url: 'https://www.sonarsource.com'
- })
+ }),
+ listUnboundApplications: jest.fn().mockResolvedValue({ applications: [] })
}));
jest.mock('../../../../api/organizations', () => ({
- getOrganization: jest.fn().mockResolvedValue(undefined)
+ getOrganizations: jest.fn().mockResolvedValue({ organizations: [] })
}));
const user: LoggedInUser = {
showOnboardingTutorial: false
};
+beforeEach(() => {
+ (getAlmAppInfo as jest.Mock<any>).mockClear();
+ (getAlmOrganization as jest.Mock<any>).mockClear();
+ (listUnboundApplications as jest.Mock<any>).mockClear();
+ (getSubscriptionPlans as jest.Mock<any>).mockClear();
+ (getOrganizations as jest.Mock<any>).mockClear();
+});
+
it('should render with manual tab displayed', async () => {
const wrapper = shallowRender();
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
+ expect(getSubscriptionPlans).toHaveBeenCalled();
+ expect(getAlmAppInfo).not.toHaveBeenCalled();
});
it('should preselect paid plan on manual creation', async () => {
const wrapper = shallowRender({ currentUser: { ...user, externalProvider: 'github' } });
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
+ expect(getAlmAppInfo).toHaveBeenCalled();
+ expect(listUnboundApplications).toHaveBeenCalled();
});
it('should render with auto tab selected and manual disabled', async () => {
expect(wrapper).toMatchSnapshot();
await waitAndUpdate(wrapper);
expect(wrapper).toMatchSnapshot();
+ expect(getAlmAppInfo).toHaveBeenCalled();
+ expect(getAlmOrganization).toHaveBeenCalled();
+ expect(getOrganizations).toHaveBeenCalled();
});
it('should render with auto personal organization bind page', async () => {
(getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({
key: 'foo',
name: 'Foo',
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
+ avatar: 'my-avatar',
personal: true
});
const wrapper = shallowRender({
it('should slugify and find a uniq organization key', async () => {
(getAlmOrganization as jest.Mock<any>).mockResolvedValueOnce({
+ avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
key: 'Foo&Bar',
name: 'Foo & Bar',
- avatar: 'https://avatars3.githubusercontent.com/u/37629810?v=4',
- type: 'USER'
+ personal: true
+ });
+ (getOrganizations as jest.Mock<any>).mockResolvedValueOnce({
+ organizations: [{ key: 'foo-and-bar' }, { key: 'foo-and-bar-1' }]
});
const wrapper = shallowRender({
currentUser: { ...user, externalProvider: 'github' },
location: { query: { installation_id: 'foo' } } as Location // eslint-disable-line camelcase
});
await waitAndUpdate(wrapper);
+ expect(getOrganizations).toHaveBeenCalledWith({
+ organizations: ['foo-and-bar', ...times(9, i => `foo-and-bar-${i + 1}`)].join(',')
+ });
expect(wrapper.find('AutoOrganizationCreate').prop('almOrganization')).toMatchObject({
- key: 'foo-and-bar'
+ key: 'foo-and-bar-2'
});
});
expect(wrapper.find('AutoOrganizationCreate').exists()).toBeTruthy();
});
+it('should reload the alm organization when the url query changes', async () => {
+ const wrapper = shallowRender({ currentUser: { ...user, externalProvider: 'github' } });
+ await waitAndUpdate(wrapper);
+ expect(getAlmOrganization).not.toHaveBeenCalled();
+ wrapper.setProps({ location: { query: { installation_id: 'foo' } } }); // eslint-disable-line camelcase
+ expect(getAlmOrganization).toHaveBeenCalledWith({ installationId: 'foo' });
+ wrapper.setProps({ location: { query: {} } });
+ expect(wrapper.state('almOrganization')).toBeUndefined();
+ expect(listUnboundApplications).toHaveBeenCalledTimes(2);
+});
+
function shallowRender(props: Partial<CreateOrganization['props']> = {}) {
return shallow(
<CreateOrganization
},
]
}
- value="none"
+ value={null}
/>
</div>
</OrganizationDetailsStep>
`;
exports[`should render with import org button 1`] = `
-<ChooseRemoteOrganizationStep
+<withRouter(ChooseRemoteOrganizationStep)
almApplication={
Object {
"backgroundColor": "#0052CC",
"name": "BitBucket",
}
}
+ almUnboundApplications={Array []}
/>
`;
</Alert>
`;
+exports[`should display unbound installations 1`] = `
+<div
+ className="boxed-group onboarding-step is-open"
+>
+ <div
+ className="onboarding-step-number"
+ >
+ 1
+ </div>
+ <div
+ className="boxed-group-header"
+ >
+ <h2>
+ onboarding.import_organization.import_org_details
+ </h2>
+ </div>
+ <div
+ className=""
+ >
+ <div
+ className="boxed-group-inner"
+ >
+ <div
+ className="display-flex-center"
+ >
+ <div
+ className="display-inline-block abs-width-400"
+ >
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={
+ Object {
+ "backgroundColor": "blue",
+ "iconPath": "icon/path",
+ "installationUrl": "https://alm.application.url",
+ "key": "github",
+ "name": "GitHub",
+ }
+ }
+ small={true}
+ url="https://alm.application.url"
+ >
+ onboarding.import_organization.choose_organization_button.github
+ </IdentityProviderLink>
+ </div>
+ <div
+ className="display-flex-stretch"
+ >
+ <div
+ className="vertical-pipe-separator"
+ >
+ <div
+ className="vertical-separator "
+ />
+ <span
+ className="note"
+ >
+ or
+ </span>
+ <div
+ className="vertical-separator"
+ />
+ </div>
+ <form
+ className="big-spacer-top big-spacer-bottom"
+ onSubmit={[Function]}
+ >
+ <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",
+ "name": "Foo",
+ },
+ ]
+ }
+ placeholder="onboarding.import_organization.choose_organization"
+ value=""
+ valueKey="installationId"
+ valueRenderer={[Function]}
+ />
+ </div>
+ <SubmitButton
+ disabled={true}
+ >
+ continue
+ </SubmitButton>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
exports[`should render 1`] = `
<div
className="boxed-group onboarding-step is-open"
<div
className="boxed-group-inner"
>
- <IdentityProviderLink
- className="display-inline-block"
- identityProvider={
- Object {
- "backgroundColor": "blue",
- "iconPath": "icon/path",
- "installationUrl": "https://alm.application.url",
- "key": "github",
- "name": "GitHub",
- }
- }
- small={true}
- url="https://alm.application.url"
+ <div
+ className="display-flex-center"
>
- onboarding.import_organization.choose_organization_button.github
- </IdentityProviderLink>
+ <div
+ className="display-inline-block abs-width-400"
+ >
+ <IdentityProviderLink
+ className="display-inline-block"
+ identityProvider={
+ Object {
+ "backgroundColor": "blue",
+ "iconPath": "icon/path",
+ "installationUrl": "https://alm.application.url",
+ "key": "github",
+ "name": "GitHub",
+ }
+ }
+ small={true}
+ url="https://alm.application.url"
+ >
+ onboarding.import_organization.choose_organization_button.github
+ </IdentityProviderLink>
+ </div>
+ </div>
</div>
</div>
</div>
almInstallId="foo"
almOrganization={
Object {
- "avatar": "https://avatars3.githubusercontent.com/u/37629810?v=4",
+ "avatar": "my-avatar",
"key": "foo",
"name": "Foo",
"personal": true,
"name": "GitHub",
}
}
+ almUnboundApplications={Array []}
onOrgCreated={[Function]}
unboundOrganizations={
Array [
almInstallId="foo"
almOrganization={
Object {
- "avatar": "https://avatars3.githubusercontent.com/u/37629810?v=4",
+ "avatar": "my-avatar",
"description": "Continuous Code Quality",
"key": "sonarsource",
"name": "SonarSource",
"url": "https://www.sonarsource.com",
}
}
+ almUnboundApplications={Array []}
onOrgCreated={[Function]}
unboundOrganizations={
Array [
"name": "GitHub",
}
}
+ almUnboundApplications={Array []}
onOrgCreated={[Function]}
unboundOrganizations={
Array [
import { memoize } from 'lodash';
import { translateWithParameters } from '../../../helpers/l10n';
import { formatMeasure } from '../../../helpers/measures';
-import { RawQuery, parseAsOptionalString } from '../../../helpers/query';
+import {
+ RawQuery,
+ parseAsOptionalString,
+ cleanQuery,
+ serializeString
+} from '../../../helpers/query';
+import { isBitbucket, isGithub } from '../../../helpers/almIntegrations';
export function formatPrice(price?: number, noSign?: boolean) {
const priceFormatted = formatMeasure(price, 'FLOAT')
};
}
);
+
+export const serializeQuery = (query: Query): RawQuery =>
+ cleanQuery({
+ // eslint-disable-next-line camelcase
+ installation_id: isGithub(query.almKey) ? serializeString(query.almInstallId) : undefined,
+ clientKey: isBitbucket(query.almKey) ? serializeString(query.almInstallId) : undefined
+ });
not_now=Not now
off=Off
on=On
+or=Or
organization_key=Organization Key
open=Open
optional=Optional
onboarding.create_organization.create_and_upgrade=Create Organization and Upgrade
onboarding.create_organization.ready=All set! Your organization is now ready to go
onboarding.import_organization.bind=Bind Organization
+onboarding.import_organization.choose_unbound_installation.bitbucket=Choose one of your Bitbucket teams that already have the SonarCloud application installed:
+onboarding.import_organization.choose_unbound_installation.github=Choose one of your GitHub organizations that already have the SonarCloud application installed:
onboarding.import_organization.import=Import Organization
onboarding.import_organization.import_org_details=Import organization details
onboarding.import_organization.org_not_found=We were not able to find the requested organization, here are a few tips to help you troubleshoot the issue:
projects / sonarqube.git / commitdiff