SONAR-12773 Add administration settings for GitLab MR decoration

38 files changed, 780 insertions, 42 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModal.tsx
index d420f7d73b4..aa5c5f3a33f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModal.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { AlmSettingsBinding } from '../../../../types/alm-settings';
+import { AlmSettingsBinding, ALM_KEYS } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModalRenderer from './AlmPRDecorationFormModalRenderer';
 
 interface ChildrenProps<AlmBindingDefinitionType> {
@@ -27,6 +27,7 @@ interface ChildrenProps<AlmBindingDefinitionType> {
 }
 
 interface Props<B> {
+  alm: ALM_KEYS;
   children: (props: ChildrenProps<B>) => React.ReactNode;
   bindingDefinition: B;
   onCancel: () => void;
@@ -67,11 +68,12 @@ export default class AlmPRDecorationFormModal<
   };
 
   render() {
-    const { children, bindingDefinition } = this.props;
+    const { alm, children, bindingDefinition } = this.props;
     const { formData } = this.state;
 
     return (
       <AlmPRDecorationFormModalRenderer
+        alm={alm}
         canSubmit={this.canSubmit}
         onCancel={this.props.onCancel}
         onSubmit={this.handleFormSubmit}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModalRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModalRenderer.tsx
index cd575d4e50e..cbb4576ecdd 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModalRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmPRDecorationFormModalRenderer.tsx
@@ -22,8 +22,10 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { ALM_KEYS } from '../../../../types/alm-settings';
 
 export interface AlmPRDecorationFormModalProps {
+  alm: ALM_KEYS;
   canSubmit: () => boolean;
   children: React.ReactNode;
   onCancel: () => void;
@@ -32,8 +34,13 @@ export interface AlmPRDecorationFormModalProps {
 }
 
 export default function AlmPRDecorationFormModalRenderer(props: AlmPRDecorationFormModalProps) {
-  const { children, originalKey } = props;
-  const header = translate('settings.pr_decoration.form.header', originalKey ? 'edit' : 'create');
+  const { alm, children, originalKey } = props;
+  const header = translate(
+    'settings',
+    alm === ALM_KEYS.GITLAB ? 'mr_decoration' : 'pr_decoration',
+    'form.header',
+    originalKey ? 'edit' : 'create'
+  );
 
   return (
     <SimpleModal header={header} onClose={props.onCancel} onSubmit={props.onSubmit} size="medium">
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureFormModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureFormModal.tsx
index 896200bf05d..97eb5f44793 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureFormModal.tsx
@@ -41,7 +41,7 @@ export default function AzureFormModal(props: AzureFormModalProps) {
         value={formData.key}
       />
       <AlmDefinitionFormField
-        help={translate('settings.pr_decoration.form.personal_access_token.help')}
+        help={translate('settings.pr_decoration.form.personal_access_token.azure.help')}
         id="personal_access_token"
         isTextArea={true}
         onFieldChange={onFieldChange}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTabRenderer.tsx
index db6a806d09d..5efc4f2ff4c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTabRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTabRenderer.tsx
@@ -61,6 +61,7 @@ export default function AzureTabRenderer(props: AzureTabRendererProps) {
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
+          alm={ALM_KEYS.AZURE}
           bindingDefinition={editedDefinition}
           onCancel={props.onCancel}
           onSubmit={props.onSubmit}>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTabRenderer.tsx
index 5b791d83461..b156f433713 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTabRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTabRenderer.tsx
@@ -64,6 +64,7 @@ export default function BitbucketTabRenderer(props: BitbucketTabRendererProps) {
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
+          alm={ALM_KEYS.BITBUCKET}
           bindingDefinition={editedDefinition}
           onCancel={props.onCancel}
           onSubmit={props.onSubmit}>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTabRenderer.tsx
index c03ec15d8b1..ac4b0927d76 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTabRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTabRenderer.tsx
@@ -65,6 +65,7 @@ export default function GithubTabRenderer(props: GithubTabRendererProps) {
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
+          alm={ALM_KEYS.GITHUB}
           bindingDefinition={editedDefinition}
           onCancel={props.onCancel}
           onSubmit={props.onSubmit}>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabFormModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabFormModal.tsx
new file mode 100644
index 00000000000..bf259c2637a
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabFormModal.tsx
@@ -0,0 +1,55 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { GitlabBindingDefinition } from '../../../../types/alm-settings';
+import { AlmDefinitionFormField } from './AlmDefinitionFormField';
+
+export interface GitlabFormModalProps {
+  formData: GitlabBindingDefinition;
+  onFieldChange: (fieldId: keyof GitlabBindingDefinition, value: string) => void;
+}
+
+export function GitlabFormModal(props: GitlabFormModalProps) {
+  const { formData, onFieldChange } = props;
+
+  return (
+    <>
+      <AlmDefinitionFormField
+        autoFocus={true}
+        help={translate('settings.pr_decoration.form.name.gitlab.help')}
+        id="name.gitlab"
+        onFieldChange={onFieldChange}
+        propKey="key"
+        value={formData.key}
+      />
+      <AlmDefinitionFormField
+        help={translate('settings.pr_decoration.form.personal_access_token.gitlab.help')}
+        id="personal_access_token"
+        isTextArea={true}
+        onFieldChange={onFieldChange}
+        propKey="personalAccessToken"
+        value={formData.personalAccessToken}
+      />
+    </>
+  );
+}
+
+export default React.memo(GitlabFormModal);
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTab.tsx
new file mode 100644
index 00000000000..86079934892
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTab.tsx
@@ -0,0 +1,91 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { createGitlabConfiguration, updateGitlabConfiguration } from '../../../../api/almSettings';
+import { GitlabBindingDefinition } from '../../../../types/alm-settings';
+import GitlabTabRenderer from './GitlabTabRenderer';
+
+interface Props {
+  definitions: GitlabBindingDefinition[];
+  loading: boolean;
+  onDelete: (definitionKey: string) => void;
+  onUpdateDefinitions: () => void;
+}
+
+interface State {
+  editedDefinition?: GitlabBindingDefinition;
+  projectCount?: number;
+}
+
+export default class GitlabTab extends React.PureComponent<Props, State> {
+  mounted = false;
+  state: State = {};
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  handleEdit = (definitionKey: string) => {
+    const editedDefinition = this.props.definitions.find(d => d.key === definitionKey);
+    this.setState({ editedDefinition });
+  };
+
+  handleSubmit = (config: GitlabBindingDefinition, originalKey: string) => {
+    const call = originalKey
+      ? updateGitlabConfiguration({ newKey: config.key, ...config, key: originalKey })
+      : createGitlabConfiguration(config);
+    return call.then(this.props.onUpdateDefinitions).then(() => {
+      if (this.mounted) {
+        this.setState({ editedDefinition: undefined });
+      }
+    });
+  };
+
+  handleCancel = () => {
+    this.setState({
+      editedDefinition: undefined
+    });
+  };
+
+  handleCreate = () => {
+    this.setState({ editedDefinition: { key: '', personalAccessToken: '' } });
+  };
+
+  render() {
+    const { definitions, loading } = this.props;
+    const { editedDefinition } = this.state;
+    return (
+      <GitlabTabRenderer
+        definitions={definitions}
+        editedDefinition={editedDefinition}
+        loading={loading}
+        onCancel={this.handleCancel}
+        onCreate={this.handleCreate}
+        onDelete={this.props.onDelete}
+        onEdit={this.handleEdit}
+        onSubmit={this.handleSubmit}
+      />
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTabRenderer.tsx
new file mode 100644
index 00000000000..17a268b40f1
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GitlabTabRenderer.tsx
@@ -0,0 +1,73 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { ALM_KEYS, GitlabBindingDefinition } from '../../../../types/alm-settings';
+import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
+import AlmPRDecorationTable from './AlmPRDecorationTable';
+import GitlabFormModal from './GitlabFormModal';
+import TabHeader from './TabHeader';
+
+export interface GitlabTabRendererProps {
+  editedDefinition?: GitlabBindingDefinition;
+  definitions: GitlabBindingDefinition[];
+  loading: boolean;
+  onCancel: () => void;
+  onCreate: () => void;
+  onDelete: (definitionKey: string) => void;
+  onEdit: (definitionKey: string) => void;
+  onSubmit: (config: GitlabBindingDefinition, originalKey: string) => void;
+}
+
+export default function GitlabTabRenderer(props: GitlabTabRendererProps) {
+  const { definitions, editedDefinition, loading } = props;
+  return (
+    <>
+      <TabHeader
+        alm={ALM_KEYS.GITLAB}
+        definitionCount={definitions.length}
+        onCreate={props.onCreate}
+      />
+
+      <DeferredSpinner loading={loading}>
+        <AlmPRDecorationTable
+          additionalColumnsHeaders={[]}
+          alm={ALM_KEYS.GITLAB}
+          definitions={definitions.map(({ key }) => ({
+            key,
+            additionalColumns: []
+          }))}
+          onDelete={props.onDelete}
+          onEdit={props.onEdit}
+        />
+      </DeferredSpinner>
+
+      {editedDefinition && (
+        <AlmPRDecorationFormModal
+          alm={ALM_KEYS.GITLAB}
+          bindingDefinition={editedDefinition}
+          onCancel={props.onCancel}
+          onSubmit={props.onSubmit}>
+          {childProps => <GitlabFormModal {...childProps} />}
+        </AlmPRDecorationFormModal>
+      )}
+    </>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PRDecorationTabs.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PRDecorationTabs.tsx
index 7f1adb7fa37..096d4fb1e98 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PRDecorationTabs.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PRDecorationTabs.tsx
@@ -26,6 +26,7 @@ import AzureTab from './AzureTab';
 import BitbucketTab from './BitbucketTab';
 import DeleteModal from './DeleteModal';
 import GithubTab from './GithubTab';
+import GitlabTab from './GitlabTab';
 
 export interface PRDecorationTabsProps {
   currentAlm: ALM_KEYS;
@@ -43,7 +44,8 @@ export interface PRDecorationTabsProps {
 export const almName = {
   [ALM_KEYS.AZURE]: 'Azure DevOps Server',
   [ALM_KEYS.BITBUCKET]: 'Bitbucket Server',
-  [ALM_KEYS.GITHUB]: 'GitHub'
+  [ALM_KEYS.GITHUB]: 'GitHub',
+  [ALM_KEYS.GITLAB]: 'GitLab'
 };
 
 export default function PRDecorationTabs(props: PRDecorationTabsProps) {
@@ -69,8 +71,8 @@ export default function PRDecorationTabs(props: PRDecorationTabsProps) {
                 <img
                   alt="github"
                   className="spacer-right"
+                  height={16}
                   src={`${getBaseUrl()}/images/alm/github.svg`}
-                  width={16}
                 />
                 {almName[ALM_KEYS.GITHUB]}
               </>
@@ -83,8 +85,8 @@ export default function PRDecorationTabs(props: PRDecorationTabsProps) {
                 <img
                   alt="bitbucket"
                   className="spacer-right"
+                  height={16}
                   src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
-                  width={16}
                 />
                 {almName[ALM_KEYS.BITBUCKET]}
               </>
@@ -97,12 +99,26 @@ export default function PRDecorationTabs(props: PRDecorationTabsProps) {
                 <img
                   alt="azure"
                   className="spacer-right"
+                  height={16}
                   src={`${getBaseUrl()}/images/alm/azure.svg`}
-                  width={16}
                 />
                 {almName[ALM_KEYS.AZURE]}
               </>
             )
+          },
+          {
+            key: ALM_KEYS.GITLAB,
+            label: (
+              <>
+                <img
+                  alt="gitlab"
+                  className="spacer-right"
+                  height={16}
+                  src={`${getBaseUrl()}/images/alm/gitlab.svg`}
+                />
+                {almName[ALM_KEYS.GITLAB]}
+              </>
+            )
           }
         ]}
       />
@@ -132,6 +148,14 @@ export default function PRDecorationTabs(props: PRDecorationTabsProps) {
             onUpdateDefinitions={props.onUpdateDefinitions}
           />
         )}
+        {currentAlm === ALM_KEYS.GITLAB && (
+          <GitlabTab
+            definitions={definitions.gitlab}
+            loading={loading}
+            onDelete={props.onDelete}
+            onUpdateDefinitions={props.onUpdateDefinitions}
+          />
+        )}
       </div>
 
       {definitionKeyForDeletion && (
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PullRequestDecoration.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PullRequestDecoration.tsx
index 6cfa366286a..fcc47030045 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PullRequestDecoration.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/PullRequestDecoration.tsx
@@ -41,7 +41,8 @@ export default class PullRequestDecoration extends React.PureComponent<{}, State
     definitions: {
       [ALM_KEYS.AZURE]: [],
       [ALM_KEYS.BITBUCKET]: [],
-      [ALM_KEYS.GITHUB]: []
+      [ALM_KEYS.GITHUB]: [],
+      [ALM_KEYS.GITLAB]: []
     },
     loading: true
   };
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/TabHeader.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/TabHeader.tsx
index c0afb6b7176..27e1d749a64 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/TabHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/TabHeader.tsx
@@ -57,7 +57,13 @@ export function TabHeader(props: TabHeaderProps) {
       </Alert>
 
       <div className="big-spacer-bottom display-flex-space-between">
-        <h4 className="display-inline">{translate('settings.pr_decoration.table.title')}</h4>
+        <h4 className="display-inline">
+          {translate(
+            'settings',
+            alm === ALM_KEYS.GITLAB ? 'mr_decoration' : 'pr_decoration',
+            'table.title'
+          )}
+        </h4>
         {showButton && (
           <Button data-test="settings__alm-create" onClick={props.onCreate}>
             {translate('settings.pr_decoration.table.create')}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModal-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModal-test.tsx
index 05a0fac085e..c50624e99a6 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModal-test.tsx
@@ -20,8 +20,8 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
-import { mockGithubDefinition } from '../../../../../helpers/testMocks';
-import { GithubBindingDefinition } from '../../../../../types/alm-settings';
+import { mockGithubDefinition } from '../../../../../helpers/mocks/alm-settings';
+import { ALM_KEYS, GithubBindingDefinition } from '../../../../../types/alm-settings';
 import AlmPRDecorationFormModal from '../AlmPRDecorationFormModal';
 
 it('should render correctly', () => {
@@ -80,6 +80,7 @@ function shallowRender(
 ) {
   return shallow<AlmPRDecorationFormModal<GithubBindingDefinition>>(
     <AlmPRDecorationFormModal
+      alm={ALM_KEYS.GITHUB}
       bindingDefinition={{ appId: '', key: '', privateKey: '', url: '' }}
       onCancel={jest.fn()}
       onSubmit={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModalRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModalRenderer-test.tsx
index 2372fac9458..249f469a464 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModalRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationFormModalRenderer-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import AlmPRDecorationFormModalRenderer, {
   AlmPRDecorationFormModalProps
 } from '../AlmPRDecorationFormModalRenderer';
@@ -30,6 +31,7 @@ it('should render correctly', () => {
 function shallowRender(props: Partial<AlmPRDecorationFormModalProps> = {}) {
   return shallow(
     <AlmPRDecorationFormModalRenderer
+      alm={ALM_KEYS.GITHUB}
       canSubmit={jest.fn()}
       onCancel={jest.fn()}
       onSubmit={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureFormModal-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureFormModal-test.tsx
index 37078fe9d46..487caa2beea 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureFormModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureFormModal-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockAzureDefinition } from '../../../../../helpers/testMocks';
+import { mockAzureDefinition } from '../../../../../helpers/mocks/alm-settings';
 import AzureFormModal, { AzureFormModalProps } from '../AzureFormModal';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTab-test.tsx
index 4f394a34214..17ef4dd7ea5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTab-test.tsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
 import { createAzureConfiguration, updateAzureConfiguration } from '../../../../../api/almSettings';
-import { mockAzureDefinition } from '../../../../../helpers/testMocks';
+import { mockAzureDefinition } from '../../../../../helpers/mocks/alm-settings';
 import AzureTab from '../AzureTab';
 
 jest.mock('../../../../../api/almSettings', () => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTabRenderer-test.tsx
index ea3bfed089c..f8b6c713b00 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTabRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTabRenderer-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockAzureDefinition } from '../../../../../helpers/testMocks';
+import { mockAzureDefinition } from '../../../../../helpers/mocks/alm-settings';
 import AzureTabRenderer, { AzureTabRendererProps } from '../AzureTabRenderer';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketFormModal-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketFormModal-test.tsx
index 8f475d16089..a05f9c9fd4b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketFormModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketFormModal-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockBitbucketDefinition } from '../../../../../helpers/testMocks';
+import { mockBitbucketDefinition } from '../../../../../helpers/mocks/alm-settings';
 import BitbucketFormModal, { BitbucketFormModalProps } from '../BitbucketFormModal';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTab-test.tsx
index 7131b243ec8..836bd1d3f2a 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTab-test.tsx
@@ -24,7 +24,7 @@ import {
   createBitbucketConfiguration,
   updateBitbucketConfiguration
 } from '../../../../../api/almSettings';
-import { mockBitbucketDefinition } from '../../../../../helpers/testMocks';
+import { mockBitbucketDefinition } from '../../../../../helpers/mocks/alm-settings';
 import BitbucketTab from '../BitbucketTab';
 
 jest.mock('../../../../../api/almSettings', () => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTabRenderer-test.tsx
index 1dc73768335..f2daaa98fa5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTabRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTabRenderer-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockBitbucketDefinition } from '../../../../../helpers/testMocks';
+import { mockBitbucketDefinition } from '../../../../../helpers/mocks/alm-settings';
 import BitbucketTabRenderer, { BitbucketTabRendererProps } from '../BitbucketTabRenderer';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubFormModal-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubFormModal-test.tsx
index cd9a383fee7..44f595894a5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubFormModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubFormModal-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockGithubDefinition } from '../../../../../helpers/testMocks';
+import { mockGithubDefinition } from '../../../../../helpers/mocks/alm-settings';
 import GithubFormModal, { GithubFormModalProps } from '../GithubFormModal';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTab-test.tsx
index 2e422a0fbc5..b1209124f02 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTab-test.tsx
@@ -24,7 +24,7 @@ import {
   createGithubConfiguration,
   updateGithubConfiguration
 } from '../../../../../api/almSettings';
-import { mockGithubDefinition } from '../../../../../helpers/testMocks';
+import { mockGithubDefinition } from '../../../../../helpers/mocks/alm-settings';
 import GithubTab from '../GithubTab';
 
 jest.mock('../../../../../api/almSettings', () => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTabRenderer-test.tsx
index 75e531a741e..b81f8b6628f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTabRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTabRenderer-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { mockGithubDefinition } from '../../../../../helpers/testMocks';
+import { mockGithubDefinition } from '../../../../../helpers/mocks/alm-settings';
 import GithubTabRenderer, { GithubTabRendererProps } from '../GithubTabRenderer';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabFormModal-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabFormModal-test.tsx
new file mode 100644
index 00000000000..54886e50f79
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabFormModal-test.tsx
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockGitlabDefinition } from '../../../../../helpers/mocks/alm-settings';
+import { GitlabFormModal, GitlabFormModalProps } from '../GitlabFormModal';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ formData: mockGitlabDefinition() })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<GitlabFormModalProps> = {}) {
+  return shallow(
+    <GitlabFormModal
+      formData={{ key: '', personalAccessToken: '' }}
+      onFieldChange={jest.fn()}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTab-test.tsx
new file mode 100644
index 00000000000..abe042b7fbd
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTab-test.tsx
@@ -0,0 +1,107 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
+import {
+  createGitlabConfiguration,
+  updateGitlabConfiguration
+} from '../../../../../api/almSettings';
+import { mockGitlabDefinition } from '../../../../../helpers/mocks/alm-settings';
+import GitlabTab from '../GitlabTab';
+
+jest.mock('../../../../../api/almSettings', () => ({
+  countBindedProjects: jest.fn().mockResolvedValue(2),
+  createGitlabConfiguration: jest.fn().mockResolvedValue({}),
+  deleteConfiguration: jest.fn().mockResolvedValue({}),
+  updateGitlabConfiguration: jest.fn().mockResolvedValue({})
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+it('should handle cancel', async () => {
+  const wrapper = shallowRender();
+
+  wrapper.setState({
+    editedDefinition: mockGitlabDefinition()
+  });
+
+  wrapper.instance().handleCancel();
+
+  await waitAndUpdate(wrapper);
+
+  expect(wrapper.state().editedDefinition).toBeUndefined();
+});
+
+it('should handle edit', async () => {
+  const config = mockGitlabDefinition();
+  const wrapper = shallowRender({ definitions: [config] });
+  wrapper.instance().handleEdit(config.key);
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().editedDefinition).toEqual(config);
+});
+
+it('should create config', async () => {
+  const onUpdateDefinitions = jest.fn();
+  const config = mockGitlabDefinition();
+  const wrapper = shallowRender({ onUpdateDefinitions });
+  wrapper.setState({ editedDefinition: config });
+
+  await wrapper.instance().handleSubmit(config, '');
+
+  expect(createGitlabConfiguration).toBeCalledWith(config);
+  expect(onUpdateDefinitions).toBeCalled();
+  expect(wrapper.state().editedDefinition).toBeUndefined();
+});
+
+it('should update config', async () => {
+  const onUpdateDefinitions = jest.fn();
+  const config = mockGitlabDefinition();
+  const wrapper = shallowRender({ onUpdateDefinitions });
+  wrapper.setState({ editedDefinition: config });
+
+  await wrapper.instance().handleSubmit(config, 'originalKey');
+
+  expect(updateGitlabConfiguration).toBeCalledWith({
+    newKey: 'foo',
+    ...config,
+    key: 'originalKey'
+  });
+  expect(onUpdateDefinitions).toBeCalled();
+  expect(wrapper.state().editedDefinition).toBeUndefined();
+});
+
+function shallowRender(props: Partial<GitlabTab['props']> = {}) {
+  return shallow<GitlabTab>(
+    <GitlabTab
+      definitions={[]}
+      loading={false}
+      onDelete={jest.fn()}
+      onUpdateDefinitions={jest.fn()}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTabRenderer-test.tsx
new file mode 100644
index 00000000000..5fe001eadeb
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GitlabTabRenderer-test.tsx
@@ -0,0 +1,44 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockGitlabDefinition } from '../../../../../helpers/mocks/alm-settings';
+import GitlabTabRenderer, { GitlabTabRendererProps } from '../GitlabTabRenderer';
+
+it('should render correctly', () => {
+  expect(shallowRender({ loading: true })).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ editedDefinition: mockGitlabDefinition() })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<GitlabTabRendererProps> = {}) {
+  return shallow(
+    <GitlabTabRenderer
+      definitions={[]}
+      loading={false}
+      onCancel={jest.fn()}
+      onCreate={jest.fn()}
+      onDelete={jest.fn()}
+      onEdit={jest.fn()}
+      onSubmit={jest.fn()}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PRDecorationTabs-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PRDecorationTabs-test.tsx
index 1adeb9be6e7..9a84060a2ad 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PRDecorationTabs-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PRDecorationTabs-test.tsx
@@ -26,14 +26,15 @@ it('should render correctly', () => {
   expect(shallowRender({ loading: true })).toMatchSnapshot();
   expect(shallowRender({ definitionKeyForDeletion: 'keyToDelete' })).toMatchSnapshot();
   expect(shallowRender({ currentAlm: ALM_KEYS.AZURE })).toMatchSnapshot();
-  expect(shallowRender({ currentAlm: ALM_KEYS.GITHUB })).toMatchSnapshot();
+  expect(shallowRender({ currentAlm: ALM_KEYS.BITBUCKET })).toMatchSnapshot();
+  expect(shallowRender({ currentAlm: ALM_KEYS.GITLAB })).toMatchSnapshot();
 });
 
 function shallowRender(props: Partial<PRDecorationTabsProps> = {}) {
   return shallow(
     <PRDecorationTabs
       currentAlm={ALM_KEYS.GITHUB}
-      definitions={{ azure: [], bitbucket: [], github: [] }}
+      definitions={{ azure: [], bitbucket: [], github: [], gitlab: [] }}
       loading={false}
       onCancel={jest.fn()}
       onConfirmDelete={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AlmPRDecorationFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AlmPRDecorationFormModal-test.tsx.snap
index 3800e7c93de..20c47fea39b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AlmPRDecorationFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AlmPRDecorationFormModal-test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <AlmPRDecorationFormModalRenderer
+  alm="github"
   canSubmit={[Function]}
   onCancel={[MockFunction]}
   onSubmit={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureFormModal-test.tsx.snap
index d27a4c4a6f3..b980d1d72cd 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureFormModal-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`should render correctly 1`] = `
     value=""
   />
   <AlmDefinitionFormField
-    help="settings.pr_decoration.form.personal_access_token.help"
+    help="settings.pr_decoration.form.personal_access_token.azure.help"
     id="personal_access_token"
     isTextArea={true}
     onFieldChange={[MockFunction]}
@@ -32,7 +32,7 @@ exports[`should render correctly 2`] = `
     value="key"
   />
   <AlmDefinitionFormField
-    help="settings.pr_decoration.form.personal_access_token.help"
+    help="settings.pr_decoration.form.personal_access_token.azure.help"
     id="personal_access_token"
     isTextArea={true}
     onFieldChange={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTabRenderer-test.tsx.snap
index 0e6a491e86a..8e82621775a 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTabRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTabRenderer-test.tsx.snap
@@ -64,6 +64,7 @@ exports[`should render correctly 3`] = `
     />
   </DeferredSpinner>
   <AlmPRDecorationFormModal
+    alm="azure"
     bindingDefinition={
       Object {
         "key": "key",
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTabRenderer-test.tsx.snap
index 65b1f534c8a..5c58a795784 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTabRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTabRenderer-test.tsx.snap
@@ -76,6 +76,7 @@ exports[`should render correctly 3`] = `
     />
   </DeferredSpinner>
   <AlmPRDecorationFormModal
+    alm="bitbucket"
     bindingDefinition={
       Object {
         "key": "key",
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTabRenderer-test.tsx.snap
index 50af2ec9f00..aa48a283a56 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTabRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTabRenderer-test.tsx.snap
@@ -79,6 +79,7 @@ exports[`should render correctly 3`] = `
     />
   </DeferredSpinner>
   <AlmPRDecorationFormModal
+    alm="github"
     bindingDefinition={
       Object {
         "appId": "123456",
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabFormModal-test.tsx.snap
new file mode 100644
index 00000000000..8c2b54c3887
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabFormModal-test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Fragment>
+  <AlmDefinitionFormField
+    autoFocus={true}
+    help="settings.pr_decoration.form.name.gitlab.help"
+    id="name.gitlab"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value=""
+  />
+  <AlmDefinitionFormField
+    help="settings.pr_decoration.form.personal_access_token.gitlab.help"
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    propKey="personalAccessToken"
+    value=""
+  />
+</Fragment>
+`;
+
+exports[`should render correctly 2`] = `
+<Fragment>
+  <AlmDefinitionFormField
+    autoFocus={true}
+    help="settings.pr_decoration.form.name.gitlab.help"
+    id="name.gitlab"
+    onFieldChange={[MockFunction]}
+    propKey="key"
+    value="foo"
+  />
+  <AlmDefinitionFormField
+    help="settings.pr_decoration.form.personal_access_token.gitlab.help"
+    id="personal_access_token"
+    isTextArea={true}
+    onFieldChange={[MockFunction]}
+    propKey="personalAccessToken"
+    value="foobar"
+  />
+</Fragment>
+`;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTab-test.tsx.snap
new file mode 100644
index 00000000000..95bb1ac5bef
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTab-test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<GitlabTabRenderer
+  definitions={Array []}
+  loading={false}
+  onCancel={[Function]}
+  onCreate={[Function]}
+  onDelete={[MockFunction]}
+  onEdit={[Function]}
+  onSubmit={[Function]}
+/>
+`;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTabRenderer-test.tsx.snap
new file mode 100644
index 00000000000..3b572677eb3
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GitlabTabRenderer-test.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Fragment>
+  <Connect(withAppState(TabHeader))
+    alm="gitlab"
+    definitionCount={0}
+    onCreate={[MockFunction]}
+  />
+  <DeferredSpinner
+    loading={true}
+    timeout={100}
+  >
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="gitlab"
+      definitions={Array []}
+      onDelete={[MockFunction]}
+      onEdit={[MockFunction]}
+    />
+  </DeferredSpinner>
+</Fragment>
+`;
+
+exports[`should render correctly 2`] = `
+<Fragment>
+  <Connect(withAppState(TabHeader))
+    alm="gitlab"
+    definitionCount={0}
+    onCreate={[MockFunction]}
+  />
+  <DeferredSpinner
+    loading={false}
+    timeout={100}
+  >
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="gitlab"
+      definitions={Array []}
+      onDelete={[MockFunction]}
+      onEdit={[MockFunction]}
+    />
+  </DeferredSpinner>
+</Fragment>
+`;
+
+exports[`should render correctly 3`] = `
+<Fragment>
+  <Connect(withAppState(TabHeader))
+    alm="gitlab"
+    definitionCount={0}
+    onCreate={[MockFunction]}
+  />
+  <DeferredSpinner
+    loading={false}
+    timeout={100}
+  >
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="gitlab"
+      definitions={Array []}
+      onDelete={[MockFunction]}
+      onEdit={[MockFunction]}
+    />
+  </DeferredSpinner>
+  <AlmPRDecorationFormModal
+    alm="gitlab"
+    bindingDefinition={
+      Object {
+        "key": "foo",
+        "personalAccessToken": "foobar",
+      }
+    }
+    onCancel={[MockFunction]}
+    onSubmit={[MockFunction]}
+  >
+    <Component />
+  </AlmPRDecorationFormModal>
+</Fragment>
+`;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PRDecorationTabs-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PRDecorationTabs-test.tsx.snap
index 52d7fc4e680..fa3df3d8b61 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PRDecorationTabs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PRDecorationTabs-test.tsx.snap
@@ -27,8 +27,8 @@ exports[`should render correctly 1`] = `
             <img
               alt="github"
               className="spacer-right"
+              height={16}
               src="/images/alm/github.svg"
-              width={16}
             />
             GitHub
           </React.Fragment>,
@@ -39,8 +39,8 @@ exports[`should render correctly 1`] = `
             <img
               alt="bitbucket"
               className="spacer-right"
+              height={16}
               src="/images/alm/bitbucket.svg"
-              width={16}
             />
             Bitbucket Server
           </React.Fragment>,
@@ -51,12 +51,24 @@ exports[`should render correctly 1`] = `
             <img
               alt="azure"
               className="spacer-right"
+              height={16}
               src="/images/alm/azure.svg"
-              width={16}
             />
             Azure DevOps Server
           </React.Fragment>,
         },
+        Object {
+          "key": "gitlab",
+          "label": <React.Fragment>
+            <img
+              alt="gitlab"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/gitlab.svg"
+            />
+            GitLab
+          </React.Fragment>,
+        },
       ]
     }
   />
@@ -100,8 +112,8 @@ exports[`should render correctly 2`] = `
             <img
               alt="github"
               className="spacer-right"
+              height={16}
               src="/images/alm/github.svg"
-              width={16}
             />
             GitHub
           </React.Fragment>,
@@ -112,8 +124,8 @@ exports[`should render correctly 2`] = `
             <img
               alt="bitbucket"
               className="spacer-right"
+              height={16}
               src="/images/alm/bitbucket.svg"
-              width={16}
             />
             Bitbucket Server
           </React.Fragment>,
@@ -124,12 +136,24 @@ exports[`should render correctly 2`] = `
             <img
               alt="azure"
               className="spacer-right"
+              height={16}
               src="/images/alm/azure.svg"
-              width={16}
             />
             Azure DevOps Server
           </React.Fragment>,
         },
+        Object {
+          "key": "gitlab",
+          "label": <React.Fragment>
+            <img
+              alt="gitlab"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/gitlab.svg"
+            />
+            GitLab
+          </React.Fragment>,
+        },
       ]
     }
   />
@@ -178,8 +202,8 @@ exports[`should render correctly 3`] = `
             <img
               alt="github"
               className="spacer-right"
+              height={16}
               src="/images/alm/github.svg"
-              width={16}
             />
             GitHub
           </React.Fragment>,
@@ -190,8 +214,8 @@ exports[`should render correctly 3`] = `
             <img
               alt="bitbucket"
               className="spacer-right"
+              height={16}
               src="/images/alm/bitbucket.svg"
-              width={16}
             />
             Bitbucket Server
           </React.Fragment>,
@@ -202,12 +226,24 @@ exports[`should render correctly 3`] = `
             <img
               alt="azure"
               className="spacer-right"
+              height={16}
               src="/images/alm/azure.svg"
-              width={16}
             />
             Azure DevOps Server
           </React.Fragment>,
         },
+        Object {
+          "key": "gitlab",
+          "label": <React.Fragment>
+            <img
+              alt="gitlab"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/gitlab.svg"
+            />
+            GitLab
+          </React.Fragment>,
+        },
       ]
     }
   />
@@ -242,7 +278,7 @@ exports[`should render correctly 4`] = `
   </div>
   <BoxedTabs
     onSelect={[MockFunction]}
-    selected="github"
+    selected="bitbucket"
     tabs={
       Array [
         Object {
@@ -251,8 +287,8 @@ exports[`should render correctly 4`] = `
             <img
               alt="github"
               className="spacer-right"
+              height={16}
               src="/images/alm/github.svg"
-              width={16}
             />
             GitHub
           </React.Fragment>,
@@ -263,8 +299,8 @@ exports[`should render correctly 4`] = `
             <img
               alt="bitbucket"
               className="spacer-right"
+              height={16}
               src="/images/alm/bitbucket.svg"
-              width={16}
             />
             Bitbucket Server
           </React.Fragment>,
@@ -275,19 +311,116 @@ exports[`should render correctly 4`] = `
             <img
               alt="azure"
               className="spacer-right"
+              height={16}
               src="/images/alm/azure.svg"
-              width={16}
             />
             Azure DevOps Server
           </React.Fragment>,
         },
+        Object {
+          "key": "gitlab",
+          "label": <React.Fragment>
+            <img
+              alt="gitlab"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/gitlab.svg"
+            />
+            GitLab
+          </React.Fragment>,
+        },
       ]
     }
   />
   <div
     className="boxed-group boxed-group-inner"
   >
-    <GithubTab
+    <BitbucketTab
+      definitions={Array []}
+      loading={false}
+      onDelete={[MockFunction]}
+      onUpdateDefinitions={[MockFunction]}
+    />
+  </div>
+</Fragment>
+`;
+
+exports[`should render correctly 5`] = `
+<Fragment>
+  <header
+    className="page-header"
+  >
+    <h1
+      className="page-title"
+    >
+      settings.pr_decoration.title
+    </h1>
+  </header>
+  <div
+    className="markdown small spacer-top big-spacer-bottom"
+  >
+    settings.pr_decoration.description
+  </div>
+  <BoxedTabs
+    onSelect={[MockFunction]}
+    selected="gitlab"
+    tabs={
+      Array [
+        Object {
+          "key": "github",
+          "label": <React.Fragment>
+            <img
+              alt="github"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/github.svg"
+            />
+            GitHub
+          </React.Fragment>,
+        },
+        Object {
+          "key": "bitbucket",
+          "label": <React.Fragment>
+            <img
+              alt="bitbucket"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/bitbucket.svg"
+            />
+            Bitbucket Server
+          </React.Fragment>,
+        },
+        Object {
+          "key": "azure",
+          "label": <React.Fragment>
+            <img
+              alt="azure"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/azure.svg"
+            />
+            Azure DevOps Server
+          </React.Fragment>,
+        },
+        Object {
+          "key": "gitlab",
+          "label": <React.Fragment>
+            <img
+              alt="gitlab"
+              className="spacer-right"
+              height={16}
+              src="/images/alm/gitlab.svg"
+            />
+            GitLab
+          </React.Fragment>,
+        },
+      ]
+    }
+  />
+  <div
+    className="boxed-group boxed-group-inner"
+  >
+    <GitlabTab
       definitions={Array []}
       loading={false}
       onDelete={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PullRequestDecoration-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PullRequestDecoration-test.tsx.snap
index 4f286f4d173..fc902c9c1e3 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PullRequestDecoration-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/PullRequestDecoration-test.tsx.snap
@@ -8,6 +8,7 @@ exports[`should render correctly 1`] = `
       "azure": Array [],
       "bitbucket": Array [],
       "github": Array [],
+      "gitlab": Array [],
     }
   }
   loading={true}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBinding.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBinding.tsx
index e5f40286a53..e9a6f969069 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBinding.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBinding.tsx
@@ -24,7 +24,8 @@ import {
   getProjectAlmBinding,
   setProjectAzureBinding,
   setProjectBitbucketBinding,
-  setProjectGithubBinding
+  setProjectGithubBinding,
+  setProjectGitlabBinding
 } from '../../../../api/almSettings';
 import throwGlobalError from '../../../../app/utils/throwGlobalError';
 import { AlmSettingsInstance, ALM_KEYS, ProjectAlmBinding } from '../../../../types/alm-settings';
@@ -47,7 +48,8 @@ interface State {
 const FIELDS_BY_ALM: { [almKey in ALM_KEYS]: Array<keyof T.Omit<ProjectAlmBinding, 'key'>> } = {
   [ALM_KEYS.AZURE]: [],
   [ALM_KEYS.BITBUCKET]: ['repository', 'slug'],
-  [ALM_KEYS.GITHUB]: ['repository']
+  [ALM_KEYS.GITHUB]: ['repository'],
+  [ALM_KEYS.GITLAB]: []
 };
 
 export default class PRDecorationBinding extends React.PureComponent<Props, State> {
@@ -167,6 +169,13 @@ export default class PRDecorationBinding extends React.PureComponent<Props, Stat
           repository
         });
       }
+
+      case ALM_KEYS.GITLAB:
+        return setProjectGitlabBinding({
+          almSetting,
+          project
+        });
+
       default:
         return Promise.reject();
     }