app/assets/javascripts/graphql_shared/possible_types.json

@@ -131,6 +131,7 @@
     "VulnerabilityLocationSecretDetection"
   ],
   "WorkItemWidget": [
+    "WorkItemWidgetAssignees",
     "WorkItemWidgetDescription",
     "WorkItemWidgetHierarchy"
   ]

app/assets/javascripts/header.js

-import $ from 'jquery';
 import Vue from 'vue';
 import { highCountTrim } from '~/lib/utils/text_utility';
 import Tracking from '~/tracking';
@@ -12,12 +11,18 @@ import Translate from '~/vue_shared/translate';
  * @param {String} count
  */
 export default function initTodoToggle() {
-  $(document).on('todo:toggle', (e, count) => {
-    const updatedCount = count || e?.detail?.count || 0;
-    const $todoPendingCount = $('.js-todos-count');
+  document.addEventListener('todo:toggle', (e) => {
+    const updatedCount = e.detail.count || 0;
+    const todoPendingCount = document.querySelector('.js-todos-count');
 
-    $todoPendingCount.text(highCountTrim(updatedCount));
-    $todoPendingCount.toggleClass('hidden', updatedCount === 0);
+    if (todoPendingCount) {
+      todoPendingCount.textContent = highCountTrim(updatedCount);
+      if (updatedCount === 0) {
+        todoPendingCount.classList.add('hidden');
+      } else {
+        todoPendingCount.classList.remove('hidden');
+      }
+    }
   });
 }
 
@@ -85,7 +90,7 @@ function initStatusTriggers() {
 function trackShowUserDropdownLink(trackEvent, elToTrack, el) {
   const { trackLabel, trackProperty } = elToTrack.dataset;
 
-  $(el).on('shown.bs.dropdown', () => {
+  el.addEventListener('shown.bs.dropdown', () => {
     Tracking.event(document.body.dataset.page, trackEvent, {
       label: trackLabel,
       property: trackProperty,

app/assets/javascripts/helpers/help_page_helper.js

@@ -7,9 +7,10 @@ const HELP_PAGE_URL_ROOT = '/help/';
  *
  * This is designed to mirror the Ruby `help_page_path` helper function, so that
  * the two can be used interchangeably.
- * @param {String} path           - Path to doc file relative to the doc/ directory in the GitLab repository.
- *                                  Optionally, including `.md` or `.html` prefix
- * @param {String} options.anchor - Name of the anchor to scroll to on the documentation page.
+ * @param {string} path - Path to doc file relative to the doc/ directory in the GitLab repository.
+ *   Optionally, including `.md` or `.html` prefix
+ * @param {object} [options]
+ *   @param {string} [options.anchor] - Name of the anchor to scroll to on the documentation page.
  */
 export const helpPagePath = (path, { anchor = '' } = {}) => {
   let helpPath = joinPaths(gon.relative_url_root || '/', HELP_PAGE_URL_ROOT, path);

app/assets/javascripts/init_confirm_danger.js

@@ -12,11 +12,11 @@ export default () => {
     phrase,
     buttonText,
     buttonClass = '',
-    buttonTestid = null,
-    buttonVariant = null,
+    buttonTestid,
+    buttonVariant,
     confirmDangerMessage,
     confirmButtonText = null,
-    disabled = false,
+    disabled,
     additionalInformation,
     htmlConfirmationMessage,
   } = el.dataset;

app/assets/javascripts/issuable/issuable_form.js

@@ -68,8 +68,7 @@ export default class IssuableForm {
     this.gfmAutoComplete = new GfmAutoComplete(
       gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources,
     ).setup();
-    const autoAssignToMe = form.get(0).id === 'new_merge_request';
-    this.usersSelect = new UsersSelect(undefined, undefined, { autoAssignToMe });
+    this.usersSelect = new UsersSelect();
     this.reviewersSelect = new UsersSelect(undefined, '.js-reviewer-search');
     this.zenMode = new ZenMode();
 

app/assets/javascripts/issues/list/constants.js

@@ -90,6 +90,8 @@ export const UPDATED_ASC = 'UPDATED_ASC';
 export const UPDATED_DESC = 'UPDATED_DESC';
 export const WEIGHT_ASC = 'WEIGHT_ASC';
 export const WEIGHT_DESC = 'WEIGHT_DESC';
+export const CLOSED_ASC = 'CLOSED_AT_ASC';
+export const CLOSED_DESC = 'CLOSED_AT_DESC';
 
 export const urlSortParams = {
   [PRIORITY_ASC]: 'priority',
@@ -98,6 +100,8 @@ export const urlSortParams = {
   [CREATED_DESC]: 'created_date',
   [UPDATED_ASC]: 'updated_asc',
   [UPDATED_DESC]: 'updated_desc',
+  [CLOSED_ASC]: 'closed_asc',
+  [CLOSED_DESC]: 'closed_desc',
   [MILESTONE_DUE_ASC]: 'milestone',
   [MILESTONE_DUE_DESC]: 'milestone_due_desc',
   [DUE_DATE_ASC]: 'due_date',

app/assets/javascripts/issues/list/queries/issue.fragment.graphql

@@ -13,6 +13,7 @@ fragment IssueFragment on Issue {
   state
   title
   updatedAt
+  closedAt
   upvotes
   userDiscussionsCount @include(if: $isSignedIn)
   webPath

app/assets/javascripts/issues/list/utils.js

@@ -44,6 +44,8 @@ import {
   urlSortParams,
   WEIGHT_ASC,
   WEIGHT_DESC,
+  CLOSED_ASC,
+  CLOSED_DESC,
 } from './constants';
 
 export const getInitialPageParams = (
@@ -92,6 +94,14 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
     },
     {
       id: 4,
+      title: __('Closed date'),
+      sortDirection: {
+        ascending: CLOSED_ASC,
+        descending: CLOSED_DESC,
+      },
+    },
+    {
+      id: 5,
       title: __('Milestone due date'),
       sortDirection: {
         ascending: MILESTONE_DUE_ASC,
@@ -99,7 +109,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
       },
     },
     {
-      id: 5,
+      id: 6,
       title: __('Due date'),
       sortDirection: {
         ascending: DUE_DATE_ASC,
@@ -107,7 +117,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
       },
     },
     {
-      id: 6,
+      id: 7,
       title: __('Popularity'),
       sortDirection: {
         ascending: POPULARITY_ASC,
@@ -115,7 +125,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
       },
     },
     {
-      id: 7,
+      id: 8,
       title: __('Label priority'),
       sortDirection: {
         ascending: LABEL_PRIORITY_ASC,
@@ -123,7 +133,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
       },
     },
     {
-      id: 8,
+      id: 9,
       title: __('Manual'),
       sortDirection: {
         ascending: RELATIVE_POSITION_ASC,
@@ -131,7 +141,7 @@ export const getSortOptions = (hasIssueWeightsFeature, hasBlockedIssuesFeature)
       },
     },
     {
-      id: 9,
+      id: 10,
       title: __('Title'),
       sortDirection: {
         ascending: TITLE_ASC,

app/assets/javascripts/issues/show/components/description.vue

 <script>
-import {
-  GlSafeHtmlDirective as SafeHtml,
-  GlModal,
-  GlToast,
-  GlTooltip,
-  GlModalDirective,
-} from '@gitlab/ui';
+import { GlSafeHtmlDirective as SafeHtml, GlToast, GlTooltip, GlModalDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
@@ -20,11 +14,16 @@ import { getSortableDefaultOptions, isDragging } from '~/sortable/utils';
 import TaskList from '~/task_list';
 import Tracking from '~/tracking';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import createWorkItemFromTaskMutation from '~/work_items/graphql/create_work_item_from_task.mutation.graphql';
 
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
-import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
-import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
+import {
+  TRACKING_CATEGORY_SHOW,
+  TASK_TYPE_NAME,
+  WIDGET_TYPE_DESCRIPTION,
+} from '~/work_items/constants';
 import animateMixin from '../mixins/animate';
 import { convertDescriptionWithNewSort } from '../utils';
 
@@ -40,12 +39,11 @@ export default {
     GlModal: GlModalDirective,
   },
   components: {
-    GlModal,
-    CreateWorkItem,
     GlTooltip,
     WorkItemDetailModal,
   },
   mixins: [animateMixin, glFeatureFlagMixin(), Tracking.mixin()],
+  inject: ['fullPath'],
   props: {
     canUpdate: {
       type: Boolean,
@@ -103,6 +101,7 @@ export default {
       workItemId: isPositiveInteger(workItemId)
         ? convertToGraphQLId(TYPE_WORK_ITEM, workItemId)
         : undefined,
+      workItemTypes: [],
     };
   },
   apollo: {
@@ -117,11 +116,28 @@ export default {
         return !this.workItemId || !this.workItemsEnabled;
       },
     },
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes;
+      },
+      skip() {
+        return !this.workItemsEnabled;
+      },
+    },
   },
   computed: {
     workItemsEnabled() {
       return this.glFeatures.workItems;
     },
+    taskWorkItemType() {
+      return this.workItemTypes.find((type) => type.name === TASK_TYPE_NAME)?.id;
+    },
     issueGid() {
       return this.issueId ? convertToGraphQLId(TYPE_WORK_ITEM, this.issueId) : null;
     },
@@ -344,8 +360,8 @@ export default {
             <use href="${gon.sprite_icons}#doc-new"></use>
           </svg>
         `;
-        button.setAttribute('aria-label', s__('WorkItem|Convert to work item'));
-        button.addEventListener('click', () => this.openCreateTaskModal(button));
+        button.setAttribute('aria-label', s__('WorkItem|Create task'));
+        button.addEventListener('click', () => this.handleCreateTask(button));
         this.insertButtonNextToTaskText(item, button);
       });
     },
@@ -386,17 +402,11 @@ export default {
         lineNumberEnd: lineNumbers[1],
       };
     },
-    openCreateTaskModal(el) {
-      this.setActiveTask(el);
-      this.$refs.modal.show();
-    },
-    closeCreateTaskModal() {
-      this.$refs.modal.hide();
-    },
     openWorkItemDetailModal(el) {
       if (!el) {
         return;
       }
+
       this.setActiveTask(el);
       this.$refs.detailsModal.show();
     },
@@ -404,9 +414,54 @@ export default {
       this.workItemId = undefined;
       this.updateWorkItemIdUrlQuery(undefined);
     },
-    handleCreateTask(description) {
-      this.$emit('updateDescription', description);
-      this.closeCreateTaskModal();
+    async handleCreateTask(el) {
+      this.setActiveTask(el);
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: createWorkItemFromTaskMutation,
+          variables: {
+            input: {
+              id: this.issueGid,
+              workItemData: {
+                lockVersion: this.lockVersion,
+                title: this.activeTask.title,
+                lineNumberStart: Number(this.activeTask.lineNumberStart),
+                lineNumberEnd: Number(this.activeTask.lineNumberEnd),
+                workItemTypeId: this.taskWorkItemType,
+              },
+            },
+          },
+          update(store, { data: { workItemCreateFromTask } }) {
+            const { newWorkItem } = workItemCreateFromTask;
+
+            store.writeQuery({
+              query: workItemQuery,
+              variables: {
+                id: newWorkItem.id,
+              },
+              data: {
+                workItem: newWorkItem,
+              },
+            });
+          },
+        });
+
+        const { workItem, newWorkItem } = data.workItemCreateFromTask;
+
+        const updatedDescription = workItem?.widgets?.find(
+          (widget) => widget.type === WIDGET_TYPE_DESCRIPTION,
+        )?.descriptionHtml;
+
+        this.$emit('updateDescription', updatedDescription);
+        this.workItemId = newWorkItem.id;
+        this.openWorkItemDetailModal(el);
+      } catch (error) {
+        createFlash({
+          message: s__('WorkItem|Something went wrong when creating a work item. Please try again'),
+          error,
+          captureError: true,
+        });
+      }
     },
     handleDeleteTask(description) {
       this.$emit('updateDescription', description);
@@ -452,19 +507,6 @@ export default {
       data-testid="textarea"
     >
     </textarea>
-
-    <gl-modal ref="modal" size="lg" modal-id="create-task-modal" hide-footer body-class="gl-p-0!">
-      <create-work-item
-        is-modal
-        :initial-title="activeTask.title"
-        :issue-gid="issueGid"
-        :lock-version="lockVersion"
-        :line-number-start="activeTask.lineNumberStart"
-        :line-number-end="activeTask.lineNumberEnd"
-        @closeModal="closeCreateTaskModal"
-        @onCreate="handleCreateTask"
-      />
-    </gl-modal>
     <work-item-detail-modal
       ref="detailsModal"
       :can-update="canUpdate"
@@ -478,7 +520,7 @@ export default {
     />
     <template v-if="workItemsEnabled">
       <gl-tooltip v-for="item in taskButtons" :key="item" :target="item">
-        {{ s__('WorkItem|Convert to work item') }}
+        {{ s__('WorkItem|Create task') }}
       </gl-tooltip>
     </template>
   </div>

app/assets/javascripts/jobs/components/sidebar.vue

@@ -89,7 +89,7 @@ export default {
       <div class="blocks-container">
         <div class="gl-py-5 gl-display-flex gl-align-items-center">
           <tooltip-on-truncate :title="job.name" truncate-target="child"
-            ><h4 class="my-0 mr-2 gl-text-truncate">
+            ><h4 class="gl-my-0 gl-mr-3 gl-text-truncate">
               {{ job.name }}
             </h4>
           </tooltip-on-truncate>

app/assets/javascripts/jobs/components/table/cells/actions_cell.vue

@@ -222,7 +222,7 @@ export default {
         />
         <gl-button
           v-else-if="isRetryable"
-          icon="repeat"
+          icon="retry"
           :title="$options.ACTIONS_RETRY"
           :aria-label="$options.ACTIONS_RETRY"
           :method="currentJobMethod"

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -170,7 +170,7 @@ export default {
 
 <template>
   <div ref="prometheusGraphsHeader">
-    <div class="mb-2 mr-2 d-flex d-sm-block">
+    <div class="gl-mb-3 gl-mr-3 gl-display-flex gl-sm-display-block">
       <dashboards-dropdown
         id="monitor-dashboards-dropdown"
         data-qa-selector="dashboards_filter_dropdown"
@@ -240,7 +240,7 @@ export default {
     <div class="flex-grow-1"></div>
 
     <div class="d-sm-flex">
-      <div v-if="showRearrangePanelsBtn" class="mb-2 mr-2 d-flex">
+      <div v-if="showRearrangePanelsBtn" class="gl-mb-3 gl-mr-3 gl-display-flex">
         <gl-button
           :pressed="isRearrangingPanels"
           variant="default"
@@ -253,7 +253,7 @@ export default {
 
       <div
         v-if="externalDashboardUrl && externalDashboardUrl.length"
-        class="mb-2 mr-2 d-flex d-sm-block"
+        class="gl-mb-3 gl-mr-3 gl-display-flex gl-sm-display-block"
       >
         <gl-button
           class="flex-grow-1 js-external-dashboard-link"
@@ -280,7 +280,7 @@ export default {
       <template v-if="shouldShowSettingsButton">
         <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
 
-        <div class="mb-2 mr-2 d-flex d-sm-block">
+        <div class="gl-mb-3 gl-mr-3 d-flex d-sm-block">
           <gl-button
             v-gl-tooltip
             data-testid="metrics-settings-button"

app/assets/javascripts/mr_notes/stores/index.js

@@ -7,14 +7,16 @@ import mrPageModule from './modules';
 
 Vue.use(Vuex);
 
+export const createModules = () => ({
+  page: mrPageModule(),
+  notes: notesModule(),
+  diffs: diffsModule(),
+  batchComments: batchCommentsModule(),
+});
+
 export const createStore = () =>
   new Vuex.Store({
-    modules: {
-      page: mrPageModule(),
-      notes: notesModule(),
-      diffs: diffsModule(),
-      batchComments: batchCommentsModule(),
-    },
+    modules: createModules(),
   });
 
 export default createStore();

app/assets/javascripts/new_branch_form.js

-/* eslint-disable func-names, consistent-return, no-return-assign, @gitlab/require-i18n-strings */
+/* eslint-disable func-names, no-return-assign, @gitlab/require-i18n-strings */
 
 import $ from 'jquery';
 import RefSelectDropdown from './ref_select_dropdown';
@@ -6,9 +6,9 @@ import RefSelectDropdown from './ref_select_dropdown';
 export default class NewBranchForm {
   constructor(form, availableRefs) {
     this.validate = this.validate.bind(this);
-    this.branchNameError = form.find('.js-branch-name-error');
-    this.name = form.find('.js-branch-name');
-    this.ref = form.find('#ref');
+    this.branchNameError = form.querySelector('.js-branch-name-error');
+    this.name = form.querySelector('.js-branch-name');
+    this.ref = form.querySelector('#ref');
     new RefSelectDropdown($('.js-branch-select'), availableRefs); // eslint-disable-line no-new
     this.setupRestrictions();
     this.addBinding();
@@ -16,12 +16,13 @@ export default class NewBranchForm {
   }
 
   addBinding() {
-    return this.name.on('blur', this.validate);
+    this.name.addEventListener('blur', this.validate);
   }
 
   init() {
-    if (this.name.length && this.name.val().length > 0) {
-      return this.name.trigger('blur');
+    if (this.name != null && this.name.value.length > 0) {
+      const event = new CustomEvent('blur');
+      this.name.dispatchEvent(event);
     }
   }
 
@@ -52,7 +53,7 @@ export default class NewBranchForm {
   validate() {
     const { indexOf } = [];
 
-    this.branchNameError.empty();
+    this.branchNameError.innerHTML = '';
     const unique = function (values, value) {
       if (indexOf.call(values, value) === -1) {
         values.push(value);
@@ -73,7 +74,7 @@ export default class NewBranchForm {
       return `${restriction.prefix} ${formatted.join(restriction.conjunction)}`;
     };
     const validator = (errors, restriction) => {
-      const matched = this.name.val().match(restriction.pattern);
+      const matched = this.name.value.match(restriction.pattern);
       if (matched) {
         return errors.concat(formatter(matched.reduce(unique, []), restriction));
       }
@@ -81,8 +82,7 @@ export default class NewBranchForm {
     };
     const errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
-      const errorMessage = $('<span/>').text(errors.join(', '));
-      return this.branchNameError.append(errorMessage);
+      this.branchNameError.textContent = errors.join(', ');
     }
   }
 }

app/assets/javascripts/notes/components/noteable_note.vue

 <script>
-import { GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlSprintf, GlSafeHtmlDirective as SafeHtml, GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import $ from 'jquery';
 import { escape, isEmpty } from 'lodash';
 import { mapGetters, mapActions } from 'vuex';
@@ -11,7 +11,6 @@ import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import { __, s__, sprintf } from '~/locale';
-import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
@@ -31,11 +30,12 @@ export default {
   name: 'NoteableNote',
   components: {
     GlSprintf,
-    userAvatarLink,
     noteHeader,
     noteActions,
     NoteBody,
     TimelineEntryItem,
+    GlAvatarLink,
+    GlAvatar,
   },
   directives: {
     SafeHtml,
@@ -196,13 +196,11 @@ export default {
 
       return fileResolvedFromAvailableSource || null;
     },
-    avatarSize() {
-      // Use a different size if shown on a Merge Request Diff
-      if (this.line && !this.isOverviewTab) {
-        return 24;
-      }
-
-      return 40;
+    isMRDiffView() {
+      return this.line && !this.isOverviewTab;
+    },
+    authorAvatarAdaptiveSize() {
+      return { default: 24, md: 32 };
     },
   },
   created() {
@@ -428,19 +426,33 @@ export default {
         </template>
       </gl-sprintf>
     </div>
-    <div class="timeline-icon">
-      <user-avatar-link
-        :link-href="author.path"
-        :img-src="author.avatar_url"
-        :img-alt="author.name"
-        :img-size="avatarSize"
-        lazy
-      >
-        <template #avatar-badge>
-          <slot name="avatar-badge"></slot>
-        </template>
-      </user-avatar-link>
+
+    <div v-if="isMRDiffView" class="gl-float-left gl-mt-n1 gl-mr-3">
+      <gl-avatar-link :href="author.path">
+        <gl-avatar
+          :src="author.avatar_url"
+          :entity-name="author.username"
+          :alt="author.name"
+          :size="24"
+        />
+
+        <slot name="avatar-badge"></slot>
+      </gl-avatar-link>
+    </div>
+
+    <div v-else class="gl-float-left gl-pl-3 gl-mr-3 gl-md-pl-2 gl-md-pr-2">
+      <gl-avatar-link :href="author.path">
+        <gl-avatar
+          :src="author.avatar_url"
+          :entity-name="author.username"
+          :alt="author.name"
+          :size="authorAvatarAdaptiveSize"
+        />
+
+        <slot name="avatar-badge"></slot>
+      </gl-avatar-link>
     </div>
+
     <div class="timeline-content">
       <div class="note-header">
         <note-header

app/assets/javascripts/notes/components/toggle_replies_widget.vue

 <script>
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLink, GlSprintf } from '@gitlab/ui';
 import { uniqBy } from 'lodash';
+import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 export default {
+  i18n: {
+    collapseReplies: s__('Notes|Collapse replies'),
+    expandReplies: s__('Notes|Expand replies'),
+    lastReplyBy: s__('Notes|Last reply by %{name}'),
+  },
   components: {
     GlButton,
-    GlIcon,
+    GlLink,
+    GlSprintf,
     UserAvatarLink,
     TimeAgoTooltip,
   },
@@ -28,63 +35,83 @@ export default {
     uniqueAuthors() {
       const authors = this.replies.map((reply) => reply.author || {});
 
-      return uniqBy(authors, (author) => author.username);
+      return uniqBy(authors, 'username');
+    },
+    liClasses() {
+      return this.collapsed
+        ? 'gl-text-gray-500 gl-rounded-bottom-left-base gl-rounded-bottom-right-base'
+        : 'gl-border-b';
     },
-    className() {
-      return this.collapsed ? 'collapsed' : 'expanded';
+    buttonIcon() {
+      return this.collapsed ? 'chevron-right' : 'chevron-down';
+    },
+    buttonLabel() {
+      return this.collapsed ? this.$options.i18n.expandReplies : this.$options.i18n.collapseReplies;
     },
   },
   methods: {
     toggle() {
+      this.$refs.toggle.$el.focus();
       this.$emit('toggle');
     },
   },
-  ICON_CLASS: 'gl-mr-3 gl-cursor-pointer',
 };
 </script>
 
 <template>
   <li
-    :class="className"
-    class="replies-toggle js-toggle-replies gl-display-flex! gl-align-items-center gl-flex-wrap"
+    :class="liClasses"
+    class="gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border-t"
   >
+    <gl-button
+      ref="toggle"
+      class="gl-my-2 gl-mr-3 gl-p-0!"
+      category="tertiary"
+      :icon="buttonIcon"
+      :aria-label="buttonLabel"
+      @click="toggle"
+    />
     <template v-if="collapsed">
-      <gl-icon :class="$options.ICON_CLASS" name="chevron-right" @click.native="toggle" />
-      <div>
-        <user-avatar-link
-          v-for="author in uniqueAuthors"
-          :key="author.username"
-          :link-href="author.path"
-          :img-alt="author.name"
-          :img-src="author.avatar_url"
-          :img-size="24"
-          :tooltip-text="author.name"
-          tooltip-placement="bottom"
-        />
-      </div>
+      <user-avatar-link
+        v-for="author in uniqueAuthors"
+        :key="author.username"
+        class="gl-mr-3"
+        :link-href="author.path"
+        :img-alt="author.name"
+        img-css-classes="gl-mr-0!"
+        :img-src="author.avatar_url"
+        :img-size="24"
+        :tooltip-text="author.name"
+        tooltip-placement="bottom"
+      />
       <gl-button
-        class="js-replies-text gl-mr-2"
-        category="tertiary"
+        class="gl-mr-2"
         variant="link"
         data-qa-selector="expand_replies_button"
         @click="toggle"
       >
-        {{ replies.length }} {{ n__('reply', 'replies', replies.length) }}
+        {{ n__('%d reply', '%d replies', replies.length) }}
       </gl-button>
-      {{ __('Last reply by') }}
-      <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button">
-        {{ lastReply.author.name }}
-      </a>
+      <gl-sprintf :message="$options.i18n.lastReplyBy">
+        <template #name>
+          <gl-link
+            :href="lastReply.author.path"
+            class="gl-text-body! gl-text-decoration-none! gl-mx-2"
+          >
+            {{ lastReply.author.name }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
       <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" />
     </template>
-    <div
+    <gl-button
       v-else
-      class="collapse-replies-btn js-collapse-replies gl-display-flex align-items-center"
+      class="gl-text-body! gl-text-decoration-none!"
+      variant="link"
       data-qa-selector="collapse_replies_button"
       @click="toggle"
     >
-      <gl-icon :class="$options.ICON_CLASS" name="chevron-down" />
-      <span class="gl-cursor-pointer">{{ s__('Notes|Collapse replies') }}</span>
-    </div>
+      {{ $options.i18n.collapseReplies }}
+    </gl-button>
   </li>
 </template>

app/assets/javascripts/notes/constants.js

@@ -10,8 +10,8 @@ export const OPENED = 'opened';
 export const REOPENED = 'reopened';
 export const CLOSED = 'closed';
 export const MERGED = 'merged';
-export const ISSUE_NOTEABLE_TYPE = 'issue';
-export const EPIC_NOTEABLE_TYPE = 'epic';
+export const ISSUE_NOTEABLE_TYPE = 'Issue';
+export const EPIC_NOTEABLE_TYPE = 'Epic';
 export const MERGE_REQUEST_NOTEABLE_TYPE = 'MergeRequest';
 export const UNRESOLVE_NOTE_METHOD_NAME = 'delete';
 export const RESOLVE_NOTE_METHOD_NAME = 'post';

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

@@ -83,14 +83,17 @@ export const setExpandDiscussions = ({ commit }, { discussionIds, expanded }) =>
   commit(types.SET_EXPAND_DISCUSSIONS, { discussionIds, expanded });
 };
 
-export const fetchDiscussions = ({ commit, dispatch }, { path, filter, persistFilter }) => {
+export const fetchDiscussions = (
+  { commit, dispatch, getters },
+  { path, filter, persistFilter },
+) => {
   const config =
     filter !== undefined
       ? { params: { notes_filter: filter, persist_filter: persistFilter } }
       : null;
 
   if (
-    window.gon?.features?.paginatedIssueDiscussions ||
+    getters.noteableType === constants.ISSUE_NOTEABLE_TYPE ||
     window.gon?.features?.paginatedMrDiscussions
   ) {
     return dispatch('fetchDiscussionsBatch', { path, config, perPage: 20 });
@@ -114,7 +117,7 @@ export const fetchDiscussionsBatch = ({ commit, dispatch }, { path, config, curs
   return axios.get(path, { params }).then(({ data, headers }) => {
     commit(types.ADD_OR_UPDATE_DISCUSSIONS, data);
 
-    if (headers['x-next-page-cursor']) {
+    if (headers && headers['x-next-page-cursor']) {
       const nextConfig = { ...config };
 
       if (config?.params?.persist_filter) {

app/assets/javascripts/packages_and_registries/settings/group/components/duplicates_settings.vue

 <script>
-import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 
 import {
   DUPLICATES_TOGGLE_LABEL,
-  DUPLICATES_ALLOWED_DISABLED,
-  DUPLICATES_ALLOWED_ENABLED,
   DUPLICATES_SETTING_EXCEPTION_TITLE,
   DUPLICATES_SETTINGS_EXCEPTION_LEGEND,
 } from '~/packages_and_registries/settings/group/constants';
@@ -18,7 +16,6 @@ export default {
     DUPLICATES_SETTINGS_EXCEPTION_LEGEND,
   },
   components: {
-    GlSprintf,
     GlToggle,
     GlFormGroup,
     GlFormInput,
@@ -63,9 +60,6 @@ export default {
     },
   },
   computed: {
-    enabledButtonLabel() {
-      return this.duplicatesAllowed ? DUPLICATES_ALLOWED_ENABLED : DUPLICATES_ALLOWED_DISABLED;
-    },
     isExceptionRegexValid() {
       return !this.duplicateExceptionRegexError;
     },
@@ -80,41 +74,30 @@ export default {
 
 <template>
   <form>
-    <div class="gl-display-flex">
-      <gl-toggle
-        :data-qa-selector="toggleQaSelector"
-        :label="$options.i18n.DUPLICATES_TOGGLE_LABEL"
-        label-position="hidden"
-        :value="duplicatesAllowed"
+    <gl-toggle
+      :data-qa-selector="toggleQaSelector"
+      :label="$options.i18n.DUPLICATES_TOGGLE_LABEL"
+      :value="duplicatesAllowed"
+      :disabled="loading"
+      @change="update(modelNames.allowed, $event)"
+    />
+    <gl-form-group
+      v-if="!duplicatesAllowed"
+      class="gl-mt-4"
+      :label="$options.i18n.DUPLICATES_SETTING_EXCEPTION_TITLE"
+      label-size="sm"
+      :state="isExceptionRegexValid"
+      :invalid-feedback="duplicateExceptionRegexError"
+      :description="$options.i18n.DUPLICATES_SETTINGS_EXCEPTION_LEGEND"
+      label-for="maven-duplicated-settings-regex-input"
+    >
+      <gl-form-input
+        id="maven-duplicated-settings-regex-input"
         :disabled="loading"
-        @change="update(modelNames.allowed, $event)"
+        size="lg"
+        :value="duplicateExceptionRegex"
+        @change="update(modelNames.exception, $event)"
       />
-      <div class="gl-ml-5">
-        <div data-testid="toggle-label" :data-qa-selector="labelQaSelector">
-          <gl-sprintf :message="enabledButtonLabel">
-            <template #bold="{ content }">
-              <strong>{{ content }}</strong>
-            </template>
-          </gl-sprintf>
-        </div>
-        <gl-form-group
-          v-if="!duplicatesAllowed"
-          class="gl-mt-4"
-          :label="$options.i18n.DUPLICATES_SETTING_EXCEPTION_TITLE"
-          label-size="sm"
-          :state="isExceptionRegexValid"
-          :invalid-feedback="duplicateExceptionRegexError"
-          :description="$options.i18n.DUPLICATES_SETTINGS_EXCEPTION_LEGEND"
-          label-for="maven-duplicated-settings-regex-input"
-        >
-          <gl-form-input
-            id="maven-duplicated-settings-regex-input"
-            :disabled="loading"
-            :value="duplicateExceptionRegex"
-            @change="update(modelNames.exception, $event)"
-          />
-        </gl-form-group>
-      </div>
-    </div>
+    </gl-form-group>
   </form>
 </template>

app/assets/javascripts/packages_and_registries/settings/group/components/packages_settings.vue

 <script>
-import { GlSprintf, GlLink } from '@gitlab/ui';
 import DuplicatesSettings from '~/packages_and_registries/settings/group/components/duplicates_settings.vue';
 import GenericSettings from '~/packages_and_registries/settings/group/components/generic_settings.vue';
 import MavenSettings from '~/packages_and_registries/settings/group/components/maven_settings.vue';
 import {
   PACKAGE_SETTINGS_HEADER,
   PACKAGE_SETTINGS_DESCRIPTION,
-  PACKAGES_DOCS_PATH,
 } from '~/packages_and_registries/settings/group/constants';
 import updateNamespacePackageSettings from '~/packages_and_registries/settings/group/graphql/mutations/update_group_packages_settings.mutation.graphql';
 import { updateGroupPackageSettings } from '~/packages_and_registries/settings/group/graphql/utils/cache_update';
@@ -19,12 +17,7 @@ export default {
     PACKAGE_SETTINGS_HEADER,
     PACKAGE_SETTINGS_DESCRIPTION,
   },
-  links: {
-    PACKAGES_DOCS_PATH,
-  },
   components: {
-    GlSprintf,
-    GlLink,
     SettingsBlock,
     MavenSettings,
     GenericSettings,
@@ -98,13 +91,7 @@ export default {
     <template #title> {{ $options.i18n.PACKAGE_SETTINGS_HEADER }}</template>
     <template #description>
       <span data-testid="description">
-        <gl-sprintf :message="$options.i18n.PACKAGE_SETTINGS_DESCRIPTION">
-          <template #link="{ content }">
-            <gl-link :href="$options.links.PACKAGES_DOCS_PATH" target="_blank">{{
-              content
-            }}</gl-link>
-          </template>
-        </gl-sprintf>
+        {{ $options.i18n.PACKAGE_SETTINGS_DESCRIPTION }}
       </span>
     </template>
     <template #default>