app/assets/javascripts/work_items/graphql/notes/create_work_item_note.mutation.graphql

-#import "./work_item_note.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/notes/work_item_note.fragment.graphql"
 
 mutation createWorkItemNote($input: CreateNoteInput!) {
   createNote(input: $input) {

app/assets/javascripts/work_items/graphql/notes/update_work_item_note.mutation.graphql

-#import "./work_item_note.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/notes/work_item_note.fragment.graphql"
 
 mutation updateWorkItemNote($input: UpdateNoteInput!) {
   updateNote(input: $input) {

app/assets/javascripts/work_items/graphql/notes/work_item_discussion_note.fragment.graphql

 #import "~/graphql_shared/fragments/user.fragment.graphql"
-#import "./work_item_note.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/notes/work_item_note.fragment.graphql"
 
 fragment WorkItemDiscussionNote on Note {
   id

app/assets/javascripts/work_items/graphql/notes/work_item_note.fragment.graphql

@@ -28,4 +28,11 @@ fragment WorkItemNote on Note {
     resolveNote
     repositionNote
   }
+  systemNoteMetadata {
+    id
+    descriptionVersion {
+      id
+      description
+    }
+  }
 }

app/assets/javascripts/work_items/graphql/notes/work_item_note_updated.subscription.graphql

-#import "./work_item_note.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/notes/work_item_note.fragment.graphql"
 
 subscription workItemNoteUpdated($noteableId: NoteableID) {
   workItemNoteUpdated(noteableId: $noteableId) {

app/assets/javascripts/work_items/graphql/notes/work_item_notes_by_iid.query.graphql

 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
-#import "./work_item_note.fragment.graphql"
+#import "ee_else_ce/work_items/graphql/notes/work_item_note.fragment.graphql"
 
 query workItemNotesByIid($fullPath: ID!, $iid: String, $after: String, $pageSize: Int) {
   workspace: project(fullPath: $fullPath) {

app/assets/javascripts/work_items/graphql/remove_hierarchy_child.mutation.graphql

-mutation removeHierarchyChild($id: WorkItemID!, $workItem: WorkItem!) {
-  removeHierarchyChild(id: $id, workItem: $workItem) @client
+mutation removeHierarchyChild($fullPath: ID!, $iid: String!, $workItem: WorkItem!) {
+  removeHierarchyChild(fullPath: $fullPath, iid: $iid, workItem: $workItem) @client
 }

app/assets/javascripts/work_items/graphql/work_item.fragment.graphql

@@ -27,8 +27,8 @@ fragment WorkItem on WorkItem {
   userPermissions {
     deleteWorkItem
     updateWorkItem
-    setWorkItemMetadata @client
     adminParentLink
+    setWorkItemMetadata
   }
   widgets {
     ...WorkItemWidgets

app/assets/javascripts/work_items/graphql/work_item.query.graphql

-#import "./work_item.fragment.graphql"
-
-query workItem($id: WorkItemID!) {
-  workItem(id: $id) {
-    ...WorkItem
-  }
-}

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

+// Placeholder for GitLab FOSS
+// Actual implementation: ee/app/assets/javascripts/notes/mixins/description_version_history.js
+export default {
+  computed: {
+    canSeeDescriptionVersion() {},
+    displayDeleteButton() {},
+    shouldShowDescriptionVersion() {},
+    descriptionVersionToggleIcon() {},
+  },
+  methods: {
+    toggleDescriptionVersion() {},
+    deleteDescriptionVersion() {},
+  },
+};

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

+import { DESCRIPTION_TYPE, TIME_DIFFERENCE_VALUE } from '~/notes/constants';
+
+/**
+ * Checks the time difference between two notes from their 'created_at' dates
+ * returns an integer
+ */
+export const getTimeDifferenceInMinutes = (noteBeginning, noteEnd) => {
+  const descriptionNoteBegin = new Date(noteBeginning.createdAt);
+  const descriptionNoteEnd = new Date(noteEnd.createdAt);
+  const timeDifferenceMinutes = (descriptionNoteEnd - descriptionNoteBegin) / 1000 / 60;
+
+  return Math.ceil(timeDifferenceMinutes);
+};
+
+/**
+ * Checks if a note is a system note and if the content is description
+ *
+ * @param {Object} note
+ * @returns {Boolean}
+ */
+export const isDescriptionSystemNote = (note) => {
+  return note.system && note.body === DESCRIPTION_TYPE;
+};
+
+/**
+ * Collapses the system notes of a description type, e.g. Changed the description, n minutes ago
+ * the notes will collapse as long as they happen no more than 10 minutes away from each away
+ * in between the notes can be anything, another type of system note
+ * (such as 'changed the weight') or a comment.
+ *
+ * @param {Array} notes
+ * @returns {Array}
+ */
+export const collapseSystemNotes = (notes) => {
+  let lastDescriptionSystemNote = null;
+  let lastDescriptionSystemNoteIndex = -1;
+
+  return notes.reduce((acc, currentNote) => {
+    const note = currentNote.notes.nodes[0];
+    let lastStartVersionId = '';
+
+    if (isDescriptionSystemNote(note)) {
+      // is it the first one?
+      if (!lastDescriptionSystemNote) {
+        lastDescriptionSystemNote = note;
+      } else {
+        const timeDifferenceMinutes = getTimeDifferenceInMinutes(lastDescriptionSystemNote, note);
+
+        // are they less than 10 minutes apart from the same user?
+        if (
+          timeDifferenceMinutes > TIME_DIFFERENCE_VALUE ||
+          note.author.id !== lastDescriptionSystemNote.author.id ||
+          lastDescriptionSystemNote.systemNoteMetadata.descriptionVersion?.deleted
+        ) {
+          // update the previous system note
+          lastDescriptionSystemNote = note;
+        } else {
+          // set the first version to fetch grouped system note versions
+
+          lastStartVersionId = lastDescriptionSystemNote.systemNoteMetadata.descriptionVersion.id;
+
+          // delete the previous one
+          acc.splice(lastDescriptionSystemNoteIndex, 1);
+        }
+      }
+
+      // update the previous system note index
+      lastDescriptionSystemNoteIndex = acc.length;
+
+      acc.push({
+        notes: {
+          nodes: [
+            {
+              ...note,
+              systemNoteMetadata: {
+                ...note.systemNoteMetadata,
+                descriptionVersion: {
+                  ...note.systemNoteMetadata.descriptionVersion,
+                  startVersionId: lastStartVersionId,
+                },
+              },
+            },
+          ],
+        },
+      });
+    } else {
+      acc.push(currentNote);
+    }
+
+    return acc;
+  }, []);
+};

app/assets/javascripts/work_items/pages/work_item_root.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
-import { TYPENAME_WORK_ITEM } from '~/graphql_shared/constants';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import ZenMode from '~/zen_mode';
 import WorkItemDetail from '../components/work_item_detail.vue';
@@ -19,7 +17,7 @@ export default {
   },
   inject: ['issuesListPath'],
   props: {
-    id: {
+    iid: {
       type: String,
       required: true,
     },
@@ -29,11 +27,6 @@ export default {
       error: '',
     };
   },
-  computed: {
-    gid() {
-      return convertToGraphQLId(TYPENAME_WORK_ITEM, this.id);
-    },
-  },
   mounted() {
     this.ZenMode = new ZenMode();
   },
@@ -70,10 +63,6 @@ export default {
 <template>
   <div>
     <gl-alert v-if="error" variant="danger" @dismiss="error = ''">{{ error }}</gl-alert>
-    <work-item-detail
-      :work-item-id="gid"
-      :work-item-iid="id"
-      @deleteWorkItem="deleteWorkItem($event)"
-    />
+    <work-item-detail :work-item-iid="iid" @deleteWorkItem="deleteWorkItem($event)" />
   </div>
 </template>

app/assets/javascripts/work_items/router/routes.js

 function getRoutes() {
   const routes = [
     {
-      path: '/:id',
+      path: '/:iid',
       name: 'workItem',
       component: () => import('../pages/work_item_root.vue'),
       props: true,

app/assets/javascripts/work_items/utils.js

@@ -9,18 +9,12 @@ import {
   WORK_ITEM_TYPENAME,
   WORK_ITEM_UPDATE_PAYLOAD_TYPENAME,
 } from '~/work_items/constants';
-import workItemQuery from './graphql/work_item.query.graphql';
-import workItemByIidQuery from './graphql/work_item_by_iid.query.graphql';
-
-export function getWorkItemQuery(isFetchedByIid) {
-  return isFetchedByIid ? workItemByIidQuery : workItemQuery;
-}
 
 export const findHierarchyWidgets = (widgets) =>
   widgets?.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY);
 
 export const findHierarchyWidgetChildren = (workItem) =>
-  findHierarchyWidgets(workItem.widgets).children.nodes;
+  findHierarchyWidgets(workItem?.widgets)?.children.nodes;
 
 const autocompleteSourcesPath = (autocompleteType, fullPath, workItemIid) => {
   return `${

app/assets/stylesheets/components/content_editor.scss

@@ -155,7 +155,9 @@
   }
 }
 
-
+.content-editor-table-dropdown .gl-new-dropdown-panel {
+  min-width: auto;
+}
 
 .bubble-menu-form {
   width: 320px;

app/assets/stylesheets/framework/layout.scss

@@ -36,11 +36,12 @@ body {
 }
 
 .layout-page {
-  padding-top: $calc-application-header-height;
+  padding-top: calc(#{$header-height} + #{$calc-application-bars-height});
   padding-bottom: $calc-application-footer-height;
 }
 
 .content-wrapper {
+  padding-top: var(--top-bar-height);
   padding-bottom: 100px;
 }
 

app/assets/stylesheets/framework/mixins.scss

@@ -156,6 +156,12 @@
   background: linear-gradient(to $gradient-direction,
   $gradient-color 45%,
   rgba($gradient-color, 0.4));
+  border: 0;
+  padding: 0;
+
+  &:hover {
+    @include gl-focus;
+  }
 
   &.scrolling {
     visibility: visible;
@@ -164,8 +170,8 @@
   }
 
   svg {
-    position: relative;
-    top: 5px;
+    position: absolute;
+    top: 12px;
     font-size: 18px;
   }
 }
@@ -430,8 +436,7 @@
 
   &:last-child {
     &::after {
-      content: '';
-      padding: 0;
+      display: none;
     }
   }
 }

app/assets/stylesheets/startup/startup-dark.scss

@@ -581,8 +581,7 @@ html {
 .layout-page {
   padding-top: calc(
     var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height)) +
-      var(--top-bar-height)
+      calc(var(--system-header-height) + var(--performance-bar-height))
   );
   padding-bottom: var(--system-footer-height);
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -581,8 +581,7 @@ html {
 .layout-page {
   padding-top: calc(
     var(--header-height, 48px) +
-      calc(var(--system-header-height) + var(--performance-bar-height)) +
-      var(--top-bar-height)
+      calc(var(--system-header-height) + var(--performance-bar-height))
   );
   padding-bottom: var(--system-footer-height);
 }

app/controllers/abuse_reports_controller.rb

@@ -64,8 +64,8 @@ def set_user
 
     if @user.nil?
       redirect_to root_path, alert: _("Cannot create the abuse report. The user has been deleted.")
-    elsif @user.blocked?
-      redirect_to @user, alert: _("Cannot create the abuse report. This user has been blocked.")
+    elsif @user.banned?
+      redirect_to @user, alert: _("Cannot create the abuse report. This user has been banned.")
     end
   end
   # rubocop: enable CodeReuse/ActiveRecord