Revert "Merge branch 'health-widget-apollo' into 'master'"

This reverts commit 9d839940, reversing
changes made to e20ad592.

app/helpers/issuables_helper.rb

@@ -425,15 +425,6 @@ 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

@@ -81,7 +81,7 @@
         #js-severity
 
       - if issuable_sidebar.dig(:features_available, :health_status)
-        .js-sidebar-status-entry-point{ data: sidebar_status_data(issuable_sidebar, @project) }
+        .js-sidebar-status-entry-point
 
       - 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 produce from 'immer';
+import { mapGetters } from 'vuex';
 import createFlash from '~/flash';
-import { __, sprintf } from '~/locale';
+import { __ } from '~/locale';
 import { OPENED, REOPENED } from '~/notes/constants';
-import { healthStatusQueries } from '../../constants';
 import Status from './status.vue';
 
 export default {
@@ -11,134 +10,27 @@ export default {
     Status,
   },
   props: {
-    issuableType: {
-      type: String,
+    mediator: {
       required: true,
-    },
-    iid: {
-      type: String,
-      required: true,
-    },
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    canUpdate: {
-      type: Boolean,
-      required: false,
-      default: false,
+      type: Object,
+      validator(mediatorObject) {
+        return Boolean(mediatorObject.store);
+      },
     },
   },
   computed: {
+    ...mapGetters(['getNoteableData']),
     isOpen() {
-      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,
-            },
-          ),
-        });
-      },
+      return this.getNoteableData.state === OPENED || this.getNoteableData.state === REOPENED;
     },
   },
   methods: {
     handleDropdownClick(status) {
-      return this.$apollo
-        .mutate({
-          mutation: healthStatusQueries[this.issuableType].mutation,
-          variables: {
-            projectPath: this.fullPath,
-            iid: this.iid,
-            healthStatus: status,
-          },
-          update: (
-            _,
-            {
-              data: {
-                updateIssue: {
-                  issue: { healthStatus },
-                },
-              },
-            },
-          ) => {
-            const { defaultClient: client } = this.$apollo.provider.clients;
-
-            const queryVariables = { fullPath: this.fullPath, iid: this.iid };
-
-            const sourceData = client.readQuery({
-              query: healthStatusQueries[this.issuableType].query,
-              variables: queryVariables,
-            });
-
-            const data = produce(sourceData, (draftData) => {
-              draftData.workspace.issuable.healthStatus = healthStatus;
-            });
-
-            client.writeQuery({
-              query: healthStatusQueries[this.issuableType].query,
-              variables: queryVariables,
-              data,
-            });
-          },
-          optimisticResponse: {
-            __typename: 'Mutation', // eslint-disable-line @gitlab/require-i18n-strings
-            updateIssue: {
-              issue: {
-                healthStatus: status,
-                __typename: 'Issue', // eslint-disable-line @gitlab/require-i18n-strings
-              },
-              errors: [],
-              __typename: 'UpdateIssuePayload',
-            },
-          },
-        })
-        .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,
-            }),
-          });
+      this.mediator.updateStatus(status).catch(() => {
+        createFlash({
+          message: __('Error occurred while updating the issue status'),
         });
+      });
     },
   },
 };
@@ -147,9 +39,9 @@ export default {
 <template>
   <status
     :is-open="isOpen"
-    :is-editable="canUpdate"
-    :is-fetching="isLoading"
-    :status="healthStatus"
+    :is-editable="mediator.store.editable"
+    :is-fetching="mediator.store.isFetching.status"
+    :status="mediator.store.status"
     @onDropdownClick="handleDropdownClick"
   />
 </template>

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

@@ -5,11 +5,9 @@ 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 projectIssueEpicMutation from './queries/project_issue_epic.mutation.graphql';
 import projectIssueEpicQuery from './queries/project_issue_epic.query.graphql';
 import projectIssueIterationMutation from './queries/project_issue_iteration.mutation.graphql';
@@ -130,14 +128,3 @@ export const ancestorsQueries = {
     query: epicAncestorsQuery,
   },
 };
-
-export const healthStatusQueries = {
-  [IssuableType.Issue]: {
-    mutation: updateStatusMutation,
-    query: issueHealthStatusQuery,
-  },
-  [IssuableType.Epic]: {
-    mutation: updateStatusMutation,
-    query: issueHealthStatusQuery,
-  },
-};

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

@@ -28,18 +28,15 @@ const mountWeightComponent = () => {
   });
 };
 
-const mountStatusComponent = () => {
+const mountStatusComponent = (mediator) => {
   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,
@@ -47,10 +44,7 @@ const mountStatusComponent = () => {
     render: (createElement) =>
       createElement('sidebar-status', {
         props: {
-          issuableType,
-          iid,
-          fullPath,
-          canUpdate: parseBoolean(canEdit),
+          mediator,
         },
       }),
   });

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 {
@@ -27,4 +28,20 @@ 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/sidebar_status_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { ApolloMutation, ApolloQuery } from 'vue-apollo';
+import Vue from 'vue';
+import Vuex from 'vuex';
 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';
 
-const mutate = jest.fn().mockResolvedValue();
+Vue.use(Vuex);
 
 describe('SidebarStatus', () => {
+  let mediator;
   let wrapper;
 
-  const createWrapper = ({
-    issuableType = 'issue',
-    state = 'opened',
-    healthStatus = 'onTrack',
-    loading = false,
-  } = {}) => {
-    const $apollo = {
-      queries: {
-        issuableData: {
-          loading,
+  const createMediator = (states) => {
+    mediator = {
+      updateStatus: jest.fn().mockResolvedValue(),
+      store: {
+        isFetching: {
+          status: true,
         },
+        status: '',
+        ...states,
       },
-      mutate,
     };
+  };
+
+  const createWrapper = ({ noteableState } = {}) => {
+    const store = new Vuex.Store({
+      getters: {
+        getNoteableData: () => ({ state: noteableState }),
+      },
+    });
     wrapper = shallowMount(SidebarStatus, {
       propsData: {
-        issuableType,
-        iid: '1',
-        fullPath: 'foo/bar',
-        canUpdate: true,
-      },
-      data() {
-        return {
-          issuableData: {
-            state,
-            healthStatus,
-          },
-        };
-      },
-      sync: false,
-      mocks: { $apollo },
-      stubs: {
-        ApolloMutation,
-        ApolloQuery,
+        mediator,
       },
+      store,
     });
   };
 
   beforeEach(() => {
-    createWrapper();
+    createMediator();
+    createWrapper({
+      getters: {
+        getNoteableData: {},
+      },
+    });
   });
 
   afterEach(() => {
@@ -58,16 +53,17 @@ describe('SidebarStatus', () => {
 
   describe('computed', () => {
     describe.each`
-      state         | isOpen
+      noteableState | isOpen
       ${'opened'}   | ${true}
       ${'reopened'} | ${true}
       ${'closed'}   | ${false}
-    `('isOpen', ({ state, isOpen }) => {
+    `('isOpen', ({ noteableState, isOpen }) => {
       beforeEach(() => {
-        createWrapper({ state });
+        createMediator({ editable: true });
+        createWrapper({ noteableState });
       });
 
-      it(`returns ${isOpen} when issue is ${state}`, () => {
+      it(`returns ${isOpen} when issue is ${noteableState}`, () => {
         expect(wrapper.vm.isOpen).toBe(isOpen);
       });
     });
@@ -80,21 +76,10 @@ describe('SidebarStatus', () => {
       expect(wrapper.find(Status).exists()).toBe(true);
     });
 
-    it('calls apollo mutate when receiving an onDropdownClick event from Status component', () => {
+    it('calls mediator status update when receiving an onDropdownClick event from Status component', () => {
       wrapper.find(Status).vm.$emit('onDropdownClick', 'onTrack');
 
-      const mutationVariables = {
-        mutation: healthStatusQueries.issue.mutation,
-        update: expect.anything(),
-        optimisticResponse: expect.anything(),
-        variables: {
-          projectPath: 'foo/bar',
-          iid: '1',
-          healthStatus: 'onTrack',
-        },
-      };
-
-      expect(mutate).toHaveBeenCalledWith(mutationVariables);
+      expect(mediator.updateStatus).toHaveBeenCalledWith('onTrack');
     });
   });
 });

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';
@@ -26,4 +27,28 @@ 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

@@ -12832,9 +12832,6 @@ 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 ""
 
@@ -30474,9 +30471,6 @@ 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 ""