Add icons to the tabs and fix Alms enum

45 files changed, 517 insertions, 277 deletions

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index e8354bf8caf..6904b5d3dd9 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -38,7 +38,7 @@
     "regenerator-runtime": "0.13.2",
     "remark-custom-blocks": "2.3.0",
     "remark-slug": "5.1.0",
-    "sonar-ui-common": "0.0.35",
+    "sonar-ui-common": "0.0.36",
     "unist-util-visit": "1.4.0",
     "valid-url": "1.0.9",
     "whatwg-fetch": "2.0.4"
diff --git a/server/sonar-web/src/main/js/api/almSettings.ts b/server/sonar-web/src/main/js/api/almSettings.ts
index 487e12ed19b..79a35575adb 100644
--- a/server/sonar-web/src/main/js/api/almSettings.ts
+++ b/server/sonar-web/src/main/js/api/almSettings.ts
@@ -19,39 +19,50 @@
  */
 import { getJSON, post } from 'sonar-ui-common/helpers/request';
 import throwGlobalError from '../app/utils/throwGlobalError';
+import {
+  AlmSettingsBindingDefinitions,
+  AlmSettingsInstance,
+  AzureBindingDefinition,
+  AzureProjectAlmBinding,
+  BitbucketBindingDefinition,
+  BitbucketProjectAlmBinding,
+  GithubBindingDefinition,
+  GithubProjectAlmBinding,
+  ProjectAlmBinding
+} from '../types/alm-settings';
 
-export function getAlmDefinitions(): Promise<T.AlmSettingsBindingDefinitions> {
+export function getAlmDefinitions(): Promise<AlmSettingsBindingDefinitions> {
   return getJSON('/api/alm_settings/list_definitions').catch(throwGlobalError);
 }
 
-export function getAlmSettings(project: string): Promise<T.AlmSettingsInstance[]> {
+export function getAlmSettings(project: string): Promise<AlmSettingsInstance[]> {
   return getJSON('/api/alm_settings/list', { project })
     .then(({ almSettings }) => almSettings)
     .catch(throwGlobalError);
 }
 
-export function createGithubConfiguration(data: T.GithubBindingDefinition) {
+export function createGithubConfiguration(data: GithubBindingDefinition) {
   return post('/api/alm_settings/create_github', data).catch(throwGlobalError);
 }
 
-export function updateGithubConfiguration(data: T.GithubBindingDefinition & { newKey: string }) {
+export function updateGithubConfiguration(data: GithubBindingDefinition & { newKey: string }) {
   return post('/api/alm_settings/update_github', data).catch(throwGlobalError);
 }
 
-export function createAzureConfiguration(data: T.AzureBindingDefinition) {
+export function createAzureConfiguration(data: AzureBindingDefinition) {
   return post('/api/alm_settings/create_azure', data).catch(throwGlobalError);
 }
 
-export function updateAzureConfiguration(data: T.AzureBindingDefinition & { newKey: string }) {
+export function updateAzureConfiguration(data: AzureBindingDefinition & { newKey: string }) {
   return post('/api/alm_settings/update_azure', data).catch(throwGlobalError);
 }
 
-export function createBitbucketConfiguration(data: T.BitbucketBindingDefinition) {
+export function createBitbucketConfiguration(data: BitbucketBindingDefinition) {
   return post('/api/alm_settings/create_bitbucket', data).catch(throwGlobalError);
 }
 
 export function updateBitbucketConfiguration(
-  data: T.BitbucketBindingDefinition & { newKey: string }
+  data: BitbucketBindingDefinition & { newKey: string }
 ) {
   return post('/api/alm_settings/update_bitbucket', data).catch(throwGlobalError);
 }
@@ -66,7 +77,7 @@ export function countBindedProjects(almSetting: string) {
     .catch(throwGlobalError);
 }
 
-export function getProjectAlmBinding(project: string): Promise<T.ProjectAlmBinding> {
+export function getProjectAlmBinding(project: string): Promise<ProjectAlmBinding> {
   return getJSON('/api/alm_settings/get_binding', { project });
 }
 
@@ -74,14 +85,14 @@ export function deleteProjectAlmBinding(project: string): Promise<void> {
   return post('/api/alm_settings/delete_binding', { project }).catch(throwGlobalError);
 }
 
-export function setProjectAzureBinding(data: T.AzureProjectAlmBinding) {
+export function setProjectAzureBinding(data: AzureProjectAlmBinding) {
   return post('/api/alm_settings/set_azure_binding', data).catch(throwGlobalError);
 }
 
-export function setProjectBitbucketBinding(data: T.BitbucketProjectAlmBinding) {
+export function setProjectBitbucketBinding(data: BitbucketProjectAlmBinding) {
   return post('/api/alm_settings/set_bitbucket_binding', data).catch(throwGlobalError);
 }
 
-export function setProjectGithubBinding(data: T.GithubProjectAlmBinding) {
+export function setProjectGithubBinding(data: GithubProjectAlmBinding) {
   return post('/api/alm_settings/set_github_binding', data).catch(throwGlobalError);
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmDefinitionFormField.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmDefinitionFormField.tsx
index 814930d4774..d462c0e829f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmDefinitionFormField.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AlmDefinitionFormField.tsx
@@ -20,8 +20,9 @@
 import * as React from 'react';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AlmSettingsBinding } from '../../../../types/alm-settings';
 
-export interface AlmDefinitionFormFieldProps<B extends T.AlmSettingsBinding> {
+export interface AlmDefinitionFormFieldProps<B extends AlmSettingsBinding> {
   autoFocus?: boolean;
   formData: B;
   help: boolean;
@@ -32,7 +33,7 @@ export interface AlmDefinitionFormFieldProps<B extends T.AlmSettingsBinding> {
   propKey: keyof B;
 }
 
-export function AlmDefinitionFormField<B extends T.AlmSettingsBinding>(
+export function AlmDefinitionFormField<B extends AlmSettingsBinding>(
   props: AlmDefinitionFormFieldProps<B>
 ) {
   const { autoFocus, formData, help, id, isTextArea, maxLength, onFieldChange, propKey } = props;
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 fad0a66ae23..d420f7d73b4 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,6 +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 AlmPRDecorationFormModalRenderer from './AlmPRDecorationFormModalRenderer';
 
 interface ChildrenProps<AlmBindingDefinitionType> {
@@ -37,7 +38,7 @@ interface State<AlmBindingDefinitionType> {
 }
 
 export default class AlmPRDecorationFormModal<
-  B extends T.AlmSettingsBinding
+  B extends AlmSettingsBinding
 > extends React.PureComponent<Props<B>, State<B>> {
   constructor(props: Props<B>) {
     super(props);
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 187dcc523b6..07722a00cf5 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
@@ -18,11 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { AzureBindingDefinition } from '../../../../types/alm-settings';
 import { AlmDefinitionFormField } from './AlmDefinitionFormField';
 
 export interface AzureFormModalProps {
-  formData: T.AzureBindingDefinition;
-  onFieldChange: (fieldId: keyof T.AzureBindingDefinition, value: string) => void;
+  formData: AzureBindingDefinition;
+  onFieldChange: (fieldId: keyof AzureBindingDefinition, value: string) => void;
 }
 
 export default function AzureFormModal(props: AzureFormModalProps) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTab.tsx
index a9c8aec9ccc..e2ceeb2c585 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTab.tsx
@@ -20,16 +20,17 @@
 import * as React from 'react';
 import { createAzureConfiguration, updateAzureConfiguration } from '../../../../api/almSettings';
 import AzureTabRenderer from './AzureTabRenderer';
+import { AzureBindingDefinition } from '../../../../types/alm-settings';
 
 interface Props {
-  definitions: T.AzureBindingDefinition[];
+  definitions: AzureBindingDefinition[];
   loading: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 interface State {
-  editedDefinition?: T.AzureBindingDefinition;
+  editedDefinition?: AzureBindingDefinition;
   projectCount?: number;
 }
 
@@ -55,11 +56,11 @@ export default class AzureTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', personalAccessToken: '' } });
   };
 
-  handleEdit = (config: T.AzureBindingDefinition) => {
+  handleEdit = (config: AzureBindingDefinition) => {
     this.setState({ editedDefinition: config });
   };
 
-  handleSubmit = (config: T.AzureBindingDefinition, originalKey: string) => {
+  handleSubmit = (config: AzureBindingDefinition, originalKey: string) => {
     const call = originalKey
       ? updateAzureConfiguration({ newKey: config.key, ...config, key: originalKey })
       : createAzureConfiguration(config);
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 b8d1d9edd58..24d4039f794 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
@@ -18,21 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ALM_KEYS } from '../../utils';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { ALM_KEYS, AzureBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
 import AzureFormModal from './AzureFormModal';
 import AzureTable from './AzureTable';
 import TabHeader from './TabHeader';
 
 export interface AzureTabRendererProps {
-  editedDefinition?: T.AzureBindingDefinition;
-  definitions: T.AzureBindingDefinition[];
+  editedDefinition?: AzureBindingDefinition;
+  definitions: AzureBindingDefinition[];
   loading: boolean;
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.AzureBindingDefinition) => void;
-  onSubmit: (config: T.AzureBindingDefinition, originalKey: string) => void;
+  onEdit: (config: AzureBindingDefinition) => void;
+  onSubmit: (config: AzureBindingDefinition, originalKey: string) => void;
 }
 
 export default function AzureTabRenderer(props: AzureTabRendererProps) {
@@ -41,12 +42,11 @@ export default function AzureTabRenderer(props: AzureTabRendererProps) {
     <>
       <TabHeader alm={ALM_KEYS.AZURE} onCreate={props.onCreate} />
 
-      <AzureTable
-        definitions={definitions}
-        loading={loading}
-        onDelete={props.onDelete}
-        onEdit={props.onEdit}
-      />
+      {loading ? (
+        <DeferredSpinner />
+      ) : (
+        <AzureTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+      )}
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTable.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTable.tsx
index 93b224e3c5b..11cfba29a46 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTable.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/AzureTable.tsx
@@ -20,22 +20,17 @@
 import * as React from 'react';
 import { ButtonIcon, DeleteButton } from 'sonar-ui-common/components/controls/buttons';
 import EditIcon from 'sonar-ui-common/components/icons/EditIcon';
-import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AzureBindingDefinition } from '../../../../types/alm-settings';
 
 export interface AzureTableProps {
-  definitions: T.AzureBindingDefinition[];
-  loading: boolean;
+  definitions: AzureBindingDefinition[];
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.AzureBindingDefinition) => void;
+  onEdit: (config: AzureBindingDefinition) => void;
 }
 
 export default function AzureTable(props: AzureTableProps) {
-  const { definitions, loading } = props;
-
-  if (loading) {
-    return <DeferredSpinner />;
-  }
+  const { definitions } = props;
 
   return (
     <table className="data zebra spacer-bottom">
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketFormModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketFormModal.tsx
index 0f34916731f..9484ceebf80 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketFormModal.tsx
@@ -18,11 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { BitbucketBindingDefinition } from '../../../../types/alm-settings';
 import { AlmDefinitionFormField } from './AlmDefinitionFormField';
 
 export interface BitbucketFormModalProps {
-  formData: T.BitbucketBindingDefinition;
-  onFieldChange: (fieldId: keyof T.BitbucketBindingDefinition, value: string) => void;
+  formData: BitbucketBindingDefinition;
+  onFieldChange: (fieldId: keyof BitbucketBindingDefinition, value: string) => void;
 }
 
 export default function BitbucketFormModal(props: BitbucketFormModalProps) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTab.tsx
index 9f8af24d00e..47b48305434 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTab.tsx
@@ -22,17 +22,18 @@ import {
   createBitbucketConfiguration,
   updateBitbucketConfiguration
 } from '../../../../api/almSettings';
+import { BitbucketBindingDefinition } from '../../../../types/alm-settings';
 import BitbucketTabRenderer from './BitbucketTabRenderer';
 
 interface Props {
-  definitions: T.BitbucketBindingDefinition[];
+  definitions: BitbucketBindingDefinition[];
   loading: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 interface State {
-  editedDefinition?: T.BitbucketBindingDefinition;
+  editedDefinition?: BitbucketBindingDefinition;
   projectCount?: number;
 }
 
@@ -58,11 +59,11 @@ export default class BitbucketTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', url: '', personalAccessToken: '' } });
   };
 
-  handleEdit = (config: T.BitbucketBindingDefinition) => {
+  handleEdit = (config: BitbucketBindingDefinition) => {
     this.setState({ editedDefinition: config });
   };
 
-  handleSubmit = (config: T.BitbucketBindingDefinition, originalKey: string) => {
+  handleSubmit = (config: BitbucketBindingDefinition, originalKey: string) => {
     const call = originalKey
       ? updateBitbucketConfiguration({ newKey: config.key, ...config, key: originalKey })
       : createBitbucketConfiguration(config);
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 52c14765e1c..2f048c81ff8 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
@@ -18,21 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ALM_KEYS } from '../../utils';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { ALM_KEYS, BitbucketBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
 import BitbucketFormModal from './BitbucketFormModal';
 import BitbucketTable from './BitbucketTable';
 import TabHeader from './TabHeader';
 
 export interface BitbucketTabRendererProps {
-  editedDefinition?: T.BitbucketBindingDefinition;
-  definitions: T.BitbucketBindingDefinition[];
+  editedDefinition?: BitbucketBindingDefinition;
+  definitions: BitbucketBindingDefinition[];
   loading: boolean;
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.BitbucketBindingDefinition) => void;
-  onSubmit: (config: T.BitbucketBindingDefinition, originalKey: string) => void;
+  onEdit: (config: BitbucketBindingDefinition) => void;
+  onSubmit: (config: BitbucketBindingDefinition, originalKey: string) => void;
 }
 
 export default function BitbucketTabRenderer(props: BitbucketTabRendererProps) {
@@ -41,12 +42,11 @@ export default function BitbucketTabRenderer(props: BitbucketTabRendererProps) {
     <>
       <TabHeader alm={ALM_KEYS.BITBUCKET} onCreate={props.onCreate} />
 
-      <BitbucketTable
-        definitions={definitions}
-        loading={loading}
-        onDelete={props.onDelete}
-        onEdit={props.onEdit}
-      />
+      {loading ? (
+        <DeferredSpinner />
+      ) : (
+        <BitbucketTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+      )}
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTable.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTable.tsx
index 1c49cb360e8..3183e625fb5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTable.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTable.tsx
@@ -20,22 +20,17 @@
 import * as React from 'react';
 import { ButtonIcon, DeleteButton } from 'sonar-ui-common/components/controls/buttons';
 import EditIcon from 'sonar-ui-common/components/icons/EditIcon';
-import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { BitbucketBindingDefinition } from '../../../../types/alm-settings';
 
 export interface BitbucketTableProps {
-  definitions: T.BitbucketBindingDefinition[];
-  loading: boolean;
+  definitions: BitbucketBindingDefinition[];
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.BitbucketBindingDefinition) => void;
+  onEdit: (config: BitbucketBindingDefinition) => void;
 }
 
 export default function BitbucketTable(props: BitbucketTableProps) {
-  const { definitions, loading } = props;
-
-  if (loading) {
-    return <DeferredSpinner />;
-  }
+  const { definitions } = props;
 
   return (
     <table className="data zebra spacer-bottom">
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubFormModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubFormModal.tsx
index 0386b9a3936..728008eb947 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubFormModal.tsx
@@ -18,11 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { GithubBindingDefinition } from '../../../../types/alm-settings';
 import { AlmDefinitionFormField } from './AlmDefinitionFormField';
 
 export interface GithubFormModalProps {
-  formData: T.GithubBindingDefinition;
-  onFieldChange: (fieldId: keyof T.GithubBindingDefinition, value: string) => void;
+  formData: GithubBindingDefinition;
+  onFieldChange: (fieldId: keyof GithubBindingDefinition, value: string) => void;
 }
 
 export default function GithubFormModal(props: GithubFormModalProps) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTab.tsx
index f68e5272ecf..05c2200af2c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTab.tsx
@@ -19,17 +19,18 @@
  */
 import * as React from 'react';
 import { createGithubConfiguration, updateGithubConfiguration } from '../../../../api/almSettings';
+import { GithubBindingDefinition } from '../../../../types/alm-settings';
 import GithubTabRenderer from './GithubTabRenderer';
 
 interface Props {
-  definitions: T.GithubBindingDefinition[];
+  definitions: GithubBindingDefinition[];
   loading: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 interface State {
-  editedDefinition?: T.GithubBindingDefinition;
+  editedDefinition?: GithubBindingDefinition;
   projectCount?: number;
 }
 
@@ -55,11 +56,11 @@ export default class GithubTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', appId: '', url: '', privateKey: '' } });
   };
 
-  handleEdit = (config: T.GithubBindingDefinition) => {
+  handleEdit = (config: GithubBindingDefinition) => {
     this.setState({ editedDefinition: config });
   };
 
-  handleSubmit = (config: T.GithubBindingDefinition, originalKey: string) => {
+  handleSubmit = (config: GithubBindingDefinition, originalKey: string) => {
     const call = originalKey
       ? updateGithubConfiguration({ newKey: config.key, ...config, key: originalKey })
       : createGithubConfiguration(config);
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 e7161e2df52..811178734e3 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
@@ -18,21 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { ALM_KEYS } from '../../utils';
+import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { ALM_KEYS, GithubBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
 import GithubFormModal from './GithubFormModal';
 import GithubTable from './GithubTable';
 import TabHeader from './TabHeader';
 
 export interface GithubTabRendererProps {
-  editedDefinition?: T.GithubBindingDefinition;
-  definitions: T.GithubBindingDefinition[];
+  editedDefinition?: GithubBindingDefinition;
+  definitions: GithubBindingDefinition[];
   loading: boolean;
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.GithubBindingDefinition) => void;
-  onSubmit: (config: T.GithubBindingDefinition, originalKey: string) => void;
+  onEdit: (config: GithubBindingDefinition) => void;
+  onSubmit: (config: GithubBindingDefinition, originalKey: string) => void;
 }
 
 export default function GithubTabRenderer(props: GithubTabRendererProps) {
@@ -41,12 +42,11 @@ export default function GithubTabRenderer(props: GithubTabRendererProps) {
     <>
       <TabHeader alm={ALM_KEYS.GITHUB} onCreate={props.onCreate} />
 
-      <GithubTable
-        definitions={definitions}
-        loading={loading}
-        onDelete={props.onDelete}
-        onEdit={props.onEdit}
-      />
+      {loading ? (
+        <DeferredSpinner />
+      ) : (
+        <GithubTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+      )}
 
       {editedDefinition && (
         <AlmPRDecorationFormModal
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTable.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTable.tsx
index 5cb6e5fecf1..f9d6db98f75 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTable.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTable.tsx
@@ -20,22 +20,17 @@
 import * as React from 'react';
 import { ButtonIcon, DeleteButton } from 'sonar-ui-common/components/controls/buttons';
 import EditIcon from 'sonar-ui-common/components/icons/EditIcon';
-import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { GithubBindingDefinition } from '../../../../types/alm-settings';
 
 export interface GithubTableProps {
-  definitions: T.GithubBindingDefinition[];
-  loading: boolean;
+  definitions: GithubBindingDefinition[];
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: T.GithubBindingDefinition) => void;
+  onEdit: (config: GithubBindingDefinition) => void;
 }
 
 export default function GithubTable(props: GithubTableProps) {
-  const { definitions, loading } = props;
-
-  if (loading) {
-    return <DeferredSpinner />;
-  }
+  const { definitions } = props;
 
   return (
     <table className="data zebra spacer-bottom">
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 ded107bd343..680fa4a6aab 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
@@ -20,7 +20,9 @@
 import * as React from 'react';
 import BoxedTabs from 'sonar-ui-common/components/controls/BoxedTabs';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { almName, ALM_KEYS } from '../../utils';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import { AlmSettingsBindingDefinitions, ALM_KEYS } from '../../../../types/alm-settings';
+import { almName } from '../../utils';
 import AzureTab from './AzureTab';
 import BitbucketTab from './BitbucketTab';
 import DeleteModal from './DeleteModal';
@@ -29,7 +31,7 @@ import GithubTab from './GithubTab';
 export interface PRDecorationTabsProps {
   currentAlm: ALM_KEYS;
   definitionKeyForDeletion?: string;
-  definitions: T.AlmSettingsBindingDefinitions;
+  definitions: AlmSettingsBindingDefinitions;
   loading: boolean;
   onCancel: () => void;
   onConfirmDelete: (definitionKey: string) => void;
@@ -57,15 +59,45 @@ export default function PRDecorationTabs(props: PRDecorationTabsProps) {
         tabs={[
           {
             key: ALM_KEYS.GITHUB,
-            label: almName[ALM_KEYS.GITHUB]
+            label: (
+              <>
+                <img
+                  alt="github"
+                  className="spacer-right"
+                  src={`${getBaseUrl()}/images/sonarcloud/github.svg`}
+                  width={16}
+                />
+                {almName[ALM_KEYS.GITHUB]}
+              </>
+            )
           },
           {
             key: ALM_KEYS.BITBUCKET,
-            label: almName[ALM_KEYS.BITBUCKET]
+            label: (
+              <>
+                <img
+                  alt="bitbucket"
+                  className="spacer-right"
+                  src={`${getBaseUrl()}/images/sonarcloud/bitbucket.svg`}
+                  width={16}
+                />
+                {almName[ALM_KEYS.BITBUCKET]}
+              </>
+            )
           },
           {
             key: ALM_KEYS.AZURE,
-            label: almName[ALM_KEYS.AZURE]
+            label: (
+              <>
+                <img
+                  alt="azure"
+                  className="spacer-right"
+                  src={`${getBaseUrl()}/images/sonarcloud/azure.svg`}
+                  width={16}
+                />
+                {almName[ALM_KEYS.AZURE]}
+              </>
+            )
           }
         ]}
       />
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 56367d96f2a..6cfa366286a 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
@@ -23,13 +23,13 @@ import {
   deleteConfiguration,
   getAlmDefinitions
 } from '../../../../api/almSettings';
-import { ALM_KEYS } from '../../utils';
+import { AlmSettingsBindingDefinitions, ALM_KEYS } from '../../../../types/alm-settings';
 import PRDecorationTabs from './PRDecorationTabs';
 
 interface State {
   currentAlm: ALM_KEYS;
   definitionKeyForDeletion?: string;
-  definitions: T.AlmSettingsBindingDefinitions;
+  definitions: AlmSettingsBindingDefinitions;
   loading: boolean;
   projectCount?: number;
 }
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 4fbd9d74f14..22401645ada 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
@@ -23,7 +23,7 @@ import { Link } from 'react-router';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { ALM_KEYS } from '../../utils';
+import { ALM_KEYS } from '../../../../types/alm-settings';
 
 export interface TabHeaderProps {
   alm: ALM_KEYS;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmDefinitionFormField-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmDefinitionFormField-test.tsx
index 0d606dc654d..a30e8533ede 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmDefinitionFormField-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmDefinitionFormField-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { AlmSettingsBinding } from '../../../../../types/alm-settings';
 import { AlmDefinitionFormField, AlmDefinitionFormFieldProps } from '../AlmDefinitionFormField';
 
 it('should render correctly', () => {
@@ -41,7 +42,7 @@ it('should call onFieldChange', () => {
   expect(onTextAreaChange).toBeCalled();
 });
 
-function shallowRender(props: Partial<AlmDefinitionFormFieldProps<T.AlmSettingsBinding>> = {}) {
+function shallowRender(props: Partial<AlmDefinitionFormFieldProps<AlmSettingsBinding>> = {}) {
   return shallow(
     <AlmDefinitionFormField
       formData={{ key: 'key' }}
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 d0fe3a4162a..05a0fac085e 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
@@ -21,6 +21,7 @@ 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 AlmPRDecorationFormModal from '../AlmPRDecorationFormModal';
 
 it('should render correctly', () => {
@@ -75,9 +76,9 @@ it('should (dis)allow submit by validating its state', async () => {
 });
 
 function shallowRender(
-  props: Partial<AlmPRDecorationFormModal<T.GithubBindingDefinition>['props']> = {}
+  props: Partial<AlmPRDecorationFormModal<GithubBindingDefinition>['props']> = {}
 ) {
-  return shallow<AlmPRDecorationFormModal<T.GithubBindingDefinition>>(
+  return shallow<AlmPRDecorationFormModal<GithubBindingDefinition>>(
     <AlmPRDecorationFormModal
       bindingDefinition={{ appId: '', key: '', privateKey: '', url: '' }}
       onCancel={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTable-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTable-test.tsx
index e6e7fcbb834..d8d26b387f6 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTable-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTable-test.tsx
@@ -29,12 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<AzureTableProps> = {}) {
   return shallow(
-    <AzureTable
-      definitions={[]}
-      loading={false}
-      onDelete={jest.fn()}
-      onEdit={jest.fn()}
-      {...props}
-    />
+    <AzureTable definitions={[]} onDelete={jest.fn()} onEdit={jest.fn()} {...props} />
   );
 }
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 8aef4b21971..577c0886fd5 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
@@ -86,6 +86,25 @@ it('should update config', async () => {
   expect(wrapper.state().editedDefinition).toBeUndefined();
 });
 
+it('should handle create', async () => {
+  const wrapper = shallowRender();
+  wrapper.instance().handleCreate();
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().editedDefinition).toEqual({ key: '', url: '', personalAccessToken: '' });
+});
+
+it('should handle edit', async () => {
+  const config = {
+    key: 'key',
+    url: 'url',
+    personalAccessToken: 'PAT'
+  };
+  const wrapper = shallowRender();
+  wrapper.instance().handleEdit(config);
+  await waitAndUpdate(wrapper);
+  expect(wrapper.state().editedDefinition).toEqual(config);
+});
+
 function shallowRender(props: Partial<BitbucketTab['props']> = {}) {
   return shallow<BitbucketTab>(
     <BitbucketTab
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
new file mode 100644
index 00000000000..1dc73768335
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTabRenderer-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 { mockBitbucketDefinition } from '../../../../../helpers/testMocks';
+import BitbucketTabRenderer, { BitbucketTabRendererProps } from '../BitbucketTabRenderer';
+
+it('should render correctly', () => {
+  expect(shallowRender({ loading: true })).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ editedDefinition: mockBitbucketDefinition() })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<BitbucketTabRendererProps> = {}) {
+  return shallow(
+    <BitbucketTabRenderer
+      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__/BitbucketTable-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTable-test.tsx
index 37c0bc2350f..11cd6eb13b0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTable-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTable-test.tsx
@@ -29,12 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<BitbucketTableProps> = {}) {
   return shallow(
-    <BitbucketTable
-      definitions={[]}
-      loading={false}
-      onDelete={jest.fn()}
-      onEdit={jest.fn()}
-      {...props}
-    />
+    <BitbucketTable definitions={[]} onDelete={jest.fn()} onEdit={jest.fn()} {...props} />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTable-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTable-test.tsx
index f8b5b29102e..cce1d966f56 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTable-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTable-test.tsx
@@ -29,12 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<GithubTableProps> = {}) {
   return shallow(
-    <GithubTable
-      definitions={[]}
-      loading={false}
-      onDelete={jest.fn()}
-      onEdit={jest.fn()}
-      {...props}
-    />
+    <GithubTable definitions={[]} onDelete={jest.fn()} onEdit={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 1f34d682137..1adeb9be6e7 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
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { ALM_KEYS } from '../../../utils';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import PRDecorationTabs, { PRDecorationTabsProps } from '../PRDecorationTabs';
 
 it('should render correctly', () => {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PullRequestDecoration-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PullRequestDecoration-test.tsx
index 867ba390e2c..d5ca57a06ca 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PullRequestDecoration-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/PullRequestDecoration-test.tsx
@@ -25,7 +25,7 @@ import {
   deleteConfiguration,
   getAlmDefinitions
 } from '../../../../../api/almSettings';
-import { ALM_KEYS } from '../../../utils';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import PullRequestDecoration from '../PullRequestDecoration';
 
 jest.mock('../../../../../api/almSettings', () => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/TabHeader-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/TabHeader-test.tsx
index a295ab018db..23d743d17cd 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/TabHeader-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/TabHeader-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { ALM_KEYS } from '../../../utils';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import TabHeader, { TabHeaderProps } from '../TabHeader';
 
 it('should render correctly', () => {
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 2e4ab4a808c..769cf16ba05 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
@@ -6,11 +6,8 @@ exports[`should render correctly 1`] = `
     alm="azure"
     onCreate={[MockFunction]}
   />
-  <AzureTable
-    definitions={Array []}
-    loading={true}
-    onDelete={[MockFunction]}
-    onEdit={[MockFunction]}
+  <DeferredSpinner
+    timeout={100}
   />
 </Fragment>
 `;
@@ -23,7 +20,6 @@ exports[`should render correctly 2`] = `
   />
   <AzureTable
     definitions={Array []}
-    loading={false}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
   />
@@ -38,7 +34,6 @@ exports[`should render correctly 3`] = `
   />
   <AzureTable
     definitions={Array []}
-    loading={false}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
   />
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
new file mode 100644
index 00000000000..033e8cb82ec
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTabRenderer-test.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Fragment>
+  <TabHeader
+    alm="bitbucket"
+    onCreate={[MockFunction]}
+  />
+  <DeferredSpinner
+    timeout={100}
+  />
+</Fragment>
+`;
+
+exports[`should render correctly 2`] = `
+<Fragment>
+  <TabHeader
+    alm="bitbucket"
+    onCreate={[MockFunction]}
+  />
+  <BitbucketTable
+    definitions={Array []}
+    onDelete={[MockFunction]}
+    onEdit={[MockFunction]}
+  />
+</Fragment>
+`;
+
+exports[`should render correctly 3`] = `
+<Fragment>
+  <TabHeader
+    alm="bitbucket"
+    onCreate={[MockFunction]}
+  />
+  <BitbucketTable
+    definitions={Array []}
+    onDelete={[MockFunction]}
+    onEdit={[MockFunction]}
+  />
+  <AlmPRDecorationFormModal
+    bindingDefinition={
+      Object {
+        "key": "key",
+        "personalAccessToken": "asdf1234",
+        "url": "http://bbs.enterprise.com",
+      }
+    }
+    onCancel={[MockFunction]}
+    onSubmit={[MockFunction]}
+  >
+    <Component />
+  </AlmPRDecorationFormModal>
+</Fragment>
+`;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubFormModal-test.tsx.snap
index d1759a44ea8..9cdbcc5b7f3 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubFormModal-test.tsx.snap
@@ -79,7 +79,7 @@ exports[`should render correctly 2`] = `
         "appId": "123456",
         "key": "key",
         "privateKey": "asdf1234",
-        "url": "http:alm.enterprise.com",
+        "url": "http://github.enterprise.com",
       }
     }
     help={true}
@@ -95,7 +95,7 @@ exports[`should render correctly 2`] = `
         "appId": "123456",
         "key": "key",
         "privateKey": "asdf1234",
-        "url": "http:alm.enterprise.com",
+        "url": "http://github.enterprise.com",
       }
     }
     help={false}
@@ -111,7 +111,7 @@ exports[`should render correctly 2`] = `
         "appId": "123456",
         "key": "key",
         "privateKey": "asdf1234",
-        "url": "http:alm.enterprise.com",
+        "url": "http://github.enterprise.com",
       }
     }
     help={false}
@@ -127,7 +127,7 @@ exports[`should render correctly 2`] = `
         "appId": "123456",
         "key": "key",
         "privateKey": "asdf1234",
-        "url": "http:alm.enterprise.com",
+        "url": "http://github.enterprise.com",
       }
     }
     help={false}
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 a1a75c78ce1..032b06c1f53 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
@@ -6,11 +6,8 @@ exports[`should render correctly 1`] = `
     alm="github"
     onCreate={[MockFunction]}
   />
-  <GithubTable
-    definitions={Array []}
-    loading={true}
-    onDelete={[MockFunction]}
-    onEdit={[MockFunction]}
+  <DeferredSpinner
+    timeout={100}
   />
 </Fragment>
 `;
@@ -23,7 +20,6 @@ exports[`should render correctly 2`] = `
   />
   <GithubTable
     definitions={Array []}
-    loading={false}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
   />
@@ -38,7 +34,6 @@ exports[`should render correctly 3`] = `
   />
   <GithubTable
     definitions={Array []}
-    loading={false}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
   />
@@ -48,7 +43,7 @@ exports[`should render correctly 3`] = `
         "appId": "123456",
         "key": "key",
         "privateKey": "asdf1234",
-        "url": "http:alm.enterprise.com",
+        "url": "http://github.enterprise.com",
       }
     }
     onCancel={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTable-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTable-test.tsx.snap
index 03e8c47151a..9284ab59d0f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTable-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/GithubTable-test.tsx.snap
@@ -66,7 +66,7 @@ exports[`should render correctly 2`] = `
         key
       </td>
       <td>
-        http:alm.enterprise.com
+        http://github.enterprise.com
       </td>
       <td>
         123456
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 7d8a26c3d7c..277eec9e944 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
@@ -23,15 +23,39 @@ exports[`should render correctly 1`] = `
       Array [
         Object {
           "key": "github",
-          "label": "Github Enterprise",
+          "label": <React.Fragment>
+            <img
+              alt="github"
+              className="spacer-right"
+              src="/images/sonarcloud/github.svg"
+              width={16}
+            />
+            Github Enterprise
+          </React.Fragment>,
         },
         Object {
           "key": "bitbucket",
-          "label": "Bitbucket Server",
+          "label": <React.Fragment>
+            <img
+              alt="bitbucket"
+              className="spacer-right"
+              src="/images/sonarcloud/bitbucket.svg"
+              width={16}
+            />
+            Bitbucket Server
+          </React.Fragment>,
         },
         Object {
           "key": "azure",
-          "label": "Azure DevOps Server",
+          "label": <React.Fragment>
+            <img
+              alt="azure"
+              className="spacer-right"
+              src="/images/sonarcloud/azure.svg"
+              width={16}
+            />
+            Azure DevOps Server
+          </React.Fragment>,
         },
       ]
     }
@@ -72,15 +96,39 @@ exports[`should render correctly 2`] = `
       Array [
         Object {
           "key": "github",
-          "label": "Github Enterprise",
+          "label": <React.Fragment>
+            <img
+              alt="github"
+              className="spacer-right"
+              src="/images/sonarcloud/github.svg"
+              width={16}
+            />
+            Github Enterprise
+          </React.Fragment>,
         },
         Object {
           "key": "bitbucket",
-          "label": "Bitbucket Server",
+          "label": <React.Fragment>
+            <img
+              alt="bitbucket"
+              className="spacer-right"
+              src="/images/sonarcloud/bitbucket.svg"
+              width={16}
+            />
+            Bitbucket Server
+          </React.Fragment>,
         },
         Object {
           "key": "azure",
-          "label": "Azure DevOps Server",
+          "label": <React.Fragment>
+            <img
+              alt="azure"
+              className="spacer-right"
+              src="/images/sonarcloud/azure.svg"
+              width={16}
+            />
+            Azure DevOps Server
+          </React.Fragment>,
         },
       ]
     }
@@ -126,15 +174,39 @@ exports[`should render correctly 3`] = `
       Array [
         Object {
           "key": "github",
-          "label": "Github Enterprise",
+          "label": <React.Fragment>
+            <img
+              alt="github"
+              className="spacer-right"
+              src="/images/sonarcloud/github.svg"
+              width={16}
+            />
+            Github Enterprise
+          </React.Fragment>,
         },
         Object {
           "key": "bitbucket",
-          "label": "Bitbucket Server",
+          "label": <React.Fragment>
+            <img
+              alt="bitbucket"
+              className="spacer-right"
+              src="/images/sonarcloud/bitbucket.svg"
+              width={16}
+            />
+            Bitbucket Server
+          </React.Fragment>,
         },
         Object {
           "key": "azure",
-          "label": "Azure DevOps Server",
+          "label": <React.Fragment>
+            <img
+              alt="azure"
+              className="spacer-right"
+              src="/images/sonarcloud/azure.svg"
+              width={16}
+            />
+            Azure DevOps Server
+          </React.Fragment>,
         },
       ]
     }
@@ -175,15 +247,39 @@ exports[`should render correctly 4`] = `
       Array [
         Object {
           "key": "github",
-          "label": "Github Enterprise",
+          "label": <React.Fragment>
+            <img
+              alt="github"
+              className="spacer-right"
+              src="/images/sonarcloud/github.svg"
+              width={16}
+            />
+            Github Enterprise
+          </React.Fragment>,
         },
         Object {
           "key": "bitbucket",
-          "label": "Bitbucket Server",
+          "label": <React.Fragment>
+            <img
+              alt="bitbucket"
+              className="spacer-right"
+              src="/images/sonarcloud/bitbucket.svg"
+              width={16}
+            />
+            Bitbucket Server
+          </React.Fragment>,
         },
         Object {
           "key": "azure",
-          "label": "Azure DevOps Server",
+          "label": <React.Fragment>
+            <img
+              alt="azure"
+              className="spacer-right"
+              src="/images/sonarcloud/azure.svg"
+              width={16}
+            />
+            Azure DevOps Server
+          </React.Fragment>,
         },
       ]
     }
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 70ff66b5a83..aae3dc9a12b 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
@@ -27,7 +27,7 @@ import {
   setProjectGithubBinding
 } from '../../../../api/almSettings';
 import throwGlobalError from '../../../../app/utils/throwGlobalError';
-import { ALM_KEYS } from '../../utils';
+import { AlmSettingsInstance, ALM_KEYS, ProjectAlmBinding } from '../../../../types/alm-settings';
 import PRDecorationBindingRenderer from './PRDecorationBindingRenderer';
 
 interface Props {
@@ -35,9 +35,9 @@ interface Props {
 }
 
 interface State {
-  formData: T.ProjectAlmBinding;
+  formData: ProjectAlmBinding;
   hasBinding: boolean;
-  instances: T.AlmSettingsInstance[];
+  instances: AlmSettingsInstance[];
   isValid: boolean;
   loading: boolean;
   saving: boolean;
@@ -194,7 +194,7 @@ export default class PRDecorationBinding extends React.PureComponent<Props, Stat
     }
 
     if (key) {
-      this.submitProjectAlmBinding(selected.alm as ALM_KEYS, key, additionalFields)
+      this.submitProjectAlmBinding(selected.alm, key, additionalFields)
         .then(() => {
           if (this.mounted) {
             this.setState({
@@ -208,7 +208,7 @@ export default class PRDecorationBinding extends React.PureComponent<Props, Stat
     }
   };
 
-  handleFieldChange = (id: keyof T.ProjectAlmBinding, value: string) => {
+  handleFieldChange = (id: keyof ProjectAlmBinding, value: string) => {
     this.setState(({ formData }) => {
       const newFormData = {
         ...formData,
@@ -228,7 +228,7 @@ export default class PRDecorationBinding extends React.PureComponent<Props, Stat
     if (!key || !selected) {
       return false;
     }
-    return FIELDS_BY_ALM[selected.alm as ALM_KEYS].reduce(
+    return FIELDS_BY_ALM[selected.alm].reduce(
       (result: boolean, field) => result && Boolean(additionalFields[field]),
       true
     );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
index c9a8d349faf..db5aeb9d6e0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
@@ -27,31 +27,31 @@ import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon'
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { ALM_KEYS } from '../../utils';
+import { AlmSettingsInstance, ALM_KEYS, ProjectAlmBinding } from '../../../../types/alm-settings';
 
 export interface PRDecorationBindingRendererProps {
-  formData: T.ProjectAlmBinding;
+  formData: ProjectAlmBinding;
   hasBinding: boolean;
-  instances: T.AlmSettingsInstance[];
+  instances: AlmSettingsInstance[];
   isValid: boolean;
   loading: boolean;
-  onFieldChange: (id: keyof T.ProjectAlmBinding, value: string) => void;
+  onFieldChange: (id: keyof ProjectAlmBinding, value: string) => void;
   onReset: () => void;
   onSubmit: () => void;
   saving: boolean;
   success: boolean;
 }
 
-function renderLabel(v: T.AlmSettingsInstance) {
+function renderLabel(v: AlmSettingsInstance) {
   return v.url ? `${v.key} — ${v.url}` : v.key;
 }
 
 function renderField(props: {
   help?: boolean;
-  helpParams?: { [key: string]: string | number | boolean | Date | JSX.Element | null | undefined };
+  helpParams?: { [key: string]: string | JSX.Element };
   id: string;
-  onFieldChange: (id: keyof T.ProjectAlmBinding, value: string) => void;
-  propKey: keyof T.ProjectAlmBinding;
+  onFieldChange: (id: keyof ProjectAlmBinding, value: string) => void;
+  propKey: keyof ProjectAlmBinding;
   value: string;
 }) {
   const { help, helpParams, id, propKey, value, onFieldChange } = props;
@@ -122,7 +122,7 @@ export default function PRDecorationBindingRenderer(props: PRDecorationBindingRe
   }
 
   const selected = key && instances.find(i => i.key === key);
-  const alm = selected && (selected.alm as ALM_KEYS);
+  const alm = selected && selected.alm;
 
   return (
     <div>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBinding-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBinding-test.tsx
index b1eaaf1346c..54ee550816d 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBinding-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBinding-test.tsx
@@ -29,7 +29,7 @@ import {
   setProjectGithubBinding
 } from '../../../../../api/almSettings';
 import { mockComponent } from '../../../../../helpers/testMocks';
-import { ALM_KEYS } from '../../../utils';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import PRDecorationBinding from '../PRDecorationBinding';
 
 jest.mock('../../../../../api/almSettings', () => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBindingRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBindingRenderer-test.tsx
index 48c7c098208..bd26eabf33c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBindingRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/PRDecorationBindingRenderer-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ALM_KEYS } from '../../../../../types/alm-settings';
 import PRDecorationBindingRenderer, {
   PRDecorationBindingRendererProps
 } from '../PRDecorationBindingRenderer';
@@ -32,7 +33,7 @@ it('should render single instance correctly', () => {
   const singleInstance = {
     key: 'single',
     url: 'http://single.url',
-    alm: 'github'
+    alm: ALM_KEYS.GITHUB
   };
   expect(
     shallowRender({
@@ -43,22 +44,26 @@ it('should render single instance correctly', () => {
 });
 
 it('should render multiple instances correctly', () => {
-  const urls = ['http://github.enterprise.com', 'http://github2.enterprise.com'];
+  const urls = ['http://github.enterprise.com', 'http://bbs.enterprise.com'];
   const instances = [
     {
-      alm: 'github',
+      alm: ALM_KEYS.GITHUB,
       key: 'i1',
       url: urls[0]
     },
     {
-      alm: 'github',
+      alm: ALM_KEYS.GITHUB,
       key: 'i2',
       url: urls[0]
     },
     {
-      alm: 'github',
+      alm: ALM_KEYS.BITBUCKET,
       key: 'i3',
       url: urls[1]
+    },
+    {
+      alm: ALM_KEYS.AZURE,
+      key: 'i4'
     }
   ];
 
@@ -86,7 +91,7 @@ it('should render multiple instances correctly', () => {
 
 it('should display action state correctly', () => {
   const urls = ['http://url.com'];
-  const instances = [{ key: 'key', url: urls[0], alm: 'github' }];
+  const instances = [{ key: 'key', url: urls[0], alm: ALM_KEYS.GITHUB }];
 
   expect(shallowRender({ instances, loading: false, saving: true })).toMatchSnapshot();
   expect(shallowRender({ instances, loading: false, success: true })).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
index 5fd4b3eca00..9d704e6ba4f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
@@ -291,9 +291,13 @@ exports[`should render multiple instances correctly 1`] = `
               "value": "i2",
             },
             Object {
-              "label": "i3 — http://github2.enterprise.com",
+              "label": "i3 — http://bbs.enterprise.com",
               "value": "i3",
             },
+            Object {
+              "label": "i4",
+              "value": "i4",
+            },
           ]
         }
         searchable={false}
@@ -367,9 +371,13 @@ exports[`should render multiple instances correctly 2`] = `
               "value": "i2",
             },
             Object {
-              "label": "i3 — http://github2.enterprise.com",
+              "label": "i3 — http://bbs.enterprise.com",
               "value": "i3",
             },
+            Object {
+              "label": "i4",
+              "value": "i4",
+            },
           ]
         }
         searchable={false}
diff --git a/server/sonar-web/src/main/js/apps/settings/utils.ts b/server/sonar-web/src/main/js/apps/settings/utils.ts
index 5e41638529d..72c3c0756e2 100644
--- a/server/sonar-web/src/main/js/apps/settings/utils.ts
+++ b/server/sonar-web/src/main/js/apps/settings/utils.ts
@@ -19,15 +19,10 @@
  */
 import { sanitize } from 'dompurify';
 import { hasMessage, translate } from 'sonar-ui-common/helpers/l10n';
+import { ALM_KEYS } from '../../types/alm-settings';
 
 export const DEFAULT_CATEGORY = 'general';
 
-export enum ALM_KEYS {
-  AZURE = 'azure',
-  BITBUCKET = 'bitbucket',
-  GITHUB = 'github'
-}
-
 export const almName = {
   [ALM_KEYS.AZURE]: 'Azure DevOps Server',
   [ALM_KEYS.BITBUCKET]: 'Bitbucket Server',
diff --git a/server/sonar-web/src/main/js/helpers/testMocks.ts b/server/sonar-web/src/main/js/helpers/testMocks.ts
index db978e76bee..6f03f437b11 100644
--- a/server/sonar-web/src/main/js/helpers/testMocks.ts
+++ b/server/sonar-web/src/main/js/helpers/testMocks.ts
@@ -23,6 +23,11 @@ import { InjectedRouter } from 'react-router';
 import { createStore, Store } from 'redux';
 import { DocumentationEntry } from '../apps/documentation/utils';
 import { Exporter, Profile } from '../apps/quality-profiles/types';
+import {
+  AzureBindingDefinition,
+  BitbucketBindingDefinition,
+  GithubBindingDefinition
+} from '../types/alm-settings';
 
 export function mockAlmApplication(overrides: Partial<T.AlmApplication> = {}): T.AlmApplication {
   return {
@@ -51,8 +56,8 @@ export function mockAlmOrganization(overrides: Partial<T.AlmOrganization> = {}):
 }
 
 export function mockAzureDefinition(
-  overrides: Partial<T.AzureBindingDefinition> = {}
-): T.AzureBindingDefinition {
+  overrides: Partial<AzureBindingDefinition> = {}
+): AzureBindingDefinition {
   return {
     key: 'key',
     personalAccessToken: 'asdf1234',
@@ -61,8 +66,8 @@ export function mockAzureDefinition(
 }
 
 export function mockBitbucketDefinition(
-  overrides: Partial<T.BitbucketBindingDefinition> = {}
-): T.BitbucketBindingDefinition {
+  overrides: Partial<BitbucketBindingDefinition> = {}
+): BitbucketBindingDefinition {
   return {
     key: 'key',
     personalAccessToken: 'asdf1234',
@@ -72,8 +77,8 @@ export function mockBitbucketDefinition(
 }
 
 export function mockGithubDefinition(
-  overrides: Partial<T.GithubBindingDefinition> = {}
-): T.GithubBindingDefinition {
+  overrides: Partial<GithubBindingDefinition> = {}
+): GithubBindingDefinition {
   return {
     key: 'key',
     url: 'http://github.enterprise.com',
diff --git a/server/sonar-web/src/main/js/types/alm-settings.d.ts b/server/sonar-web/src/main/js/types/alm-settings.d.ts
deleted file mode 100644
index 0fdb03ce4a4..00000000000
--- a/server/sonar-web/src/main/js/types/alm-settings.d.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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.
- */
-declare namespace T {
-  export interface AlmSettingsBinding {
-    key: string;
-  }
-
-  export interface AlmSettingsInstance {
-    alm: string;
-    key: string;
-    url?: string;
-  }
-
-  export interface AlmSettingsBindingDefinitions {
-    azure: AzureBindingDefinition[];
-    bitbucket: BitbucketBindingDefinition[];
-    github: GithubBindingDefinition[];
-  }
-
-  export interface AzureBindingDefinition extends AlmSettingsBinding {
-    personalAccessToken: string;
-  }
-
-  export interface BitbucketBindingDefinition extends AlmSettingsBinding {
-    personalAccessToken: string;
-    url: string;
-  }
-
-  export interface GithubBindingDefinition extends AlmSettingsBinding {
-    appId: string;
-    privateKey: string;
-    url: string;
-  }
-
-  export interface ProjectAlmBinding {
-    key: string;
-    repository?: string;
-    repositoryKey?: string;
-    repositorySlug?: string;
-  }
-
-  export interface AzureProjectAlmBinding {
-    almSetting: string;
-    project: string;
-  }
-
-  export interface BitbucketProjectAlmBinding {
-    almSetting: string;
-    project: string;
-    repositoryKey: string;
-    repositorySlug: string;
-  }
-
-  export interface GithubProjectAlmBinding {
-    almSetting: string;
-    project: string;
-    repository: string;
-  }
-}
diff --git a/server/sonar-web/src/main/js/types/alm-settings.ts b/server/sonar-web/src/main/js/types/alm-settings.ts
new file mode 100644
index 00000000000..f2153fe214f
--- /dev/null
+++ b/server/sonar-web/src/main/js/types/alm-settings.ts
@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+export const enum ALM_KEYS {
+  AZURE = 'azure',
+  BITBUCKET = 'bitbucket',
+  GITHUB = 'github'
+}
+
+export interface AlmSettingsBinding {
+  key: string;
+}
+
+export interface AlmSettingsInstance {
+  alm: ALM_KEYS;
+  key: string;
+  url?: string;
+}
+
+export interface AlmSettingsBindingDefinitions {
+  azure: AzureBindingDefinition[];
+  bitbucket: BitbucketBindingDefinition[];
+  github: GithubBindingDefinition[];
+}
+
+export interface AzureBindingDefinition extends AlmSettingsBinding {
+  personalAccessToken: string;
+}
+
+export interface BitbucketBindingDefinition extends AlmSettingsBinding {
+  personalAccessToken: string;
+  url: string;
+}
+
+export interface GithubBindingDefinition extends AlmSettingsBinding {
+  appId: string;
+  privateKey: string;
+  url: string;
+}
+
+export interface ProjectAlmBinding {
+  key: string;
+  repository?: string;
+  repositoryKey?: string;
+  repositorySlug?: string;
+}
+
+export interface AzureProjectAlmBinding {
+  almSetting: string;
+  project: string;
+}
+
+export interface BitbucketProjectAlmBinding {
+  almSetting: string;
+  project: string;
+  repositoryKey: string;
+  repositorySlug: string;
+}
+
+export interface GithubProjectAlmBinding {
+  almSetting: string;
+  project: string;
+  repository: string;
+}
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index 0ee5d888dd9..0d957206de9 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -9421,10 +9421,10 @@ sockjs@0.3.19:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
 
-sonar-ui-common@0.0.35:
-  version "0.0.35"
-  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.35.tgz#1572b8489f464a57f49e41b7f7397a366a3c0b38"
-  integrity sha1-FXK4SJ9GSlf0nkG39zl6Nmo8Czg=
+sonar-ui-common@0.0.36:
+  version "0.0.36"
+  resolved "https://repox.jfrog.io/repox/api/npm/npm/sonar-ui-common/-/sonar-ui-common-0.0.36.tgz#30c4705d907f2453ce9a113af660bf4ff536af67"
+  integrity sha1-MMRwXZB/JFPOmhE69mC/T/U2r2c=
   dependencies:
     "@types/react-select" "1.2.6"
     classnames "2.2.6"