From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Fri, 29 May 2020 15:03:57 +0000 (+0200)
Subject: SONAR-13494 Prevent ALM binding table from blinking when showing the delete modal
X-Git-Tag: 8.4.0.35506~111
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=bd08542fe3b12d6f8ca20d7f5323dccbb8158d33;p=sonarqube.git

SONAR-13494 Prevent ALM binding table from blinking when showing the delete modal
---

diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionsTable.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionsTable.tsx
index 65253c4d6e0..c1bcc5bb36f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionsTable.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionsTable.tsx
@@ -31,13 +31,14 @@ export interface AlmBindingDefinitionsTableProps {
     key: string;
     additionalColumns: Array<string>;
   }>;
+  loading: boolean;
   onCreate: () => void;
   onDelete: (definitionKey: string) => void;
   onEdit: (definitionKey: string) => void;
 }
 
 export default function AlmBindingDefinitionsTable(props: AlmBindingDefinitionsTableProps) {
-  const { additionalColumnsHeaders, additionalTableInfo, alm, definitions } = props;
+  const { additionalColumnsHeaders, additionalTableInfo, alm, definitions, loading } = props;
 
   return (
     <>
@@ -45,7 +46,7 @@ export default function AlmBindingDefinitionsTable(props: AlmBindingDefinitionsT
         <h2 className="settings-sub-category-name">
           {translate('settings.almintegration.table.title')}
         </h2>
-        <Button data-test="settings__alm-create" onClick={props.onCreate}>
+        <Button data-test="settings__alm-create" disabled={loading} onClick={props.onCreate}>
           {translate('settings.almintegration.table.create')}
         </Button>
       </div>
@@ -86,12 +87,12 @@ export default function AlmBindingDefinitionsTable(props: AlmBindingDefinitionsT
                   </td>
                 ))}
                 <td className="text-center" data-test="settings__alm-table-row-edit">
-                  <ButtonIcon onClick={() => props.onEdit(key)}>
+                  <ButtonIcon disabled={loading} onClick={() => props.onEdit(key)}>
                     <EditIcon />
                   </ButtonIcon>
                 </td>
                 <td className="text-center" data-test="settings__alm-table-row-delete">
-                  <DeleteButton onClick={() => props.onDelete(key)} />
+                  <DeleteButton disabled={loading} onClick={() => props.onDelete(key)} />
                 </td>
               </tr>
             ))
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
index ee060e8f2bf..247abe17d20 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
@@ -36,7 +36,8 @@ interface State {
   currentAlm: AlmKeys;
   definitionKeyForDeletion?: string;
   definitions: AlmSettingsBindingDefinitions;
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   projectCount?: number;
 }
 
@@ -50,7 +51,8 @@ export class AlmIntegration extends React.PureComponent<Props, State> {
       [AlmKeys.GitHub]: [],
       [AlmKeys.GitLab]: []
     },
-    loading: true
+    loadingAlmDefinitions: true,
+    loadingProjectCount: false
   };
 
   componentDidMount() {
@@ -81,19 +83,19 @@ export class AlmIntegration extends React.PureComponent<Props, State> {
       return Promise.resolve();
     }
 
-    this.setState({ loading: true });
+    this.setState({ loadingAlmDefinitions: true });
     return getAlmDefinitions()
       .then(definitions => {
         if (this.mounted) {
           this.setState({
             definitions,
-            loading: false
+            loadingAlmDefinitions: false
           });
         }
       })
       .catch(() => {
         if (this.mounted) {
-          this.setState({ loading: false });
+          this.setState({ loadingAlmDefinitions: false });
         }
       });
   };
@@ -107,20 +109,20 @@ export class AlmIntegration extends React.PureComponent<Props, State> {
   };
 
   handleDelete = (definitionKey: string) => {
-    this.setState({ loading: true });
+    this.setState({ loadingProjectCount: true });
     return countBindedProjects(definitionKey)
       .then(projectCount => {
         if (this.mounted) {
           this.setState({
             definitionKeyForDeletion: definitionKey,
-            loading: false,
+            loadingProjectCount: false,
             projectCount
           });
         }
       })
       .catch(() => {
         if (this.mounted) {
-          this.setState({ loading: false });
+          this.setState({ loadingProjectCount: false });
         }
       });
   };
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
index c5c64310a4f..16e8f95b1e5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
@@ -34,7 +34,8 @@ export interface AlmIntegrationRendererProps {
   currentAlm: AlmKeys;
   definitionKeyForDeletion?: string;
   definitions: AlmSettingsBindingDefinitions;
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onCancel: () => void;
   onConfirmDelete: (definitionKey: string) => void;
@@ -111,7 +112,8 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
     definitionKeyForDeletion,
     definitions,
     currentAlm,
-    loading,
+    loadingAlmDefinitions,
+    loadingProjectCount,
     branchesEnabled,
     multipleAlmEnabled,
     projectCount
@@ -135,7 +137,8 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
       {currentAlm === AlmKeys.Azure && (
         <AzureTab
           definitions={definitions.azure}
-          loading={loading}
+          loadingAlmDefinitions={loadingAlmDefinitions}
+          loadingProjectCount={loadingProjectCount}
           multipleAlmEnabled={multipleAlmEnabled}
           onDelete={props.onDelete}
           onUpdateDefinitions={props.onUpdateDefinitions}
@@ -144,7 +147,8 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
       {currentAlm === AlmKeys.Bitbucket && (
         <BitbucketTab
           definitions={definitions.bitbucket}
-          loading={loading}
+          loadingAlmDefinitions={loadingAlmDefinitions}
+          loadingProjectCount={loadingProjectCount}
           multipleAlmEnabled={multipleAlmEnabled}
           onDelete={props.onDelete}
           onUpdateDefinitions={props.onUpdateDefinitions}
@@ -155,7 +159,8 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
           branchesEnabled={branchesEnabled}
           component={component}
           definitions={definitions.github}
-          loading={loading}
+          loadingAlmDefinitions={loadingAlmDefinitions}
+          loadingProjectCount={loadingProjectCount}
           multipleAlmEnabled={multipleAlmEnabled}
           onDelete={props.onDelete}
           onUpdateDefinitions={props.onUpdateDefinitions}
@@ -165,7 +170,8 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
         <GitlabTab
           branchesEnabled={branchesEnabled}
           definitions={definitions.gitlab}
-          loading={loading}
+          loadingAlmDefinitions={loadingAlmDefinitions}
+          loadingProjectCount={loadingProjectCount}
           multipleAlmEnabled={multipleAlmEnabled}
           onDelete={props.onDelete}
           onUpdateDefinitions={props.onUpdateDefinitions}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
index c335671f6ba..ff6783180ab 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
@@ -34,7 +34,8 @@ interface Props<B> {
   features?: AlmIntegrationFeatureBoxProps[];
   form: (props: AlmBindingDefinitionFormChildrenProps<B>) => React.ReactNode;
   help?: React.ReactNode;
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
@@ -112,7 +113,8 @@ export default class AlmTab<B extends AlmBindingDefinition> extends React.PureCo
       features,
       form,
       help,
-      loading,
+      loadingAlmDefinitions,
+      loadingProjectCount,
       multipleAlmEnabled,
       optionalFields
     } = this.props;
@@ -130,7 +132,8 @@ export default class AlmTab<B extends AlmBindingDefinition> extends React.PureCo
         features={features}
         form={form}
         help={help}
-        loading={loading || submitting}
+        loadingAlmDefinitions={loadingAlmDefinitions}
+        loadingProjectCount={loadingProjectCount}
         multipleAlmEnabled={multipleAlmEnabled}
         onCancel={this.handleCancel}
         onCreate={this.handleCreate}
@@ -138,6 +141,7 @@ export default class AlmTab<B extends AlmBindingDefinition> extends React.PureCo
         onEdit={this.handleEdit}
         onSubmit={this.handleSubmit}
         optionalFields={optionalFields}
+        submitting={submitting}
         success={success}
       />
     );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
index 8f9feeabbed..7e946452002 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
@@ -42,7 +42,8 @@ export interface AlmTabRendererProps<B> {
   features?: AlmIntegrationFeatureBoxProps[];
   form: (props: AlmBindingDefinitionFormChildrenProps<B>) => React.ReactNode;
   help?: React.ReactNode;
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onCancel: () => void;
   onCreate: () => void;
@@ -50,6 +51,7 @@ export interface AlmTabRendererProps<B> {
   onEdit: (definitionKey: string) => void;
   onSubmit: (config: B, originalKey: string) => void;
   optionalFields?: Array<keyof B>;
+  submitting: boolean;
   success: boolean;
 }
 
@@ -66,9 +68,11 @@ export default function AlmTabRenderer<B extends AlmBindingDefinition>(
     editedDefinition,
     features = [],
     form,
-    loading,
+    loadingAlmDefinitions,
+    loadingProjectCount,
     multipleAlmEnabled,
     optionalFields,
+    submitting,
     success,
     help = (
       <FormattedMessage
@@ -108,12 +112,13 @@ export default function AlmTabRenderer<B extends AlmBindingDefinition>(
   return (
     <div className="big-padded">
       {multipleAlmEnabled ? (
-        <DeferredSpinner loading={loading}>
+        <DeferredSpinner loading={loadingAlmDefinitions}>
           <AlmBindingDefinitionsTable
             additionalColumnsHeaders={additionalColumnsHeaders}
             additionalTableInfo={additionalTableInfo}
             alm={alm}
             definitions={mappedDefinitions}
+            loading={loadingProjectCount}
             onCreate={props.onCreate}
             onDelete={props.onDelete}
             onEdit={props.onEdit}
@@ -136,7 +141,7 @@ export default function AlmTabRenderer<B extends AlmBindingDefinition>(
           bindingDefinition={definition || defaultBinding}
           help={help}
           hideKeyField={true}
-          loading={loading}
+          loading={loadingAlmDefinitions || loadingProjectCount || submitting}
           onCancel={props.onCancel}
           onDelete={definition ? props.onDelete : undefined}
           onEdit={showEdit ? props.onEdit : undefined}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
index bf2607a2396..b2d211ba787 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
@@ -26,14 +26,15 @@ import AzureForm from './AzureForm';
 
 export interface AzureTabProps {
   definitions: AzureBindingDefinition[];
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 export default function AzureTab(props: AzureTabProps) {
-  const { multipleAlmEnabled, definitions, loading } = props;
+  const { multipleAlmEnabled, definitions, loadingAlmDefinitions, loadingProjectCount } = props;
 
   return (
     <div className="bordered">
@@ -51,7 +52,8 @@ export default function AzureTab(props: AzureTabProps) {
           }
         ]}
         form={childProps => <AzureForm {...childProps} />}
-        loading={loading}
+        loadingAlmDefinitions={loadingAlmDefinitions}
+        loadingProjectCount={loadingProjectCount}
         multipleAlmEnabled={multipleAlmEnabled}
         onDelete={props.onDelete}
         onUpdateDefinitions={props.onUpdateDefinitions}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
index e7bf53d56e5..46a7f3d3548 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
@@ -32,14 +32,15 @@ import BitbucketForm from './BitbucketForm';
 
 export interface BitbucketTabProps {
   definitions: BitbucketBindingDefinition[];
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 export default function BitbucketTab(props: BitbucketTabProps) {
-  const { multipleAlmEnabled, definitions, loading } = props;
+  const { multipleAlmEnabled, definitions, loadingAlmDefinitions, loadingProjectCount } = props;
 
   return (
     <div className="bordered">
@@ -103,7 +104,8 @@ export default function BitbucketTab(props: BitbucketTabProps) {
             </p>
           </>
         }
-        loading={loading}
+        loadingAlmDefinitions={loadingAlmDefinitions}
+        loadingProjectCount={loadingProjectCount}
         multipleAlmEnabled={multipleAlmEnabled}
         onDelete={props.onDelete}
         onUpdateDefinitions={props.onUpdateDefinitions}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
index 07818aa6c8d..bdeb29f3c89 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
@@ -30,14 +30,22 @@ export interface GithubTabProps {
   branchesEnabled: boolean;
   component?: T.Component;
   definitions: GithubBindingDefinition[];
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 export default function GithubTab(props: GithubTabProps) {
-  const { branchesEnabled, component, multipleAlmEnabled, definitions, loading } = props;
+  const {
+    branchesEnabled,
+    component,
+    multipleAlmEnabled,
+    definitions,
+    loadingAlmDefinitions,
+    loadingProjectCount
+  } = props;
 
   return (
     <div className="bordered">
@@ -62,7 +70,8 @@ export default function GithubTab(props: GithubTabProps) {
               }
             ]}
             form={childProps => <GithubForm {...childProps} />}
-            loading={loading}
+            loadingAlmDefinitions={loadingAlmDefinitions}
+            loadingProjectCount={loadingProjectCount}
             multipleAlmEnabled={multipleAlmEnabled}
             onDelete={props.onDelete}
             onUpdateDefinitions={props.onUpdateDefinitions}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
index 7ca66c1ac51..e334f5d398b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
@@ -30,14 +30,22 @@ export interface GitlabTabProps {
   branchesEnabled: boolean;
   component?: T.Component;
   definitions: GitlabBindingDefinition[];
-  loading: boolean;
+  loadingAlmDefinitions: boolean;
+  loadingProjectCount: boolean;
   multipleAlmEnabled: boolean;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
 }
 
 export default function GitlabTab(props: GitlabTabProps) {
-  const { branchesEnabled, component, multipleAlmEnabled, definitions, loading } = props;
+  const {
+    branchesEnabled,
+    component,
+    multipleAlmEnabled,
+    definitions,
+    loadingAlmDefinitions,
+    loadingProjectCount
+  } = props;
 
   return (
     <div className="bordered">
@@ -61,7 +69,8 @@ export default function GitlabTab(props: GitlabTabProps) {
               }
             ]}
             form={childProps => <GitlabForm {...childProps} />}
-            loading={loading}
+            loadingAlmDefinitions={loadingAlmDefinitions}
+            loadingProjectCount={loadingProjectCount}
             multipleAlmEnabled={multipleAlmEnabled}
             onDelete={props.onDelete}
             onUpdateDefinitions={props.onUpdateDefinitions}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionsTable-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionsTable-test.tsx
index b75674c56c2..ab0455f10a9 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionsTable-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmBindingDefinitionsTable-test.tsx
@@ -36,6 +36,7 @@ it('should render correctly', () => {
       ]
     })
   ).toMatchSnapshot('additional columns');
+  expect(shallowRender()).toMatchSnapshot('loading');
   expect(shallowRender({ alm: AlmKeys.GitLab })).toMatchSnapshot('title adjusts for GitLab');
 });
 
@@ -69,6 +70,7 @@ function shallowRender(props: Partial<AlmBindingDefinitionsTableProps> = {}) {
       additionalColumnsHeaders={[]}
       alm={AlmKeys.Azure}
       definitions={[]}
+      loading={false}
       onCreate={jest.fn()}
       onDelete={jest.fn()}
       onEdit={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
index 1e6a791f8b5..4940b4370ab 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
@@ -85,7 +85,7 @@ it('should fetch settings', async () => {
     .then(() => {
       expect(getAlmDefinitions).toBeCalled();
       expect(wrapper.state().definitions).toEqual({ github: [] });
-      expect(wrapper.state().loading).toBe(false);
+      expect(wrapper.state().loadingAlmDefinitions).toBe(false);
     });
 });
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
index 1752860997f..c23e364d9c4 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
@@ -24,7 +24,9 @@ import AlmIntegrationRenderer, { AlmIntegrationRendererProps } from '../AlmInteg
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
-  expect(shallowRender({ loading: true })).toMatchSnapshot('loading');
+  expect(shallowRender({ loadingAlmDefinitions: true, loadingProjectCount: true })).toMatchSnapshot(
+    'loading'
+  );
   expect(shallowRender({ definitionKeyForDeletion: 'keyToDelete' })).toMatchSnapshot(
     'delete modal'
   );
@@ -39,7 +41,8 @@ function shallowRender(props: Partial<AlmIntegrationRendererProps> = {}) {
       branchesEnabled={true}
       currentAlm={AlmKeys.GitHub}
       definitions={{ azure: [], bitbucket: [], github: [], gitlab: [] }}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={false}
       onCancel={jest.fn()}
       onConfirmDelete={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
index a6172bb85bb..2b1a6c45835 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
@@ -98,7 +98,8 @@ function shallowRender(props: Partial<AlmTab<AzureBindingDefinition>['props']> =
       defaultBinding={DEFAULT_BINDING}
       definitions={[mockAzureBindingDefinition()]}
       form={jest.fn()}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
index 4514ccf263f..63b1a2b0258 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
@@ -24,7 +24,9 @@ import { AlmKeys, GithubBindingDefinition } from '../../../../../types/alm-setti
 import AlmTabRenderer, { AlmTabRendererProps } from '../AlmTabRenderer';
 
 it('should render correctly for multi-ALM binding', () => {
-  expect(shallowRender({ loading: true })).toMatchSnapshot('loading');
+  expect(shallowRender({ loadingAlmDefinitions: true })).toMatchSnapshot('loading ALM definitions');
+  expect(shallowRender({ loadingProjectCount: true })).toMatchSnapshot('loading project count');
+  expect(shallowRender({ submitting: true })).toMatchSnapshot('submitting');
   expect(shallowRender()).toMatchSnapshot('loaded');
   expect(shallowRender({ editedDefinition: mockGithubBindingDefinition() })).toMatchSnapshot(
     'editing a definition'
@@ -48,7 +50,9 @@ it('should render correctly for multi-ALM binding', () => {
 });
 
 it('should render correctly for single-ALM binding', () => {
-  expect(shallowRender({ loading: true, multipleAlmEnabled: false })).toMatchSnapshot();
+  expect(
+    shallowRender({ loadingAlmDefinitions: true, multipleAlmEnabled: false })
+  ).toMatchSnapshot();
   expect(shallowRender({ multipleAlmEnabled: false })).toMatchSnapshot();
   expect(
     shallowRender({ definitions: [mockGithubBindingDefinition()], multipleAlmEnabled: false })
@@ -64,13 +68,15 @@ function shallowRender(props: Partial<AlmTabRendererProps<GithubBindingDefinitio
       defaultBinding={mockGithubBindingDefinition()}
       definitions={[mockGithubBindingDefinition()]}
       form={jest.fn()}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onCancel={jest.fn()}
       onCreate={jest.fn()}
       onDelete={jest.fn()}
       onEdit={jest.fn()}
       onSubmit={jest.fn()}
+      submitting={true}
       success={false}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AzureTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AzureTab-test.tsx
index 5b2389dda7c..ef7fe85ee3d 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AzureTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AzureTab-test.tsx
@@ -30,7 +30,8 @@ function shallowRender(props: Partial<AzureTabProps> = {}) {
   return shallow(
     <AzureTab
       definitions={[mockAzureBindingDefinition()]}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/BitbucketTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/BitbucketTab-test.tsx
index d1bfdcc5d49..6f2854c2eef 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/BitbucketTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/BitbucketTab-test.tsx
@@ -30,7 +30,8 @@ function shallowRender(props: Partial<BitbucketTabProps> = {}) {
   return shallow(
     <BitbucketTab
       definitions={[mockBitbucketBindingDefinition()]}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GithubTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GithubTab-test.tsx
index 51f3ec73ee0..8aca94e7bd8 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GithubTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GithubTab-test.tsx
@@ -32,7 +32,8 @@ function shallowRender(props: Partial<GithubTabProps> = {}) {
     <GithubTab
       branchesEnabled={true}
       definitions={[mockGithubBindingDefinition()]}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GitlabTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GitlabTab-test.tsx
index 7d8d70c3b3c..619777dd30a 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GitlabTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/GitlabTab-test.tsx
@@ -32,7 +32,8 @@ function shallowRender(props: Partial<GitlabTabProps> = {}) {
     <GitlabTab
       branchesEnabled={true}
       definitions={[mockGitlabBindingDefinition()]}
-      loading={false}
+      loadingAlmDefinitions={false}
+      loadingProjectCount={false}
       multipleAlmEnabled={true}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionsTable-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionsTable-test.tsx.snap
index ff5dc35a333..3f2d55a204c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionsTable-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionsTable-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`should render correctly 1`] = `
     </h2>
     <Button
       data-test="settings__alm-create"
+      disabled={false}
       onClick={[MockFunction]}
     >
       settings.almintegration.table.create
@@ -64,6 +65,7 @@ exports[`should render correctly: additional columns 1`] = `
     </h2>
     <Button
       data-test="settings__alm-create"
+      disabled={false}
       onClick={[MockFunction]}
     >
       settings.almintegration.table.create
@@ -129,6 +131,7 @@ exports[`should render correctly: additional columns 1`] = `
           data-test="settings__alm-table-row-edit"
         >
           <ButtonIcon
+            disabled={false}
             onClick={[Function]}
           >
             <EditIcon />
@@ -139,6 +142,7 @@ exports[`should render correctly: additional columns 1`] = `
           data-test="settings__alm-table-row-delete"
         >
           <DeleteButton
+            disabled={false}
             onClick={[Function]}
           />
         </td>
@@ -172,6 +176,7 @@ exports[`should render correctly: additional columns 1`] = `
           data-test="settings__alm-table-row-edit"
         >
           <ButtonIcon
+            disabled={false}
             onClick={[Function]}
           >
             <EditIcon />
@@ -182,6 +187,7 @@ exports[`should render correctly: additional columns 1`] = `
           data-test="settings__alm-table-row-delete"
         >
           <DeleteButton
+            disabled={false}
             onClick={[Function]}
           />
         </td>
@@ -191,6 +197,59 @@ exports[`should render correctly: additional columns 1`] = `
 </Fragment>
 `;
 
+exports[`should render correctly: loading 1`] = `
+<Fragment>
+  <div
+    className="spacer-top big-spacer-bottom display-flex-space-between"
+  >
+    <h2
+      className="settings-sub-category-name"
+    >
+      settings.almintegration.table.title
+    </h2>
+    <Button
+      data-test="settings__alm-create"
+      disabled={false}
+      onClick={[MockFunction]}
+    >
+      settings.almintegration.table.create
+    </Button>
+  </div>
+  <table
+    className="data zebra fixed spacer-bottom"
+  >
+    <thead>
+      <tr>
+        <th>
+          settings.almintegration.table.column.name
+        </th>
+        <th
+          className="action-small text-center"
+        >
+          settings.almintegration.table.column.edit
+        </th>
+        <th
+          className="action text-center"
+        >
+          settings.almintegration.table.column.delete
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        data-test="settings__alm-empty-table"
+      >
+        <td
+          colSpan={3}
+        >
+          settings.almintegration.table.empty.azure
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</Fragment>
+`;
+
 exports[`should render correctly: title adjusts for GitLab 1`] = `
 <Fragment>
   <div
@@ -203,6 +262,7 @@ exports[`should render correctly: title adjusts for GitLab 1`] = `
     </h2>
     <Button
       data-test="settings__alm-create"
+      disabled={false}
       onClick={[MockFunction]}
     >
       settings.almintegration.table.create
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
index a056a472a84..c3ce1fad8ad 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
@@ -12,7 +12,8 @@ exports[`should render correctly 1`] = `
       "gitlab": Array [],
     }
   }
-  loading={true}
+  loadingAlmDefinitions={true}
+  loadingProjectCount={false}
   multipleAlmEnabled={false}
   onCancel={[Function]}
   onConfirmDelete={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
index 62430cb1471..8be88f64c3b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
@@ -76,7 +76,8 @@ exports[`should render correctly: azure 1`] = `
   />
   <AzureTab
     definitions={Array []}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
@@ -160,7 +161,8 @@ exports[`should render correctly: bitbucket 1`] = `
   />
   <BitbucketTab
     definitions={Array []}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
@@ -245,7 +247,8 @@ exports[`should render correctly: default 1`] = `
   <GithubTab
     branchesEnabled={true}
     definitions={Array []}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
@@ -330,7 +333,8 @@ exports[`should render correctly: delete modal 1`] = `
   <GithubTab
     branchesEnabled={true}
     definitions={Array []}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
@@ -420,7 +424,8 @@ exports[`should render correctly: gitlab 1`] = `
   <GitlabTab
     branchesEnabled={true}
     definitions={Array []}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
@@ -505,7 +510,8 @@ exports[`should render correctly: loading 1`] = `
   <GithubTab
     branchesEnabled={true}
     definitions={Array []}
-    loading={true}
+    loadingAlmDefinitions={true}
+    loadingProjectCount={true}
     multipleAlmEnabled={false}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
index 5d3f8507f61..e0e95f11057 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
@@ -20,13 +20,15 @@ exports[`should render correctly 1`] = `
     ]
   }
   form={[MockFunction]}
-  loading={false}
+  loadingAlmDefinitions={false}
+  loadingProjectCount={false}
   multipleAlmEnabled={true}
   onCancel={[Function]}
   onCreate={[Function]}
   onDelete={[MockFunction]}
   onEdit={[Function]}
   onSubmit={[Function]}
+  submitting={false}
   success={false}
 />
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
index 64f7ac5fa04..5f59a757faa 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
@@ -27,6 +27,7 @@ exports[`should render correctly for multi-ALM binding: editing a definition 1`]
           },
         ]
       }
+      loading={false}
       onCreate={[MockFunction]}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -95,6 +96,7 @@ exports[`should render correctly for multi-ALM binding: loaded 1`] = `
           },
         ]
       }
+      loading={false}
       onCreate={[MockFunction]}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -103,7 +105,7 @@ exports[`should render correctly for multi-ALM binding: loaded 1`] = `
 </div>
 `;
 
-exports[`should render correctly for multi-ALM binding: loading 1`] = `
+exports[`should render correctly for multi-ALM binding: loading ALM definitions 1`] = `
 <div
   className="big-padded"
 >
@@ -130,6 +132,79 @@ exports[`should render correctly for multi-ALM binding: loading 1`] = `
           },
         ]
       }
+      loading={false}
+      onCreate={[MockFunction]}
+      onDelete={[MockFunction]}
+      onEdit={[MockFunction]}
+    />
+  </DeferredSpinner>
+</div>
+`;
+
+exports[`should render correctly for multi-ALM binding: loading project count 1`] = `
+<div
+  className="big-padded"
+>
+  <DeferredSpinner
+    loading={false}
+    timeout={100}
+  >
+    <AlmBindingDefinitionsTable
+      additionalColumnsHeaders={
+        Array [
+          "url",
+          "app_id",
+        ]
+      }
+      alm="github"
+      definitions={
+        Array [
+          Object {
+            "additionalColumns": Array [
+              "http://github.enterprise.com",
+              "123456",
+            ],
+            "key": "key",
+          },
+        ]
+      }
+      loading={true}
+      onCreate={[MockFunction]}
+      onDelete={[MockFunction]}
+      onEdit={[MockFunction]}
+    />
+  </DeferredSpinner>
+</div>
+`;
+
+exports[`should render correctly for multi-ALM binding: submitting 1`] = `
+<div
+  className="big-padded"
+>
+  <DeferredSpinner
+    loading={false}
+    timeout={100}
+  >
+    <AlmBindingDefinitionsTable
+      additionalColumnsHeaders={
+        Array [
+          "url",
+          "app_id",
+        ]
+      }
+      alm="github"
+      definitions={
+        Array [
+          Object {
+            "additionalColumns": Array [
+              "http://github.enterprise.com",
+              "123456",
+            ],
+            "key": "key",
+          },
+        ]
+      }
+      loading={false}
       onCreate={[MockFunction]}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -165,6 +240,7 @@ exports[`should render correctly for multi-ALM binding: with features 1`] = `
           },
         ]
       }
+      loading={false}
       onCreate={[MockFunction]}
       onDelete={[MockFunction]}
       onEdit={[MockFunction]}
@@ -275,7 +351,7 @@ exports[`should render correctly for single-ALM binding 2`] = `
       />
     }
     hideKeyField={true}
-    loading={false}
+    loading={true}
     onCancel={[MockFunction]}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
@@ -320,7 +396,7 @@ exports[`should render correctly for single-ALM binding 3`] = `
       />
     }
     hideKeyField={true}
-    loading={false}
+    loading={true}
     onCancel={[MockFunction]}
     onDelete={[MockFunction]}
     onEdit={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureTab-test.tsx.snap
index b5eda86fe17..35b9a582a23 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AzureTab-test.tsx.snap
@@ -32,7 +32,8 @@ exports[`should render correctly 1`] = `
       ]
     }
     form={[Function]}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={true}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketTab-test.tsx.snap
index 35279875066..c09ac23275d 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/BitbucketTab-test.tsx.snap
@@ -102,7 +102,8 @@ exports[`should render correctly 1`] = `
         </p>
       </React.Fragment>
     }
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={true}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubTab-test.tsx.snap
index aaf2b45033d..bab4629b9d0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GithubTab-test.tsx.snap
@@ -48,7 +48,8 @@ exports[`should render correctly: with branch support 1`] = `
       ]
     }
     form={[Function]}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={true}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabTab-test.tsx.snap
index 92b5d755cdd..a039ff5b3ee 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/GitlabTab-test.tsx.snap
@@ -43,7 +43,8 @@ exports[`should render correctly: with branch support 1`] = `
       ]
     }
     form={[Function]}
-    loading={false}
+    loadingAlmDefinitions={false}
+    loadingProjectCount={false}
     multipleAlmEnabled={true}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}