Merge branch 'rj/health-status-widget' into 'master'

Refactor health status widget to use Apollo

See merge request gitlab-org/gitlab!65620

app/assets/javascripts/issue_show/queries/update_issue.mutation.graphql

 mutation updateIssue($input: UpdateIssueInput!) {
   updateIssue(input: $input) {
+    issuable: issue {
+      id
+      state
+    }
     errors
   }
 }

app/assets/javascripts/sidebar/queries/updateStatus.mutation.graphql

 mutation($projectPath: ID!, $iid: String!, $healthStatus: HealthStatus) {
   updateIssue(input: { projectPath: $projectPath, iid: $iid, healthStatus: $healthStatus }) {
-    issue {
+    issuable: issue {
+      id
       healthStatus
     }
     errors

app/helpers/issuables_helper.rb

@@ -425,6 +425,15 @@ module IssuablesHelper
     }
   end
 
+  def sidebar_status_data(issuable_sidebar, project)
+    {
+      iid: issuable_sidebar[:iid],
+      issuable_type: issuable_sidebar[:type],
+      full_path: project.full_path,
+      can_edit: issuable_sidebar.dig(:current_user, :can_edit).to_s
+    }
+  end
+
   def parent
     @project || @group
   end

app/views/shared/issuable/_sidebar.html.haml

@@ -58,7 +58,7 @@
         #js-severity
 
       - if issuable_sidebar.dig(:features_available, :health_status)
-        .js-sidebar-status-entry-point
+        .js-sidebar-status-entry-point{ data: sidebar_status_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar.has_key?(:confidential)
         %script#js-confidential-issue-data{ type: "application/json" }= { is_confidential: issuable_sidebar[:confidential], is_editable: can_edit_issuable }.to_json.html_safe

ee/app/assets/javascripts/sidebar/components/status/sidebar_status.vue

 <script>
-import { mapGetters } from 'vuex';
 import createFlash from '~/flash';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { OPENED, REOPENED } from '~/notes/constants';
+import { healthStatusQueries } from '../../constants';
 import Status from './status.vue';
 
 export default {
@@ -10,27 +10,94 @@ export default {
     Status,
   },
   props: {
-    mediator: {
+    issuableType: {
+      type: String,
+      required: true,
+    },
+    iid: {
+      type: String,
+      required: true,
+    },
+    fullPath: {
+      type: String,
       required: true,
-      type: Object,
-      validator(mediatorObject) {
-        return Boolean(mediatorObject.store);
-      },
+    },
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
   },
   computed: {
-    ...mapGetters(['getNoteableData']),
     isOpen() {
-      return this.getNoteableData.state === OPENED || this.getNoteableData.state === REOPENED;
+      return this.issuableData?.state === OPENED || this.issuableData?.state === REOPENED;
+    },
+    isLoading() {
+      return this.$apollo.queries.issuableData.loading;
+    },
+    healthStatus() {
+      return this.issuableData?.healthStatus;
+    },
+  },
+  apollo: {
+    issuableData: {
+      query() {
+        return healthStatusQueries[this.issuableType].query;
+      },
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+        };
+      },
+      update(data) {
+        return {
+          healthStatus: data.workspace?.issuable?.healthStatus,
+          state: data.workspace?.issuable?.state,
+        };
+      },
+      result({ data }) {
+        this.$emit('issuableData', {
+          healthStatus: data.workspace?.issuable?.healthStatus,
+          state: data.workspace?.issuable?.state,
+        });
+      },
+      error() {
+        createFlash({
+          message: sprintf(
+            __('Something went wrong while setting %{issuableType} health status.'),
+            {
+              issuableType: this.issuableType,
+            },
+          ),
+        });
+      },
     },
   },
   methods: {
     handleDropdownClick(status) {
-      this.mediator.updateStatus(status).catch(() => {
-        createFlash({
-          message: __('Error occurred while updating the issue status'),
+      return this.$apollo
+        .mutate({
+          mutation: healthStatusQueries[this.issuableType].mutation,
+          variables: {
+            projectPath: this.fullPath,
+            iid: this.iid,
+            healthStatus: status,
+          },
+        })
+        .then(({ data: { updateIssue } = {} } = {}) => {
+          const error = updateIssue?.errors[0];
+          if (error) {
+            createFlash({ message: error });
+          }
+        })
+        .catch(() => {
+          createFlash({
+            message: sprintf(__('Error occurred while updating the %{issuableType} status'), {
+              issuableType: this.issuableType,
+            }),
+          });
         });
-      });
     },
   },
 };
@@ -39,9 +106,9 @@ export default {
 <template>
   <status
     :is-open="isOpen"
-    :is-editable="mediator.store.editable"
-    :is-fetching="mediator.store.isFetching.status"
-    :status="mediator.store.status"
+    :is-editable="canUpdate"
+    :is-fetching="isLoading"
+    :status="healthStatus"
     @onDropdownClick="handleDropdownClick"
   />
 </template>

ee/app/assets/javascripts/sidebar/constants.js

@@ -5,9 +5,11 @@ import {
   IssuableAttributeState as IssuableAttributeStateFoss,
   issuableAttributesQueries as issuableAttributesQueriesFoss,
 } from '~/sidebar/constants';
+import updateStatusMutation from '~/sidebar/queries/updateStatus.mutation.graphql';
 import epicAncestorsQuery from './queries/epic_ancestors.query.graphql';
 import groupEpicsQuery from './queries/group_epics.query.graphql';
 import groupIterationsQuery from './queries/group_iterations.query.graphql';
+import issueHealthStatusQuery from './queries/issue_health_status.query.graphql';
 import issueWeightQuery from './queries/issue_weight.query.graphql';
 import projectIssueEpicMutation from './queries/project_issue_epic.mutation.graphql';
 import projectIssueEpicQuery from './queries/project_issue_epic.query.graphql';
@@ -137,3 +139,14 @@ export const weightQueries = {
     mutation: updateIssueWeightMutation,
   },
 };
+
+export const healthStatusQueries = {
+  [IssuableType.Issue]: {
+    mutation: updateStatusMutation,
+    query: issueHealthStatusQuery,
+  },
+  [IssuableType.Epic]: {
+    mutation: updateStatusMutation,
+    query: issueHealthStatusQuery,
+  },
+};

ee/app/assets/javascripts/sidebar/mount_sidebar.js

@@ -42,15 +42,18 @@ const mountWeightComponent = () => {
   });
 };
 
-const mountStatusComponent = (mediator) => {
+const mountStatusComponent = () => {
   const el = document.querySelector('.js-sidebar-status-entry-point');
 
   if (!el) {
     return false;
   }
 
+  const { iid, fullPath, issuableType, canEdit } = el.dataset;
+
   return new Vue({
     el,
+    apolloProvider,
     store,
     components: {
       SidebarStatus,
@@ -58,7 +61,10 @@ const mountStatusComponent = (mediator) => {
     render: (createElement) =>
       createElement('sidebar-status', {
         props: {
-          mediator,
+          issuableType,
+          iid,
+          fullPath,
+          canUpdate: parseBoolean(canEdit),
         },
       }),
   });

ee/app/assets/javascripts/sidebar/queries/issue_health_status.query.graphql

+query issueHealthStatus($fullPath: ID!, $iid: String) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    issuable: issue(iid: $iid) {
+      __typename
+      id
+      healthStatus
+      state
+    }
+  }
+}

ee/app/assets/javascripts/sidebar/sidebar_mediator.js

 import Store from 'ee/sidebar/stores/sidebar_store';
-import updateStatusMutation from '~/sidebar/queries/updateStatus.mutation.graphql';
 import CESidebarMediator from '~/sidebar/sidebar_mediator';
 
 export default class SidebarMediator extends CESidebarMediator {
@@ -28,20 +27,4 @@ export default class SidebarMediator extends CESidebarMediator {
         throw err;
       });
   }
-
-  updateStatus(healthStatus) {
-    this.store.setFetchingState('status', true);
-    return this.service
-      .updateWithGraphQl(updateStatusMutation, { healthStatus })
-      .then(({ data }) => {
-        if (data?.updateIssue?.errors?.length > 0) {
-          throw data.updateIssue.errors[0];
-        }
-        this.store.setStatus(data?.updateIssue?.issue?.healthStatus);
-      })
-      .catch((error) => {
-        throw error;
-      })
-      .finally(() => this.store.setFetchingState('status', false));
-  }
 }

ee/spec/frontend/sidebar/components/status/mock_data.js

+export const getHealthStatusMutationResponse = ({ healthStatus = null }) => {
+  return {
+    data: {
+      updateIssue: {
+        issuable: { id: 'gid://gitlab/Issue/1', healthStatus, __typename: 'Issue' },
+        errors: [],
+        __typename: 'UpdateIssuePayload',
+      },
+    },
+  };
+};
+
+export const getHealthStatusQueryResponse = ({ state = 'opened', healthStatus = null }) => {
+  return {
+    data: {
+      workspace: {
+        issuable: { id: 'gid://gitlab/Issue/1', state, healthStatus, __typename: 'Issue' },
+        __typename: 'Project',
+      },
+    },
+  };
+};

ee/spec/frontend/sidebar/components/status/sidebar_status_spec.js

-import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import SidebarStatus from 'ee/sidebar/components/status/sidebar_status.vue';
 import Status from 'ee/sidebar/components/status/status.vue';
+import { healthStatusQueries } from 'ee/sidebar/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { getHealthStatusMutationResponse, getHealthStatusQueryResponse } from './mock_data';
 
-Vue.use(Vuex);
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const createQueryHandler = ({ state, healthStatus }) =>
+  jest.fn().mockResolvedValue(getHealthStatusQueryResponse({ state, healthStatus }));
+const createMutationHandler = ({ healthStatus }) =>
+  jest.fn().mockResolvedValue(getHealthStatusMutationResponse({ healthStatus }));
+
+let queryHandler;
+let mutationHandler;
+
+function createMockApolloProvider({ healthStatus, state }) {
+  queryHandler = createQueryHandler({ healthStatus, state });
+  mutationHandler = createMutationHandler({ healthStatus });
+  return createMockApollo([
+    [healthStatusQueries.issue.query, queryHandler],
+    [healthStatusQueries.issue.mutation, mutationHandler],
+  ]);
+}
 
 describe('SidebarStatus', () => {
-  let mediator;
   let wrapper;
 
-  const createMediator = (states) => {
-    mediator = {
-      updateStatus: jest.fn().mockResolvedValue(),
-      store: {
-        isFetching: {
-          status: true,
-        },
-        status: '',
-        ...states,
-      },
-    };
-  };
-
-  const createWrapper = ({ noteableState } = {}) => {
-    const store = new Vuex.Store({
-      getters: {
-        getNoteableData: () => ({ state: noteableState }),
-      },
-    });
+  const createWrapper = ({
+    issuableType = 'issue',
+    state = 'opened',
+    healthStatus = 'onTrack',
+  } = {}) => {
     wrapper = shallowMount(SidebarStatus, {
+      localVue,
       propsData: {
-        mediator,
+        issuableType,
+        iid: '1',
+        fullPath: 'foo/bar',
+        canUpdate: true,
       },
-      store,
+      apolloProvider: createMockApolloProvider({ healthStatus, state }),
     });
   };
 
   beforeEach(() => {
-    createMediator();
-    createWrapper({
-      getters: {
-        getNoteableData: {},
-      },
-    });
+    createWrapper();
   });
 
   afterEach(() => {
@@ -53,17 +57,16 @@ describe('SidebarStatus', () => {
 
   describe('computed', () => {
     describe.each`
-      noteableState | isOpen
+      state         | isOpen
       ${'opened'}   | ${true}
       ${'reopened'} | ${true}
       ${'closed'}   | ${false}
-    `('isOpen', ({ noteableState, isOpen }) => {
+    `('isOpen', ({ state, isOpen }) => {
       beforeEach(() => {
-        createMediator({ editable: true });
-        createWrapper({ noteableState });
+        createWrapper({ state });
       });
 
-      it(`returns ${isOpen} when issue is ${noteableState}`, () => {
+      it(`returns ${isOpen} when issue is ${state}`, () => {
         expect(wrapper.vm.isOpen).toBe(isOpen);
       });
     });
@@ -76,10 +79,16 @@ describe('SidebarStatus', () => {
       expect(wrapper.find(Status).exists()).toBe(true);
     });
 
-    it('calls mediator status update when receiving an onDropdownClick event from Status component', () => {
+    it('calls apollo mutate when receiving an onDropdownClick event from Status component', () => {
       wrapper.find(Status).vm.$emit('onDropdownClick', 'onTrack');
 
-      expect(mediator.updateStatus).toHaveBeenCalledWith('onTrack');
+      const variables = {
+        projectPath: 'foo/bar',
+        iid: '1',
+        healthStatus: 'onTrack',
+      };
+
+      expect(mutationHandler).toHaveBeenCalledWith(expect.objectContaining(variables));
     });
   });
 });

ee/spec/frontend/sidebar/ee_sidebar_mediator_spec.js

 import SidebarMediator from 'ee/sidebar/sidebar_mediator';
-import waitForPromises from 'helpers/wait_for_promises';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import CESidebarMediator from '~/sidebar/sidebar_mediator';
 import CESidebarStore from '~/sidebar/stores/sidebar_store';
@@ -27,28 +26,4 @@ describe('EE Sidebar mediator', () => {
     expect(mediator.store.weight).toBe(mockData.weight);
     expect(mediator.store.status).toBe(mockGraphQlData.project.issue.healthStatus);
   });
-
-  it('updates status when updateStatus is called', () => {
-    const healthStatus = 'onTrack';
-
-    jest.spyOn(mediator.service, 'updateWithGraphQl').mockReturnValue(
-      Promise.resolve({
-        data: {
-          updateIssue: {
-            issue: {
-              healthStatus,
-            },
-          },
-        },
-      }),
-    );
-
-    expect(mediator.store.status).toBe('');
-
-    mediator.updateStatus(healthStatus);
-
-    return waitForPromises().then(() => {
-      expect(mediator.store.status).toBe(healthStatus);
-    });
-  });
 });

locale/gitlab.pot

@@ -12855,6 +12855,9 @@ msgstr ""
 msgid "Error occurred when saving reviewers"
 msgstr ""
 
+msgid "Error occurred while updating the %{issuableType} status"
+msgstr ""
+
 msgid "Error occurred while updating the issue status"
 msgstr ""
 
@@ -30536,6 +30539,9 @@ msgstr ""
 msgid "Something went wrong while setting %{issuableType} confidentiality."
 msgstr ""
 
+msgid "Something went wrong while setting %{issuableType} health status."
+msgstr ""
+
 msgid "Something went wrong while setting %{issuableType} notifications."
 msgstr ""