Add latest changes from gitlab-org/gitlab@master

57 files changed, 185 insertions, 110 deletions

diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
index b2df84b87e2..b3ecaceba69 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
@@ -460,9 +460,7 @@ export default {
         data-testid="aws-guidance-tip"
         @dismiss="dismissTip"
       >
-        <div
-          class="gl-display-flex gl-flex-direction-row gl-flex-wrap gl-md-flex-wrap-nowrap gl-gap-3"
-        >
+        <div class="gl-display-flex gl-flex-direction-row gl-flex-wrap gl-md-flex-nowrap gl-gap-3">
           <div>
             <p>
               <gl-sprintf :message="$options.i18n.awsTipMessage">
diff --git a/app/assets/javascripts/groups/components/group_name_and_path.vue b/app/assets/javascripts/groups/components/group_name_and_path.vue
index ea7993232ad..1f9fc68a612 100644
--- a/app/assets/javascripts/groups/components/group_name_and_path.vue
+++ b/app/assets/javascripts/groups/components/group_name_and_path.vue
@@ -302,7 +302,7 @@ export default {
 
     <div :class="newSubgroup && 'row gl-mb-3'">
       <gl-form-group v-if="newSubgroup" class="col-sm-6 gl-pr-0" :label="inputLabels.subgroupPath">
-        <div class="input-group gl-flex-wrap-nowrap">
+        <div class="input-group gl-flex-nowrap">
           <gl-button-group class="gl-w-full">
             <gl-button class="js-group-namespace-button gl-text-truncate gl-flex-grow-0!" label>
               {{ basePath }}
diff --git a/app/assets/javascripts/ide/components/ide_status_mr.vue b/app/assets/javascripts/ide/components/ide_status_mr.vue
index 384b10326f9..d05ca4141c8 100644
--- a/app/assets/javascripts/ide/components/ide_status_mr.vue
+++ b/app/assets/javascripts/ide/components/ide_status_mr.vue
@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex-center gl-flex-wrap-nowrap text-nowrap js-ide-status-mr">
+  <div class="d-flex-center gl-flex-nowrap text-nowrap js-ide-status-mr">
     <gl-icon name="merge-request" />
     <span class="ml-1 d-none d-sm-block">{{ s__('WebIDE|Merge request') }}</span>
     <gl-link class="ml-1" :href="url">{{ text }}</gl-link>
diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
index df7736b330d..6c26cde42e3 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
@@ -31,7 +31,7 @@ export default {
 
 <template>
   <dropdown-button class="gl-w-full!">
-    <span class="row gl-flex-wrap-nowrap">
+    <span class="row gl-flex-nowrap">
       <span class="col-auto flex-fill text-truncate">
         <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
       </span>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index 66bd562ee4d..b20309baac7 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -180,7 +180,7 @@ export default {
       </div>
     </td>
     <td data-testid="fullPath" data-qa-selector="project_path_content">
-      <div class="gl-display-flex gl-sm-flex-wrap-wrap">
+      <div class="gl-display-flex gl-sm-flex-wrap">
         <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
         <template v-else-if="isImportNotStarted || isSelectedForReimport">
           <div class="gl-display-flex gl-align-items-stretch gl-w-full">
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index 3a8f6571700..c9416945318 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -105,7 +105,7 @@ export default {
     class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-mx-n2"
   >
     <div
-      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap-wrap gl-flex-grow-1 gl-gap-2 gl-px-3 gl-py-2 py-xl-0 flex-xl-nowrap gl-min-h-7"
+      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 gl-px-3 gl-py-2 py-xl-0 flex-xl-nowrap gl-min-h-7"
     >
       <!-- Title area: Status icon (XL) and title -->
       <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0">
@@ -146,7 +146,7 @@ export default {
         >
           <!-- Path area: status icon (<XL), path, issue # -->
           <div
-            class="item-path-area item-path-id gl-display-flex gl-align-items-center gl-flex-wrap-wrap gl-gap-3"
+            class="item-path-area item-path-id gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3"
           >
             <gl-tooltip :target="() => $refs.iconElement">
               <span v-safe-html="stateTitle"></span>
@@ -164,7 +164,7 @@ export default {
           <!-- Attributes area: CI, epic count, weight, milestone -->
           <!-- They have a different order on large screen sizes -->
           <div
-            class="item-attributes-area gl-display-flex gl-align-items-center gl-flex-wrap-wrap gl-gap-3"
+            class="item-attributes-area gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3"
           >
             <span v-if="hasPipeline" class="mr-ci-status order-md-last">
               <a :href="pipelineStatus.details_path">
diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
index 3e63866d275..c3f87699d58 100644
--- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue
@@ -68,7 +68,7 @@ export default {
     <div class="card card-slim gl-mt-5 gl-mb-0 gl-bg-gray-10">
       <div class="card-header gl-px-5 gl-py-4 gl-bg-white">
         <div
-          class="card-title gl-relative gl-display-flex gl-flex-wrap-wrap gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
+          class="card-title gl-relative gl-display-flex gl-flex-wrap gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0"
         >
           <gl-link
             class="anchor gl-absolute gl-text-decoration-none"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index 4b3f4b58816..8267c0130a3 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -255,7 +255,7 @@ export default {
       </gl-form-group>
     </div>
     <gl-form-group class="gl-mb-0">
-      <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-3">
+      <div class="gl-display-flex gl-flex-wrap gl-gap-3">
         <gl-button
           variant="confirm"
           category="primary"
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
index 0cb76443fc0..d33f3146d64 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
@@ -59,7 +59,7 @@ export default {
       <gl-icon :name="getEventIcon(action)" class="note-icon" />
     </div>
     <div class="timeline-event-note timeline-event-border" data-testid="event-text-container">
-      <div class="gl-display-flex gl-flex-wrap-wrap gl-align-items-center gl-gap-3 gl-mb-2">
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-2">
         <h3
           class="timeline-event-note-date gl-font-weight-bold gl-font-sm gl-my-0"
           data-testid="event-time"
diff --git a/app/assets/javascripts/jobs/components/job/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job/job_log_controllers.vue
index 027edda230c..ea7e13418f2 100644
--- a/app/assets/javascripts/jobs/components/job/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job/job_log_controllers.vue
@@ -180,7 +180,7 @@ export default {
   <div class="top-bar gl-display-flex gl-justify-content-space-between">
     <!-- truncate information -->
     <div
-      class="truncated-info gl-display-none gl-sm-display-flex gl-flex-wrap-wrap gl-align-items-center"
+      class="truncated-info gl-display-none gl-sm-display-flex gl-flex-wrap gl-align-items-center"
       data-testid="log-truncated-info"
     >
       <template v-if="isJobLogSizeVisible">
diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index 6232d099fdd..525094271d9 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -130,7 +130,7 @@ export default {
         </div>
         <div class="gl-w-full gl-display-flex">
           <ul
-            class="merge-request-tabs nav-tabs nav nav-links gl-display-flex gl-flex-wrap-nowrap gl-m-0 gl-p-0 gl-border-b-0"
+            class="merge-request-tabs nav-tabs nav nav-links gl-display-flex gl-flex-nowrap gl-m-0 gl-p-0 gl-border-b-0"
           >
             <li
               v-for="(tab, index) in tabs"
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
index 5b840a5ed43..92c662fedf1 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <div class="detail-page-header gl-flex-wrap-wrap">
+  <div class="detail-page-header gl-flex-wrap">
     <div class="detail-page-header-body">
       <h1 class="page-title gl-font-size-h-display flex-fill">{{ title }}</h1>
 
diff --git a/app/assets/javascripts/monitoring/components/links_section.vue b/app/assets/javascripts/monitoring/components/links_section.vue
index e431ba6ea0a..fb5ab12916e 100644
--- a/app/assets/javascripts/monitoring/components/links_section.vue
+++ b/app/assets/javascripts/monitoring/components/links_section.vue
@@ -15,7 +15,7 @@ export default {
 <template>
   <div
     ref="linksSection"
-    class="gl-sm-display-flex gl-sm-flex-wrap-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
+    class="gl-sm-display-flex gl-sm-flex-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
   >
     <div
       v-for="(link, key) in links"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index dee97347496..34ae0c7ffc1 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -384,7 +384,7 @@ export default {
               </template>
             </label>
           </p>
-          <div class="gl-display-flex gl-flex-wrap-wrap gl-mb-n3">
+          <div class="gl-display-flex gl-flex-wrap gl-mb-n3">
             <gl-button
               :disabled="isDisabled"
               category="primary"
@@ -418,7 +418,7 @@ export default {
           </div>
         </template>
         <template v-else>
-          <div class="gl-display-sm-flex gl-flex-wrap-wrap">
+          <div class="gl-display-sm-flex gl-flex-wrap">
             <gl-button
               :disabled="isDisabled"
               category="primary"
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index a4904bae1e9..b0f7a4a4732 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -61,7 +61,7 @@ export default {
 <template>
   <li
     :class="liClasses"
-    class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
+    class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
   >
     <gl-button
       ref="toggle"
diff --git a/app/assets/javascripts/oauth_application/components/oauth_secret.vue b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
index fabda19c27b..c4a928c5e07 100644
--- a/app/assets/javascripts/oauth_application/components/oauth_secret.vue
+++ b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
@@ -76,7 +76,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
+  <div class="gl-display-flex gl-flex-wrap gl-gap-5">
     <input-copy-toggle-visibility
       v-if="secret"
       :copy-button-title="$options.COPY_SECRET"
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
index b24ec65464f..d32e90f3adb 100644
--- a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
+++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue
@@ -8,7 +8,6 @@ import {
   GlFormInputGroup,
   GlModal,
   GlModalDirective,
-  GlSkeletonLoader,
   GlSprintf,
 } from '@gitlab/ui';
 import { __, s__, n__, sprintf } from '~/locale';
@@ -30,7 +29,6 @@ export default {
     GlFormGroup,
     GlFormInputGroup,
     GlModal,
-    GlSkeletonLoader,
     GlSprintf,
     ClipboardButton,
     TitleArea,
@@ -208,23 +206,20 @@ export default {
       </template>
     </gl-form-group>
 
-    <gl-skeleton-loader v-if="$apollo.queries.group.loading" />
+    <manifests-list
+      v-if="manifests && manifests.length"
+      :loading="$apollo.queries.group.loading"
+      :manifests="manifests"
+      :pagination="pageInfo"
+      @prev-page="fetchPreviousPage"
+      @next-page="fetchNextPage"
+    />
 
-    <div v-else data-testid="main-area">
-      <manifests-list
-        v-if="manifests && manifests.length"
-        :manifests="manifests"
-        :pagination="pageInfo"
-        @prev-page="fetchPreviousPage"
-        @next-page="fetchNextPage"
-      />
-
-      <gl-empty-state
-        v-else
-        :svg-path="noManifestsIllustration"
-        :title="$options.i18n.noManifestTitle"
-      />
-    </div>
+    <gl-empty-state
+      v-else
+      :svg-path="noManifestsIllustration"
+      :title="$options.i18n.noManifestTitle"
+    />
 
     <gl-modal
       :modal-id="$options.confirmClearCacheModal"
diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
index 005c8feea3a..0d9b8330fe3 100644
--- a/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
+++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlKeysetPagination } from '@gitlab/ui';
+import { GlKeysetPagination, GlSkeletonLoader } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ManifestRow from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue';
 
@@ -8,6 +8,7 @@ export default {
   components: {
     ManifestRow,
     GlKeysetPagination,
+    GlSkeletonLoader,
   },
   props: {
     manifests: {
@@ -19,6 +20,11 @@ export default {
       type: Object,
       required: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
   },
   i18n: {
     listTitle: s__('DependencyProxy|Image list'),
@@ -34,19 +40,22 @@ export default {
 <template>
   <div class="gl-mt-6">
     <h3 class="gl-font-base">{{ $options.i18n.listTitle }}</h3>
-    <div
-      class="gl-border-t-1 gl-border-gray-100 gl-border-t-solid gl-display-flex gl-flex-direction-column"
-    >
-      <manifest-row v-for="(manifest, index) in manifests" :key="index" :manifest="manifest" />
-    </div>
-    <div class="gl-display-flex gl-justify-content-center">
-      <gl-keyset-pagination
-        v-if="showPagination"
-        v-bind="pagination"
-        class="gl-mt-3"
-        @prev="$emit('prev-page')"
-        @next="$emit('next-page')"
-      />
+    <gl-skeleton-loader v-if="loading" />
+    <div v-else data-testid="main-area">
+      <div
+        class="gl-border-t-1 gl-border-gray-100 gl-border-t-solid gl-display-flex gl-flex-direction-column"
+      >
+        <manifest-row v-for="(manifest, index) in manifests" :key="index" :manifest="manifest" />
+      </div>
+      <div class="gl-display-flex gl-justify-content-center">
+        <gl-keyset-pagination
+          v-if="showPagination"
+          v-bind="pagination"
+          class="gl-mt-3"
+          @prev="$emit('prev-page')"
+          @next="$emit('next-page')"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
index 265efe77e75..262e82677a7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_manual_actions.vue
@@ -139,7 +139,7 @@ export default {
       :disabled="!action.canPlayJob"
       @click="onClickAction(action)"
     >
-      <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap-wrap">
+      <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap">
         {{ action.name }}
         <span v-if="action.scheduledAt">
           <gl-icon name="clock" />
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
index b349fad3560..10db3e1c56b 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
@@ -78,14 +78,14 @@ export default {
     :title="testCase.classname"
     :action-primary="$options.modalCloseButton"
   >
-    <div class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3">
+    <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
       <strong class="gl-text-right col-sm-3">{{ $options.text.name }}</strong>
       <div class="col-sm-9" data-testid="test-case-name">
         {{ testCase.name }}
       </div>
     </div>
 
-    <div v-if="testCase.file" class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3">
+    <div v-if="testCase.file" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
       <strong class="gl-text-right col-sm-3">{{ $options.text.file }}</strong>
       <div class="col-sm-9" data-testid="test-case-file">
         <gl-link v-if="testCase.filePath" :href="testCase.filePath">
@@ -102,7 +102,7 @@ export default {
       </div>
     </div>
 
-    <div class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3">
+    <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
       <strong class="gl-text-right col-sm-3">{{ $options.text.duration }}</strong>
       <div v-if="testCase.formattedTime" class="col-sm-9" data-testid="test-case-duration">
         {{ testCase.formattedTime }}
@@ -112,14 +112,14 @@ export default {
       </div>
     </div>
 
-    <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3">
+    <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
       <strong class="gl-text-right col-sm-3">{{ $options.text.history }}</strong>
       <div class="col-sm-9" data-testid="test-case-recent-failures">
         <gl-badge variant="warning">{{ failureHistoryMessage }}</gl-badge>
       </div>
     </div>
 
-    <div v-if="testCase.attachment_url" class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3">
+    <div v-if="testCase.attachment_url" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3">
       <strong class="gl-text-right col-sm-3">{{ $options.text.attachment }}</strong>
       <gl-link
         class="col-sm-9"
@@ -133,7 +133,7 @@ export default {
 
     <div
       v-if="testCase.system_output"
-      class="gl-display-flex gl-flex-wrap-wrap gl-mx-n4 gl-my-3"
+      class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"
       data-testid="test-case-trace"
     >
       <strong class="gl-text-right col-sm-3">{{ $options.text.trace }}</strong>
diff --git a/app/assets/javascripts/related_issues/components/related_issuable_input.vue b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
index 37c175826ee..1846b9cf8f4 100644
--- a/app/assets/javascripts/related_issues/components/related_issuable_input.vue
+++ b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
@@ -187,7 +187,7 @@ export default {
     @click="onIssuableFormWrapperClick"
   >
     <ul
-      class="gl-display-flex gl-flex-wrap-wrap gl-align-items-baseline gl-list-style-none gl-m-0 gl-p-0"
+      class="gl-display-flex gl-flex-wrap gl-align-items-baseline gl-list-style-none gl-m-0 gl-p-0"
     >
       <li
         v-for="(reference, index) in references"
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index 217832e16fc..de10b210ecd 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -132,7 +132,7 @@ export default {
 };
 </script>
 <template>
-  <div class="release-block-milestone-info gl-display-flex gl-flex-wrap-wrap">
+  <div class="release-block-milestone-info gl-display-flex gl-flex-wrap">
     <div
       v-gl-tooltip
       class="milestone-progress-bar-container js-milestone-progress-bar-container gl-display-flex gl-flex-direction-column gl-mr-6 gl-mb-5"
@@ -147,7 +147,7 @@ export default {
       class="gl-display-flex gl-flex-direction-column gl-mr-6 gl-mb-5 js-milestone-list-container"
     >
       <span class="gl-mb-2">{{ milestoneLabelText }}</span>
-      <div class="gl-display-flex gl-flex-wrap-wrap gl-align-items-flex-end">
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-flex-end">
         <template v-for="(milestone, index) in milestonesToDisplay">
           <gl-link
             :key="milestone.id"
diff --git a/app/assets/javascripts/search/sidebar/constants/index.js b/app/assets/javascripts/search/sidebar/constants/index.js
index f123494fba2..9cd366a87fd 100644
--- a/app/assets/javascripts/search/sidebar/constants/index.js
+++ b/app/assets/javascripts/search/sidebar/constants/index.js
@@ -4,7 +4,7 @@ export const SCOPE_BLOB = 'blobs';
 export const LABEL_DEFAULT_CLASSES = [
   'gl-display-flex',
   'gl-flex-direction-row',
-  'gl-flex-wrap-nowrap',
+  'gl-flex-nowrap',
   'gl-text-gray-900',
 ];
 export const NAV_LINK_DEFAULT_CLASSES = [
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 921f2366492..b424d9074d0 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -72,7 +72,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-display-flex gl-flex-wrap-wrap">
+    <div class="gl-display-flex gl-flex-wrap">
       <div
         v-for="(user, index) in uncollapsedUsers"
         :key="user.id"
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
index ea0040616b3..916ff70a5ea 100644
--- a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
@@ -111,7 +111,7 @@ export default {
     <div class="title hide-collapsed gl-mb-2 gl-line-height-20 gl-font-weight-bold">
       {{ contactsLabel }}
     </div>
-    <div class="hide-collapsed gl-display-flex gl-flex-wrap-wrap">
+    <div class="hide-collapsed gl-display-flex gl-flex-wrap">
       <div
         v-for="(contact, index) in contacts"
         :id="`contact_container_${index}`"
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 1232145fb24..bbd3cda0ad3 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -110,7 +110,7 @@ export default {
       <gl-loading-icon v-if="loading" size="sm" :inline="true" />
       {{ participantLabel }}
     </div>
-    <div class="hide-collapsed gl-display-flex gl-flex-wrap-wrap">
+    <div class="hide-collapsed gl-display-flex gl-flex-wrap">
       <div
         v-for="participant in visibleParticipants"
         :key="participant.id"
diff --git a/app/assets/javascripts/tags/components/delete_tag_modal.vue b/app/assets/javascripts/tags/components/delete_tag_modal.vue
index 65ff826f42a..e3b666ec968 100644
--- a/app/assets/javascripts/tags/components/delete_tag_modal.vue
+++ b/app/assets/javascripts/tags/components/delete_tag_modal.vue
@@ -172,9 +172,7 @@ export default {
     </form>
 
     <template #modal-footer>
-      <div
-        class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap-wrap gl-m-0"
-      >
+      <div class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0">
         <gl-button data-testid="delete-tag-cancel-button" @click="closeModal">
           {{ $options.i18n.cancelButtonText }}
         </gl-button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index e07afcb7420..028f5370028 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -323,7 +323,7 @@ export default {
         data-testid="widget-extension-top-level"
       >
         <div
-          class="gl-flex-grow-1 gl-display-flex gl-align-items-center gl-flex-wrap-wrap"
+          class="gl-flex-grow-1 gl-display-flex gl-align-items-center gl-flex-wrap"
           data-testid="widget-extension-top-level-summary"
         >
           <div v-if="isLoadingSummary" class="gl-w-full gl-line-height-normal">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
index 593a20fe54e..fa369d23b6c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -82,8 +82,8 @@ export default {
         <status-icon :icon-name="data.icon.name" :size="12" class="gl-m-auto" />
       </div>
       <div class="gl-w-full">
-        <div class="gl-display-flex gl-flex-wrap-nowrap">
-          <div class="gl-flex-wrap-wrap gl-display-flex gl-w-full">
+        <div class="gl-display-flex gl-flex-nowrap">
+          <div class="gl-flex-wrap gl-display-flex gl-w-full">
             <div class="gl-display-flex gl-align-items-center">
               <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
             </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
index b6fda7eb011..dd899701de0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
@@ -95,14 +95,14 @@ export default {
         <div
           :class="{
             'gl-display-flex gl-align-items-center': actions.length,
-            'gl-md-display-flex gl-align-items-center gl-flex-wrap-wrap gl-gap-3': !actions.length,
+            'gl-md-display-flex gl-align-items-center gl-flex-wrap gl-gap-3': !actions.length,
           }"
           class="media-body gl-line-height-normal"
         >
           <slot></slot>
           <div
             :class="{
-              'state-container-action-buttons gl-flex-wrap-wrap gl-lg-justify-content-end': !actions.length,
+              'state-container-action-buttons gl-flex-wrap gl-lg-justify-content-end': !actions.length,
               'gl-md-pt-0 gl-pt-3': hasActionsSlot,
             }"
             class="gl-display-flex gl-font-size-0 gl-gap-3"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index f3a05341bcd..415f58ea8e6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -224,7 +224,7 @@ export default {
         </span>
         <div
           v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"
-          class="accept-merge-holder clearfix js-toggle-container media gl-md-display-flex gl-flex-wrap-wrap gl-flex-grow-1"
+          class="accept-merge-holder clearfix js-toggle-container media gl-md-display-flex gl-flex-wrap gl-flex-grow-1"
         >
           <span
             v-if="!rebasingError"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 1390f973c9c..526c181bd25 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -523,12 +523,10 @@ export default {
         class="mr-widget-body mr-widget-body-ready-merge media gl-display-flex gl-align-items-center"
       >
         <div class="media-body">
-          <div
-            class="mr-widget-body-controls gl-display-flex gl-align-items-center gl-flex-wrap-wrap"
-          >
+          <div class="mr-widget-body-controls gl-display-flex gl-align-items-center gl-flex-wrap">
             <template v-if="shouldShowMergeControls">
               <div
-                class="gl-display-flex gl-sm-flex-direction-column gl-md-align-items-center gl-flex-wrap-wrap gl-w-full gl-md-pb-2"
+                class="gl-display-flex gl-sm-flex-direction-column gl-md-align-items-center gl-flex-wrap gl-w-full gl-md-pb-2"
               >
                 <gl-form-checkbox
                   v-if="canRemoveSourceBranch"
diff --git a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
index e5d82bad54f..a30b18348ec 100644
--- a/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
+    <div class="gl-display-flex gl-flex-wrap gl-gap-5">
       <segmented-control-button-group v-model="selectedChart" :options="chartRanges" />
       <slot name="extend-button-group"></slot>
     </div>
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
index 713c08e20e9..6c27d5a87f0 100644
--- a/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/work_item_add_note.vue
@@ -134,8 +134,7 @@ export default {
     },
     parentClass() {
       return {
-        'gl-relative gl-display-flex gl-align-items-flex-start gl-flex-wrap-nowrap': !this
-          .isEditing,
+        'gl-relative gl-display-flex gl-align-items-flex-start gl-flex-nowrap': !this.isEditing,
       };
     },
     isProjectArchived() {
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index ec74d251c3c..95527dda1d4 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -295,7 +295,7 @@ export default {
 </script>
 
 <template>
-  <div class="form-row gl-mb-5 work-item-assignees gl-relative gl-flex-wrap-nowrap">
+  <div class="form-row gl-mb-5 work-item-assignees gl-relative gl-flex-nowrap">
     <span
       :id="assigneesTitleId"
       class="gl-font-weight-bold gl-mt-2 col-lg-2 col-3 gl-pt-2 min-w-fit-content gl-overflow-wrap-break"
diff --git a/app/assets/javascripts/work_items/components/work_item_labels.vue b/app/assets/javascripts/work_items/components/work_item_labels.vue
index c3bdbbc764d..8e9e1def0b9 100644
--- a/app/assets/javascripts/work_items/components/work_item_labels.vue
+++ b/app/assets/javascripts/work_items/components/work_item_labels.vue
@@ -272,7 +272,7 @@ export default {
 </script>
 
 <template>
-  <div class="form-row gl-mb-5 work-item-labels gl-relative gl-flex-wrap-nowrap">
+  <div class="form-row gl-mb-5 work-item-labels gl-relative gl-flex-nowrap">
     <span
       :id="labelsTitleId"
       class="gl-font-weight-bold gl-mt-2 col-lg-2 col-3 gl-pt-2 min-w-fit-content gl-overflow-wrap-break"
diff --git a/app/assets/javascripts/work_items/components/work_item_milestone.vue b/app/assets/javascripts/work_items/components/work_item_milestone.vue
index 5865568212b..e75a429ebec 100644
--- a/app/assets/javascripts/work_items/components/work_item_milestone.vue
+++ b/app/assets/javascripts/work_items/components/work_item_milestone.vue
@@ -217,7 +217,7 @@ export default {
 
 <template>
   <gl-form-group
-    class="work-item-dropdown gl-flex-wrap-nowrap"
+    class="work-item-dropdown gl-flex-nowrap"
     :label="$options.i18n.MILESTONE"
     label-for="milestone-value"
     label-class="gl-pb-0! gl-mt-3 gl-overflow-wrap-break"
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3f6c4b15b8e..012ae4bb86a 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -76,8 +76,8 @@
   }
 }
 
-.gl-md-flex-wrap-nowrap.gl-md-flex-wrap-nowrap {
+.gl-md-flex-nowrap.gl-md-flex-nowrap {
   @include gl-media-breakpoint-up(md) {
-    @include gl-flex-wrap-nowrap;
+    @include gl-flex-nowrap;
   }
 }
diff --git a/app/graphql/mutations/concerns/mutations/work_items/update_arguments.rb b/app/graphql/mutations/concerns/mutations/work_items/update_arguments.rb
index 848ef9e052c..f009abdba70 100644
--- a/app/graphql/mutations/concerns/mutations/work_items/update_arguments.rb
+++ b/app/graphql/mutations/concerns/mutations/work_items/update_arguments.rb
@@ -44,6 +44,10 @@ module Mutations
                  ::Types::WorkItems::Widgets::CurrentUserTodosInputType,
                  required: false,
                  description: 'Input for to-dos widget.'
+        argument :award_emoji_widget,
+                 ::Types::WorkItems::Widgets::AwardEmojiUpdateInputType,
+                 required: false,
+                 description: 'Input for award emoji widget.'
       end
     end
   end
diff --git a/app/graphql/subscriptions/base_subscription.rb b/app/graphql/subscriptions/base_subscription.rb
index 5f7931787df..dcc9fe708d6 100644
--- a/app/graphql/subscriptions/base_subscription.rb
+++ b/app/graphql/subscriptions/base_subscription.rb
@@ -12,6 +12,18 @@ module Subscriptions
       current_user.reset if current_user
     end
 
+    # We override graphql-ruby's default `subscribe` since it returns
+    # :no_response instead, which leads to empty hashes rendered out
+    # to the caller which has caused problems in the client.
+    #
+    # Eventually, we should move to an approach where the caller receives
+    # a response here upon subscribing, but we don't need this currently
+    # because Vue components also perform an initial fetch query.
+    # See https://gitlab.com/gitlab-org/gitlab/-/issues/402614
+    def subscribe(*)
+      nil
+    end
+
     def authorized?(*)
       raise NotImplementedError
     end
diff --git a/app/graphql/subscriptions/issuable_updated.rb b/app/graphql/subscriptions/issuable_updated.rb
index ad78fd4b4a1..63fe81bbc32 100644
--- a/app/graphql/subscriptions/issuable_updated.rb
+++ b/app/graphql/subscriptions/issuable_updated.rb
@@ -10,10 +10,6 @@ module Subscriptions
               required: true,
               description: 'ID of the issuable.'
 
-    def subscribe(issuable_id:)
-      nil
-    end
-
     def authorized?(issuable_id:)
       issuable = force(GitlabSchema.find_by_gid(issuable_id))
 
diff --git a/app/graphql/subscriptions/notes/base.rb b/app/graphql/subscriptions/notes/base.rb
index 3653c01e0e2..c117dc295f2 100644
--- a/app/graphql/subscriptions/notes/base.rb
+++ b/app/graphql/subscriptions/notes/base.rb
@@ -9,10 +9,6 @@ module Subscriptions
         required: false,
         description: 'ID of the noteable.'
 
-      def subscribe(*args)
-        nil
-      end
-
       def authorized?(noteable_id:)
         noteable = force(GitlabSchema.find_by_gid(noteable_id))
 
diff --git a/app/graphql/types/work_items/award_emoji_update_action_enum.rb b/app/graphql/types/work_items/award_emoji_update_action_enum.rb
new file mode 100644
index 00000000000..5b2512a215f
--- /dev/null
+++ b/app/graphql/types/work_items/award_emoji_update_action_enum.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Types
+  module WorkItems
+    class AwardEmojiUpdateActionEnum < BaseEnum
+      graphql_name 'WorkItemAwardEmojiUpdateAction'
+      description 'Values for work item award emoji update enum'
+
+      value 'ADD', 'Adds the emoji.', value: :add
+      value 'REMOVE', 'Removes the emoji.', value: :remove
+    end
+  end
+end
diff --git a/app/graphql/types/work_items/widgets/award_emoji_update_input_type.rb b/app/graphql/types/work_items/widgets/award_emoji_update_input_type.rb
new file mode 100644
index 00000000000..1d43d4913d2
--- /dev/null
+++ b/app/graphql/types/work_items/widgets/award_emoji_update_input_type.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Types
+  module WorkItems
+    module Widgets
+      class AwardEmojiUpdateInputType < BaseInputObject
+        graphql_name 'WorkItemWidgetAwardEmojiUpdateInput'
+
+        argument :action, ::Types::WorkItems::AwardEmojiUpdateActionEnum,
+          required: true,
+          description: 'Action for the update.'
+
+        argument :name,
+          GraphQL::Types::String,
+          required: true,
+          description: copy_field_description(Types::AwardEmojis::AwardEmojiType, :name)
+      end
+    end
+  end
+end
diff --git a/app/services/work_items/widgets/award_emoji_service/update_service.rb b/app/services/work_items/widgets/award_emoji_service/update_service.rb
new file mode 100644
index 00000000000..7c58c0c9af9
--- /dev/null
+++ b/app/services/work_items/widgets/award_emoji_service/update_service.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module WorkItems
+  module Widgets
+    module AwardEmojiService
+      class UpdateService < WorkItems::Widgets::BaseService
+        def before_update_in_transaction(params:)
+          return unless params.present? && params.key?(:name) && params.key?(:action)
+          return unless has_permission?(:award_emoji)
+
+          service_response!(service_result(params[:action], params[:name]))
+        end
+
+        private
+
+        def service_result(action, name)
+          class_name = {
+            add: ::AwardEmojis::AddService,
+            remove: ::AwardEmojis::DestroyService
+          }
+
+          return invalid_action_error(action) unless class_name.key?(action)
+
+          class_name[action].new(work_item, name, current_user).execute
+        end
+
+        def invalid_action_error(key)
+          error(format(_("%{key} is not a valid action."), key: key))
+        end
+      end
+    end
+  end
+end
diff --git a/app/services/work_items/widgets/base_service.rb b/app/services/work_items/widgets/base_service.rb
index dfa9e91f569..cae6ed7646f 100644
--- a/app/services/work_items/widgets/base_service.rb
+++ b/app/services/work_items/widgets/base_service.rb
@@ -25,6 +25,12 @@ module WorkItems
       def has_permission?(permission)
         can?(current_user, permission, widget.work_item)
       end
+
+      def service_response!(result)
+        return result unless result[:status] == :error
+
+        raise WidgetError, result[:message]
+      end
     end
   end
 end
diff --git a/app/services/work_items/widgets/hierarchy_service/base_service.rb b/app/services/work_items/widgets/hierarchy_service/base_service.rb
index 236762d6937..45393eab58c 100644
--- a/app/services/work_items/widgets/hierarchy_service/base_service.rb
+++ b/app/services/work_items/widgets/hierarchy_service/base_service.rb
@@ -63,9 +63,7 @@ module WorkItems
           work_item.reload_work_item_parent
           work_item.work_item_children.reset
 
-          return result unless result[:status] == :error
-
-          raise WidgetError, result[:message]
+          super
         end
       end
     end
diff --git a/app/views/import/shared/_new_project_form.html.haml b/app/views/import/shared/_new_project_form.html.haml
index 3fb27dfdfb4..6000612a285 100644
--- a/app/views/import/shared/_new_project_form.html.haml
+++ b/app/views/import/shared/_new_project_form.html.haml
@@ -4,7 +4,7 @@
     = text_field_tag :name, @name, placeholder: "My awesome project", class: "js-project-name form-control gl-form-input input-lg", autofocus: true, required: true, aria: { required: true }, data: { qa_selector: 'project_name_field' }
   .form-group.col-12.col-sm-6.gl-pr-0
     = label_tag :namespace_id, _('Project URL'), class: 'label-bold'
-    .input-group.gl-flex-wrap-nowrap
+    .input-group.gl-flex-nowrap
       - if current_user.can_select_namespace?
         - namespace_id = namespace_id_from(params)
         .js-vue-new-project-url-select{ data: { namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id)&.full_path || current_user.namespace.full_path,
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index e4de4d0ab60..27211ffb1e5 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -16,7 +16,7 @@
   .form-group.project-path.col-sm-6.gl-pr-0
     = f.label :namespace_id, class: 'label-bold' do
       %span= _('Project URL')
-    .input-group.gl-flex-wrap-nowrap
+    .input-group.gl-flex-nowrap
       - if current_user.can_select_namespace?
         - namespace_id = namespace_id_from(params)
         .js-vue-new-project-url-select{ data: { namespace_full_path: GroupFinder.new(current_user).execute(id: namespace_id)&.full_path || @current_user_group&.full_path,
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index e5b4fe49d9b..d00ed2afa3c 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -1,7 +1,7 @@
 - f ||= local_assigns[:f]
 
 .project-templates-buttons
-  = gl_tabs_nav({ class: 'nav-links scrolling-tabs gl-display-flex gl-flex-grow-1 gl-flex-wrap-nowrap gl-border-0' }) do
+  = gl_tabs_nav({ class: 'nav-links scrolling-tabs gl-display-flex gl-flex-grow-1 gl-flex-nowrap gl-border-0' }) do
     = gl_tab_link_to '#built-in', tab_class: 'built-in-tab', class: 'active', data: { toggle: 'tab' } do
       = _('Built-in')
       = gl_tab_counter_badge Gitlab::ProjectTemplate.all.count + Gitlab::SampleDataTemplate.all.count
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index c9c2d9ff13f..1f6c95d920f 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -29,7 +29,7 @@
     = render "projects/merge_requests/mr_box"
     .merge-request-tabs-holder{ class: "#{'js-tabs-affix' unless ENV['RAILS_ENV'] == 'test'} #{'gl-static' if moved_mr_sidebar_enabled?}" }
       .merge-request-tabs-container.gl-display-flex.gl-justify-content-space-between{ class: "#{'is-merge-request' if Feature.enabled?(:moved_mr_sidebar, @project) && !fluid_layout}" }
-        %ul.merge-request-tabs.nav-tabs.nav.nav-links.gl-display-flex.gl-flex-wrap-nowrap.gl-m-0.gl-p-0{ class: "#{'gl-w-full gl-lg-w-auto!' if Feature.enabled?(:moved_mr_sidebar, @project)}" }
+        %ul.merge-request-tabs.nav-tabs.nav.nav-links.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0{ class: "#{'gl-w-full gl-lg-w-auto!' if Feature.enabled?(:moved_mr_sidebar, @project)}" }
           = render "projects/merge_requests/tabs/tab", class: "notes-tab", qa_selector: "notes_tab" do
             = tab_link_for @merge_request, :show, force_link: @commit.present? do
               = _("Overview")
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index b6b4d15564b..35e8b30e6e9 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -17,7 +17,7 @@
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
           .fade-left= sprite_icon('chevron-lg-left', size: 12)
           .fade-right= sprite_icon('chevron-lg-right', size: 12)
-          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-wrap-nowrap.gl-m-0.gl-p-0.js-tabs-affix
+          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
                 = _("Commits")
@@ -34,7 +34,7 @@
         .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
           .fade-left= sprite_icon('chevron-lg-left', size: 12)
           .fade-right= sprite_icon('chevron-lg-right', size: 12)
-          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-wrap-nowrap.gl-m-0.gl-p-0.js-tabs-affix
+          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
             %li.commits-tab.new-tab
               = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
                 = _("Commits")
diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml
index ccb501dae11..9f7ed6b17c3 100644
--- a/app/views/shared/issue_type/_details_header.html.haml
+++ b/app/views/shared/issue_type/_details_header.html.haml
@@ -2,7 +2,7 @@
 - badge_classes = 'issuable-status-badge gl-mr-3'
 
 .detail-page-header
-  .detail-page-header-body.gl-flex-wrap-wrap
+  .detail-page-header-body.gl-flex-wrap
     = gl_badge_tag({ variant: :info, icon: 'issue-closed', icon_classes: 'gl-mr-0!' }, { class: "#{issue_status_visibility(issuable, status_box: :closed)} #{badge_classes} issuable-status-badge-closed" }) do
       .gl-display-none.gl-sm-display-block.gl-ml-2
         = issue_closed_text(issuable, current_user)
diff --git a/app/views/shared/milestones/_header.html.haml b/app/views/shared/milestones/_header.html.haml
index 0b017678ef7..3413d6ff399 100644
--- a/app/views/shared/milestones/_header.html.haml
+++ b/app/views/shared/milestones/_header.html.haml
@@ -1,5 +1,5 @@
 .detail-page-header
-  .detail-page-header-body.gl-flex-wrap-wrap
+  .detail-page-header-body.gl-flex-wrap
     = gl_badge_tag milestone_status_string(milestone), { variant: milestone_badge_variant(milestone) }, { class: 'gl-mr-3' }
 
     .header-text-content
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index c9060127b41..141118110ea 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -27,7 +27,7 @@
             = render Pajamas::AvatarComponent.new(project, size: 48, alt: '', class: 'gl-mr-5')
   .project-cell{ class: css_class }
     .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
-      .gl-display-flex.gl-align-items-center.gl-flex-wrap-wrap
+      .gl-display-flex.gl-align-items-center.gl-flex-wrap
         %h2.gl-font-base.gl-line-height-20.gl-my-0
           = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document' do
             %span.namespace-name.gl-font-weight-normal
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
index 47e0e165276..72709b3ed2f 100644
--- a/app/views/shared/projects/_search_form.html.haml
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -2,7 +2,7 @@
 - admin_view ||= false
 - top_padding = admin_view ? 'gl-lg-pt-3' : ''
 
-= form_tag filter_projects_path, method: :get, class: "project-filter-form gl-display-flex! gl-flex-wrap-wrap gl-w-full gl-gap-3 #{top_padding}", data: { qa_selector: 'project_filter_form_container' }, id: 'project-filter-form' do |f|
+= form_tag filter_projects_path, method: :get, class: "project-filter-form gl-display-flex! gl-flex-wrap gl-w-full gl-gap-3 #{top_padding}", data: { qa_selector: 'project_filter_form_container' }, id: 'project-filter-form' do |f|
   = search_field_tag :name, params[:name],
     placeholder: placeholder,
     class: "project-filter-form-field form-control input-short js-projects-list-filter gl-m-0!",
diff --git a/app/views/snippets/_snippets_scope_menu.html.haml b/app/views/snippets/_snippets_scope_menu.html.haml
index ca4f058ef40..35d21e45c47 100644
--- a/app/views/snippets/_snippets_scope_menu.html.haml
+++ b/app/views/snippets/_snippets_scope_menu.html.haml
@@ -2,7 +2,7 @@
 - include_private = local_assigns.fetch(:include_private, false)
 - params[:scope] ||= []
 
-= gl_tabs_nav({ class: 'js-snippets-nav-tabs gl-border-b-0 gl-overflow-x-auto gl-flex-grow-1 gl-flex-wrap-nowrap' }) do
+= gl_tabs_nav({ class: 'js-snippets-nav-tabs gl-border-b-0 gl-overflow-x-auto gl-flex-grow-1 gl-flex-nowrap' }) do
   = gl_tab_link_to subject_snippets_path(subject), { item_active: params[:scope].empty? } do
     = _('All')
     = gl_tab_counter_badge(include_private ? counts[:total] : counts[:are_public_or_internal])