app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

@@ -180,7 +180,7 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group class="gl-ml-3 gl-mt-n2 gl-mb-n2">
+        <gl-button-group class="gl-ml-3 -gl-mt-2 -gl-mb-2">
           <gl-button
             icon="settings"
             :aria-label="$options.i18n.editIntegration"

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -491,6 +491,7 @@ export default {
                   :debounce="$options.JSON_VALIDATE_DELAY"
                   rows="6"
                   max-rows="10"
+                  no-resize
                   @input="validateJson"
                 />
               </gl-form-group>
@@ -656,6 +657,7 @@ export default {
               :debounce="$options.JSON_VALIDATE_DELAY"
               rows="6"
               max-rows="10"
+              no-resize
               data-testid="test-payload-field"
               @input="validateJson(false)"
             />

app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue

@@ -357,7 +357,7 @@ export default {
     <gl-tab :title="$options.i18n.settingsTabs.currentIntegrations">
       <gl-alert
         v-if="showSuccessfulCreateAlert"
-        class="gl-mt-n2"
+        class="-gl-mt-2"
         :primary-button-text="$options.i18n.integrationCreated.btnCaption"
         :title="$options.i18n.integrationCreated.title"
         @primaryAction="viewCreatedIntegration"

app/assets/javascripts/analytics/cycle_analytics/index.js

@@ -4,6 +4,7 @@ import {
   extractPaginationQueryParameters,
 } from '~/analytics/shared/utils';
 import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import CycleAnalytics from './components/base.vue';
 import createStore from './store';
 import { buildCycleAnalyticsInitialData } from './utils';
@@ -13,7 +14,7 @@ Vue.use(Translate);
 export default () => {
   const store = createStore();
   const el = document.querySelector('#js-cycle-analytics');
-  const { noAccessSvgPath, noDataSvgPath } = el.dataset;
+  const { noAccessSvgPath, noDataSvgPath, hasScopedLabelsFeature } = el.dataset;
   const initialData = buildCycleAnalyticsInitialData({ ...el.dataset, gon });
 
   const pagination = extractPaginationQueryParameters(window.location.search);
@@ -38,6 +39,9 @@ export default () => {
     el,
     name: 'CycleAnalytics',
     apolloProvider: {},
+    provide: {
+      hasScopedLabelsFeature: parseBoolean(hasScopedLabelsFeature),
+    },
     store,
     render: (createElement) =>
       createElement(CycleAnalytics, {

app/assets/javascripts/analytics/shared/components/metric_tile.vue

 <script>
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { visitUrl } from '~/lib/utils/url_utility';
 import MetricPopover from './metric_popover.vue';
 
 export default {
@@ -27,7 +27,7 @@ export default {
   methods: {
     clickHandler({ links }) {
       if (this.hasLinks) {
-        redirectTo(links[0].url); // eslint-disable-line import/no-deprecated
+        visitUrl(links[0].url);
       }
     },
   },

app/assets/javascripts/api.js

@@ -176,6 +176,17 @@ const Api = {
     });
   },
 
+  groupSubgroups(id, options) {
+    const url = Api.buildUrl(this.subgroupsPath).replace(':id', encodeURIComponent(id));
+
+    return axios.get(url, {
+      params: {
+        per_page: DEFAULT_PER_PAGE,
+        ...options,
+      },
+    });
+  },
+
   inviteGroupMembers(id, data) {
     const url = Api.buildUrl(this.groupInvitationsPath).replace(':id', encodeURIComponent(id));
 

app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue

@@ -122,7 +122,7 @@ export default {
         </li>
       </ul>
     </gl-card>
-    <div class="gl-my-n2 gl-mx-n2 gl-display-flex gl-flex-wrap">
+    <div class="-gl-my-2 gl-mx-n2 gl-display-flex gl-flex-wrap">
       <div class="gl-p-2">
         <clipboard-button
           :title="$options.i18n.copyButton"

app/assets/javascripts/badges/components/badge_form.vue

@@ -259,7 +259,7 @@ export default {
       <p v-show="isRendering">
         <gl-loading-icon size="sm" :inline="true" />
       </p>
-      <p v-show="!renderedBadge && !isRendering" class="disabled-content">
+      <p v-show="!renderedBadge && !isRendering" class="gl-text-subtle">
         {{ s__('Badges|No image to preview') }}
       </p>
     </div>

app/assets/javascripts/behaviors/preview_markdown.js

@@ -136,7 +136,7 @@ $(document).on('markdown-preview:show', (e, $form) => {
   if (!$previewButton.parents('.js-vue-markdown-field').length) {
     $previewButton.val('edit');
     $previewButton.children('span.gl-button-text').text(__('Continue editing'));
-    $previewButton.addClass('gl-shadow-none! gl-bg-transparent!');
+    $previewButton.addClass('!gl-shadow-none gl-bg-transparent!');
   }
 
   // toggle content
@@ -196,7 +196,7 @@ $(document).on('click', previewButtonSelector, function (e) {
 $(document).on('mousedown', previewButtonSelector, function (e) {
   e.preventDefault();
   const $form = $(this).closest('form');
-  $form.find(previewButtonSelector).removeClass('gl-shadow-none! gl-bg-transparent!');
+  $form.find(previewButtonSelector).removeClass('!gl-shadow-none gl-bg-transparent!');
 });
 
 $(document).on('mouseenter', previewButtonSelector, function (e) {

app/assets/javascripts/blob/components/blob_header_filepath.vue

@@ -42,7 +42,7 @@ export default {
 };
 </script>
 <template>
-  <div class="file-header-content d-flex gl-align-items-center gl-line-height-1">
+  <div class="file-header-content d-flex gl-align-items-center gl-leading-1">
     <slot name="filepath-prepend"></slot>
 
     <template v-if="fileName">

app/assets/javascripts/boards/components/board_add_new_column.vue

@@ -210,7 +210,9 @@ export default {
         </template>
 
         <template #list-item="{ item }">
-          <label class="gl-display-flex gl-font-weight-normal gl-overflow-break-word gl-mb-0">
+          <label
+            class="gl-display-flex gl-font-weight-normal gl-break-words gl-hyphens-auto gl-mb-0"
+          >
             <span
               class="dropdown-label-box gl-top-0 gl-flex-shrink-0"
               :style="{

app/assets/javascripts/boards/components/board_add_new_column_trigger.vue

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
-import BoardAddNewColumnTriggerPopover from '~/boards/components/board_add_new_column_trigger_popover.vue';
 
 export default {
   components: {
     GlButton,
     GlIcon,
-    BoardAddNewColumnTriggerPopover,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -17,11 +15,6 @@ export default {
     },
   },
   methods: {
-    scrollToButton(popover) {
-      if (popover) {
-        this.$el.scrollIntoView({ behavior: 'smooth', inline: 'center' });
-      }
-    },
     handleClick() {
       this.$emit('setAddColumnFormVisibility', true);
       this.track('click_button', { label: 'create_list' });
@@ -42,9 +35,5 @@ export default {
       <gl-icon name="plus" :size="16" />
       {{ __('New list') }}
     </gl-button>
-    <!-- TEMPORARY callout for new "New list" button location -->
-    <board-add-new-column-trigger-popover
-      @boardAddNewColumnTriggerPopoverRendered="scrollToButton"
-    />
   </span>
 </template>

app/assets/javascripts/boards/components/board_add_new_column_trigger_popover.vue

-<script>
-import { GlButton, GlPopover } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
-import { glEmojiTag } from '~/emoji';
-import SafeHtml from '~/vue_shared/directives/safe_html';
-
-export default {
-  name: 'BoardAddNewColumnTriggerPopover',
-  components: {
-    GlButton,
-    GlPopover,
-    UserCalloutDismisser,
-  },
-  directives: {
-    SafeHtml,
-  },
-  data() {
-    return {
-      emoji: glEmojiTag('sparkles'),
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      const popover = this.$refs.boardNewListButtonCallout;
-      this.$emit('boardAddNewColumnTriggerPopoverRendered', popover);
-    }, 1000);
-  },
-  i18n: {
-    title: s__('Boards|The "New list" button has moved'),
-    body: s__('Boards|You can add a new list to the board here'),
-    dismiss: s__('Boards|Got it'),
-  },
-  safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
-};
-</script>
-
-<template>
-  <user-callout-dismisser feature-name="board_add_new_column_trigger_popover">
-    <template #default="{ dismiss, shouldShowCallout, isAnonUser }">
-      <gl-popover
-        v-if="shouldShowCallout && !isAnonUser"
-        ref="boardNewListButtonCallout"
-        :show="shouldShowCallout"
-        :css-classes="[
-          'gl-max-w-48',
-          'gl-shadow-lg',
-          'gl-p-2',
-          'gl-bg-blue-50',
-          'board-new-list-button-callout',
-        ]"
-        target="boards-create-list"
-        triggers="manual"
-        placement="left"
-        data-testid="board-new-list-button-callout"
-      >
-        <h5 class="gl-mt-0 gl-mb-3">
-          {{ $options.i18n.title }}
-          <span v-safe-html:[$options.safeHtmlConfig]="emoji" class="gl-ml-2"></span>
-        </h5>
-
-        <p class="gl-my-2 gl-font-base">
-          {{ $options.i18n.body }}
-        </p>
-        <div class="gl-display-flex gl-justify-content-end gl-mt-4 gl-mb-2">
-          <gl-button
-            variant="confirm"
-            category="secondary"
-            class="gl-bg-transparent!"
-            data-testid="board-new-list-button-callout-dismiss"
-            @click="dismiss"
-            >{{ $options.i18n.dismiss }}</gl-button
-          >
-        </div>
-      </gl-popover>
-    </template>
-  </user-callout-dismisser>
-</template>
-<style lang="scss">
-.board-new-list-button-callout {
-  z-index: 9;
-  &.bs-popover-left .arrow::after {
-    border-left-color: var(--blue-50, #e9f3fc) !important;
-  }
-  &.bs-popover-right > .arrow::after {
-    border-right-color: var(--blue-50, #e9f3fc) !important;
-  }
-  &.bs-popover-bottom > .arrow::after {
-    border-bottom-color: var(--blue-50, #e9f3fc) !important;
-  }
-  &.bs-popover-top > .arrow::after {
-    border-top-color: var(--blue-50, #e9f3fc) !important;
-  }
-}
-</style>

app/assets/javascripts/boards/components/board_app.vue

 <script>
 import { omit } from 'lodash';
-import { refreshCurrentPage, queryToObject } from '~/lib/utils/url_utility';
+import AccessorUtilities from '~/lib/utils/accessor';
+import { historyPushState, parseBoolean } from '~/lib/utils/common_utils';
+import {
+  refreshCurrentPage,
+  queryToObject,
+  mergeUrlParams,
+  removeParams,
+} from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import BoardTopBar from '~/boards/components/board_top_bar.vue';
-import { listsQuery, FilterFields } from 'ee_else_ce/boards/constants';
+import { listsQuery, FilterFields, GroupByParamType } from 'ee_else_ce/boards/constants';
 import { formatBoardLists, filterVariables, FiltersInfo } from 'ee_else_ce/boards/boards_util';
 import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql';
 import errorQuery from '../graphql/client/error.query.graphql';
@@ -38,7 +45,7 @@ export default {
       boardId: this.initialBoardId,
       filterParams: { ...this.initialFilterParams },
       addColumnFormVisible: false,
-      isShowingEpicsSwimlanes: Boolean(queryToObject(window.location.search).group_by),
+      isShowingEpicsSwimlanes: false,
       error: null,
     };
   },
@@ -109,9 +116,13 @@ export default {
         filterFields: FilterFields,
       });
     },
+    isShowingEpicSwimlanesLocalStorageKey() {
+      return `board.${this.fullPath}.${this.boardId}.isShowingEpicSwimlanes`;
+    },
   },
   created() {
     window.addEventListener('popstate', refreshCurrentPage);
+    this.initIsShowingEpicSwimlanes();
   },
   destroyed() {
     window.removeEventListener('popstate', refreshCurrentPage);
@@ -126,11 +137,64 @@ export default {
     switchBoard(id) {
       this.boardId = id;
       this.setActiveId('');
+      this.setIsShowingEpicSwimlanesFromLocalStorage();
     },
     setFilters(filters) {
       const filterParams = { ...filters };
       this.filterParams = filterParams;
     },
+    setIsShowingEpicSwimlanes(value) {
+      this.isShowingEpicsSwimlanes = value;
+      this.saveIsShowingEpicSwimlanes();
+    },
+    getIsShowingEpicSwimlanesFromUrl() {
+      return queryToObject(window.location.search).group_by === GroupByParamType.epic;
+    },
+    getIsShowingEpicSwimlanesFromLocalStorage() {
+      return parseBoolean(localStorage.getItem(this.isShowingEpicSwimlanesLocalStorageKey));
+    },
+    setIsShowingEpicSwimlanesFromLocalStorage() {
+      if (AccessorUtilities.canUseLocalStorage()) {
+        this.isShowingEpicsSwimlanes = this.getIsShowingEpicSwimlanesFromLocalStorage();
+        if (this.isShowingEpicsSwimlanes) {
+          historyPushState(
+            mergeUrlParams({ group_by: GroupByParamType.epic }, window.location.href, {
+              spreadArrays: true,
+            }),
+          );
+        } else {
+          this.removeGroupByParam();
+        }
+      }
+    },
+    initIsShowingEpicSwimlanes() {
+      if (this.isIssueBoard) {
+        const urlHasEpicSwimlanes = this.getIsShowingEpicSwimlanesFromUrl();
+        this.setIsShowingEpicSwimlanes(urlHasEpicSwimlanes);
+        if (urlHasEpicSwimlanes) {
+          return;
+        }
+        if (this.getIsShowingEpicSwimlanesFromLocalStorage()) {
+          this.setIsShowingEpicSwimlanes(true);
+        }
+      } else {
+        this.removeGroupByParam();
+      }
+    },
+    saveIsShowingEpicSwimlanes() {
+      if (AccessorUtilities.canUseLocalStorage()) {
+        const currentLocalStorageValue = this.getIsShowingEpicSwimlanesFromLocalStorage();
+        if (currentLocalStorageValue !== this.isShowingEpicsSwimlanes) {
+          localStorage.setItem(
+            this.isShowingEpicSwimlanesLocalStorageKey,
+            this.isShowingEpicsSwimlanes,
+          );
+        }
+      }
+    },
+    removeGroupByParam() {
+      historyPushState(removeParams(['group_by']), window.location.href, true);
+    },
   },
 };
 </script>
@@ -144,7 +208,7 @@ export default {
       @switchBoard="switchBoard"
       @setFilters="setFilters"
       @setAddColumnFormVisibility="addColumnFormVisible = $event"
-      @toggleSwimlanes="isShowingEpicsSwimlanes = $event"
+      @toggleSwimlanes="setIsShowingEpicSwimlanes"
       @updateBoard="refetchLists"
     />
     <board-content

app/assets/javascripts/boards/components/board_card.vue

@@ -155,7 +155,7 @@ export default {
     :data-item-path="item.referencePath"
     :style="cardStyle"
     data-testid="board-card"
-    class="board-card gl-p-5 gl-rounded-base gl-line-height-normal gl-relative gl-mb-3"
+    class="board-card gl-p-5 gl-rounded-base gl-leading-normal gl-relative gl-mb-3"
     @click="toggleIssue($event)"
   >
     <board-card-inner

app/assets/javascripts/boards/components/board_card_inner.vue

 <script>
-import {
-  GlLabel,
-  GlTooltip,
-  GlTooltipDirective,
-  GlIcon,
-  GlLoadingIcon,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlLabel, GlTooltipDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { sortBy } from 'lodash';
 import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -24,7 +17,6 @@ import IssueTimeEstimate from './issue_time_estimate.vue';
 
 export default {
   components: {
-    GlTooltip,
     GlLabel,
     GlLoadingIcon,
     GlIcon,
@@ -34,11 +26,12 @@ export default {
     IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
     IssueIteration: () => import('ee_component/boards/components/issue_iteration.vue'),
     IssuableBlockedIcon,
-    GlSprintf,
     WorkItemTypeIcon,
     IssueMilestone,
     IssueHealthStatus: () =>
       import('ee_component/related_items_tree/components/issue_health_status.vue'),
+    EpicCountables: () =>
+      import('ee_else_ce/vue_shared/components/epic_countables/epic_countables.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -142,9 +135,6 @@ export default {
     shouldRenderEpicCountables() {
       return this.isEpicBoard && this.hasChildren;
     },
-    shouldRenderEpicProgress() {
-      return this.totalWeight > 0;
-    },
     showLabelFooter() {
       return this.isShowingLabels && this.item.labels.find(this.showLabel);
     },
@@ -164,19 +154,17 @@ export default {
       }
       return __('Blocked issue');
     },
-    totalEpicsCount() {
-      return this.item.descendantCounts.openedEpics + this.item.descendantCounts.closedEpics;
+    descendantCounts() {
+      return this.item.descendantCounts;
     },
-    totalIssuesCount() {
-      return this.item.descendantCounts.openedIssues + this.item.descendantCounts.closedIssues;
+    descendantWeightSum() {
+      return this.item.descendantWeightSum;
     },
-    totalWeight() {
-      return (
-        this.item.descendantWeightSum.openedIssues + this.item.descendantWeightSum.closedIssues
-      );
+    totalEpicsCount() {
+      return this.descendantCounts.openedEpics + this.descendantCounts.closedEpics;
     },
-    totalProgress() {
-      return Math.round((this.item.descendantWeightSum.closedIssues / this.totalWeight) * 100);
+    totalIssuesCount() {
+      return this.descendantCounts.openedIssues + this.descendantCounts.closedIssues;
     },
     showReferencePath() {
       return this.isGroupBoard && this.itemReferencePath;
@@ -242,7 +230,7 @@ export default {
   <div>
     <div class="gl-display-flex" dir="auto">
       <h4
-        class="board-card-title gl-min-w-0 gl-mb-0 gl-mt-0 gl-mr-3 gl-font-base gl-overflow-break-word"
+        class="board-card-title gl-min-w-0 gl-mb-0 gl-mt-0 gl-mr-3 gl-font-base gl-break-words gl-hyphens-auto"
       >
         <issuable-blocked-icon
           v-if="item.blocked"
@@ -298,7 +286,7 @@ export default {
       <div
         class="gl-display-flex align-items-start gl-flex-wrap-reverse board-card-number-container gl-overflow-hidden"
       >
-        <span class="board-info-items gl-mt-3 gl-line-height-20 gl-display-inline-block">
+        <span class="board-info-items gl-mt-3 gl-leading-20 gl-display-inline-block">
           <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-5" />
           <span
             v-if="showBoardCardNumber"
@@ -321,83 +309,16 @@ export default {
             </span>
             {{ itemId }}
           </span>
-          <span v-if="shouldRenderEpicCountables" data-testid="epic-countables">
-            <gl-tooltip :target="() => $refs.countBadge">
-              <p v-if="allowSubEpics" class="gl-font-weight-bold gl-m-0">
-                {{ __('Epics') }} &#8226;
-                <span class="gl-font-weight-normal">
-                  <gl-sprintf :message="__('%{openedEpics} open, %{closedEpics} closed')">
-                    <template #openedEpics>{{ item.descendantCounts.openedEpics }}</template>
-                    <template #closedEpics>{{ item.descendantCounts.closedEpics }}</template>
-                  </gl-sprintf>
-                </span>
-              </p>
-              <p class="gl-font-weight-bold gl-m-0">
-                {{ __('Issues') }} &#8226;
-                <span class="gl-font-weight-normal">
-                  <gl-sprintf :message="__('%{openedIssues} open, %{closedIssues} closed')">
-                    <template #openedIssues>{{ item.descendantCounts.openedIssues }}</template>
-                    <template #closedIssues>{{ item.descendantCounts.closedIssues }}</template>
-                  </gl-sprintf>
-                </span>
-              </p>
-              <p class="gl-font-weight-bold gl-m-0">
-                {{ __('Total weight') }} &#8226;
-                <span class="gl-font-weight-normal" data-testid="epic-countables-total-weight">
-                  {{ totalWeight }}
-                </span>
-              </p>
-            </gl-tooltip>
-
-            <gl-tooltip
-              v-if="shouldRenderEpicProgress"
-              :target="() => $refs.progressBadge"
-              data-testid="epic-progress-tooltip"
-            >
-              <p class="gl-font-weight-bold gl-m-0">
-                {{ __('Progress') }} &#8226;
-                <span class="gl-font-weight-normal" data-testid="epic-progress-tooltip-content">
-                  <gl-sprintf
-                    :message="__('%{completedWeight} of %{totalWeight} weight completed')"
-                  >
-                    <template #completedWeight>{{
-                      item.descendantWeightSum.closedIssues
-                    }}</template>
-                    <template #totalWeight>{{ totalWeight }}</template>
-                  </gl-sprintf>
-                </span>
-              </p>
-            </gl-tooltip>
-
-            <span
-              ref="countBadge"
-              class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3 gl-text-secondary gl-cursor-help"
-            >
-              <span v-if="allowSubEpics" class="gl-mr-3">
-                <gl-icon name="epic" />
-                {{ totalEpicsCount }}
-              </span>
-              <span class="gl-mr-3" data-testid="epic-countables-counts-issues">
-                <gl-icon name="issues" />
-                {{ totalIssuesCount }}
-              </span>
-              <span class="gl-mr-3" data-testid="epic-countables-weight-issues">
-                <gl-icon name="weight" />
-                {{ totalWeight }}
-              </span>
-            </span>
-
-            <span
-              v-if="shouldRenderEpicProgress"
-              ref="progressBadge"
-              class="board-card-info gl-pl-0 gl-text-secondary gl-cursor-help"
-            >
-              <span class="gl-mr-3" data-testid="epic-progress">
-                <gl-icon name="progress" />
-                {{ totalProgress }}%
-              </span>
-            </span>
-          </span>
+          <epic-countables
+            v-if="shouldRenderEpicCountables"
+            :allow-sub-epics="allowSubEpics"
+            :opened-epics-count="descendantCounts.openedEpics"
+            :closed-epics-count="descendantCounts.closedEpics"
+            :opened-issues-count="descendantCounts.openedIssues"
+            :closed-issues-count="descendantCounts.closedIssues"
+            :opened-issues-weight="descendantWeightSum.openedIssues"
+            :closed-issues-weight="descendantWeightSum.closedIssues"
+          />
           <span v-if="!isEpicBoard">
             <issue-card-weight
               v-if="validIssueWeight(item)"
@@ -426,7 +347,7 @@ export default {
           </span>
         </span>
       </div>
-      <div class="board-card-assignee gl-display-flex gl-mb-n2">
+      <div class="board-card-assignee gl-display-flex -gl-mb-2">
         <user-avatar-link
           v-for="assignee in cappedAssignees"
           :key="assignee.id"
@@ -447,7 +368,7 @@ export default {
           v-if="shouldRenderCounter"
           v-gl-tooltip
           :title="assigneeCounterTooltip"
-          class="avatar-counter gl-bg-gray-100 gl-text-gray-900 gl-cursor-help gl-font-weight-bold gl-border-0 gl-line-height-24 gl-ml-n3"
+          class="avatar-counter gl-bg-gray-100 gl-text-gray-900 gl-cursor-help gl-font-weight-bold gl-border-0 gl-leading-24 -gl-ml-3"
           data-placement="bottom"
           >{{ assigneeCounterLabel }}</span
         >

app/assets/javascripts/boards/components/board_card_move_to_position.vue

@@ -105,7 +105,7 @@ export default {
       title: $options.i18n.moveCardText,
       boundary: 'viewport',
     }"
-    class="move-to-position gl-display-block gl-mb-2 gl-ml-auto gl-mt-n3 gl-mr-n3 js-no-trigger"
+    class="move-to-position gl-display-block gl-mb-2 gl-ml-auto -gl-mt-3 -gl-mr-3 js-no-trigger"
     category="tertiary"
     :items="$options.BOARD_CARD_MOVE_TO_POSITIONS_OPTIONS"
     icon="ellipsis_v"

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -185,7 +185,7 @@ export default {
       @close="handleClose"
     >
       <template #title>
-        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ sidebarTitle }}</h2>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-leading-24">{{ sidebarTitle }}</h2>
       </template>
       <template #header>
         <sidebar-todo-widget

app/assets/javascripts/boards/components/board_form.vue

 <script>
-import { GlForm, GlModal, GlAlert } from '@gitlab/ui';
+import { GlForm, GlModal, GlAlert, GlButton } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import { formType } from '../constants';
@@ -29,9 +29,10 @@ export default {
   i18n: {
     [formType.new]: { title: s__('Board|Create new board'), btnText: s__('Board|Create board') },
     [formType.delete]: { title: s__('Board|Delete board'), btnText: __('Delete') },
-    [formType.edit]: { title: s__('Board|Edit board'), btnText: __('Save changes') },
-    scopeModalTitle: s__('Board|Board scope'),
+    [formType.edit]: { title: s__('Board|Configure board'), btnText: __('Save changes') },
+    scopeModalTitle: s__('Board|Board configuration'),
     cancelButtonText: __('Cancel'),
+    deleteButtonText: s__('Board|Delete board'),
     deleteErrorMessage: s__('Board|Failed to delete board. Please try again.'),
     saveErrorMessage: __('Unable to save your changes. Please try again.'),
     deleteConfirmationMessage: s__('Board|Are you sure you want to delete this board?'),
@@ -41,6 +42,7 @@ export default {
   components: {
     BoardScope: () => import('ee_component/boards/components/board_scope.vue'),
     GlModal,
+    GlButton,
     BoardConfigurationOptions,
     GlAlert,
     GlForm,
@@ -82,6 +84,11 @@ export default {
       type: String,
       required: true,
     },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -170,12 +177,16 @@ export default {
     mutationVariables() {
       return this.baseMutationVariables;
     },
+    canDelete() {
+      return this.canAdminBoard && this.showDelete && this.isEditForm;
+    },
   },
   mounted() {
     this.resetFormState();
     if (this.$refs.name) {
       this.$refs.name.focus();
     }
+    this.$emit('shown');
   },
   methods: {
     setError,
@@ -197,6 +208,9 @@ export default {
 
       return response.data.updateBoard.board;
     },
+    openDeleteModal() {
+      this.$emit('showBoardModal', this.$options.formType.delete);
+    },
     async deleteBoard() {
       await this.$apollo.mutate({
         mutation: this.deleteMutation,
@@ -265,6 +279,7 @@ export default {
       this.$set(this.board, 'weight', weight);
     },
   },
+  formType,
 };
 </script>
 
@@ -331,5 +346,23 @@ export default {
         @set-weight="setWeight"
       />
     </gl-form>
+    <template v-if="canDelete" #modal-footer>
+      <div class="gl-display-flex gl-justify-content-space-between gl-w-full gl-m-0">
+        <gl-button
+          category="secondary"
+          variant="danger"
+          data-testid="delete-board-button"
+          @click="openDeleteModal"
+        >
+          {{ $options.i18n.deleteButtonText }}</gl-button
+        >
+        <div>
+          <gl-button @click="cancel">{{ cancelProps.text }}</gl-button>
+          <gl-button v-bind="primaryProps.attributes" @click="submit">{{
+            primaryProps.text
+          }}</gl-button>
+        </div>
+      </div>
+    </template>
   </gl-modal>
 </template>

app/assets/javascripts/boards/components/board_options.vue

@@ -10,6 +10,13 @@ import isShowingLabelsQuery from '~/graphql_shared/client/is_showing_labels.quer
 import setIsShowingLabelsMutation from '~/graphql_shared/client/set_is_showing_labels.mutation.graphql';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
+import Tracking from '~/tracking';
+import { historyPushState } from '~/lib/utils/common_utils';
+import { mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
+import { GroupByParamType } from 'ee_else_ce/boards/constants';
+
+const trackingMixin = Tracking.mixin();
+
 export default {
   components: {
     GlDisclosureDropdown,
@@ -21,6 +28,7 @@ export default {
   directives: {
     GlTooltipDirective,
   },
+  mixins: [trackingMixin],
   props: {
     showEpicLaneOption: {
       type: Boolean,
@@ -50,8 +58,34 @@ export default {
     },
   },
   methods: {
-    toggleEpicsSwimlanes() {
-      this.$emit('toggleSwimlanes', !this.isSwimlanesOn);
+    onToggleSwimLanes() {
+      // Track toggle event
+      this.track('click_toggle_swimlanes_button', {
+        label: 'toggle_swimlanes',
+        property: this.isSwimlanesOn ? 'off' : 'on',
+      });
+
+      // Track if the board has swimlane active
+      if (!this.isSwimlanesOn) {
+        this.track('click_toggle_swimlanes_button', {
+          label: 'swimlanes_active',
+        });
+      }
+
+      this.toggleEpicSwimlanes();
+    },
+    toggleEpicSwimlanes() {
+      if (this.isSwimlanesOn) {
+        historyPushState(removeParams(['group_by']), window.location.href, true);
+        this.$emit('toggleSwimlanes', false);
+      } else {
+        historyPushState(
+          mergeUrlParams({ group_by: GroupByParamType.epic }, window.location.href, {
+            spreadArrays: true,
+          }),
+        );
+        this.$emit('toggleSwimlanes', true);
+      }
     },
     setShowLabels() {
       this.$apollo.mutate({
@@ -102,7 +136,7 @@ export default {
     <gl-disclosure-dropdown-item
       v-if="showEpicLaneOption"
       data-testid="epic-swimlanes-toggle-item"
-      @action="toggleEpicsSwimlanes"
+      @action="onToggleSwimLanes"
     >
       <template #list-item>
         <toggle-epics-swimlanes :is-swimlanes-on="isSwimlanesOn" />