Delete description change history - Frontend

- Delete button icon on description diff

app/assets/javascripts/notes/mixins/description_version_history.js

@@ -8,5 +8,7 @@ export default {
   },
   methods: {
     toggleDescriptionVersion() {},
+    canDeleteDescriptionVersion() {},
+    deleteDescriptionVersion() {},
   },
 };

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

@@ -509,5 +509,24 @@ export const fetchDescriptionVersion = (_, { endpoint, startingVersion }) => {
 export const setCurrentDiscussionId = ({ commit }, discussionId) =>
   commit(types.SET_CURRENT_DISCUSSION_ID, discussionId);
 
+export const softDeleteDescriptionVersion = ({ commit }, { endpoint, startingVersion }) => {
+  let requestUrl = endpoint;
+
+  if (startingVersion) {
+    requestUrl = mergeUrlParams({ start_version_id: startingVersion }, requestUrl);
+  }
+
+  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;
+    })
+    .catch(() => {
+      Flash(__('Something went wrong while deleting description changes. Please try again.'));
+    });
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -18,7 +18,7 @@
  */
 import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
-import { GlSkeletonLoading } from '@gitlab/ui';
+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';
@@ -36,6 +36,9 @@ export default {
     TimelineEntryItem,
     GlSkeletonLoading,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [descriptionVersionHistoryMixin],
   props: {
     note: {
@@ -80,7 +83,7 @@ export default {
     initMRPopovers(this.$el.querySelectorAll('.gfm-merge_request'));
   },
   methods: {
-    ...mapActions(['fetchDescriptionVersion']),
+    ...mapActions(['fetchDescriptionVersion', 'softDeleteDescriptionVersion']),
   },
 };
 </script>
@@ -122,6 +125,16 @@ export default {
             <gl-skeleton-loading />
           </pre>
           <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
+          <button
+            v-if="canDeleteDescriptionVersion"
+            v-gl-tooltip
+            type="button"
+            title="Remove description history"
+            class="btn btn-transparent delete-description-history"
+            @click="deleteDescriptionVersion"
+          >
+            <icon name="remove" />
+          </button>
         </div>
       </div>
     </div>

app/assets/stylesheets/pages/notes.scss

@@ -311,6 +311,14 @@ $note-form-margin-left: 72px;
       overflow: hidden;
 
       .description-version {
+        position: relative;
+
+        .btn.delete-description-history {
+          position: absolute;
+          top: 18px;
+          right: 0;
+        }
+        
         pre {
           max-height: $dropdown-max-height-lg;
           white-space: pre-wrap;

ee/app/assets/javascripts/notes/mixins/description_version_history.js

+import { s__ } from '~/locale';
+
 export default {
   data() {
     return {
@@ -8,7 +10,14 @@ export default {
   },
   computed: {
     canSeeDescriptionVersion() {
-      return Boolean(this.note.description_diff_path && this.note.description_version_id);
+      return Boolean(
+        this.note.description_diff_path &&
+          this.note.description_version_id &&
+          !this.note.description_version_deleted,
+      );
+    },
+    canDeleteDescriptionVersion() {
+      return this.note.can_delete_description_version;
     },
     shouldShowDescriptionVersion() {
       return this.canSeeDescriptionVersion && this.isDescriptionVersionExpanded;
@@ -34,5 +43,13 @@ export default {
         this.descriptionVersion = diff;
       });
     },
+    deleteDescriptionVersion() {
+      const endpoint = this.note.delete_description_version_path;
+      const startingVersion = this.note.start_description_version_id;
+
+      return this.softDeleteDescriptionVersion({ endpoint, startingVersion }).then(() => {
+        this.descriptionVersion = s__('Deleted');
+      });
+    },
   },
 };

ee/changelogs/unreleased/32894-sensitive-information-in-description-history-frontend.yml

+---
+title: Delete description change history - Frontend
+merge_request: 23568
+author:
+type: changed