From: Philippe Perrin <philippe.perrin@sonarsource.com>
Date: Tue, 17 Aug 2021 15:49:30 +0000 (+0200)
Subject: SONAR-15303 Improve DevOps Platform configuration screen wording to reduce confusion... 
X-Git-Tag: 9.1.0.47736~105
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1e59824022415abdab28113b8c9407338a376f5a;p=sonarqube.git

SONAR-15303 Improve DevOps Platform configuration screen wording to reduce confusion around personal access token
---

diff --git a/server/sonar-web/src/main/js/apps/create/project/PersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/PersonalAccessTokenForm.tsx
index 114698ed515..a571ab12006 100644
--- a/server/sonar-web/src/main/js/apps/create/project/PersonalAccessTokenForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/PersonalAccessTokenForm.tsx
@@ -53,12 +53,11 @@ function getPatUrl(alm: AlmKeys, url = '') {
     return `${url.replace(/\/$/, '')}/plugins/servlet/access-tokens/add`;
   } else if (alm === AlmKeys.BitbucketCloud) {
     return 'https://bitbucket.org/account/settings/app-passwords/new';
-  } else {
-    // GitLab
-    return url.endsWith('/api/v4')
-      ? `${url.replace('/api/v4', '').replace(/\/$/, '')}/profile/personal_access_tokens`
-      : 'https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#creating-a-personal-access-token';
+  } else if (alm === AlmKeys.GitLab) {
+    return 'https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html';
   }
+
+  return '';
 }
 
 export default class PersonalAccessTokenForm extends React.PureComponent<Props, State> {
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/PersonalAccessTokenForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/PersonalAccessTokenForm-test.tsx.snap
index f262c79b050..65a05306be2 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/PersonalAccessTokenForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/PersonalAccessTokenForm-test.tsx.snap
@@ -372,7 +372,7 @@ exports[`should render correctly: gitlab 1`] = `
         src="/images/alm/gitlab.svg"
       />
       <a
-        href="https://gitlab.com/profile/personal_access_tokens"
+        href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
         rel="noopener noreferrer"
         target="_blank"
       >
@@ -482,7 +482,7 @@ exports[`should render correctly: gitlab with non-standard api path 1`] = `
         src="/images/alm/gitlab.svg"
       />
       <a
-        href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html#creating-a-personal-access-token"
+        href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
         rel="noopener noreferrer"
         target="_blank"
       >
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 edee930408a..f07477bc8df 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
@@ -19,10 +19,10 @@
  */
 import * as React from 'react';
 import { ButtonLink } from '../../../../components/controls/buttons';
-import HelpTooltip from '../../../../components/controls/HelpTooltip';
 import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
 import { translate } from '../../../../helpers/l10n';
 import { AlmBindingDefinitionBase } from '../../../../types/alm-settings';
+import '../../styles.css';
 
 export interface AlmBindingDefinitionFormFieldProps<B extends AlmBindingDefinitionBase> {
   autoFocus?: boolean;
@@ -54,51 +54,54 @@ export function AlmBindingDefinitionFormField<B extends AlmBindingDefinitionBase
   const [showField, setShowField] = React.useState(!overwriteOnly);
 
   return (
-    <div className="modal-field">
-      <label className="display-flex-center" htmlFor={id}>
-        {translate('settings.almintegration.form', id)}
+    <div className="settings-definition">
+      <div className="settings-definition-left">
+        <label className="h3" htmlFor={id}>
+          {translate('settings.almintegration.form', id)}
+        </label>
         {!optional && <MandatoryFieldMarker />}
-        {help && <HelpTooltip className="spacer-left" overlay={help} placement="right" />}
-      </label>
+        {help && <div className="markdown small spacer-top">{help}</div>}
+      </div>
+      <div className="settings-definition-right big-padded-top">
+        {!showField && overwriteOnly && (
+          <div>
+            <p>{translate('settings.almintegration.form.secret_field')}</p>
+            <ButtonLink
+              onClick={() => {
+                props.onFieldChange(propKey, '');
+                setShowField(true);
+              }}>
+              {translate('settings.almintegration.form.update_secret_field')}
+            </ButtonLink>
+          </div>
+        )}
 
-      {!showField && overwriteOnly && (
-        <div>
-          <p>{translate('settings.almintegration.form.secret_field')}</p>
-          <ButtonLink
-            onClick={() => {
-              props.onFieldChange(propKey, '');
-              setShowField(true);
-            }}>
-            {translate('settings.almintegration.form.update_secret_field')}
-          </ButtonLink>
-        </div>
-      )}
+        {showField && isTextArea && (
+          <textarea
+            className="settings-large-input"
+            id={id}
+            maxLength={maxLength || 2000}
+            onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
+            required={!optional}
+            rows={5}
+            value={value}
+          />
+        )}
 
-      {showField && isTextArea && (
-        <textarea
-          className="settings-large-input"
-          id={id}
-          maxLength={maxLength || 2000}
-          onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
-          required={!optional}
-          rows={5}
-          value={value}
-        />
-      )}
-
-      {showField && !isTextArea && (
-        <input
-          autoFocus={autoFocus}
-          className="input-super-large"
-          id={id}
-          maxLength={maxLength || 100}
-          name={id}
-          onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
-          size={50}
-          type="text"
-          value={value}
-        />
-      )}
+        {showField && !isTextArea && (
+          <input
+            autoFocus={autoFocus}
+            className="settings-large-input"
+            id={id}
+            maxLength={maxLength || 100}
+            name={id}
+            onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
+            size={50}
+            type="text"
+            value={value}
+          />
+        )}
+      </div>
     </div>
   );
 }
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 0b14dbda1e5..a2e852833cc 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
@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
-import { Alert } from '../../../../components/ui/Alert';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
 import { AlmKeys, AzureBindingDefinition } from '../../../../types/alm-settings';
@@ -35,58 +34,66 @@ export default function AzureForm(props: AzureFormProps) {
   const { formData, onFieldChange } = props;
 
   return (
-    <div className="display-flex-start">
-      <div className="flex-1">
-        <AlmBindingDefinitionFormField
-          autoFocus={true}
-          help={translate('settings.almintegration.form.name.azure.help')}
-          id="name.azure"
-          onFieldChange={onFieldChange}
-          propKey="key"
-          value={formData.key}
-        />
-        <AlmBindingDefinitionFormField
-          help={
-            <>
-              {translate('settings.almintegration.form.url.azure.help1')}
-              <br />
-              <em>https://ado.your-company.com/your_collection</em>
-              <br />
-              <br />
-              {translate('settings.almintegration.form.url.azure.help2')}
-              <br />
-              <em>https://dev.azure.com/your_organization</em>
-            </>
-          }
-          id="url.azure"
-          maxLength={2000}
-          onFieldChange={onFieldChange}
-          propKey="url"
-          value={formData.url || ''}
-        />
-        <AlmBindingDefinitionFormField
-          help={translate('settings.almintegration.form.personal_access_token.azure.help')}
-          id="personal_access_token"
-          isTextArea={true}
-          onFieldChange={onFieldChange}
-          overwriteOnly={Boolean(formData.key)}
-          propKey="personalAccessToken"
-          value={formData.personalAccessToken}
-        />
-      </div>
-      <Alert className="huge-spacer-left flex-1" variant="info">
-        <FormattedMessage
-          defaultMessage={translate(`settings.almintegration.azure.info`)}
-          id="settings.almintegration.azure.info"
-          values={{
-            link: (
-              <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
-                {translate('learn_more')}
-              </Link>
-            )
-          }}
-        />
-      </Alert>
-    </div>
+    <>
+      <AlmBindingDefinitionFormField
+        autoFocus={true}
+        help={translate('settings.almintegration.form.name.azure.help')}
+        id="name.azure"
+        onFieldChange={onFieldChange}
+        propKey="key"
+        value={formData.key}
+      />
+      <AlmBindingDefinitionFormField
+        help={
+          <>
+            {translate('settings.almintegration.form.url.azure.help1')}
+            <br />
+            <em>https://ado.your-company.com/your_collection</em>
+            <br />
+            <br />
+            {translate('settings.almintegration.form.url.azure.help2')}
+            <br />
+            <em>https://dev.azure.com/your_organization</em>
+          </>
+        }
+        id="url.azure"
+        maxLength={2000}
+        onFieldChange={onFieldChange}
+        propKey="url"
+        value={formData.url || ''}
+      />
+      <AlmBindingDefinitionFormField
+        help={
+          <FormattedMessage
+            defaultMessage={translate(
+              'settings.almintegration.form.personal_access_token.azure.help'
+            )}
+            id="settings.almintegration.form.personal_access_token.azure.help"
+            values={{
+              pat: (
+                <a
+                  href="https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate"
+                  rel="noopener noreferrer"
+                  target="_blank">
+                  {translate('settings.almintegration.form.personal_access_token.azure.help.url')}
+                </a>
+              ),
+              permission: <strong>{'Code > Read & Write'}</strong>,
+              doc_link: (
+                <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
+                  {translate('learn_more')}
+                </Link>
+              )
+            }}
+          />
+        }
+        id="personal_access_token"
+        isTextArea={true}
+        onFieldChange={onFieldChange}
+        overwriteOnly={Boolean(formData.key)}
+        propKey="personalAccessToken"
+        value={formData.personalAccessToken}
+      />
+    </>
   );
 }
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 168d5111543..92d0809be7b 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
@@ -20,8 +20,11 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { Alert } from '../../../../components/ui/Alert';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
-import { BitbucketCloudBindingDefinition } from '../../../../types/alm-settings';
+import { AlmKeys, BitbucketCloudBindingDefinition } from '../../../../types/alm-settings';
 import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField';
 
 export interface BitbucketCloudFormProps {
@@ -65,6 +68,28 @@ export default function BitbucketCloudForm(props: BitbucketCloudFormProps) {
         propKey="workspace"
         value={formData.workspace || ''}
       />
+      <Alert className="big-spacer-top big-spacer-right" variant="info">
+        <FormattedMessage
+          defaultMessage={translate(`settings.almintegration.bitbucketcloud.info`)}
+          id="settings.almintegration.bitbucketcloud.info"
+          values={{
+            oauth: (
+              <a
+                href="https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud/"
+                rel="noopener noreferrer"
+                target="_blank">
+                {translate('settings.almintegration.bitbucketcloud.oauth')}
+              </a>
+            ),
+            permission: <strong>Pull Requests: Read</strong>,
+            doc_link: (
+              <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketCloud]}>
+                {translate('learn_more')}
+              </Link>
+            )
+          }}
+        />
+      </Alert>
       <AlmBindingDefinitionFormField
         id="client_id.bitbucketcloud"
         help={translate('settings.almintegration.form.oauth_key.bitbucketcloud.help')}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketForm.tsx
index a8d489a1e3d..7c2cd6a750c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketForm.tsx
@@ -18,11 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
 import RadioToggle from '../../../../components/controls/RadioToggle';
-import { Alert } from '../../../../components/ui/Alert';
-import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
 import {
   AlmKeys,
@@ -70,58 +66,17 @@ export default function BitbucketForm(props: BitbucketFormProps) {
       {variant !== undefined && (
         <>
           {variant === AlmKeys.BitbucketServer && (
-            <div className="display-flex-start">
-              <div className="flex-1">
-                <BitbucketServerForm
-                  onFieldChange={props.onFieldChange}
-                  formData={formData as BitbucketServerBindingDefinition}
-                />
-              </div>
-              <Alert className="huge-spacer-left flex-1" variant="info">
-                <>
-                  <h3>{translate('onboarding.create_project.pat_help.title')}</h3>
-
-                  <p className="big-spacer-top">
-                    {translate('settings.almintegration.bitbucket.help_1')}
-                  </p>
-
-                  <ul className="big-spacer-top list-styled">
-                    <li>{translate('settings.almintegration.bitbucket.help_2')}</li>
-                    <li>{translate('settings.almintegration.bitbucket.help_3')}</li>
-                  </ul>
-
-                  <p className="big-spacer-top big-spacer-bottom">
-                    <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketServer]}>
-                      {translate('learn_more')}
-                    </Link>
-                  </p>
-                </>
-              </Alert>
-            </div>
+            <BitbucketServerForm
+              onFieldChange={props.onFieldChange}
+              formData={formData as BitbucketServerBindingDefinition}
+            />
           )}
 
           {variant === AlmKeys.BitbucketCloud && (
-            <div className="display-flex-start">
-              <div className="flex-1">
-                <BitbucketCloudForm
-                  onFieldChange={props.onFieldChange}
-                  formData={formData as BitbucketCloudBindingDefinition}
-                />
-              </div>
-              <Alert className="huge-spacer-left flex-1" variant="info">
-                <FormattedMessage
-                  defaultMessage={translate(`settings.almintegration.bitbucketcloud.info`)}
-                  id="settings.almintegration.bitbucketcloud.info"
-                  values={{
-                    link: (
-                      <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketCloud]}>
-                        {translate('learn_more')}
-                      </Link>
-                    )
-                  }}
-                />
-              </Alert>
-            </div>
+            <BitbucketCloudForm
+              onFieldChange={props.onFieldChange}
+              formData={formData as BitbucketCloudBindingDefinition}
+            />
           )}
         </>
       )}
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 5823139f42c..952136933e5 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
@@ -20,8 +20,10 @@
 
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
-import { BitbucketServerBindingDefinition } from '../../../../types/alm-settings';
+import { AlmKeys, BitbucketServerBindingDefinition } from '../../../../types/alm-settings';
 import { AlmBindingDefinitionFormField } from './AlmBindingDefinitionFormField';
 
 export interface BitbucketServerFormProps {
@@ -34,7 +36,6 @@ export default function BitbucketServerForm(props: BitbucketServerFormProps) {
 
   return (
     <>
-      {' '}
       <AlmBindingDefinitionFormField
         autoFocus={true}
         help={translate('settings.almintegration.form.name.bitbucket.help')}
@@ -76,6 +77,12 @@ export default function BitbucketServerForm(props: BitbucketServerFormProps) {
                     'settings.almintegration.form.personal_access_token.bitbucket.help.url'
                   )}
                 </a>
+              ),
+              permission: <strong>Read</strong>,
+              doc_link: (
+                <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.BitbucketServer]}>
+                  {translate('learn_more')}
+                </Link>
               )
             }}
           />
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 37e7b2a01cb..7e635251a58 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
@@ -35,71 +35,35 @@ export default function GithubForm(props: GithubFormProps) {
   const { formData, onFieldChange } = props;
 
   return (
-    <div className="display-flex-start">
-      <div className="flex-1">
-        <AlmBindingDefinitionFormField
-          autoFocus={true}
-          help={translate('settings.almintegration.form.name.github.help')}
-          id="name.github"
-          onFieldChange={onFieldChange}
-          propKey="key"
-          value={formData.key}
-        />
-        <AlmBindingDefinitionFormField
-          help={
-            <>
-              {translate('settings.almintegration.form.url.github.help1')}
-              <br />
-              <em>https://github.company.com/api/v3</em>
-              <br />
-              <br />
-              {translate('settings.almintegration.form.url.github.help2')}
-              <br />
-              <em>https://api.github.com/</em>
-            </>
-          }
-          id="url.github"
-          maxLength={2000}
-          onFieldChange={onFieldChange}
-          propKey="url"
-          value={formData.url}
-        />
-        <AlmBindingDefinitionFormField
-          id="app_id"
-          help={translate('settings.almintegration.form.app_id.github.help')}
-          maxLength={80}
-          onFieldChange={onFieldChange}
-          propKey="appId"
-          value={formData.appId}
-        />
-        <AlmBindingDefinitionFormField
-          id="client_id.github"
-          help={translate('settings.almintegration.form.client_id.github.help')}
-          maxLength={80}
-          onFieldChange={onFieldChange}
-          propKey="clientId"
-          value={formData.clientId}
-        />
-        <AlmBindingDefinitionFormField
-          id="client_secret.github"
-          help={translate('settings.almintegration.form.client_secret.github.help')}
-          maxLength={80}
-          onFieldChange={onFieldChange}
-          overwriteOnly={Boolean(formData.key)}
-          propKey="clientSecret"
-          value={formData.clientSecret}
-        />
-        <AlmBindingDefinitionFormField
-          id="private_key"
-          help={translate('settings.almintegration.form.private_key.github.help')}
-          isTextArea={true}
-          onFieldChange={onFieldChange}
-          overwriteOnly={Boolean(formData.key)}
-          propKey="privateKey"
-          value={formData.privateKey}
-        />
-      </div>
-      <Alert className="huge-spacer-left flex-1" variant="info">
+    <>
+      <AlmBindingDefinitionFormField
+        autoFocus={true}
+        help={translate('settings.almintegration.form.name.github.help')}
+        id="name.github"
+        onFieldChange={onFieldChange}
+        propKey="key"
+        value={formData.key}
+      />
+      <AlmBindingDefinitionFormField
+        help={
+          <>
+            {translate('settings.almintegration.form.url.github.help1')}
+            <br />
+            <em>https://github.company.com/api/v3</em>
+            <br />
+            <br />
+            {translate('settings.almintegration.form.url.github.help2')}
+            <br />
+            <em>https://api.github.com/</em>
+          </>
+        }
+        id="url.github"
+        maxLength={2000}
+        onFieldChange={onFieldChange}
+        propKey="url"
+        value={formData.url}
+      />
+      <Alert className="big-spacer-top big-spacer-right" variant="info">
         <FormattedMessage
           defaultMessage={translate(`settings.almintegration.github.info`)}
           id="settings.almintegration.github.info"
@@ -112,6 +76,40 @@ export default function GithubForm(props: GithubFormProps) {
           }}
         />
       </Alert>
-    </div>
+      <AlmBindingDefinitionFormField
+        id="app_id"
+        help={translate('settings.almintegration.form.app_id.github.help')}
+        maxLength={80}
+        onFieldChange={onFieldChange}
+        propKey="appId"
+        value={formData.appId}
+      />
+      <AlmBindingDefinitionFormField
+        id="client_id.github"
+        help={translate('settings.almintegration.form.client_id.github.help')}
+        maxLength={80}
+        onFieldChange={onFieldChange}
+        propKey="clientId"
+        value={formData.clientId}
+      />
+      <AlmBindingDefinitionFormField
+        id="client_secret.github"
+        help={translate('settings.almintegration.form.client_secret.github.help')}
+        maxLength={80}
+        onFieldChange={onFieldChange}
+        overwriteOnly={Boolean(formData.key)}
+        propKey="clientSecret"
+        value={formData.clientSecret}
+      />
+      <AlmBindingDefinitionFormField
+        id="private_key"
+        help={translate('settings.almintegration.form.private_key.github.help')}
+        isTextArea={true}
+        onFieldChange={onFieldChange}
+        overwriteOnly={Boolean(formData.key)}
+        propKey="privateKey"
+        value={formData.privateKey}
+      />
+    </>
   );
 }
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 67d6ba83ea5..4514b840364 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
@@ -20,7 +20,6 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
-import { Alert } from '../../../../components/ui/Alert';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { translate } from '../../../../helpers/l10n';
 import { AlmKeys, GitlabBindingDefinition } from '../../../../types/alm-settings';
@@ -35,53 +34,62 @@ export default function GitlabForm(props: GitlabFormProps) {
   const { formData, onFieldChange } = props;
 
   return (
-    <div className="display-flex-start">
-      <div className="flex-1">
-        <AlmBindingDefinitionFormField
-          autoFocus={true}
-          help={translate('settings.almintegration.form.name.gitlab.help')}
-          id="name.gitlab"
-          onFieldChange={onFieldChange}
-          propKey="key"
-          value={formData.key}
-        />
-        <AlmBindingDefinitionFormField
-          help={
-            <>
-              {translate('settings.almintegration.form.url.gitlab.help')}
-              <br />
-              <em>https://gitlab.com/api/v4</em>
-            </>
-          }
-          id="url.gitlab"
-          maxLength={2000}
-          onFieldChange={onFieldChange}
-          propKey="url"
-          value={formData.url || ''}
-        />
-        <AlmBindingDefinitionFormField
-          help={translate('settings.almintegration.form.personal_access_token.gitlab.help')}
-          id="personal_access_token"
-          isTextArea={true}
-          onFieldChange={onFieldChange}
-          overwriteOnly={Boolean(formData.key)}
-          propKey="personalAccessToken"
-          value={formData.personalAccessToken}
-        />
-      </div>
-      <Alert className="huge-spacer-left flex-1" variant="info">
-        <FormattedMessage
-          defaultMessage={translate(`settings.almintegration.gitlab.info`)}
-          id="settings.almintegration.gitlab.info"
-          values={{
-            link: (
-              <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.GitLab]}>
-                {translate('learn_more')}
-              </Link>
-            )
-          }}
-        />
-      </Alert>
-    </div>
+    <>
+      <AlmBindingDefinitionFormField
+        autoFocus={true}
+        help={translate('settings.almintegration.form.name.gitlab.help')}
+        id="name.gitlab"
+        onFieldChange={onFieldChange}
+        propKey="key"
+        value={formData.key}
+      />
+      <AlmBindingDefinitionFormField
+        help={
+          <>
+            {translate('settings.almintegration.form.url.gitlab.help')}
+            <br />
+            <em>https://gitlab.com/api/v4</em>
+          </>
+        }
+        id="url.gitlab"
+        maxLength={2000}
+        onFieldChange={onFieldChange}
+        propKey="url"
+        value={formData.url || ''}
+      />
+      <AlmBindingDefinitionFormField
+        help={
+          <FormattedMessage
+            defaultMessage={translate(
+              `settings.almintegration.form.personal_access_token.gitlab.help`
+            )}
+            id="settings.almintegration.form.personal_access_token.gitlab.help"
+            values={{
+              pat: (
+                <a
+                  href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
+                  rel="noopener noreferrer"
+                  target="_blank">
+                  {translate('settings.almintegration.form.personal_access_token.gitlab.help.url')}
+                </a>
+              ),
+              permission: <strong>Reporter</strong>,
+              scope: <strong>api</strong>,
+              doc_link: (
+                <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.GitLab]}>
+                  {translate('learn_more')}
+                </Link>
+              )
+            }}
+          />
+        }
+        id="personal_access_token"
+        isTextArea={true}
+        onFieldChange={onFieldChange}
+        overwriteOnly={Boolean(formData.key)}
+        propKey="personalAccessToken"
+        value={formData.personalAccessToken}
+      />
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
index e07b3cf23ca..63b65f54f68 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
@@ -2,123 +2,163 @@
 
 exports[`should render correctly: default 1`] = `
 <div
-  className="modal-field"
+  className="settings-definition"
 >
-  <label
-    className="display-flex-center"
-    htmlFor="key"
+  <div
+    className="settings-definition-left"
   >
-    settings.almintegration.form.key
+    <label
+      className="h3"
+      htmlFor="key"
+    >
+      settings.almintegration.form.key
+    </label>
     <MandatoryFieldMarker />
-  </label>
-  <input
-    className="input-super-large"
-    id="key"
-    maxLength={40}
-    name="key"
-    onChange={[Function]}
-    size={50}
-    type="text"
-    value="key"
-  />
+  </div>
+  <div
+    className="settings-definition-right big-padded-top"
+  >
+    <input
+      className="settings-large-input"
+      id="key"
+      maxLength={40}
+      name="key"
+      onChange={[Function]}
+      size={50}
+      type="text"
+      value="key"
+    />
+  </div>
 </div>
 `;
 
 exports[`should render correctly: optional 1`] = `
 <div
-  className="modal-field"
+  className="settings-definition"
 >
-  <label
-    className="display-flex-center"
-    htmlFor="key"
+  <div
+    className="settings-definition-left"
+  >
+    <label
+      className="h3"
+      htmlFor="key"
+    >
+      settings.almintegration.form.key
+    </label>
+  </div>
+  <div
+    className="settings-definition-right big-padded-top"
   >
-    settings.almintegration.form.key
-  </label>
-  <input
-    className="input-super-large"
-    id="key"
-    maxLength={40}
-    name="key"
-    onChange={[Function]}
-    size={50}
-    type="text"
-    value="key"
-  />
+    <input
+      className="settings-large-input"
+      id="key"
+      maxLength={40}
+      name="key"
+      onChange={[Function]}
+      size={50}
+      type="text"
+      value="key"
+    />
+  </div>
 </div>
 `;
 
 exports[`should render correctly: secret 1`] = `
 <div
-  className="modal-field"
+  className="settings-definition"
 >
-  <label
-    className="display-flex-center"
-    htmlFor="key"
+  <div
+    className="settings-definition-left"
   >
-    settings.almintegration.form.key
-    <MandatoryFieldMarker />
-  </label>
-  <div>
-    <p>
-      settings.almintegration.form.secret_field
-    </p>
-    <ButtonLink
-      onClick={[Function]}
+    <label
+      className="h3"
+      htmlFor="key"
     >
-      settings.almintegration.form.update_secret_field
-    </ButtonLink>
+      settings.almintegration.form.key
+    </label>
+    <MandatoryFieldMarker />
+  </div>
+  <div
+    className="settings-definition-right big-padded-top"
+  >
+    <div>
+      <p>
+        settings.almintegration.form.secret_field
+      </p>
+      <ButtonLink
+        onClick={[Function]}
+      >
+        settings.almintegration.form.update_secret_field
+      </ButtonLink>
+    </div>
   </div>
 </div>
 `;
 
 exports[`should render correctly: textarea 1`] = `
 <div
-  className="modal-field"
+  className="settings-definition"
 >
-  <label
-    className="display-flex-center"
-    htmlFor="key"
+  <div
+    className="settings-definition-left"
   >
-    settings.almintegration.form.key
+    <label
+      className="h3"
+      htmlFor="key"
+    >
+      settings.almintegration.form.key
+    </label>
     <MandatoryFieldMarker />
-  </label>
-  <textarea
-    className="settings-large-input"
-    id="key"
-    maxLength={40}
-    onChange={[Function]}
-    required={true}
-    rows={5}
-    value="key"
-  />
+  </div>
+  <div
+    className="settings-definition-right big-padded-top"
+  >
+    <textarea
+      className="settings-large-input"
+      id="key"
+      maxLength={40}
+      onChange={[Function]}
+      required={true}
+      rows={5}
+      value="key"
+    />
+  </div>
 </div>
 `;
 
 exports[`should render correctly: with help 1`] = `
 <div
-  className="modal-field"
+  className="settings-definition"
 >
-  <label
-    className="display-flex-center"
-    htmlFor="key"
+  <div
+    className="settings-definition-left"
   >
-    settings.almintegration.form.key
+    <label
+      className="h3"
+      htmlFor="key"
+    >
+      settings.almintegration.form.key
+    </label>
     <MandatoryFieldMarker />
-    <HelpTooltip
-      className="spacer-left"
-      overlay="help"
-      placement="right"
+    <div
+      className="markdown small spacer-top"
+    >
+      help
+    </div>
+  </div>
+  <div
+    className="settings-definition-right big-padded-top"
+  >
+    <input
+      className="settings-large-input"
+      id="key"
+      maxLength={40}
+      name="key"
+      onChange={[Function]}
+      size={50}
+      type="text"
+      value="key"
     />
-  </label>
-  <input
-    className="input-super-large"
-    id="key"
-    maxLength={40}
-    name="key"
-    onChange={[Function]}
-    size={50}
-    type="text"
-    value="key"
-  />
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureForm-test.tsx.snap
index 433536d09a7..8ed346ed340 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureForm-test.tsx.snap
@@ -1,145 +1,145 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: create 1`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.azure.help"
-      id="name.azure"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.azure.help1
-          <br />
-          <em>
-            https://ado.your-company.com/your_collection
-          </em>
-          <br />
-          <br />
-          settings.almintegration.form.url.azure.help2
-          <br />
-          <em>
-            https://dev.azure.com/your_organization
-          </em>
-        </React.Fragment>
-      }
-      id="url.azure"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.personal_access_token.azure.help"
-      id="personal_access_token"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={false}
-      propKey="personalAccessToken"
-      value=""
-    />
-  </div>
-  <Alert
-    className="huge-spacer-left flex-1"
-    variant="info"
-  >
-    <FormattedMessage
-      defaultMessage="settings.almintegration.azure.info"
-      id="settings.almintegration.azure.info"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/azuredevops-integration/"
-          >
-            learn_more
-          </Link>,
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.azure.help"
+    id="name.azure"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.azure.help1
+        <br />
+        <em>
+          https://ado.your-company.com/your_collection
+        </em>
+        <br />
+        <br />
+        settings.almintegration.form.url.azure.help2
+        <br />
+        <em>
+          https://dev.azure.com/your_organization
+        </em>
+      </React.Fragment>
+    }
+    id="url.azure"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <FormattedMessage
+        defaultMessage="settings.almintegration.form.personal_access_token.azure.help"
+        id="settings.almintegration.form.personal_access_token.azure.help"
+        values={
+          Object {
+            "doc_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              target="_blank"
+              to="/documentation/analysis/azuredevops-integration/"
+            >
+              learn_more
+            </Link>,
+            "pat": <a
+              href="https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              settings.almintegration.form.personal_access_token.azure.help.url
+            </a>,
+            "permission": <strong>
+              Code &gt; Read & Write
+            </strong>,
+          }
         }
-      }
-    />
-  </Alert>
-</div>
+      />
+    }
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={false}
+    propKey="personalAccessToken"
+    value=""
+  />
+</Fragment>
 `;
 
 exports[`should render correctly: edit 1`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.azure.help"
-      id="name.azure"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value="key"
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.azure.help1
-          <br />
-          <em>
-            https://ado.your-company.com/your_collection
-          </em>
-          <br />
-          <br />
-          settings.almintegration.form.url.azure.help2
-          <br />
-          <em>
-            https://dev.azure.com/your_organization
-          </em>
-        </React.Fragment>
-      }
-      id="url.azure"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.personal_access_token.azure.help"
-      id="personal_access_token"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={true}
-      propKey="personalAccessToken"
-      value="asdf1234"
-    />
-  </div>
-  <Alert
-    className="huge-spacer-left flex-1"
-    variant="info"
-  >
-    <FormattedMessage
-      defaultMessage="settings.almintegration.azure.info"
-      id="settings.almintegration.azure.info"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/azuredevops-integration/"
-          >
-            learn_more
-          </Link>,
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.azure.help"
+    id="name.azure"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value="key"
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.azure.help1
+        <br />
+        <em>
+          https://ado.your-company.com/your_collection
+        </em>
+        <br />
+        <br />
+        settings.almintegration.form.url.azure.help2
+        <br />
+        <em>
+          https://dev.azure.com/your_organization
+        </em>
+      </React.Fragment>
+    }
+    id="url.azure"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <FormattedMessage
+        defaultMessage="settings.almintegration.form.personal_access_token.azure.help"
+        id="settings.almintegration.form.personal_access_token.azure.help"
+        values={
+          Object {
+            "doc_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              target="_blank"
+              to="/documentation/analysis/azuredevops-integration/"
+            >
+              learn_more
+            </Link>,
+            "pat": <a
+              href="https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              settings.almintegration.form.personal_access_token.azure.help.url
+            </a>,
+            "permission": <strong>
+              Code &gt; Read & Write
+            </strong>,
+          }
         }
-      }
-    />
-  </Alert>
-</div>
+      />
+    }
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={true}
+    propKey="personalAccessToken"
+    value="asdf1234"
+  />
+</Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketCloudForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketCloudForm-test.tsx.snap
index 7ead8a21fcc..bd5e9d5635c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketCloudForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketCloudForm-test.tsx.snap
@@ -35,6 +35,37 @@ exports[`should render correctly 1`] = `
     propKey="workspace"
     value="workspace"
   />
+  <Alert
+    className="big-spacer-top big-spacer-right"
+    variant="info"
+  >
+    <FormattedMessage
+      defaultMessage="settings.almintegration.bitbucketcloud.info"
+      id="settings.almintegration.bitbucketcloud.info"
+      values={
+        Object {
+          "doc_link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/bitbucket-cloud-integration/"
+          >
+            learn_more
+          </Link>,
+          "oauth": <a
+            href="https://support.atlassian.com/bitbucket-cloud/docs/use-oauth-on-bitbucket-cloud/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            settings.almintegration.bitbucketcloud.oauth
+          </a>,
+          "permission": <strong>
+            Pull Requests: Read
+          </strong>,
+        }
+      }
+    />
+  </Alert>
   <AlmBindingDefinitionFormField
     help="settings.almintegration.form.oauth_key.bitbucketcloud.help"
     id="client_id.bitbucketcloud"
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketForm-test.tsx.snap
index d8914665ebc..543e5de4c17 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketForm-test.tsx.snap
@@ -28,46 +28,17 @@ exports[`should render correctly: bbc 1`] = `
       value="bitbucketcloud"
     />
   </div>
-  <div
-    className="display-flex-start"
-  >
-    <div
-      className="flex-1"
-    >
-      <BitbucketCloudForm
-        formData={
-          Object {
-            "clientId": "client1",
-            "clientSecret": "**clientsecret**",
-            "key": "key",
-            "workspace": "workspace",
-          }
-        }
-        onFieldChange={[MockFunction]}
-      />
-    </div>
-    <Alert
-      className="huge-spacer-left flex-1"
-      variant="info"
-    >
-      <FormattedMessage
-        defaultMessage="settings.almintegration.bitbucketcloud.info"
-        id="settings.almintegration.bitbucketcloud.info"
-        values={
-          Object {
-            "link": <Link
-              onlyActiveOnIndex={false}
-              style={Object {}}
-              target="_blank"
-              to="/documentation/analysis/bitbucket-cloud-integration/"
-            >
-              learn_more
-            </Link>,
-          }
-        }
-      />
-    </Alert>
-  </div>
+  <BitbucketCloudForm
+    formData={
+      Object {
+        "clientId": "client1",
+        "clientSecret": "**clientsecret**",
+        "key": "key",
+        "workspace": "workspace",
+      }
+    }
+    onFieldChange={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -99,161 +70,46 @@ exports[`should render correctly: bbs 1`] = `
       value="bitbucket"
     />
   </div>
-  <div
-    className="display-flex-start"
-  >
-    <div
-      className="flex-1"
-    >
-      <BitbucketServerForm
-        formData={
-          Object {
-            "key": "key",
-            "personalAccessToken": "asdf1234",
-            "url": "http://bbs.enterprise.com",
-          }
-        }
-        onFieldChange={[MockFunction]}
-      />
-    </div>
-    <Alert
-      className="huge-spacer-left flex-1"
-      variant="info"
-    >
-      <h3>
-        onboarding.create_project.pat_help.title
-      </h3>
-      <p
-        className="big-spacer-top"
-      >
-        settings.almintegration.bitbucket.help_1
-      </p>
-      <ul
-        className="big-spacer-top list-styled"
-      >
-        <li>
-          settings.almintegration.bitbucket.help_2
-        </li>
-        <li>
-          settings.almintegration.bitbucket.help_3
-        </li>
-      </ul>
-      <p
-        className="big-spacer-top big-spacer-bottom"
-      >
-        <Link
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="/documentation/analysis/bitbucket-integration/"
-        >
-          learn_more
-        </Link>
-      </p>
-    </Alert>
-  </div>
+  <BitbucketServerForm
+    formData={
+      Object {
+        "key": "key",
+        "personalAccessToken": "asdf1234",
+        "url": "http://bbs.enterprise.com",
+      }
+    }
+    onFieldChange={[MockFunction]}
+  />
 </Fragment>
 `;
 
 exports[`should render correctly: update bbc 1`] = `
 <Fragment>
-  <div
-    className="display-flex-start"
-  >
-    <div
-      className="flex-1"
-    >
-      <BitbucketCloudForm
-        formData={
-          Object {
-            "clientId": "client1",
-            "clientSecret": "**clientsecret**",
-            "key": "key",
-            "workspace": "workspace",
-          }
-        }
-        onFieldChange={[MockFunction]}
-      />
-    </div>
-    <Alert
-      className="huge-spacer-left flex-1"
-      variant="info"
-    >
-      <FormattedMessage
-        defaultMessage="settings.almintegration.bitbucketcloud.info"
-        id="settings.almintegration.bitbucketcloud.info"
-        values={
-          Object {
-            "link": <Link
-              onlyActiveOnIndex={false}
-              style={Object {}}
-              target="_blank"
-              to="/documentation/analysis/bitbucket-cloud-integration/"
-            >
-              learn_more
-            </Link>,
-          }
-        }
-      />
-    </Alert>
-  </div>
+  <BitbucketCloudForm
+    formData={
+      Object {
+        "clientId": "client1",
+        "clientSecret": "**clientsecret**",
+        "key": "key",
+        "workspace": "workspace",
+      }
+    }
+    onFieldChange={[MockFunction]}
+  />
 </Fragment>
 `;
 
 exports[`should render correctly: update bbs 1`] = `
 <Fragment>
-  <div
-    className="display-flex-start"
-  >
-    <div
-      className="flex-1"
-    >
-      <BitbucketServerForm
-        formData={
-          Object {
-            "key": "key",
-            "personalAccessToken": "asdf1234",
-            "url": "http://bbs.enterprise.com",
-          }
-        }
-        onFieldChange={[MockFunction]}
-      />
-    </div>
-    <Alert
-      className="huge-spacer-left flex-1"
-      variant="info"
-    >
-      <h3>
-        onboarding.create_project.pat_help.title
-      </h3>
-      <p
-        className="big-spacer-top"
-      >
-        settings.almintegration.bitbucket.help_1
-      </p>
-      <ul
-        className="big-spacer-top list-styled"
-      >
-        <li>
-          settings.almintegration.bitbucket.help_2
-        </li>
-        <li>
-          settings.almintegration.bitbucket.help_3
-        </li>
-      </ul>
-      <p
-        className="big-spacer-top big-spacer-bottom"
-      >
-        <Link
-          onlyActiveOnIndex={false}
-          style={Object {}}
-          target="_blank"
-          to="/documentation/analysis/bitbucket-integration/"
-        >
-          learn_more
-        </Link>
-      </p>
-    </Alert>
-  </div>
+  <BitbucketServerForm
+    formData={
+      Object {
+        "key": "key",
+        "personalAccessToken": "asdf1234",
+        "url": "http://bbs.enterprise.com",
+      }
+    }
+    onFieldChange={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketServerForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketServerForm-test.tsx.snap
index 718829ab486..6541018d021 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketServerForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketServerForm-test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`should render correctly 1`] = `
 <Fragment>
-   
   <AlmBindingDefinitionFormField
     autoFocus={true}
     help="settings.almintegration.form.name.bitbucket.help"
@@ -37,6 +36,14 @@ exports[`should render correctly 1`] = `
         id="settings.almintegration.form.personal_access_token.bitbucket.help"
         values={
           Object {
+            "doc_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              target="_blank"
+              to="/documentation/analysis/bitbucket-integration/"
+            >
+              learn_more
+            </Link>,
             "pat": <a
               href="https://confluence.atlassian.com/bitbucketserver0515/personal-access-tokens-961275199.html"
               rel="noopener noreferrer"
@@ -44,6 +51,9 @@ exports[`should render correctly 1`] = `
             >
               settings.almintegration.form.personal_access_token.bitbucket.help.url
             </a>,
+            "permission": <strong>
+              Read
+            </strong>,
           }
         }
       />
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubForm-test.tsx.snap
index 86fe6664f75..5cf7401d642 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubForm-test.tsx.snap
@@ -1,80 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.github.help"
-      id="name.github"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.github.help1
-          <br />
-          <em>
-            https://github.company.com/api/v3
-          </em>
-          <br />
-          <br />
-          settings.almintegration.form.url.github.help2
-          <br />
-          <em>
-            https://api.github.com/
-          </em>
-        </React.Fragment>
-      }
-      id="url.github"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.app_id.github.help"
-      id="app_id"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      propKey="appId"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.client_id.github.help"
-      id="client_id.github"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      propKey="clientId"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.client_secret.github.help"
-      id="client_secret.github"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={false}
-      propKey="clientSecret"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.private_key.github.help"
-      id="private_key"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={false}
-      propKey="privateKey"
-      value=""
-    />
-  </div>
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.github.help"
+    id="name.github"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.github.help1
+        <br />
+        <em>
+          https://github.company.com/api/v3
+        </em>
+        <br />
+        <br />
+        settings.almintegration.form.url.github.help2
+        <br />
+        <em>
+          https://api.github.com/
+        </em>
+      </React.Fragment>
+    }
+    id="url.github"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value=""
+  />
   <Alert
-    className="huge-spacer-left flex-1"
+    className="big-spacer-top big-spacer-right"
     variant="info"
   >
     <FormattedMessage
@@ -94,84 +54,78 @@ exports[`should render correctly 1`] = `
       }
     />
   </Alert>
-</div>
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.app_id.github.help"
+    id="app_id"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    propKey="appId"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.client_id.github.help"
+    id="client_id.github"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    propKey="clientId"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.client_secret.github.help"
+    id="client_secret.github"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={false}
+    propKey="clientSecret"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.private_key.github.help"
+    id="private_key"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={false}
+    propKey="privateKey"
+    value=""
+  />
+</Fragment>
 `;
 
 exports[`should render correctly 2`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.github.help"
-      id="name.github"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value="key"
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.github.help1
-          <br />
-          <em>
-            https://github.company.com/api/v3
-          </em>
-          <br />
-          <br />
-          settings.almintegration.form.url.github.help2
-          <br />
-          <em>
-            https://api.github.com/
-          </em>
-        </React.Fragment>
-      }
-      id="url.github"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value="http://github.enterprise.com"
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.app_id.github.help"
-      id="app_id"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      propKey="appId"
-      value="123456"
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.client_id.github.help"
-      id="client_id.github"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      propKey="clientId"
-      value="client1"
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.client_secret.github.help"
-      id="client_secret.github"
-      maxLength={80}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={true}
-      propKey="clientSecret"
-      value="**clientsecret**"
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.private_key.github.help"
-      id="private_key"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={true}
-      propKey="privateKey"
-      value="asdf1234"
-    />
-  </div>
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.github.help"
+    id="name.github"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value="key"
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.github.help1
+        <br />
+        <em>
+          https://github.company.com/api/v3
+        </em>
+        <br />
+        <br />
+        settings.almintegration.form.url.github.help2
+        <br />
+        <em>
+          https://api.github.com/
+        </em>
+      </React.Fragment>
+    }
+    id="url.github"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value="http://github.enterprise.com"
+  />
   <Alert
-    className="huge-spacer-left flex-1"
+    className="big-spacer-top big-spacer-right"
     variant="info"
   >
     <FormattedMessage
@@ -191,5 +145,39 @@ exports[`should render correctly 2`] = `
       }
     />
   </Alert>
-</div>
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.app_id.github.help"
+    id="app_id"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    propKey="appId"
+    value="123456"
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.client_id.github.help"
+    id="client_id.github"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    propKey="clientId"
+    value="client1"
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.client_secret.github.help"
+    id="client_secret.github"
+    maxLength={80}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={true}
+    propKey="clientSecret"
+    value="**clientsecret**"
+  />
+  <AlmBindingDefinitionFormField
+    help="settings.almintegration.form.private_key.github.help"
+    id="private_key"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={true}
+    propKey="privateKey"
+    value="asdf1234"
+  />
+</Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabForm-test.tsx.snap
index d68ef50b519..591c37bd876 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabForm-test.tsx.snap
@@ -1,131 +1,137 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.gitlab.help"
-      id="name.gitlab"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.gitlab.help
-          <br />
-          <em>
-            https://gitlab.com/api/v4
-          </em>
-        </React.Fragment>
-      }
-      id="url.gitlab"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.personal_access_token.gitlab.help"
-      id="personal_access_token"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={false}
-      propKey="personalAccessToken"
-      value=""
-    />
-  </div>
-  <Alert
-    className="huge-spacer-left flex-1"
-    variant="info"
-  >
-    <FormattedMessage
-      defaultMessage="settings.almintegration.gitlab.info"
-      id="settings.almintegration.gitlab.info"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/gitlab-integration/"
-          >
-            learn_more
-          </Link>,
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.gitlab.help"
+    id="name.gitlab"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.gitlab.help
+        <br />
+        <em>
+          https://gitlab.com/api/v4
+        </em>
+      </React.Fragment>
+    }
+    id="url.gitlab"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <FormattedMessage
+        defaultMessage="settings.almintegration.form.personal_access_token.gitlab.help"
+        id="settings.almintegration.form.personal_access_token.gitlab.help"
+        values={
+          Object {
+            "doc_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              target="_blank"
+              to="/documentation/analysis/gitlab-integration/"
+            >
+              learn_more
+            </Link>,
+            "pat": <a
+              href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              settings.almintegration.form.personal_access_token.gitlab.help.url
+            </a>,
+            "permission": <strong>
+              Reporter
+            </strong>,
+            "scope": <strong>
+              api
+            </strong>,
+          }
         }
-      }
-    />
-  </Alert>
-</div>
+      />
+    }
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={false}
+    propKey="personalAccessToken"
+    value=""
+  />
+</Fragment>
 `;
 
 exports[`should render correctly 2`] = `
-<div
-  className="display-flex-start"
->
-  <div
-    className="flex-1"
-  >
-    <AlmBindingDefinitionFormField
-      autoFocus={true}
-      help="settings.almintegration.form.name.gitlab.help"
-      id="name.gitlab"
-      onFieldChange={[MockFunction]}
-      propKey="key"
-      value="foo"
-    />
-    <AlmBindingDefinitionFormField
-      help={
-        <React.Fragment>
-          settings.almintegration.form.url.gitlab.help
-          <br />
-          <em>
-            https://gitlab.com/api/v4
-          </em>
-        </React.Fragment>
-      }
-      id="url.gitlab"
-      maxLength={2000}
-      onFieldChange={[MockFunction]}
-      propKey="url"
-      value=""
-    />
-    <AlmBindingDefinitionFormField
-      help="settings.almintegration.form.personal_access_token.gitlab.help"
-      id="personal_access_token"
-      isTextArea={true}
-      onFieldChange={[MockFunction]}
-      overwriteOnly={true}
-      propKey="personalAccessToken"
-      value="foobar"
-    />
-  </div>
-  <Alert
-    className="huge-spacer-left flex-1"
-    variant="info"
-  >
-    <FormattedMessage
-      defaultMessage="settings.almintegration.gitlab.info"
-      id="settings.almintegration.gitlab.info"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/gitlab-integration/"
-          >
-            learn_more
-          </Link>,
+<Fragment>
+  <AlmBindingDefinitionFormField
+    autoFocus={true}
+    help="settings.almintegration.form.name.gitlab.help"
+    id="name.gitlab"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value="foo"
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <React.Fragment>
+        settings.almintegration.form.url.gitlab.help
+        <br />
+        <em>
+          https://gitlab.com/api/v4
+        </em>
+      </React.Fragment>
+    }
+    id="url.gitlab"
+    maxLength={2000}
+    onFieldChange={[MockFunction]}
+    propKey="url"
+    value=""
+  />
+  <AlmBindingDefinitionFormField
+    help={
+      <FormattedMessage
+        defaultMessage="settings.almintegration.form.personal_access_token.gitlab.help"
+        id="settings.almintegration.form.personal_access_token.gitlab.help"
+        values={
+          Object {
+            "doc_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              target="_blank"
+              to="/documentation/analysis/gitlab-integration/"
+            >
+              learn_more
+            </Link>,
+            "pat": <a
+              href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              settings.almintegration.form.personal_access_token.gitlab.help.url
+            </a>,
+            "permission": <strong>
+              Reporter
+            </strong>,
+            "scope": <strong>
+              api
+            </strong>,
+          }
         }
-      }
-    />
-  </Alert>
-</div>
+      />
+    }
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    overwriteOnly={true}
+    propKey="personalAccessToken"
+    value="foobar"
+  />
+</Fragment>
 `;
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 313dd104a29..981be941d6d 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1120,14 +1120,10 @@ settings.projects.change_visibility_form.submit=Change Default Visibility
 
 settings.almintegration.title=Integration configurations
 settings.almintegration.description=ALM integrations allow SonarQube to interact with your ALM. This enables things like authentication, or providing analysis details and a Quality Gate to your Pull Requests directly in your ALM provider's interface.
-settings.almintegration.azure.info=Accounts that will be used to decorate Pull Requests need Code: Read & Write permission. {link}
 settings.almintegration.github.info=You need to install a GitHub App with specific settings and permissions to enable Pull Request Decoration on your Organization or Repository. {link}
 settings.almintegration.github.additional_permission=If Quality Gate status reporting fails on private projects, you might need to add an additional permission to the GitHub App. {link}
-settings.almintegration.gitlab.info=Accounts that will be used to decorate Merge Requests need comment permissions on projects. The personal key needs the API scope permission. {link}
-settings.almintegration.bitbucket.help_1=SonarQube needs a Personal Access Token to communicate with Bitbucket Server. This token will be used to decorate Pull Requests.
-settings.almintegration.bitbucket.help_2=The account used for integration needs Read permission.
-settings.almintegration.bitbucket.help_3=We recommend to integrate with SonarQube using a Bitbucket Server Service Account.
-settings.almintegration.bitbucketcloud.info=You need to create an OAuth consumer in your Bitbucket Cloud workspace settings to decorate your Pull Requests. It needs to be a private consumer with Pull requests: Read permission. Bitbucket requires an OAuth callback URL, but it's not used by SonarQube so any URL works. {link}
+settings.almintegration.bitbucketcloud.info=SonarQube needs you to create an {oauth} in your Bitbucket Cloud workspace settings to report the Quality Gate status on Pull Requests. It needs to be a private consumer with {permission} permission. An OAuth callback URL is required by Bitbucket Cloud but not used by SonarQube so any URL works. {doc_link}
+settings.almintegration.bitbucketcloud.oauth=OAuth consumer
 settings.almintegration.empty.azure=Create your first Azure DevOps configuration to start analyzing your repositories on SonarQube.
 settings.almintegration.empty.bitbucket=Create your first Bitbucket configuration to start analyzing your repositories on SonarQube.
 settings.almintegration.empty.bitbucketcloud=Create your first Bitbucket Cloud configuration to start analyzing your repositories on SonarQube.
@@ -1184,9 +1180,11 @@ settings.almintegration.form.client_secret.bitbucketcloud=OAuth Secret
 settings.almintegration.form.private_key=Private Key
 settings.almintegration.form.private_key.github.help=Your GitHub App's private key. You can generate a .pem file from your GitHub App's page under Private keys. Copy and paste the whole contents of the file here.
 settings.almintegration.form.personal_access_token=Personal Access token
-settings.almintegration.form.personal_access_token.azure.help=Token of the user that will be used to decorate the Pull Requests. Needs authorized scope: "Code (read and write)".
-settings.almintegration.form.personal_access_token.gitlab.help=Token of the user that will be used to decorate the Merge Requests. Needs API scope authorization.
-settings.almintegration.form.personal_access_token.bitbucket.help=A Bitbucket Server user account is used to decorate Pull Requests. We recommend using a dedicated Bitbucket Server account with Administrator permissions. You need a {pat} from this account with Read permission for the repositories that will be analyzed. This personal access token is used to report the Quality Gate status on your pull requests.
+settings.almintegration.form.personal_access_token.azure.help=SonarQube needs a {pat} to report the Quality Gate status on Pull Requests in Azure DevOps. To create this token, we recommend using a dedicated Azure DevOps account with administration permissions. The token itself needs {permission} permission. {doc_link}
+settings.almintegration.form.personal_access_token.azure.help.url=Personal Access Token
+settings.almintegration.form.personal_access_token.gitlab.help=SonarQube needs a {pat} to report the Quality Gate status on Merge Requests in GitLab. To create this token, we recommend using a dedicated GitLab account with {permission} permission to all target projects. The token itself needs the {scope} scope. {doc_link}
+settings.almintegration.form.personal_access_token.gitlab.help.url=Personal Access Token
+settings.almintegration.form.personal_access_token.bitbucket.help=SonarQube needs a {pat} to report the Quality Gate status on Pull Requests in Bitbucket Server. To create this token, we recommend using a dedicated Bitbucket Server account with administration permissions. The token itself needs {permission} permission. {doc_link}
 settings.almintegration.form.personal_access_token.bitbucket.help.url=Personal Access Token
 settings.almintegration.form.save=Save configuration
 settings.almintegration.form.cancel=Cancel