123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315 |
- /*
- * 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 { FlagMessage, InputField, Note, RequiredIcon, SubHeading, Switch } from 'design-system';
- import * as React from 'react';
- import { FormattedMessage } from 'react-intl';
- import withAvailableFeatures, {
- WithAvailableFeaturesProps,
- } from '../../../../app/components/available-features/withAvailableFeatures';
- import DocumentationLink from '../../../../components/common/DocumentationLink';
- import { translate } from '../../../../helpers/l10n';
- import { convertGithubApiUrlToLink, stripTrailingSlash } from '../../../../helpers/urls';
- import {
- AlmKeys,
- AlmSettingsInstance,
- ProjectAlmBindingResponse,
- } from '../../../../types/alm-settings';
- import { Feature } from '../../../../types/features';
- import { Dict } from '../../../../types/types';
-
- export interface AlmSpecificFormProps extends WithAvailableFeaturesProps {
- alm: AlmKeys;
- instances: AlmSettingsInstance[];
- formData: Omit<ProjectAlmBindingResponse, 'alm'>;
- onFieldChange: (id: keyof ProjectAlmBindingResponse, value: string | boolean) => void;
- }
-
- interface LabelProps {
- id: string;
- optional?: boolean;
- }
-
- interface CommonFieldProps extends LabelProps {
- help?: boolean;
- helpParams?: Dict<string | JSX.Element>;
- helpExample?: JSX.Element;
- onFieldChange: (id: keyof ProjectAlmBindingResponse, value: string | boolean) => void;
- propKey: keyof ProjectAlmBindingResponse;
- }
-
- function renderFieldWrapper(
- label: React.ReactNode,
- input: React.ReactNode,
- help?: React.ReactNode,
- ) {
- return (
- <div className="sw-p-6 sw-flex sw-gap-12">
- <div className="sw-w-abs-300">
- <SubHeading>{label}</SubHeading>
- {help && <div className="markdown">{help}</div>}
- </div>
- <div className="sw-flex-1">{input}</div>
- </div>
- );
- }
-
- function renderHelp({ help, helpExample, helpParams = {}, id }: CommonFieldProps) {
- return (
- help && (
- <>
- <FormattedMessage
- defaultMessage={translate('settings.pr_decoration.binding.form', id, 'help')}
- id={`settings.pr_decoration.binding.form.${id}.help`}
- values={helpParams}
- />
- {helpExample && (
- <div className="sw-mt-2 sw-whitespace-nowrap">
- {translate('example')}: <em>{helpExample}</em>
- </div>
- )}
- </>
- )
- );
- }
-
- function renderLabel(props: LabelProps) {
- const { optional, id } = props;
- return (
- <label htmlFor={id}>
- {translate('settings.pr_decoration.binding.form', id)}
- {!optional && <RequiredIcon />}
- </label>
- );
- }
-
- function renderBooleanField(
- props: Omit<CommonFieldProps, 'optional'> & {
- value: boolean;
- inputExtra?: React.ReactNode;
- },
- ) {
- const { id, value, onFieldChange, propKey, inputExtra } = props;
-
- const label = translate('settings.pr_decoration.binding.form', id);
-
- return renderFieldWrapper(
- renderLabel({ ...props, optional: true }),
- <div className="sw-flex sw-items-start">
- <Switch
- name={id}
- labels={{ on: label, off: label }}
- onChange={(v) => onFieldChange(propKey, v)}
- value={value}
- />
- {value == null && <Note className="sw-ml-2">{translate('settings.not_set')}</Note>}
- {inputExtra}
- </div>,
- renderHelp(props),
- );
- }
-
- function renderField(
- props: CommonFieldProps & {
- value: string;
- },
- ) {
- const { id, propKey, value, onFieldChange } = props;
- return renderFieldWrapper(
- renderLabel(props),
- <InputField
- id={id}
- maxLength={256}
- name={id}
- onChange={(e) => onFieldChange(propKey, e.currentTarget.value)}
- size="large"
- type="text"
- value={value}
- />,
- renderHelp(props),
- );
- }
-
- export function AlmSpecificForm(props: AlmSpecificFormProps) {
- const {
- alm,
- instances,
- formData: { repository, slug, summaryCommentEnabled, monorepo },
- } = props;
-
- let formFields: JSX.Element;
- const instance = instances.find((i) => i.alm === alm);
-
- switch (alm) {
- case AlmKeys.Azure:
- formFields = (
- <>
- {renderField({
- help: true,
- helpExample: <strong>My Project</strong>,
- id: 'azure.project',
- onFieldChange: props.onFieldChange,
- propKey: 'slug',
- value: slug || '',
- })}
-
- {renderField({
- help: true,
- helpExample: <strong>My Repository</strong>,
- id: 'azure.repository',
- onFieldChange: props.onFieldChange,
- propKey: 'repository',
- value: repository || '',
- })}
- </>
- );
- break;
- case AlmKeys.BitbucketServer:
- formFields = (
- <>
- {renderField({
- help: true,
- helpExample: (
- <>
- {instance?.url
- ? `${stripTrailingSlash(instance.url)}/projects/`
- : 'https://bb.company.com/projects/'}
- <strong>{'MY_PROJECT_KEY'}</strong>
- {'/repos/my-repository-slug/browse'}
- </>
- ),
- id: 'bitbucket.repository',
- onFieldChange: props.onFieldChange,
- propKey: 'repository',
- value: repository || '',
- })}
-
- {renderField({
- help: true,
- helpExample: (
- <>
- {instance?.url
- ? `${stripTrailingSlash(instance.url)}/projects/MY_PROJECT_KEY/repos/`
- : 'https://bb.company.com/projects/MY_PROJECT_KEY/repos/'}
- <strong>{'my-repository-slug'}</strong>
- {'/browse'}
- </>
- ),
- id: 'bitbucket.slug',
- onFieldChange: props.onFieldChange,
- propKey: 'slug',
- value: slug || '',
- })}
- </>
- );
- break;
- case AlmKeys.BitbucketCloud:
- formFields = (
- <>
- {renderField({
- help: true,
- helpExample: (
- <>
- {'https://bitbucket.org/my-workspace/'}
- <strong>{'my-repository-slug'}</strong>
- </>
- ),
- id: 'bitbucketcloud.repository',
- onFieldChange: props.onFieldChange,
- propKey: 'repository',
- value: repository || '',
- })}
- </>
- );
- break;
- case AlmKeys.GitHub:
- formFields = (
- <>
- {renderField({
- help: true,
- helpExample: (
- <>
- {instance?.url
- ? `${stripTrailingSlash(convertGithubApiUrlToLink(instance.url))}/`
- : 'https://github.com/'}
- <strong>{'sonarsource/sonarqube'}</strong>
- </>
- ),
- id: 'github.repository',
- onFieldChange: props.onFieldChange,
- propKey: 'repository',
- value: repository || '',
- })}
-
- {renderBooleanField({
- help: true,
- id: 'github.summary_comment_setting',
- onFieldChange: props.onFieldChange,
- propKey: 'summaryCommentEnabled',
- value: summaryCommentEnabled === undefined ? true : summaryCommentEnabled,
- })}
- </>
- );
- break;
- case AlmKeys.GitLab:
- formFields = (
- <>
- {renderField({
- help: true,
- helpExample: <strong>123456</strong>,
- id: 'gitlab.repository',
- onFieldChange: props.onFieldChange,
- propKey: 'repository',
- value: repository || '',
- })}
- </>
- );
- break;
- }
-
- const monorepoEnabled = props.hasFeature(Feature.MonoRepositoryPullRequestDecoration);
-
- return (
- <>
- {formFields}
- {monorepoEnabled &&
- renderBooleanField({
- help: true,
- helpParams: {
- doc_link: (
- <DocumentationLink to="/project-administration/monorepos/">
- {translate('learn_more')}
- </DocumentationLink>
- ),
- },
- id: 'monorepo',
- onFieldChange: props.onFieldChange,
- propKey: 'monorepo',
- value: monorepo,
- inputExtra: monorepo && (
- <FlagMessage className="sw-ml-2" variant="warning">
- {translate('settings.pr_decoration.binding.form.monorepo.warning')}
- </FlagMessage>
- ),
- })}
- </>
- );
- }
-
- export default withAvailableFeatures(AlmSpecificForm);
|