Refactor for duplications

22 files changed, 289 insertions, 503 deletions

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/AlmPRDecorationTable.tsx
index 066da515e1a..7aebe33e42e 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/AlmPRDecorationTable.tsx
@@ -21,22 +21,30 @@ 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 { translate } from 'sonar-ui-common/helpers/l10n';
-import { AzureBindingDefinition } from '../../../../types/alm-settings';
+import { ALM_KEYS } from '../../../../types/alm-settings';
 
-export interface AzureTableProps {
-  definitions: AzureBindingDefinition[];
+export interface AlmPRDecorationTableProps {
+  additionalColumnsHeaders: Array<string>;
+  alm: ALM_KEYS;
+  definitions: Array<{
+    key: string;
+    additionalColumns: Array<string>;
+  }>;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: AzureBindingDefinition) => void;
+  onEdit: (definitionKey: string) => void;
 }
 
-export default function AzureTable(props: AzureTableProps) {
-  const { definitions } = props;
+export default function AlmPRDecorationTable(props: AlmPRDecorationTableProps) {
+  const { additionalColumnsHeaders, alm, definitions } = props;
 
   return (
     <table className="data zebra fixed spacer-bottom">
       <thead>
         <tr>
           <th>{translate('settings.pr_decoration.table.column.name')}</th>
+          {additionalColumnsHeaders.map(h => (
+            <th key={h}>{h}</th>
+          ))}
           <th className="action-small text-center">
             {translate('settings.pr_decoration.table.column.edit')}
           </th>
@@ -48,21 +56,28 @@ export default function AzureTable(props: AzureTableProps) {
       <tbody>
         {definitions.length === 0 ? (
           <tr>
-            <td colSpan={3}>{translate('settings.pr_decoration.table.empty.azure')}</td>
+            <td colSpan={3 + additionalColumnsHeaders.length}>
+              {translate('settings.pr_decoration.table.empty', alm)}
+            </td>
           </tr>
         ) : (
-          definitions.map(definition => (
-            <tr key={definition.key}>
-              <td className="nowrap hide-overflow" title={definition.key}>
-                {definition.key}
+          definitions.map(({ key, additionalColumns }) => (
+            <tr key={key}>
+              <td className="nowrap hide-overflow" title={key}>
+                {key}
               </td>
+              {additionalColumns.map(value => (
+                <td className="nowrap hide-overflow" key={value} title={value}>
+                  {value}
+                </td>
+              ))}
               <td className="text-center">
-                <ButtonIcon onClick={() => props.onEdit(definition)}>
+                <ButtonIcon onClick={() => props.onEdit(key)}>
                   <EditIcon />
                 </ButtonIcon>
               </td>
               <td className="text-center">
-                <DeleteButton onClick={() => props.onDelete(definition.key)} />
+                <DeleteButton onClick={() => props.onDelete(key)} />
               </td>
             </tr>
           ))
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 e2ceeb2c585..22e7f0c2664 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
@@ -19,8 +19,8 @@
  */
 import * as React from 'react';
 import { createAzureConfiguration, updateAzureConfiguration } from '../../../../api/almSettings';
-import AzureTabRenderer from './AzureTabRenderer';
 import { AzureBindingDefinition } from '../../../../types/alm-settings';
+import AzureTabRenderer from './AzureTabRenderer';
 
 interface Props {
   definitions: AzureBindingDefinition[];
@@ -56,8 +56,9 @@ export default class AzureTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', personalAccessToken: '' } });
   };
 
-  handleEdit = (config: AzureBindingDefinition) => {
-    this.setState({ editedDefinition: config });
+  handleEdit = (definitionKey: string) => {
+    const editedDefinition = this.props.definitions.find(d => d.key === definitionKey);
+    this.setState({ editedDefinition });
   };
 
   handleSubmit = (config: AzureBindingDefinition, originalKey: string) => {
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 5435f791243..6d977223c61 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
@@ -21,8 +21,8 @@ import * as React from 'react';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { ALM_KEYS, AzureBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
+import AlmPRDecorationTable from './AlmPRDecorationTable';
 import AzureFormModal from './AzureFormModal';
-import AzureTable from './AzureTable';
 import TabHeader from './TabHeader';
 
 export interface AzureTabRendererProps {
@@ -32,7 +32,7 @@ export interface AzureTabRendererProps {
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: AzureBindingDefinition) => void;
+  onEdit: (definitionKey: string) => void;
   onSubmit: (config: AzureBindingDefinition, originalKey: string) => void;
 }
 
@@ -43,7 +43,16 @@ export default function AzureTabRenderer(props: AzureTabRendererProps) {
       <TabHeader alm={ALM_KEYS.AZURE} onCreate={props.onCreate} />
 
       <DeferredSpinner loading={loading}>
-        <AzureTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+        <AlmPRDecorationTable
+          additionalColumnsHeaders={[]}
+          alm={ALM_KEYS.AZURE}
+          definitions={definitions.map(({ key }) => ({
+            key,
+            additionalColumns: []
+          }))}
+          onDelete={props.onDelete}
+          onEdit={props.onEdit}
+        />
       </DeferredSpinner>
 
       {editedDefinition && (
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 47b48305434..13a37742c8e 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
@@ -59,8 +59,9 @@ export default class BitbucketTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', url: '', personalAccessToken: '' } });
   };
 
-  handleEdit = (config: BitbucketBindingDefinition) => {
-    this.setState({ editedDefinition: config });
+  handleEdit = (definitionKey: string) => {
+    const editedDefinition = this.props.definitions.find(d => d.key === definitionKey);
+    this.setState({ editedDefinition });
   };
 
   handleSubmit = (config: BitbucketBindingDefinition, originalKey: string) => {
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 c24b30b4120..10540fcf851 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
@@ -19,10 +19,11 @@
  */
 import * as React from 'react';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { ALM_KEYS, BitbucketBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
+import AlmPRDecorationTable from './AlmPRDecorationTable';
 import BitbucketFormModal from './BitbucketFormModal';
-import BitbucketTable from './BitbucketTable';
 import TabHeader from './TabHeader';
 
 export interface BitbucketTabRendererProps {
@@ -32,7 +33,7 @@ export interface BitbucketTabRendererProps {
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: BitbucketBindingDefinition) => void;
+  onEdit: (definitionKey: string) => void;
   onSubmit: (config: BitbucketBindingDefinition, originalKey: string) => void;
 }
 
@@ -43,7 +44,18 @@ export default function BitbucketTabRenderer(props: BitbucketTabRendererProps) {
       <TabHeader alm={ALM_KEYS.BITBUCKET} onCreate={props.onCreate} />
 
       <DeferredSpinner loading={loading}>
-        <BitbucketTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+        <AlmPRDecorationTable
+          additionalColumnsHeaders={[
+            translate(`settings.pr_decoration.table.column.bitbucket.url`)
+          ]}
+          alm={ALM_KEYS.BITBUCKET}
+          definitions={definitions.map(({ key, url }) => ({
+            key,
+            additionalColumns: [url]
+          }))}
+          onDelete={props.onDelete}
+          onEdit={props.onEdit}
+        />
       </DeferredSpinner>
 
       {editedDefinition && (
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
deleted file mode 100644
index dc173e19788..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/BitbucketTable.tsx
+++ /dev/null
@@ -1,77 +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.
- */
-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 { translate } from 'sonar-ui-common/helpers/l10n';
-import { BitbucketBindingDefinition } from '../../../../types/alm-settings';
-
-export interface BitbucketTableProps {
-  definitions: BitbucketBindingDefinition[];
-  onDelete: (definitionKey: string) => void;
-  onEdit: (config: BitbucketBindingDefinition) => void;
-}
-
-export default function BitbucketTable(props: BitbucketTableProps) {
-  const { definitions } = props;
-
-  return (
-    <table className="data zebra fixed spacer-bottom">
-      <thead>
-        <tr>
-          <th>{translate('settings.pr_decoration.table.column.name')}</th>
-          <th>{translate(`settings.pr_decoration.table.column.bitbucket.url`)}</th>
-          <th className="action-small text-center">
-            {translate('settings.pr_decoration.table.column.edit')}
-          </th>
-          <th className="action text-center">
-            {translate('settings.pr_decoration.table.column.delete')}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {definitions.length === 0 ? (
-          <tr>
-            <td colSpan={4}>{translate('settings.pr_decoration.table.empty.bitbucket')}</td>
-          </tr>
-        ) : (
-          definitions.map(definition => (
-            <tr key={definition.key}>
-              <td className="nowrap hide-overflow" title={definition.key}>
-                {definition.key}
-              </td>
-              <td className="nowrap hide-overflow" title={definition.url}>
-                {definition.url}
-              </td>
-              <td className="text-center">
-                <ButtonIcon onClick={() => props.onEdit(definition)}>
-                  <EditIcon />
-                </ButtonIcon>
-              </td>
-              <td className="text-center">
-                <DeleteButton onClick={() => props.onDelete(definition.key)} />
-              </td>
-            </tr>
-          ))
-        )}
-      </tbody>
-    </table>
-  );
-}
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 05c2200af2c..9c35ad18b89 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
@@ -56,8 +56,9 @@ export default class GithubTab extends React.PureComponent<Props, State> {
     this.setState({ editedDefinition: { key: '', appId: '', url: '', privateKey: '' } });
   };
 
-  handleEdit = (config: GithubBindingDefinition) => {
-    this.setState({ editedDefinition: config });
+  handleEdit = (definitionKey: string) => {
+    const editedDefinition = this.props.definitions.find(d => d.key === definitionKey);
+    this.setState({ editedDefinition });
   };
 
   handleSubmit = (config: GithubBindingDefinition, originalKey: string) => {
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 e135049b98d..b33fe013bda 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
@@ -19,10 +19,11 @@
  */
 import * as React from 'react';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { ALM_KEYS, GithubBindingDefinition } from '../../../../types/alm-settings';
 import AlmPRDecorationFormModal from './AlmPRDecorationFormModal';
+import AlmPRDecorationTable from './AlmPRDecorationTable';
 import GithubFormModal from './GithubFormModal';
-import GithubTable from './GithubTable';
 import TabHeader from './TabHeader';
 
 export interface GithubTabRendererProps {
@@ -32,7 +33,7 @@ export interface GithubTabRendererProps {
   onCancel: () => void;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
-  onEdit: (config: GithubBindingDefinition) => void;
+  onEdit: (definitionKey: string) => void;
   onSubmit: (config: GithubBindingDefinition, originalKey: string) => void;
 }
 
@@ -43,7 +44,19 @@ export default function GithubTabRenderer(props: GithubTabRendererProps) {
       <TabHeader alm={ALM_KEYS.GITHUB} onCreate={props.onCreate} />
 
       <DeferredSpinner loading={loading}>
-        <GithubTable definitions={definitions} onDelete={props.onDelete} onEdit={props.onEdit} />
+        <AlmPRDecorationTable
+          additionalColumnsHeaders={[
+            translate(`settings.pr_decoration.table.column.github.url`),
+            translate('settings.pr_decoration.table.column.app_id')
+          ]}
+          alm={ALM_KEYS.GITHUB}
+          definitions={definitions.map(({ key, appId, url }) => ({
+            key,
+            additionalColumns: [url, appId]
+          }))}
+          onDelete={props.onDelete}
+          onEdit={props.onEdit}
+        />
       </DeferredSpinner>
 
       {editedDefinition && (
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
deleted file mode 100644
index 6c992dac1f8..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/GithubTable.tsx
+++ /dev/null
@@ -1,81 +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.
- */
-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 { translate } from 'sonar-ui-common/helpers/l10n';
-import { GithubBindingDefinition } from '../../../../types/alm-settings';
-
-export interface GithubTableProps {
-  definitions: GithubBindingDefinition[];
-  onDelete: (definitionKey: string) => void;
-  onEdit: (config: GithubBindingDefinition) => void;
-}
-
-export default function GithubTable(props: GithubTableProps) {
-  const { definitions } = props;
-
-  return (
-    <table className="data zebra fixed spacer-bottom">
-      <thead>
-        <tr>
-          <th>{translate('settings.pr_decoration.table.column.name')}</th>
-          <th>{translate(`settings.pr_decoration.table.column.github.url`)}</th>
-          <th>{translate('settings.pr_decoration.table.column.app_id')}</th>
-          <th className="action-small text-center">
-            {translate('settings.pr_decoration.table.column.edit')}
-          </th>
-          <th className="action text-center">
-            {translate('settings.pr_decoration.table.column.delete')}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {definitions.length === 0 ? (
-          <tr>
-            <td colSpan={5}>{translate('settings.pr_decoration.table.empty.github')}</td>
-          </tr>
-        ) : (
-          definitions.map(definition => (
-            <tr key={definition.key}>
-              <td className="nowrap hide-overflow" title={definition.key}>
-                {definition.key}
-              </td>
-              <td className="nowrap hide-overflow" title={definition.url}>
-                {definition.url}
-              </td>
-              <td className="nowrap hide-overflow" title={definition.appId}>
-                {definition.appId}
-              </td>
-              <td className="text-center">
-                <ButtonIcon onClick={() => props.onEdit(definition)}>
-                  <EditIcon />
-                </ButtonIcon>
-              </td>
-              <td className="text-center">
-                <DeleteButton onClick={() => props.onDelete(definition.key)} />
-              </td>
-            </tr>
-          ))
-        )}
-      </tbody>
-    </table>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationTable-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationTable-test.tsx
new file mode 100644
index 00000000000..758d1964804
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AlmPRDecorationTable-test.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { ALM_KEYS } from '../../../../../types/alm-settings';
+import AlmPRDecorationTable, { AlmPRDecorationTableProps } from '../AlmPRDecorationTable';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+  expect(
+    shallowRender({
+      additionalColumnsHeaders: ['additional1', 'additional2'],
+      alm: ALM_KEYS.GITHUB,
+      definitions: [
+        { key: 'definition1', additionalColumns: ['def1-v1', 'def1-v2'] },
+        { key: 'definition2', additionalColumns: ['def2-v1', 'def2-v2'] }
+      ]
+    })
+  ).toMatchSnapshot();
+});
+
+it('should callback', () => {
+  const onDelete = jest.fn();
+  const onEdit = jest.fn();
+
+  const wrapper = shallowRender({
+    additionalColumnsHeaders: [],
+    alm: ALM_KEYS.BITBUCKET,
+    definitions: [{ key: 'defKey', additionalColumns: [] }],
+    onDelete,
+    onEdit
+  });
+
+  wrapper.find('DeleteButton').simulate('click');
+  expect(onDelete).toBeCalledWith('defKey');
+
+  wrapper.find('ButtonIcon').simulate('click');
+  expect(onEdit).toBeCalledWith('defKey');
+});
+
+function shallowRender(props: Partial<AlmPRDecorationTableProps> = {}) {
+  return shallow(
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={[]}
+      alm={ALM_KEYS.AZURE}
+      definitions={[]}
+      onDelete={jest.fn()}
+      onEdit={jest.fn()}
+      {...props}
+    />
+  );
+}
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 e98737b7cd0..4f394a34214 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
@@ -53,6 +53,17 @@ it('should handle cancel', async () => {
   expect(wrapper.state().editedDefinition).toBeUndefined();
 });
 
+it('should handle edit', async () => {
+  const config = {
+    key: 'key',
+    personalAccessToken: 'asdf14'
+  };
+  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 = mockAzureDefinition();
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
deleted file mode 100644
index d8d26b387f6..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/AzureTable-test.tsx
+++ /dev/null
@@ -1,34 +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.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import { mockAzureDefinition } from '../../../../../helpers/testMocks';
-import AzureTable, { AzureTableProps } from '../AzureTable';
-
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
-  expect(shallowRender({ definitions: [mockAzureDefinition()] })).toMatchSnapshot();
-});
-
-function shallowRender(props: Partial<AzureTableProps> = {}) {
-  return shallow(
-    <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 577c0886fd5..7131b243ec8 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
@@ -99,8 +99,8 @@ it('should handle edit', async () => {
     url: 'url',
     personalAccessToken: 'PAT'
   };
-  const wrapper = shallowRender();
-  wrapper.instance().handleEdit(config);
+  const wrapper = shallowRender({ definitions: [config] });
+  wrapper.instance().handleEdit(config.key);
   await waitAndUpdate(wrapper);
   expect(wrapper.state().editedDefinition).toEqual(config);
 });
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
deleted file mode 100644
index 11cd6eb13b0..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/BitbucketTable-test.tsx
+++ /dev/null
@@ -1,34 +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.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import { mockBitbucketDefinition } from '../../../../../helpers/testMocks';
-import BitbucketTable, { BitbucketTableProps } from '../BitbucketTable';
-
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
-  expect(shallowRender({ definitions: [mockBitbucketDefinition()] })).toMatchSnapshot();
-});
-
-function shallowRender(props: Partial<BitbucketTableProps> = {}) {
-  return shallow(
-    <BitbucketTable definitions={[]} onDelete={jest.fn()} onEdit={jest.fn()} {...props} />
-  );
-}
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 dac085c21ba..2e422a0fbc5 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
@@ -56,6 +56,19 @@ it('should handle cancel', async () => {
   expect(wrapper.state().editedDefinition).toBeUndefined();
 });
 
+it('should handle edit', async () => {
+  const config = {
+    key: 'key',
+    url: 'url',
+    appId: 'appid',
+    privateKey: 'PAT'
+  };
+  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 = mockGithubDefinition();
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
deleted file mode 100644
index cce1d966f56..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/GithubTable-test.tsx
+++ /dev/null
@@ -1,34 +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.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import { mockGithubDefinition } from '../../../../../helpers/testMocks';
-import GithubTable, { GithubTableProps } from '../GithubTable';
-
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
-  expect(shallowRender({ definitions: [mockGithubDefinition()] })).toMatchSnapshot();
-});
-
-function shallowRender(props: Partial<GithubTableProps> = {}) {
-  return shallow(
-    <GithubTable definitions={[]} onDelete={jest.fn()} onEdit={jest.fn()} {...props} />
-  );
-}
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__/AlmPRDecorationTable-test.tsx.snap
index e2180fa9773..8e7fab9dfe0 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__/AlmPRDecorationTable-test.tsx.snap
@@ -9,12 +9,6 @@ exports[`should render correctly 1`] = `
       <th>
         settings.pr_decoration.table.column.name
       </th>
-      <th>
-        settings.pr_decoration.table.column.github.url
-      </th>
-      <th>
-        settings.pr_decoration.table.column.app_id
-      </th>
       <th
         className="action-small text-center"
       >
@@ -30,9 +24,9 @@ exports[`should render correctly 1`] = `
   <tbody>
     <tr>
       <td
-        colSpan={5}
+        colSpan={3}
       >
-        settings.pr_decoration.table.empty.github
+        settings.pr_decoration.table.empty.azure
       </td>
     </tr>
   </tbody>
@@ -48,11 +42,15 @@ exports[`should render correctly 2`] = `
       <th>
         settings.pr_decoration.table.column.name
       </th>
-      <th>
-        settings.pr_decoration.table.column.github.url
+      <th
+        key="additional1"
+      >
+        additional1
       </th>
-      <th>
-        settings.pr_decoration.table.column.app_id
+      <th
+        key="additional2"
+      >
+        additional2
       </th>
       <th
         className="action-small text-center"
@@ -68,25 +66,67 @@ exports[`should render correctly 2`] = `
   </thead>
   <tbody>
     <tr
-      key="key"
+      key="definition1"
+    >
+      <td
+        className="nowrap hide-overflow"
+        title="definition1"
+      >
+        definition1
+      </td>
+      <td
+        className="nowrap hide-overflow"
+        key="def1-v1"
+        title="def1-v1"
+      >
+        def1-v1
+      </td>
+      <td
+        className="nowrap hide-overflow"
+        key="def1-v2"
+        title="def1-v2"
+      >
+        def1-v2
+      </td>
+      <td
+        className="text-center"
+      >
+        <ButtonIcon
+          onClick={[Function]}
+        >
+          <EditIcon />
+        </ButtonIcon>
+      </td>
+      <td
+        className="text-center"
+      >
+        <DeleteButton
+          onClick={[Function]}
+        />
+      </td>
+    </tr>
+    <tr
+      key="definition2"
     >
       <td
         className="nowrap hide-overflow"
-        title="key"
+        title="definition2"
       >
-        key
+        definition2
       </td>
       <td
         className="nowrap hide-overflow"
-        title="http://github.enterprise.com"
+        key="def2-v1"
+        title="def2-v1"
       >
-        http://github.enterprise.com
+        def2-v1
       </td>
       <td
         className="nowrap hide-overflow"
-        title="123456"
+        key="def2-v2"
+        title="def2-v2"
       >
-        123456
+        def2-v2
       </td>
       <td
         className="text-center"
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 8e5d8722a57..2318d371dac 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
@@ -10,7 +10,9 @@ exports[`should render correctly 1`] = `
     loading={true}
     timeout={100}
   >
-    <AzureTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="azure"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -29,7 +31,9 @@ exports[`should render correctly 2`] = `
     loading={false}
     timeout={100}
   >
-    <AzureTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="azure"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -48,7 +52,9 @@ exports[`should render correctly 3`] = `
     loading={false}
     timeout={100}
   >
-    <AzureTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={Array []}
+      alm="azure"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTable-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTable-test.tsx.snap
deleted file mode 100644
index 167cec1a957..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/AzureTable-test.tsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<table
-  className="data zebra fixed spacer-bottom"
->
-  <thead>
-    <tr>
-      <th>
-        settings.pr_decoration.table.column.name
-      </th>
-      <th
-        className="action-small text-center"
-      >
-        settings.pr_decoration.table.column.edit
-      </th>
-      <th
-        className="action text-center"
-      >
-        settings.pr_decoration.table.column.delete
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td
-        colSpan={3}
-      >
-        settings.pr_decoration.table.empty.azure
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`should render correctly 2`] = `
-<table
-  className="data zebra fixed spacer-bottom"
->
-  <thead>
-    <tr>
-      <th>
-        settings.pr_decoration.table.column.name
-      </th>
-      <th
-        className="action-small text-center"
-      >
-        settings.pr_decoration.table.column.edit
-      </th>
-      <th
-        className="action text-center"
-      >
-        settings.pr_decoration.table.column.delete
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr
-      key="key"
-    >
-      <td
-        className="nowrap hide-overflow"
-        title="key"
-      >
-        key
-      </td>
-      <td
-        className="text-center"
-      >
-        <ButtonIcon
-          onClick={[Function]}
-        >
-          <EditIcon />
-        </ButtonIcon>
-      </td>
-      <td
-        className="text-center"
-      >
-        <DeleteButton
-          onClick={[Function]}
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
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 e8d9c8283b9..53fbc57bff4 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
@@ -10,7 +10,13 @@ exports[`should render correctly 1`] = `
     loading={true}
     timeout={100}
   >
-    <BitbucketTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.bitbucket.url",
+        ]
+      }
+      alm="bitbucket"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -29,7 +35,13 @@ exports[`should render correctly 2`] = `
     loading={false}
     timeout={100}
   >
-    <BitbucketTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.bitbucket.url",
+        ]
+      }
+      alm="bitbucket"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -48,7 +60,13 @@ exports[`should render correctly 3`] = `
     loading={false}
     timeout={100}
   >
-    <BitbucketTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.bitbucket.url",
+        ]
+      }
+      alm="bitbucket"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTable-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTable-test.tsx.snap
deleted file mode 100644
index 8af449d84b7..00000000000
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecoration/__tests__/__snapshots__/BitbucketTable-test.tsx.snap
+++ /dev/null
@@ -1,98 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<table
-  className="data zebra fixed spacer-bottom"
->
-  <thead>
-    <tr>
-      <th>
-        settings.pr_decoration.table.column.name
-      </th>
-      <th>
-        settings.pr_decoration.table.column.bitbucket.url
-      </th>
-      <th
-        className="action-small text-center"
-      >
-        settings.pr_decoration.table.column.edit
-      </th>
-      <th
-        className="action text-center"
-      >
-        settings.pr_decoration.table.column.delete
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td
-        colSpan={4}
-      >
-        settings.pr_decoration.table.empty.bitbucket
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`should render correctly 2`] = `
-<table
-  className="data zebra fixed spacer-bottom"
->
-  <thead>
-    <tr>
-      <th>
-        settings.pr_decoration.table.column.name
-      </th>
-      <th>
-        settings.pr_decoration.table.column.bitbucket.url
-      </th>
-      <th
-        className="action-small text-center"
-      >
-        settings.pr_decoration.table.column.edit
-      </th>
-      <th
-        className="action text-center"
-      >
-        settings.pr_decoration.table.column.delete
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr
-      key="key"
-    >
-      <td
-        className="nowrap hide-overflow"
-        title="key"
-      >
-        key
-      </td>
-      <td
-        className="nowrap hide-overflow"
-        title="http://bbs.enterprise.com"
-      >
-        http://bbs.enterprise.com
-      </td>
-      <td
-        className="text-center"
-      >
-        <ButtonIcon
-          onClick={[Function]}
-        >
-          <EditIcon />
-        </ButtonIcon>
-      </td>
-      <td
-        className="text-center"
-      >
-        <DeleteButton
-          onClick={[Function]}
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
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 f37d1b20090..2722fbecd81 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
@@ -10,7 +10,14 @@ exports[`should render correctly 1`] = `
     loading={true}
     timeout={100}
   >
-    <GithubTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.github.url",
+          "settings.pr_decoration.table.column.app_id",
+        ]
+      }
+      alm="github"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -29,7 +36,14 @@ exports[`should render correctly 2`] = `
     loading={false}
     timeout={100}
   >
-    <GithubTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.github.url",
+          "settings.pr_decoration.table.column.app_id",
+        ]
+      }
+      alm="github"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -48,7 +62,14 @@ exports[`should render correctly 3`] = `
     loading={false}
     timeout={100}
   >
-    <GithubTable
+    <AlmPRDecorationTable
+      additionalColumnsHeaders={
+        Array [
+          "settings.pr_decoration.table.column.github.url",
+          "settings.pr_decoration.table.column.app_id",
+        ]
+      }
+      alm="github"
       definitions={Array []}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}