Add latest changes from gitlab-org/gitlab@master

21 files changed, 31 insertions, 28 deletions

diff --git a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
index 3082897af76..09ca815975f 100644
--- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
@@ -127,7 +127,7 @@ export default {
           data-testid="vsa-metrics-group"
         >
           <h4 class="gl-my-0">{{ group.title }}</h4>
-          <div class="gl-display-flex gl-flex-wrap">
+          <div class="gl-display-flex gl-flex-wrap-wrap">
             <metric-tile
               v-for="metric in group.data"
               :key="metric.identifier"
@@ -142,7 +142,7 @@ export default {
           </div>
         </div>
       </div>
-      <div v-else class="gl-display-flex gl-flex-wrap gl-mb-7">
+      <div v-else class="gl-display-flex gl-flex-wrap-wrap gl-mb-7">
         <metric-tile
           v-for="metric in metrics"
           :key="metric.identifier"
diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue b/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue
index 907b68e6ffc..38422956995 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue
@@ -123,7 +123,7 @@ export default {
       />
     </gl-form-group>
 
-    <div class="gl-display-flex gl-flex-wrap">
+    <div class="gl-display-flex gl-flex-wrap-wrap">
       <gl-button
         type="submit"
         class="gl-sm-mr-3 gl-w-full gl-sm-w-auto"
diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
index 9cf41750efe..d2a962c8551 100644
--- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
+++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue
@@ -127,7 +127,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-n2 gl-mx-n2 gl-display-flex gl-flex-wrap-wrap">
       <div class="gl-p-2">
         <clipboard-button
           :title="$options.i18n.copyButton"
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 4e47aa99fd8..883d4edea0f 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -97,7 +97,7 @@ export default {
       </blob-filepath>
     </div>
 
-    <div class="gl-display-flex gl-flex-wrap file-actions">
+    <div class="gl-display-flex gl-flex-wrap-wrap file-actions">
       <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" :doc-icon="blobSwitcherDocIcon" />
 
       <slot name="actions"></slot>
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index befd04c29ae..f1b8abaf0f5 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -251,7 +251,7 @@ export default {
       </h4>
       <slot></slot>
     </div>
-    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
+    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap-wrap">
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index a50bbf7fd7e..5f082066ad4 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -419,7 +419,6 @@ export default {
             v-if="loadingMore"
             size="sm"
             :label="$options.i18n.loadingMoreboardItems"
-            data-testid="count-loading-icon"
           />
           <span v-if="showingAllItems">{{ showingAllItemsText }}</span>
           <span v-else>{{ paginatedIssueText }}</span>
diff --git a/app/assets/javascripts/branches/components/delete_branch_modal.vue b/app/assets/javascripts/branches/components/delete_branch_modal.vue
index d5631337cec..df082488b39 100644
--- a/app/assets/javascripts/branches/components/delete_branch_modal.vue
+++ b/app/assets/javascripts/branches/components/delete_branch_modal.vue
@@ -173,7 +173,9 @@ export default {
     </form>
 
     <template #modal-footer>
-      <div class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0">
+      <div
+        class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap-wrap gl-m-0"
+      >
         <gl-button data-testid="delete-branch-cancel-button" @click="closeModal">
           {{ $options.i18n.cancelButtonText }}
         </gl-button>
diff --git a/app/assets/javascripts/branches/components/delete_merged_branches.vue b/app/assets/javascripts/branches/components/delete_merged_branches.vue
index 70974f2e725..3393fb5c014 100644
--- a/app/assets/javascripts/branches/components/delete_merged_branches.vue
+++ b/app/assets/javascripts/branches/components/delete_merged_branches.vue
@@ -150,7 +150,7 @@ export default {
 
       <template #modal-footer>
         <div
-          class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0 gl-mr-3"
+          class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap-wrap gl-m-0 gl-mr-3"
         >
           <gl-button data-testid="delete-merged-branches-cancel-button" @click="closeModal">
             {{ $options.i18n.cancelButtonText }}
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 84fa8eae64a..a0651841397 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
@@ -461,7 +461,7 @@ export default {
         @dismiss="dismissTip"
       >
         <div
-          class="gl-display-flex gl-flex-direction-row gl-flex-wrap gl-md-flex-wrap-nowrap gl-gap-3"
+          class="gl-display-flex gl-flex-direction-row gl-flex-wrap-wrap gl-md-flex-wrap-nowrap gl-gap-3"
         >
           <div>
             <p>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
index 7368d1a3a91..2a710f6ee0b 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue
@@ -52,7 +52,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-mb-4 gl-display-flex gl-flex-wrap gl-gap-3">
+  <div class="gl-mb-4 gl-display-flex gl-flex-wrap-wrap gl-gap-3">
     <gl-button
       v-if="showFileTreeToggle"
       id="file-tree-toggle"
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index 372f04075ab..7dc3eb035ae 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -134,7 +134,9 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap">
+  <div
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-wrap-wrap"
+  >
     <template v-if="showLoadingState">
       <div>
         <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" />
@@ -171,7 +173,7 @@ export default {
           </gl-sprintf>
         </span>
       </div>
-      <div class="gl-display-flex gl-flex-wrap">
+      <div class="gl-display-flex gl-flex-wrap-wrap">
         <pipeline-editor-mini-graph :pipeline="pipeline" v-on="$listeners" />
         <gl-button
           class="gl-ml-3"
diff --git a/app/assets/javascripts/ci/runner/components/runner_header.vue b/app/assets/javascripts/ci/runner/components/runner_header.vue
index 874c234ca4c..954369455dc 100644
--- a/app/assets/javascripts/ci/runner/components/runner_header.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_header.vue
@@ -38,9 +38,9 @@ export default {
 </script>
 <template>
   <div
-    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-gap-3 gl-flex-wrap gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+    class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-gap-3 gl-flex-wrap-wrap gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
   >
-    <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-flex-wrap">
+    <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-flex-wrap-wrap">
       <runner-status-badge :runner="runner" />
       <runner-type-badge v-if="runner" :type="runner.runnerType" />
       <span>
@@ -65,6 +65,6 @@ export default {
         </template>
       </span>
     </div>
-    <div class="gl-display-flex gl-gap-3 gl-flex-wrap"><slot name="actions"></slot></div>
+    <div class="gl-display-flex gl-gap-3 gl-flex-wrap-wrap"><slot name="actions"></slot></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
index 273226141d2..b562bc9029e 100644
--- a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
@@ -57,7 +57,7 @@ export default {
     <div class="gl-mt-3 gl-mb-6">
       <label>{{ s__('Runners|Operating systems') }}</label>
 
-      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+      <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
         <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
         <runner-platforms-radio v-model="model" :value="$options.LINUX_PLATFORM">
           Linux
@@ -74,7 +74,7 @@ export default {
     <div class="gl-mt-3 gl-mb-6">
       <label>{{ s__('Runners|Cloud templates') }}</label>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+      <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
         <runner-platforms-radio
           v-model="model"
           :image="$options.AWS_LOGO_URL"
@@ -88,7 +88,7 @@ export default {
     <div class="gl-mt-3 gl-mb-6">
       <label>{{ s__('Runners|Containers') }}</label>
 
-      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+      <div class="gl-display-flex gl-flex-wrap-wrap gl-gap-5">
         <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
         <runner-platforms-radio :image="$options.DOCKER_LOGO_URL">
           <gl-link :href="$options.DOCKER_HELP_URL" target="_blank">
diff --git a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
index e0a6f4b1e67..37f13c630b6 100644
--- a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
+++ b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
@@ -83,7 +83,7 @@ export default {
 </script>
 <template>
   <runner-count #default="{ count }" :scope="scope" :variables="variables">
-    <div v-if="count" class="gl-display-flex gl-flex-wrap gl-py-6">
+    <div v-if="count" class="gl-display-flex gl-flex-wrap-wrap gl-py-6">
       <runner-single-stat
         v-for="stat in stats"
         :key="stat.key"
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index a5be63fa89f..30914611047 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -30,7 +30,7 @@ export default {
   <gl-tabs content-class="gl-display-none">
     <gl-tab title-link-class="gl-py-4 gl-px-3" :title="__('Write')" />
     <template #tabs-end>
-      <div class="gl-ml-auto gl-py-2 gl-display-flex gl-flex-wrap gl-align-items-end">
+      <div class="gl-ml-auto gl-py-2 gl-display-flex gl-flex-wrap-wrap gl-align-items-end">
         <toolbar-text-style-dropdown
           data-testid="text-styles"
           @execute="trackToolbarControlExecution"
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index ab003fb2879..2b98c7b708c 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -368,7 +368,7 @@ export default {
       data-testid="design-toolbar-wrapper"
     >
       <div
-        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap gl-gap-3"
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap-wrap gl-gap-3"
       >
         <div class="gl-display-flex gl-align-items-center">
           <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span>
diff --git a/app/assets/javascripts/emoji/components/emoji_group.vue b/app/assets/javascripts/emoji/components/emoji_group.vue
index bbac6866636..b0e879fae43 100644
--- a/app/assets/javascripts/emoji/components/emoji_group.vue
+++ b/app/assets/javascripts/emoji/components/emoji_group.vue
@@ -24,7 +24,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
 <template functional>
-  <div class="gl-display-flex gl-flex-wrap gl-mb-2">
+  <div class="gl-display-flex gl-flex-wrap-wrap gl-mb-2">
     <template v-if="props.renderGroup">
       <button
         v-for="emoji in props.emojis"
diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue
index 1d7a79f926a..76a68624a63 100644
--- a/app/assets/javascripts/feature_flags/components/strategy.vue
+++ b/app/assets/javascripts/feature_flags/components/strategy.vue
@@ -186,7 +186,7 @@ export default {
           <span v-if="appliesToAllEnvironments" class="text-secondary gl-mt-3 mt-md-0 ml-md-3">
             {{ $options.i18n.allEnvironments }}
           </span>
-          <div v-else class="gl-display-flex gl-align-items-center gl-flex-wrap">
+          <div v-else class="gl-display-flex gl-align-items-center gl-flex-wrap-wrap">
             <gl-token
               v-for="environment in filteredEnvironments"
               :key="environment.id"
diff --git a/app/assets/javascripts/groups/components/empty_states/subgroups_and_projects_empty_state.vue b/app/assets/javascripts/groups/components/empty_states/subgroups_and_projects_empty_state.vue
index 955cb1ca63e..763abaebebb 100644
--- a/app/assets/javascripts/groups/components/empty_states/subgroups_and_projects_empty_state.vue
+++ b/app/assets/javascripts/groups/components/empty_states/subgroups_and_projects_empty_state.vue
@@ -52,7 +52,7 @@ export default {
 
 <template>
   <div v-if="canCreateSubgroups || canCreateProjects" class="gl-mt-5">
-    <div class="gl-display-flex gl-mx-n3 gl-my-n3 gl-flex-wrap">
+    <div class="gl-display-flex gl-mx-n3 gl-my-n3 gl-flex-wrap-wrap">
       <div v-if="canCreateSubgroups" class="gl-p-3 gl-w-full gl-sm-w-half">
         <gl-link :href="newSubgroupPath" :class="$options.linkClasses">
           <div class="svg-content gl-w-15 gl-flex-shrink-0 gl-mr-5">
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index d9781ef9c84..399a2039582 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -190,7 +190,7 @@ export default {
       <div class="group-text-container d-flex flex-fill align-items-center">
         <div class="group-text flex-grow-1 flex-shrink-1">
           <div
-            class="gl-display-flex gl-align-items-center gl-flex-wrap title namespace-title gl-font-weight-bold gl-mr-3"
+            class="gl-display-flex gl-align-items-center gl-flex-wrap-wrap title namespace-title gl-font-weight-bold gl-mr-3"
           >
             <a
               v-gl-tooltip.bottom
@@ -259,7 +259,7 @@ export default {
           <gl-badge variant="warning">{{ __('pending deletion') }}</gl-badge>
         </div>
         <div
-          class="metadata gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-flex-wrap justify-content-md-between"
+          class="metadata gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-flex-wrap-wrap justify-content-md-between"
         >
           <item-stats
             :item="group"
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index aaa37f145aa..ac59da6d6d3 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -135,7 +135,7 @@ export default {
     <template v-if="hasIncompatibleRepos">
       <slot name="incompatible-repos-warning"></slot>
     </template>
-    <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap gl-mb-5">
+    <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap-wrap gl-mb-5">
       <gl-button
         variant="confirm"
         :loading="isImportingAnyRepo"