From 6cf6b4f6fd21ce37bcba1c4675193dd0f8d69cbf Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Wed, 18 Oct 2023 10:49:49 +0200 Subject: [PATCH] SONAR-20769 Correcting input and alert for other ALM's modal --- .../AlmBindingDefinitionForm.tsx | 6 ++ .../AlmBindingDefinitionFormField.tsx | 50 ++++++------ .../AlmBindingDefinitionFormRenderer.tsx | 29 ++++--- .../components/almIntegration/AzureForm.tsx | 13 ++- .../almIntegration/BitbucketCloudForm.tsx | 81 ++++++++++--------- .../almIntegration/BitbucketForm.tsx | 13 ++- .../almIntegration/BitbucketServerForm.tsx | 13 ++- .../components/almIntegration/GithubForm.tsx | 6 +- .../components/almIntegration/GitlabForm.tsx | 13 ++- .../__tests__/AlmIntegration-it.tsx | 2 +- 10 files changed, 115 insertions(+), 111 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionForm.tsx index c58a2d42433..0629cffc700 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionForm.tsx @@ -126,6 +126,8 @@ export default class AlmBindingDefinitionForm extends React.PureComponent< State > { mounted = false; + errorListElement = React.createRef(); + constructor(props: AlmBindingDefinitionFormProps) { super(props); @@ -211,6 +213,9 @@ export default class AlmBindingDefinitionForm extends React.PureComponent< if (error) { this.setState({ validationError: error }); + if (this.errorListElement?.current) { + this.errorListElement.current.scrollIntoView({ block: 'start' }); + } } else { this.props.afterSubmit(formData); } @@ -280,6 +285,7 @@ export default class AlmBindingDefinitionForm extends React.PureComponent< bitbucketVariant={bitbucketVariant} onBitbucketVariantChange={this.handleBitbucketVariantChange} validationError={validationError} + errorListElementRef={this.errorListElement} /> ); } diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx index 9fc63fc2912..220efa16649 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx @@ -92,31 +92,31 @@ export function AlmBindingDefinitionFormField )} - {showField && isTextArea && ( - props.onFieldChange(propKey, e.currentTarget.value)} - required={!optional} - rows={5} - size="full" - value={value} - isInvalid={isInvalid} - /> - )} - {showField && !isTextArea && ( - props.onFieldChange(propKey, e.currentTarget.value)} - type="text" - size="full" - value={value} - isInvalid={isInvalid} - /> - )} + {showField && + (isTextArea ? ( + props.onFieldChange(propKey, e.currentTarget.value)} + required={!optional} + rows={5} + size="full" + value={value} + isInvalid={isInvalid} + /> + ) : ( + props.onFieldChange(propKey, e.currentTarget.value)} + type="text" + size="full" + value={value} + isInvalid={isInvalid} + /> + ))} {showField && isSecret && ( diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx index 873275c6990..d439e1c655f 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ButtonPrimary, FlagMessage, Modal, Spinner } from 'design-system'; +import { ButtonPrimary, FlagMessage, Modal, PageContentFontWrapper, Spinner } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; import { @@ -48,6 +48,7 @@ export interface Props { bitbucketVariant: AlmKeys.BitbucketServer | AlmKeys.BitbucketCloud, ) => void; validationError?: string; + errorListElementRef: React.RefObject; } export default class AlmBindingDefinitionFormRenderer extends React.PureComponent> { @@ -94,7 +95,7 @@ export default class AlmBindingDefinitionFormRenderer extends React.PureComponen }; render() { - const { isUpdate, canSubmit, submitting, validationError } = this.props; + const { isUpdate, canSubmit, submitting, validationError, errorListElementRef } = this.props; const header = translate('settings.almintegration.form.header', isUpdate ? 'edit' : 'create'); const FORM_ID = `settings.almintegration.form.${isUpdate ? 'edit' : 'create'}`; @@ -105,17 +106,19 @@ export default class AlmBindingDefinitionFormRenderer extends React.PureComponen const formBody = (
- {this.renderForm()} - {validationError && !canSubmit && ( - -
-

{translate('settings.almintegration.configuration_invalid')}

-
    -
  • {validationError}
    • -
-
- - )} + + {validationError && !canSubmit && ( + +
+

{translate('settings.almintegration.configuration_invalid')}

+
    +
  • {validationError}
    • +
+
+ + )} + {this.renderForm()} +
); diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureForm.tsx index 4ac3331a53c..0e776c4597e 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureForm.tsx @@ -17,11 +17,12 @@ * 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 } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import DocLink from '../../../../components/common/DocLink'; -import Link from '../../../../components/common/Link'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; +import { useDocUrl } from '../../../../helpers/docs'; import { translate } from '../../../../helpers/l10n'; import { AlmKeys, AzureBindingDefinition } from '../../../../types/alm-settings'; import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField'; @@ -33,7 +34,7 @@ export interface AzureFormProps { export default function AzureForm(props: AzureFormProps) { const { formData, onFieldChange } = props; - + const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]); return ( <> ), permission: {'Code > Read & Write'}, - doc_link: ( - - {translate('learn_more')} - - ), + doc_link: {translate('learn_more')}, }} /> } diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketCloudForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketCloudForm.tsx index a7abd2914b3..948d575f83c 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketCloudForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketCloudForm.tsx @@ -17,12 +17,11 @@ * 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, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import DocLink from '../../../../components/common/DocLink'; -import Link from '../../../../components/common/Link'; -import { Alert } from '../../../../components/ui/Alert'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; +import { useDocUrl } from '../../../../helpers/docs'; import { translate } from '../../../../helpers/l10n'; import { AlmKeys, BitbucketCloudBindingDefinition } from '../../../../types/alm-settings'; import { BITBUCKET_CLOUD_WORKSPACE_ID_FORMAT } from '../../constants'; @@ -39,8 +38,31 @@ export default function BitbucketCloudForm(props: BitbucketCloudFormProps) { formData.workspace && !BITBUCKET_CLOUD_WORKSPACE_ID_FORMAT.test(formData.workspace), ); + const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketCloud]); + return ( <> + +
+ + {translate('settings.almintegration.bitbucketcloud.oauth')} + + ), + permission: Pull Requests: Read, + doc_link: {translate('learn_more')}, + }} + /> +
+ + - {'https://bitbucket.org/'} - {'{workspace}'} - {'/{repository}'} - - ), - }} - /> + <> + + {'https://bitbucket.org/'} + {'{workspace}'} + {'/{repository}'} + + ), + }} + /> +

{translate('settings.almintegration.form.workspace.bitbucketcloud.error')}

+ } id="workspace.bitbucketcloud" isInvalid={workspaceIDIsInvalid} @@ -73,28 +100,6 @@ export default function BitbucketCloudForm(props: BitbucketCloudFormProps) { propKey="workspace" value={formData.workspace || ''} /> - - - {translate('settings.almintegration.bitbucketcloud.oauth')} - - ), - permission: Pull Requests: Read, - doc_link: ( - - {translate('learn_more')} - - ), - }} - /> - ) { return ( <> {!isUpdate && ( -
- {translate('settings.almintegration.form.choose_bitbucket_variant')} -
- +
+ ) { value={variant} />
-
+ )} {variant !== undefined && ( diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketServerForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketServerForm.tsx index 649377183cf..130ddbadefa 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketServerForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketServerForm.tsx @@ -17,11 +17,12 @@ * 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 } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import DocLink from '../../../../components/common/DocLink'; -import Link from '../../../../components/common/Link'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; +import { useDocUrl } from '../../../../helpers/docs'; import { translate } from '../../../../helpers/l10n'; import { AlmKeys, BitbucketServerBindingDefinition } from '../../../../types/alm-settings'; import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField'; @@ -33,7 +34,7 @@ export interface BitbucketServerFormProps { export default function BitbucketServerForm(props: BitbucketServerFormProps) { const { formData } = props; - + const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketServer]); return ( <> ), permission: Read, - doc_link: ( - - {translate('learn_more')} - - ), + doc_link: {translate('learn_more')}, }} /> } diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubForm.tsx index be667549443..183619a0244 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubForm.tsx @@ -17,7 +17,7 @@ * 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, Link, PageContentFontWrapper } from 'design-system'; +import { FlagMessage, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; @@ -35,7 +35,7 @@ export default function GithubForm(props: GithubFormProps) { const { formData, onFieldChange } = props; const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.GitHub]); return ( - + <> - + ); } diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabForm.tsx index 8d7c425d23d..4ceca5261c9 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabForm.tsx @@ -17,11 +17,12 @@ * 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 } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import DocLink from '../../../../components/common/DocLink'; -import Link from '../../../../components/common/Link'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; +import { useDocUrl } from '../../../../helpers/docs'; import { translate } from '../../../../helpers/l10n'; import { AlmKeys, GitlabBindingDefinition } from '../../../../types/alm-settings'; import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField'; @@ -33,7 +34,7 @@ export interface GitlabFormProps { export default function GitlabForm(props: GitlabFormProps) { const { formData, onFieldChange } = props; - + const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.GitLab]); return ( <> Reporter, scope: api, - doc_link: ( - - {translate('learn_more')} - - ), + doc_link: {translate('learn_more')}, }} /> } diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-it.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-it.tsx index d73192194c0..22c9226e1af 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-it.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-it.tsx @@ -189,7 +189,7 @@ function getPageObjects() { tab: (almKey: AlmKeys) => byRole('tab', { name: `${almKey} settings.almintegration.tab.${almKey}` }), bitbucketConfiguration: (almKey: AlmKeys.BitbucketCloud | AlmKeys.BitbucketServer) => - byRole('button', { name: `alm.${almKey}.long` }), + byRole('radio', { name: `alm.${almKey}.long` }), configurationInput: (id: string) => byRole('textbox', { name: `settings.almintegration.form.${id} required` }), updateSecretValueButton: (key: string) => -- 2.39.5