Merge branch 'ph/467953/addCheckingStateToMergeChecksComponent' into 'master'

Added checking state to the merge checks component

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167895



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Reviewed-by: Jose Ivan Vargas <jvargas@gitlab.com>
Reviewed-by: Duo Code Reviewer <duo-code-review-bot@gitlab.com>
Co-authored-by: Phil Hughes <me@iamphill.com>

app/assets/javascripts/vue_merge_request_widget/components/checks/message.vue

 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import StatusIcon from '../widget/status_icon.vue';
 import { FAILURE_REASONS } from './constants';
 
@@ -12,6 +13,7 @@ const ICON_NAMES = {
 export default {
   name: 'MergeChecksMessage',
   components: {
+    GlLoadingIcon,
     StatusIcon,
   },
   props: {
@@ -39,7 +41,14 @@ export default {
 <template>
   <div class="gl-py-3 gl-pl-7 gl-pr-4">
     <div class="gl-flex">
-      <status-icon :icon-name="iconName" :level="2" />
+      <gl-loading-icon
+        v-if="check.status === 'CHECKING'"
+        size="sm"
+        inline
+        class="mr-widget-check-checking gl-mr-3 gl-self-center"
+        data-testid="checking-icon"
+      />
+      <status-icon v-else :icon-name="iconName" :level="2" />
       <div class="gl-w-full gl-min-w-0">
         <div class="gl-flex">{{ failureReason }}</div>
       </div>

app/assets/javascripts/vue_merge_request_widget/components/merge_checks.stories.js

@@ -20,7 +20,7 @@ const defaultRender = (apolloProvider) => ({
   template: '<merge-checks :mr="mr" :service="service" />',
 });
 
-const Template = ({ canMerge, failed, pushToSourceBranch }) => {
+const Template = ({ canMerge, failed, checking, pushToSourceBranch }) => {
   const requestHandlers = [
     [
       mergeChecksQuery,
@@ -42,8 +42,8 @@ const Template = ({ canMerge, failed, pushToSourceBranch }) => {
                     status: failed ? 'FAILED' : 'SUCCESS',
                   },
                   {
-                    identifier: 'DRAFT_STATUS',
-                    status: failed ? 'FAILED' : 'SUCCESS',
+                    identifier: 'NOT_APPROVED',
+                    status: checking ? 'CHECKING' : 'SUCCESS',
                   },
                 ],
               },
@@ -82,7 +82,7 @@ const LoadingTemplate = () => {
 };
 
 export const Default = Template.bind({});
-Default.args = { canMerge: true, failed: true, pushToSourceBranch: true };
+Default.args = { canMerge: true, failed: true, checking: false, pushToSourceBranch: true };
 
 export const Loading = LoadingTemplate.bind({});
 Loading.args = {};

app/assets/javascripts/vue_merge_request_widget/components/merge_checks.vue

@@ -82,6 +82,10 @@ export default {
         return 'warning';
       }
 
+      if (this.checkingMergeChecks.length) {
+        return 'loading';
+      }
+
       return this.failedChecks.length ? 'failed' : 'success';
     },
     summaryText() {
@@ -91,6 +95,10 @@ export default {
           : __('%{boldStart}Ready to be merged with caution%{boldEnd}: Override added');
       }
 
+      if (this.checkingMergeChecks.length) {
+        return __('Checking if merge request can be merged...');
+      }
+
       if (!this.failedChecks.length) {
         return this.state?.userPermissions?.canMerge
           ? __('%{boldStart}Ready to merge!%{boldEnd}')
@@ -112,16 +120,19 @@ export default {
       return this.state?.mergeabilityChecks || [];
     },
     sortedChecks() {
-      const order = ['FAILED', 'WARNING', 'SUCCESS'];
+      const order = ['CHECKING', 'FAILED', 'WARNING', 'SUCCESS'];
 
       return [...this.checks]
         .filter((s) => {
           if (this.isStatusInactive(s) || !this.hasMessage(s)) return false;
 
-          return this.collapsed ? this.isStatusFailed(s) : true;
+          return this.collapsed ? this.isStatusFailed(s) || this.isStatusChecking(s) : true;
         })
         .sort((a, b) => order.indexOf(a.status) - order.indexOf(b.status));
     },
+    checkingMergeChecks() {
+      return this.checks.filter((c) => this.isStatusChecking(c));
+    },
     failedChecks() {
       return this.checks.filter((c) => this.isStatusFailed(c));
     },
@@ -129,7 +140,7 @@ export default {
       return this.checks.filter((c) => this.isStatusWarning(c));
     },
     showChecks() {
-      return this.failedChecks.length > 0 || !this.collapsed;
+      return this.failedChecks.length > 0 || this.checkingMergeChecks.length || !this.collapsed;
     },
   },
   methods: {
@@ -151,6 +162,9 @@ export default {
     isStatusWarning(check) {
       return check.status === 'WARNING';
     },
+    isStatusChecking(check) {
+      return check.status === 'CHECKING';
+    },
   },
 };
 </script>

app/assets/stylesheets/page_bundles/merge_request.scss

@@ -292,3 +292,9 @@ $comparison-empty-state-height: 62px;
     width: 100%;
   }
 }
+
+// stylelint-disable-next-line gitlab/no-gl-class --- We need a slightly smaller spinner to fit the design
+.mr-widget-check-checking .gl-spinner {
+  width: 12px;
+  height: 12px;
+}

locale/gitlab.pot

@@ -11234,6 +11234,9 @@ msgstr ""
 msgid "Checking group path availability..."
 msgstr ""
+msgid "Checking if merge request can be merged..."
+msgstr ""
+
 msgid "Checking username availability..."
 msgstr ""

spec/frontend/vue_merge_request_widget/components/checks/message_spec.js

@@ -46,4 +46,10 @@ describe('Merge request merge checks message component', () => {
 
     expect(wrapper.findComponent(StatusIcon).props('iconName')).toBe(icon);
   });
+
+  it('renders loading icon when status is CHECKING', () => {
+    factory({ check: { status: 'CHECKING', identifier: 'discussions_not_resolved' } });
+
+    expect(wrapper.findByTestId('checking-icon').exists()).toBe(true);
+  });
 });

spec/frontend/vue_merge_request_widget/components/merge_checks_spec.js

@@ -250,4 +250,27 @@ describe('Merge request merge checks component', () => {
       expect(findMergeChecks().length).toBe(1);
     });
   });
+
+  describe('checking merge checks', () => {
+    const findMergeChecks = () => wrapper.findAllByTestId('merge-check');
+
+    beforeEach(() => {
+      mountComponent({
+        mergeabilityChecks: [
+          { identifier: 'discussions_not_resolved', status: 'CHECKING' },
+          { identifier: 'not_approved', status: 'SUCCESS' },
+        ],
+      });
+
+      return waitForPromises();
+    });
+
+    it('renders checking text', () => {
+      expect(wrapper.text()).toBe('Checking if merge request can be merged...');
+    });
+
+    it('renders checks expanded by default', () => {
+      expect(findMergeChecks()).toHaveLength(1);
+    });
+  });
 });