Delete description change history

- Backend fix for caching issue
- Remove append diff to previous
- Tests

app/assets/javascripts/notes/stores/actions.js

@@ -509,7 +509,8 @@ export const fetchDescriptionVersion = (_, { endpoint, startingVersion }) => {
 export const setCurrentDiscussionId = ({ commit }, discussionId) =>
   commit(types.SET_CURRENT_DISCUSSION_ID, discussionId);
 
-export const softDeleteDescriptionVersion = ({ commit }, { endpoint, startingVersion }) => {
+
+export const softDeleteDescriptionVersion = (_, { endpoint, startingVersion }) => {
   let requestUrl = endpoint;
 
   if (startingVersion) {
@@ -518,11 +519,7 @@ export const softDeleteDescriptionVersion = ({ commit }, { endpoint, startingVer
 
   return axios
     .delete(requestUrl)
-    .then(res => {
-      // Invalidate lastFatechedAt to trigger refetch on next page refresh
-      commit(types.SET_LAST_FETCHED_AT, null);
-      return res.data;
-    })
+    .then(res => res.data)
     .catch(() => {
       Flash(__('Something went wrong while deleting description changes. Please try again.'));
     });

app/assets/javascripts/notes/stores/collapse_utils.js

@@ -45,7 +45,11 @@ export const collapseSystemNotes = notes => {
         const timeDifferenceMinutes = getTimeDifferenceMinutes(lastDescriptionSystemNote, note);
 
         // are they less than 10 minutes apart from the same user?
-        if (timeDifferenceMinutes > 10 || note.author.id !== lastDescriptionSystemNote.author.id) {
+        if (
+          timeDifferenceMinutes > 10 ||
+          note.author.id !== lastDescriptionSystemNote.author.id ||
+          lastDescriptionSystemNote.description_version_deleted
+        ) {
           // update the previous system note
           lastDescriptionSystemNote = note;
           lastDescriptionSystemNoteIndex = acc.length;

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -22,6 +22,7 @@ import { GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
 import noteHeader from '~/notes/components/note_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import TimelineEntryItem from './timeline_entry_item.vue';
 import { spriteIcon } from '../../../lib/utils/common_utils';
 import initMRPopovers from '~/mr_popover/';
@@ -39,7 +40,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [descriptionVersionHistoryMixin],
+  mixins: [descriptionVersionHistoryMixin, glFeatureFlagsMixin()],
   props: {
     note: {
       type: Object,

ee/app/models/ee/description_version.rb

@@ -39,6 +39,8 @@ module EE
         issuable_description_versions.where('id BETWEEN ? AND ?', start_id, self.id)
 
       description_versions.update_all(deleted_at: Time.now)
+
+      issuable&.expire_note_etag_cache
     end
 
     def deleted?

ee/spec/models/ee/description_version_spec.rb

@@ -53,6 +53,14 @@ describe DescriptionVersion do
         .count
     end
 
+    it 'expires issuable etag cache' do
+      version = epic.description_versions.last
+
+      expect(epic).to receive(:expire_note_etag_cache)
+
+      version.delete!
+    end
+
     context 'when start_id is not present' do
       it 'only soft deletes description_version' do
         version = epic.description_versions.last

locale/gitlab.pot

@@ -17783,6 +17783,9 @@ msgstr ""
 msgid "Something went wrong while closing the %{issuable}. Please try again later"
 msgstr ""
 
+msgid "Something went wrong while deleting description changes. Please try again."
+msgstr ""
+
 msgid "Something went wrong while deleting the image."
 msgstr ""
 

spec/frontend/vue_shared/components/notes/system_note_spec.js

+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
 import IssueSystemNote from '~/vue_shared/components/notes/system_note.vue';
 import createStore from '~/notes/stores';
 import initMRPopovers from '~/mr_popover/index';
@@ -8,6 +11,7 @@ jest.mock('~/mr_popover/index', () => jest.fn());
 describe('system note component', () => {
   let vm;
   let props;
+  let mock;
 
   beforeEach(() => {
     props = {
@@ -24,19 +28,30 @@ describe('system note component', () => {
         note_html: '<p dir="auto">closed</p>',
         system_note_icon_name: 'status_closed',
         created_at: '2017-08-02T10:51:58.559Z',
+        description_version_id: 1,
+        description_diff_path: 'path/to/diff',
+        delete_description_version_path: 'path/to/diff/1',
+        can_delete_description_version: true,
+        description_version_deleted: false,
       },
     };
 
     const store = createStore();
     store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
 
+    mock = new MockAdapter(axios);
+
     vm = mount(IssueSystemNote, {
       store,
       propsData: props,
+      provide: {
+        glFeatures: { saveDescriptionVersions: true, descriptionDiffs: true },
+      },
     });
   });
 
   afterEach(() => {
+    mock.restore();
     vm.destroy();
   });
 
@@ -62,4 +77,42 @@ describe('system note component', () => {
   it('should initMRPopovers onMount', () => {
     expect(initMRPopovers).toHaveBeenCalled();
   });
+
+  it('should display button to toggle description diff, description version does not display', () => {
+    const button = vm.find('.note-headline-light .btn-blank');
+    expect(button).toExist();
+    expect(button.text()).toContain('Compare with previous version');
+    expect(vm.find('.description-version').exists()).toBe(false);
+  });
+
+  it('click on button to toggle description diff displays description diff with delete icon button', done => {
+    const diffData =
+      '<span class="idiff">Description</span><span class="idiff addition">Diff</span>';
+    mock.onGet(`/path/to/diff/1`).replyOnce(200, {
+      data: diffData,
+    });
+
+    const button = vm.find('.note-headline-light .btn-blank');
+    button.trigger('click');
+    Vue.nextTick(() => {
+      expect(vm.find('.description-version').exists()).toBe(true);
+      expect(vm.find('.description-version').html()).toContain(diffData);
+      expect(
+        vm.find('.description-version button.delete-description-history svg.s16').exists(),
+      ).toBe(true);
+
+      done();
+    });
+  });
+
+  it('click on delete icon button deletes description diff', done => {
+    vm.find('.note-headline-light .btn-blank').trigger('click');
+    Vue.nextTick(() => {
+      const button = vm.find('.description-version button.delete-description-history');
+      button.trigger('click');
+      expect(vm.find('.description-version').text()).toContain('Deleted');
+
+      done();
+    });
+  });
 });