SONAR-20769 Changing input fields for devops integration modal

5 files changed, 87 insertions, 105 deletions

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 cc04a513f4a..9fc63fc2912 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
@@ -17,22 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ButtonSecondary,
+  FlagMessage,
+  FormField,
+  InputField,
+  InputTextArea,
+  Link,
+} from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import DocLink from '../../../../components/common/DocLink';
-import ValidationInput, {
-  ValidationInputErrorPlacement,
-} from '../../../../components/controls/ValidationInput';
-import { ButtonLink } from '../../../../components/controls/buttons';
-import { Alert } from '../../../../components/ui/Alert';
-import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
+import { useDocUrl } from '../../../../helpers/docs';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import { AlmBindingDefinitionBase } from '../../../../types/alm-settings';
 import '../../styles.css';
 
 export interface AlmBindingDefinitionFormFieldProps<B extends AlmBindingDefinitionBase> {
   autoFocus?: boolean;
-  error?: string;
   help?: React.ReactNode;
   id: string;
   isInvalid?: boolean;
@@ -51,7 +52,6 @@ export function AlmBindingDefinitionFormField<B extends AlmBindingDefinitionBase
 ) {
   const {
     autoFocus,
-    error,
     help,
     id,
     isInvalid = false,
@@ -65,83 +65,71 @@ export function AlmBindingDefinitionFormField<B extends AlmBindingDefinitionBase
   } = props;
   const [showField, setShowField] = React.useState(!overwriteOnly);
 
-  return (
-    <div className="settings-definition">
-      <div className="settings-definition-left">
-        <label className="h3" htmlFor={id}>
-          {translate('settings.almintegration.form', id)}
-        </label>
-        {!optional && <MandatoryFieldMarker />}
-        {help && <div className="markdown small spacer-top">{help}</div>}
-      </div>
-      <div className="settings-definition-right big-padded-top display-flex-column">
-        {!showField && overwriteOnly && (
-          <div>
-            <p>{translate('settings.almintegration.form.secret.field')}</p>
-            <ButtonLink
-              aria-label={translateWithParameters(
-                'settings.almintegration.form.secret.update_field_x',
-                translate('settings.almintegration.form', id),
-              )}
-              onClick={() => {
-                props.onFieldChange(propKey, '');
-                setShowField(true);
-              }}
-            >
-              {translate('settings.almintegration.form.secret.update_field')}
-            </ButtonLink>
-          </div>
-        )}
-
-        {showField && isTextArea && (
-          <textarea
-            className="width-100"
-            id={id}
-            maxLength={maxLength || 2000}
-            onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
-            required={!optional}
-            rows={5}
-            value={value}
-          />
-        )}
+  const toStatic = useDocUrl('/instance-administration/security/#settings-encryption');
 
-        {showField && !isTextArea && (
-          <ValidationInput
-            error={error}
-            errorPlacement={ValidationInputErrorPlacement.Bottom}
-            isValid={false}
-            isInvalid={isInvalid}
+  return (
+    <FormField
+      htmlFor={id}
+      label={translate('settings.almintegration.form', id)}
+      description={help}
+      required={!optional}
+      className="sw-mb-8"
+    >
+      {!showField && overwriteOnly && (
+        <div className="sw-flex sw-items-center">
+          <p className="sw-mr-2">{translate('settings.almintegration.form.secret.field')}</p>
+          <ButtonSecondary
+            aria-label={translateWithParameters(
+              'settings.almintegration.form.secret.update_field_x',
+              translate('settings.almintegration.form', id),
+            )}
+            onClick={() => {
+              props.onFieldChange(propKey, '');
+              setShowField(true);
+            }}
           >
-            <input
-              className="width-100"
-              autoFocus={autoFocus}
-              id={id}
-              maxLength={maxLength || 100}
-              name={id}
-              onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
-              size={50}
-              type="text"
-              value={value}
-            />
-          </ValidationInput>
-        )}
-
-        {showField && isSecret && (
-          <Alert variant="info" className="spacer-top">
+            {translate('settings.almintegration.form.secret.update_field')}
+          </ButtonSecondary>
+        </div>
+      )}
+      {showField && isTextArea && (
+        <InputTextArea
+          id={id}
+          maxLength={maxLength || 2000}
+          onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
+          required={!optional}
+          rows={5}
+          size="full"
+          value={value}
+          isInvalid={isInvalid}
+        />
+      )}
+      {showField && !isTextArea && (
+        <InputField
+          autoFocus={autoFocus}
+          id={id}
+          maxLength={maxLength || 100}
+          name={id}
+          onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
+          type="text"
+          size="full"
+          value={value}
+          isInvalid={isInvalid}
+        />
+      )}
+      {showField && isSecret && (
+        <FlagMessage variant="info" className="sw-mt-2">
+          <span>
             <FormattedMessage
               id="settings.almintegration.form.secret.can_encrypt"
               defaultMessage={translate('settings.almintegration.form.secret.can_encrypt')}
               values={{
-                learn_more: (
-                  <DocLink to="/instance-administration/security/#settings-encryption">
-                    {translate('learn_more')}
-                  </DocLink>
-                ),
+                learn_more: <Link to={toStatic}>{translate('learn_more')}</Link>,
               }}
             />
-          </Alert>
-        )}
-      </div>
-    </div>
+          </span>
+        </FlagMessage>
+      )}
+    </FormField>
   );
 }
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 52c4fc2f4f2..a7abd2914b3 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
@@ -67,11 +67,6 @@ export default function BitbucketCloudForm(props: BitbucketCloudFormProps) {
           />
         }
         id="workspace.bitbucketcloud"
-        error={
-          workspaceIDIsInvalid
-            ? translate('settings.almintegration.form.workspace.bitbucketcloud.error')
-            : undefined
-        }
         isInvalid={workspaceIDIsInvalid}
         maxLength={80}
         onFieldChange={props.onFieldChange}
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 98484d19b01..be667549443 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,11 +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, PageContentFontWrapper } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import DocLink from '../../../../components/common/DocLink';
-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, GithubBindingDefinition } from '../../../../types/alm-settings';
 import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField';
@@ -33,9 +33,20 @@ export interface GithubFormProps {
 
 export default function GithubForm(props: GithubFormProps) {
   const { formData, onFieldChange } = props;
-
+  const toStatic = useDocUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.GitHub]);
   return (
-    <>
+    <PageContentFontWrapper className="sw-body-sm">
+      <FlagMessage variant="info" className="sw-mb-8">
+        <span>
+          <FormattedMessage
+            defaultMessage={translate(`settings.almintegration.github.info`)}
+            id="settings.almintegration.github.info"
+            values={{
+              link: <Link to={toStatic}>{translate('learn_more')}</Link>,
+            }}
+          />
+        </span>
+      </FlagMessage>
       <AlmBindingDefinitionFormField
         autoFocus
         help={translate('settings.almintegration.form.name.github.help')}
@@ -64,19 +75,7 @@ export default function GithubForm(props: GithubFormProps) {
         propKey="url"
         value={formData.url}
       />
-      <Alert className="big-spacer-top" variant="info">
-        <FormattedMessage
-          defaultMessage={translate(`settings.almintegration.github.info`)}
-          id="settings.almintegration.github.info"
-          values={{
-            link: (
-              <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.GitHub]}>
-                {translate('learn_more')}
-              </DocLink>
-            ),
-          }}
-        />
-      </Alert>
+
       <AlmBindingDefinitionFormField
         id="app_id"
         help={translate('settings.almintegration.form.app_id.github.help')}
@@ -125,6 +124,6 @@ export default function GithubForm(props: GithubFormProps) {
         isSecret
         optional
       />
-    </>
+    </PageContentFontWrapper>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionForm-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionForm-test.tsx
index df963115cc7..91d190d9797 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionForm-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionForm-test.tsx
@@ -21,7 +21,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import AlmSettingsServiceMock from '../../../../../api/mocks/AlmSettingsServiceMock';
 import { renderComponent } from '../../../../../helpers/testReactTestingUtils';
-import { byRole, byText } from '../../../../../helpers/testSelector';
+import { byLabelText, byRole, byText } from '../../../../../helpers/testSelector';
 import { AlmKeys } from '../../../../../types/alm-settings';
 import AlmBindingDefinitionForm, {
   AlmBindingDefinitionFormProps,
@@ -43,7 +43,7 @@ const ui = {
   bitbucketConfiguration: (almKey: AlmKeys.BitbucketCloud | AlmKeys.BitbucketServer) =>
     byRole('button', { name: `alm.${almKey}.long` }),
   configurationInput: (id: string) =>
-    byRole('textbox', { name: `settings.almintegration.form.${id}` }),
+    byLabelText(`settings.almintegration.form.${id}`, { exact: false }),
   saveConfigurationButton: byRole('button', { name: 'settings.almintegration.form.save' }),
   cancelButton: byRole('button', { name: 'cancel' }),
   validationError: (text: string) => byText(text),
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 92c8e1852de..d73192194c0 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
@@ -191,7 +191,7 @@ function getPageObjects() {
     bitbucketConfiguration: (almKey: AlmKeys.BitbucketCloud | AlmKeys.BitbucketServer) =>
       byRole('button', { name: `alm.${almKey}.long` }),
     configurationInput: (id: string) =>
-      byRole('textbox', { name: `settings.almintegration.form.${id}` }),
+      byRole('textbox', { name: `settings.almintegration.form.${id} required` }),
     updateSecretValueButton: (key: string) =>
       byRole('button', {
         name: `settings.almintegration.form.secret.update_field_x.settings.almintegration.form.${key}`,