123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362 |
- /*
- * SonarQube
- * Copyright (C) 2009-2024 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
- import { Link, Spinner } from '@sonarsource/echoes-react';
- import {
- AddNewIcon,
- BlueGreySeparator,
- ButtonPrimary,
- ButtonSecondary,
- DarkLabel,
- FlagMessage,
- InputSelect,
- SubTitle,
- Title,
- } from 'design-system';
- import React, { useEffect, useRef } from 'react';
- import { FormattedMessage, useIntl } from 'react-intl';
- import { useLocation, useRouter } from '../../../../components/hoc/withRouter';
- import { translate } from '../../../../helpers/l10n';
- import { LabelValueSelectOption } from '../../../../helpers/search';
- import { AlmKeys } from '../../../../types/alm-settings';
- import { DopSetting } from '../../../../types/dop-translation';
- import { ImportProjectParam } from '../CreateProjectPage';
- import DopSettingDropdown from '../components/DopSettingDropdown';
- import { ProjectData, ProjectValidationCard } from '../components/ProjectValidation';
- import { CreateProjectModes } from '../types';
- import { getSanitizedProjectKey } from '../utils';
- import { MonorepoProjectHeader } from './MonorepoProjectHeader';
-
- interface MonorepoProjectCreateProps {
- canAdmin: boolean;
- dopSettings: DopSetting[];
- error: boolean;
- loadingBindings: boolean;
- loadingOrganizations: boolean;
- loadingRepositories: boolean;
- onProjectSetupDone: (importProjects: ImportProjectParam) => void;
- onSearchRepositories: (query: string) => void;
- onSelectDopSetting: (instance: DopSetting) => void;
- onSelectOrganization: (organizationKey: string) => void;
- onSelectRepository: (repositoryIdentifier: string) => void;
- organizationOptions?: LabelValueSelectOption[];
- repositoryOptions?: LabelValueSelectOption[];
- repositorySearchQuery: string;
- selectedDopSetting?: DopSetting;
- selectedOrganization?: LabelValueSelectOption;
- selectedRepository?: LabelValueSelectOption;
- }
-
- type ProjectItem = Required<ProjectData<number>>;
-
- export default function MonorepoProjectCreate(props: Readonly<MonorepoProjectCreateProps>) {
- const {
- dopSettings,
- canAdmin,
- error,
- loadingBindings,
- loadingOrganizations,
- loadingRepositories,
- onProjectSetupDone,
- onSearchRepositories,
- onSelectDopSetting,
- onSelectOrganization,
- onSelectRepository,
- organizationOptions,
- repositoryOptions,
- repositorySearchQuery,
- selectedDopSetting,
- selectedOrganization,
- selectedRepository,
- } = props;
-
- const projectCounter = useRef(0);
-
- const [projects, setProjects] = React.useState<ProjectItem[]>([]);
-
- const location = useLocation();
- const { push } = useRouter();
- const { formatMessage } = useIntl();
-
- const projectKeys = React.useMemo(() => projects.map(({ key }) => key), [projects]);
-
- const almKey = location.query.mode as AlmKeys;
-
- const isSetupInvalid =
- selectedDopSetting === undefined ||
- selectedOrganization === undefined ||
- selectedRepository === undefined ||
- projects.length === 0 ||
- projects.some(({ hasError, key, name }) => hasError || key === '' || name === '');
-
- const addProject = () => {
- if (selectedOrganization === undefined || selectedRepository === undefined) {
- return;
- }
-
- const id = projectCounter.current;
- projectCounter.current += 1;
-
- const projectKeySuffix = id === 0 ? '' : `-${id}`;
- const projectKey = getSanitizedProjectKey(
- `${selectedOrganization.label}_${selectedRepository.label}_add-your-reference${projectKeySuffix}`,
- );
-
- const newProjects = [
- ...projects,
- {
- hasError: false,
- id,
- key: projectKey,
- name: projectKey,
- touched: false,
- },
- ];
-
- setProjects(newProjects);
- };
-
- const onProjectChange = (project: ProjectItem) => {
- const newProjects = projects.filter(({ id }) => id !== project.id);
- newProjects.push({
- ...project,
- });
- newProjects.sort((a, b) => a.id - b.id);
-
- setProjects(newProjects);
- };
-
- const onProjectRemove = (id: number) => {
- const newProjects = projects.filter(({ id: projectId }) => projectId !== id);
-
- setProjects(newProjects);
- };
-
- const cancelMonorepoSetup = () => {
- push({
- pathname: location.pathname,
- query: { mode: AlmKeys.GitHub },
- });
- };
-
- const submitProjects = () => {
- if (isSetupInvalid) {
- return;
- }
-
- const monorepoSetup: ImportProjectParam = {
- creationMode: almKey as unknown as CreateProjectModes,
- devOpsPlatformSettingId: selectedDopSetting.id,
- monorepo: true,
- projects: projects.map(({ key: projectKey, name: projectName }) => ({
- projectKey,
- projectName,
- })),
- repositoryIdentifier: selectedRepository.value,
- };
-
- onProjectSetupDone(monorepoSetup);
- };
-
- useEffect(() => {
- if (selectedRepository !== undefined && projects.length === 0) {
- addProject();
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [selectedRepository]);
-
- if (loadingBindings) {
- return <Spinner />;
- }
-
- return (
- <div>
- <MonorepoProjectHeader />
-
- <BlueGreySeparator className="sw-my-5" />
-
- <div className="sw-flex sw-flex-col sw-gap-6">
- <Title>
- <FormattedMessage
- id={`onboarding.create_project.monorepo.choose_organization_and_repository.${almKey}`}
- />
- </Title>
-
- <DopSettingDropdown
- almKey={almKey}
- dopSettings={dopSettings}
- selectedDopSetting={selectedDopSetting}
- onChangeSetting={onSelectDopSetting}
- />
-
- {error && selectedDopSetting && !loadingOrganizations && (
- <FlagMessage variant="warning">
- <span>
- {canAdmin ? (
- <FormattedMessage
- id="onboarding.create_project.github.warning.message_admin"
- defaultMessage={translate(
- 'onboarding.create_project.github.warning.message_admin',
- )}
- values={{
- link: (
- <Link to="/admin/settings?category=almintegration">
- {translate('onboarding.create_project.github.warning.message_admin.link')}
- </Link>
- ),
- }}
- />
- ) : (
- translate('onboarding.create_project.github.warning.message')
- )}
- </span>
- </FlagMessage>
- )}
-
- <div className="sw-flex sw-flex-col">
- <Spinner isLoading={loadingOrganizations && !error}>
- {!error && (
- <>
- <DarkLabel htmlFor="monorepo-choose-organization" className="sw-mb-2">
- <FormattedMessage
- id={`onboarding.create_project.monorepo.choose_organization.${almKey}`}
- />
- </DarkLabel>
- {(organizationOptions?.length ?? 0) > 0 ? (
- <InputSelect
- size="full"
- isSearchable
- inputId="monorepo-choose-organization"
- options={organizationOptions}
- onChange={({ value }: LabelValueSelectOption) => {
- onSelectOrganization(value);
- }}
- placeholder={formatMessage({
- id: `onboarding.create_project.monorepo.choose_organization.${almKey}.placeholder`,
- })}
- value={selectedOrganization}
- />
- ) : (
- !loadingOrganizations && (
- <FlagMessage variant="error" className="sw-mb-2">
- <span>
- {canAdmin ? (
- <FormattedMessage
- id="onboarding.create_project.github.no_orgs_admin"
- defaultMessage={translate(
- 'onboarding.create_project.github.no_orgs_admin',
- )}
- values={{
- link: (
- <Link to="/admin/settings?category=almintegration">
- {translate(
- 'onboarding.create_project.github.warning.message_admin.link',
- )}
- </Link>
- ),
- }}
- />
- ) : (
- translate('onboarding.create_project.github.no_orgs')
- )}
- </span>
- </FlagMessage>
- )
- )}
- </>
- )}
- </Spinner>
- </div>
-
- <div className="sw-flex sw-flex-col">
- {selectedOrganization && (
- <DarkLabel className="sw-mb-2" htmlFor="monorepo-choose-repository">
- <FormattedMessage
- id={`onboarding.create_project.monorepo.choose_repository.${almKey}`}
- />
- </DarkLabel>
- )}
- {selectedOrganization && (
- <InputSelect
- inputId="monorepo-choose-repository"
- inputValue={repositorySearchQuery}
- isLoading={loadingRepositories}
- isSearchable
- noOptionsMessage={() => formatMessage({ id: 'no_results' })}
- onChange={({ value }: LabelValueSelectOption) => {
- onSelectRepository(value);
- }}
- onInputChange={onSearchRepositories}
- options={repositoryOptions}
- placeholder={formatMessage({
- id: `onboarding.create_project.monorepo.choose_repository.${almKey}.placeholder`,
- })}
- size="full"
- value={selectedRepository}
- />
- )}
- </div>
- </div>
-
- {selectedRepository !== undefined && (
- <>
- <BlueGreySeparator className="sw-my-5" />
-
- <div>
- <SubTitle>
- <FormattedMessage id="onboarding.create_project.monorepo.project_title" />
- </SubTitle>
- <div>
- {projects.map(({ id, key, name }) => (
- <ProjectValidationCard
- className="sw-mt-4"
- initialKey={key}
- initialName={name}
- key={id}
- monorepoSetupProjectKeys={projectKeys}
- onChange={onProjectChange}
- onRemove={() => {
- onProjectRemove(id);
- }}
- projectId={id}
- />
- ))}
- </div>
-
- <div className="sw-flex sw-justify-end sw-mt-4">
- <ButtonSecondary onClick={addProject}>
- <AddNewIcon className="sw-mr-2" />
- <FormattedMessage id="onboarding.create_project.monorepo.add_project" />
- </ButtonSecondary>
- </div>
- </div>
- </>
- )}
-
- <div className="sw-my-5">
- <ButtonSecondary onClick={cancelMonorepoSetup}>
- <FormattedMessage id="cancel" />
- </ButtonSecondary>
- <ButtonPrimary className="sw-ml-3" disabled={isSetupInvalid} onClick={submitProjects}>
- <FormattedMessage id="next" />
- </ButtonPrimary>
- </div>
- </div>
- );
- }
|