Converted missing branch component to use GraphQL

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/235711

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue

@@ -2,6 +2,9 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import statusIcon from '../mr_widget_status_icon.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import missingBranchQuery from '../../queries/states/missing_branch.query.graphql';
 
 export default {
   name: 'MRWidgetMissingBranch',
@@ -12,15 +15,38 @@ export default {
     GlIcon,
     statusIcon,
   },
+  mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
+  apollo: {
+    state: {
+      query: missingBranchQuery,
+      skip() {
+        return !this.glFeatures.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: data => data.project.mergeRequest,
+    },
+  },
   props: {
     mr: {
       type: Object,
       required: true,
     },
   },
+  data() {
+    return { state: {} };
+  },
   computed: {
+    sourceBranchRemoved() {
+      if (this.glFeatures.mergeRequestWidgetGraphql) {
+        return !this.state.sourceBranchExists;
+      }
+
+      return this.mr.sourceBranchRemoved;
+    },
     missingBranchName() {
-      return this.mr.sourceBranchRemoved ? 'source' : 'target';
+      return this.sourceBranchRemoved ? 'source' : 'target';
     },
     missingBranchNameMessage() {
       return sprintf(
@@ -49,7 +75,7 @@ export default {
 
     <div class="media-body space-children">
       <span class="bold js-branch-text">
-        <span class="capitalize"> {{ missingBranchName }} </span>
+        <span class="capitalize" data-testid="missingBranchName"> {{ missingBranchName }} </span>
         {{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
         <gl-icon v-gl-tooltip :title="message" :aria-label="message" name="question-o" />
       </span>

app/assets/javascripts/vue_merge_request_widget/queries/states/missing_branch.query.graphql

+query missingBranchQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      sourceBranchExists
+    }
+  }
+}

spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js

-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
-
-describe('MRWidgetMissingBranch', () => {
-  let vm;
-
-  beforeEach(() => {
-    const Component = Vue.extend(missingBranchComponent);
-    vm = mountComponent(Component, { mr: { sourceBranchRemoved: true } });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
+import { shallowMount } from '@vue/test-utils';
+import MissingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
+
+let wrapper;
+
+function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
+  wrapper = shallowMount(MissingBranchComponent, {
+    propsData: {
+      mr: { sourceBranchRemoved },
+    },
+    provide: {
+      glFeatures: { mergeRequestWidgetGraphql },
+    },
   });
 
-  describe('computed', () => {
-    describe('missingBranchName', () => {
-      it('should return proper branch name', () => {
-        expect(vm.missingBranchName).toEqual('source');
+  if (mergeRequestWidgetGraphql) {
+    wrapper.setData({ state: { sourceBranchExists: !sourceBranchRemoved } });
+  }
 
-        vm.mr.sourceBranchRemoved = false;
+  return wrapper.vm.$nextTick();
+}
 
-        expect(vm.missingBranchName).toEqual('target');
-      });
-    });
+describe('MRWidgetMissingBranch', () => {
+  afterEach(() => {
+    wrapper.destroy();
   });
 
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const el = vm.$el;
-      const content = el.textContent.replace(/\n(\s)+/g, ' ').trim();
-
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(content.replace(/\s\s+/g, ' ')).toContain('source branch does not exist.');
-      expect(content).toContain('Please restore it or use a different source branch');
+  [true, false].forEach(mergeRequestWidgetGraphql => {
+    describe(`widget GraphQL feature flag is ${
+      mergeRequestWidgetGraphql ? 'enabled' : 'disabled'
+    }`, () => {
+      it.each`
+        sourceBranchRemoved | branchName
+        ${true}             | ${'source'}
+        ${false}            | ${'target'}
+      `(
+        'should set missing branch name as $branchName when sourceBranchRemoved is $sourceBranchRemoved',
+        async ({ sourceBranchRemoved, branchName }) => {
+          await factory(sourceBranchRemoved, mergeRequestWidgetGraphql);
+
+          expect(wrapper.find('[data-testid="missingBranchName"]').text()).toContain(branchName);
+        },
+      );
     });
   });
 });