Add latest changes from gitlab-org/gitlab@master

14 files changed, 142 insertions, 115 deletions

diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index 92203381154..8fb383a5d73 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import PublishButton from './publish_button.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -9,7 +9,7 @@ export default {
   components: {
     NoteableNote,
     PublishButton,
-    LoadingButton,
+    GlButton,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -115,18 +115,15 @@ export default {
       ></div>
 
       <p class="draft-note-actions d-flex">
-        <publish-button
-          :show-count="true"
-          :should-publish="false"
-          class="btn btn-success btn-inverted gl-mr-3"
-        />
-        <loading-button
+        <publish-button :show-count="true" :should-publish="false" category="secondary" />
+        <gl-button
           ref="publishNowButton"
           :loading="isPublishingDraft(draft.id) || isPublishing"
-          :label="__('Add comment now')"
-          container-class="btn btn-inverted"
+          class="gl-ml-3"
           @click="publishNow"
-        />
+        >
+          {{ __('Add comment now') }}
+        </gl-button>
       </p>
     </template>
   </article>
diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue
index f1180760c4d..7a8482ac341 100644
--- a/app/assets/javascripts/batch_comments/components/drafts_count.vue
+++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue
@@ -1,15 +1,19 @@
 <script>
 import { mapGetters } from 'vuex';
+import { GlBadge } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlBadge,
+  },
   computed: {
     ...mapGetters('batchComments', ['draftsCount']),
   },
 };
 </script>
 <template>
-  <span class="drafts-count-component">
-    <span class="drafts-count-number">{{ draftsCount }}</span>
+  <gl-badge size="sm" variant="success">
+    {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
-  </span>
+  </gl-badge>
 </template>
diff --git a/app/assets/javascripts/batch_comments/components/publish_button.vue b/app/assets/javascripts/batch_comments/components/publish_button.vue
index f4dc0f04dc3..33d4ff6b19a 100644
--- a/app/assets/javascripts/batch_comments/components/publish_button.vue
+++ b/app/assets/javascripts/batch_comments/components/publish_button.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import DraftsCount from './drafts_count.vue';
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
     DraftsCount,
   },
   props: {
@@ -20,6 +20,16 @@ export default {
       required: false,
       default: __('Finish review'),
     },
+    category: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'success',
+    },
     shouldPublish: {
       type: Boolean,
       required: true,
@@ -42,14 +52,14 @@ export default {
 </script>
 
 <template>
-  <loading-button
+  <gl-button
     :loading="isPublishing"
-    container-class="btn btn-success js-publish-draft-button qa-submit-review"
+    class="js-publish-draft-button qa-submit-review"
+    :category="category"
+    :variant="variant"
     @click="onClick"
   >
-    <span>
-      {{ label }}
-      <drafts-count v-if="showCount" />
-    </span>
-  </loading-button>
+    {{ label }}
+    <drafts-count v-if="showCount" />
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index af537cfb991..793f7bf0681 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,6 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 /**
@@ -8,7 +7,7 @@ import { s__ } from '~/locale';
  */
 export default {
   components: {
-    Icon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -27,15 +26,14 @@ export default {
 };
 </script>
 <template>
-  <a
+  <gl-button
     v-gl-tooltip
     :title="title"
     :aria-label="title"
     :href="externalUrl"
-    class="btn external-url"
+    class="external-url"
     target="_blank"
+    icon="external-link"
     rel="noopener noreferrer nofollow"
-  >
-    <icon name="external-link" />
-  </a>
+  />
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 99f50b499d0..c63d54d586d 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -5,16 +5,13 @@
  */
 
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
-import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   components: {
-    Icon,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -55,16 +52,16 @@ export default {
 };
 </script>
 <template>
-  <loading-button
+  <gl-button
     v-gl-tooltip
     :loading="isLoading"
     :title="title"
     :aria-label="title"
-    container-class="btn btn-danger d-none d-sm-none d-md-block"
+    icon="stop"
+    category="primary"
+    variant="danger"
     data-toggle="modal"
     data-target="#stop-environment-modal"
     @click="onClick"
-  >
-    <icon name="stop" />
-  </loading-button>
+  />
 </template>
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
index e2909333d74..0c4abc14494 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
@@ -20,8 +20,18 @@ export default {
     },
   },
   computed: {
+    /**
+     * Both Epic and Roadmap pages share same recents store
+     * and with https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36421
+     * Roadmap started using `GlFilteredSearch` which is not compatible
+     * with string tokens stored in recents, so this is a temporary
+     * fix by ignoring non-string recents while in Epic page.
+     */
+    compatibleItems() {
+      return this.items.filter(item => typeof item === 'string');
+    },
     processedItems() {
-      return this.items.map(item => {
+      return this.compatibleItems.map(item => {
         const { tokens, searchToken } = FilteredSearchTokenizer.processTokens(
           item,
           this.allowedKeys,
@@ -41,7 +51,7 @@ export default {
       });
     },
     hasItems() {
-      return this.items.length > 0;
+      return this.compatibleItems.length > 0;
     },
   },
   methods: {
@@ -84,9 +94,7 @@ export default {
               <span class="value">{{ token.suffix }}</span>
             </span>
           </span>
-          <span class="filtered-search-history-dropdown-search-token">
-            {{ item.searchToken }}
-          </span>
+          <span class="filtered-search-history-dropdown-search-token">{{ item.searchToken }}</span>
         </button>
       </li>
       <li class="divider"></li>
diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index c0e5196eb7b..a6503a18702 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -287,7 +287,7 @@ export default {
           <gl-icon
             v-if="item.state === 'closed'"
             name="issue-close"
-            class="gl-mx-1 gl-fill-blue-500"
+            class="gl-mx-1 gl-fill-blue-500 gl-flex-shrink-0"
             :size="16"
             data-testid="incident-closed"
           />
diff --git a/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
index 7798c443914..11d154ed9d1 100644
--- a/app/assets/javascripts/maintenance_mode_settings/components/app.vue
+++ b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlToggle, GlFormGroup, GlFormTextarea, GlDeprecatedButton } from '@gitlab/ui';
+import { GlToggle, GlFormGroup, GlFormTextarea, GlButton } from '@gitlab/ui';
 
 export default {
   name: 'MaintenanceModeSettingsApp',
@@ -7,7 +7,7 @@ export default {
     GlToggle,
     GlFormGroup,
     GlFormTextarea,
-    GlDeprecatedButton,
+    GlButton,
   },
   data() {
     return {
@@ -38,7 +38,7 @@ export default {
       />
     </gl-form-group>
     <div class="mt-4">
-      <gl-deprecated-button variant="success">{{ __('Save changes') }}</gl-deprecated-button>
+      <gl-button variant="success" category="primary">{{ __('Save changes') }}</gl-button>
     </div>
   </article>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index dff642161db..c7b72be36ad 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -1,7 +1,6 @@
 <script>
-import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
 import ciHeader from '~/vue_shared/components/header_ci_component.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 import { __ } from '~/locale';
 
@@ -13,7 +12,7 @@ export default {
     ciHeader,
     GlLoadingIcon,
     GlModal,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -77,35 +76,43 @@ export default {
       :user="pipeline.user"
       item-name="Pipeline"
     >
-      <loading-button
+      <gl-button
         v-if="pipeline.retry_path"
         :loading="isRetrying"
         :disabled="isRetrying"
-        class="js-retry-button btn btn-inverted-secondary"
-        container-class="d-inline"
-        :label="__('Retry')"
+        data-testid="retryButton"
+        category="secondary"
+        variant="info"
         @click="retryPipeline()"
-      />
+      >
+        {{ __('Retry') }}
+      </gl-button>
 
-      <loading-button
+      <gl-button
         v-if="pipeline.cancel_path"
         :loading="isCanceling"
         :disabled="isCanceling"
-        class="js-btn-cancel-pipeline btn btn-danger"
-        container-class="d-inline"
-        :label="__('Cancel running')"
+        data-testid="cancelPipeline"
+        class="gl-ml-3"
+        category="primary"
+        variant="danger"
         @click="cancelPipeline()"
-      />
+      >
+        {{ __('Cancel running') }}
+      </gl-button>
 
-      <loading-button
+      <gl-button
         v-if="pipeline.delete_path"
         v-gl-modal="$options.DELETE_MODAL_ID"
         :loading="isDeleting"
         :disabled="isDeleting"
-        class="js-btn-delete-pipeline btn btn-danger btn-inverted"
-        container-class="d-inline"
-        :label="__('Delete')"
-      />
+        data-testid="deletePipeline"
+        class="gl-ml-3"
+        category="secondary"
+        variant="danger"
+      >
+        {{ __('Delete') }}
+      </gl-button>
     </ci-header>
 
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3" />
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index 2905b2ca26f..f0614298bd3 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -1,27 +1,15 @@
 <script>
-import { GlLink, GlTooltipDirective } from '@gitlab/ui';
-import { escape } from 'lodash';
+import { GlLink, GlPopover, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { SCHEDULE_ORIGIN } from '../../constants';
-import { __, sprintf } from '~/locale';
-import popover from '~/vue_shared/directives/popover';
-
-const popoverTitle = sprintf(
-  escape(
-    __(
-      `This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}`,
-    ),
-  ),
-  { strongStart: '<b>', strongEnd: '</b>' },
-  false,
-);
 
 export default {
   components: {
     GlLink,
+    GlPopover,
+    GlSprintf,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    popover,
   },
   props: {
     pipeline: {
@@ -44,23 +32,6 @@ export default {
     isScheduled() {
       return this.pipeline.source === SCHEDULE_ORIGIN;
     },
-    popoverOptions() {
-      return {
-        html: true,
-        trigger: 'focus',
-        placement: 'top',
-        title: `<div class="autodevops-title">
-            ${popoverTitle}
-          </div>`,
-        content: `<a
-            class="autodevops-link"
-            href="${this.autoDevopsHelpPath}"
-            target="_blank"
-            rel="noopener noreferrer nofollow">
-            ${escape(__('Learn more about Auto DevOps'))}
-          </a>`,
-      };
-    },
   },
 };
 </script>
@@ -114,13 +85,42 @@ export default {
       </span>
       <gl-link
         v-if="pipeline.flags.auto_devops"
-        v-popover="popoverOptions"
+        :id="`pipeline-url-autodevops-${pipeline.id}`"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         data-testid="pipeline-url-autodevops"
         role="button"
         >{{ __('Auto DevOps') }}</gl-link
       >
+      <gl-popover
+        :target="`pipeline-url-autodevops-${pipeline.id}`"
+        triggers="focus"
+        placement="top"
+      >
+        <template #title>
+          <div class="autodevops-title">
+            <gl-sprintf
+              :message="
+                __(
+                  'This pipeline makes use of a predefined CI/CD configuration enabled by %{strongStart}Auto DevOps.%{strongEnd}',
+                )
+              "
+            >
+              <template #strong="{content}">
+                <b>{{ content }}</b>
+              </template>
+            </gl-sprintf>
+          </div>
+        </template>
+        <gl-link
+          class="autodevops-link"
+          :href="autoDevopsHelpPath"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          {{ __('Learn more about Auto DevOps') }}
+        </gl-link>
+      </gl-popover>
       <span
         v-if="pipeline.flags.stuck"
         class="js-pipeline-url-stuck badge badge-warning"
diff --git a/app/assets/javascripts/releases/util.js b/app/assets/javascripts/releases/util.js
index efb50dac9cf..842a423b142 100644
--- a/app/assets/javascripts/releases/util.js
+++ b/app/assets/javascripts/releases/util.js
@@ -10,13 +10,15 @@ import {
  * @param {string} createFrom The ref to create a new tag from, if necessary
  */
 export const releaseToApiJson = (release, createFrom = null) => {
+  const name = release.name?.trim().length > 0 ? release.name.trim() : null;
+
   const milestones = release.milestones ? release.milestones.map(milestone => milestone.title) : [];
 
   return convertObjectPropsToSnakeCase(
     {
+      name,
       tagName: release.tagName,
       ref: createFrom,
-      name: release.name,
       description: release.description,
       milestones,
       assets: release.assets,
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 5f0c115f70b..74f312d9b8f 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -44,7 +44,8 @@ export default {
     },
     sortOptions: {
       type: Array,
-      required: true,
+      default: () => [],
+      required: false,
     },
     initialFilterValue: {
       type: Array,
@@ -63,7 +64,7 @@ export default {
     },
   },
   data() {
-    let selectedSortOption = this.sortOptions[0].sortDirection.descending;
+    let selectedSortOption = this.sortOptions[0]?.sortDirection?.descending;
     let selectedSortDirection = SortDirection.descending;
 
     // Extract correct sortBy value based on initialSortBy
@@ -83,7 +84,7 @@ export default {
     return {
       initialRender: true,
       recentSearchesPromise: null,
-      recentSearches: null,
+      recentSearches: [],
       filterValue: this.initialFilterValue,
       selectedSortOption,
       selectedSortDirection,
@@ -118,6 +119,9 @@ export default {
         ? __('Sort direction: Ascending')
         : __('Sort direction: Descending');
     },
+    filteredRecentSearches() {
+      return this.recentSearches.filter(item => typeof item !== 'string');
+    },
   },
   watch: {
     /**
@@ -246,7 +250,7 @@ export default {
       v-model="filterValue"
       :placeholder="searchInputPlaceholder"
       :available-tokens="tokens"
-      :history-items="recentSearches"
+      :history-items="filteredRecentSearches"
       class="flex-grow-1"
       @history-item-selected="handleHistoryItemSelected"
       @clear-history="handleClearHistory"
@@ -264,7 +268,7 @@ export default {
         </template>
       </template>
     </gl-filtered-search>
-    <gl-button-group class="sort-dropdown-container d-flex">
+    <gl-button-group v-if="selectedSortOption" class="sort-dropdown-container d-flex">
       <gl-dropdown :text="selectedSortOption.title" :right="true" class="w-100">
         <gl-dropdown-item
           v-for="sortBy in sortOptions"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
index a40526794f3..0d9bc70d38f 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue
@@ -3,7 +3,7 @@ import {
   GlToken,
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
-  GlDropdownDivider,
+  GlNewDropdownDivider as GlDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -102,14 +102,14 @@ export default {
     @input="searchLabels"
   >
     <template #view-token="{ inputValue, cssClasses, listeners }">
-      <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
-        ~{{ activeLabel ? activeLabel.title : inputValue }}
-      </gl-token>
+      <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners"
+        >~{{ activeLabel ? activeLabel.title : inputValue }}</gl-token
+      >
     </template>
     <template #suggestions>
-      <gl-filtered-search-suggestion :value="$options.noLabel">
-        {{ __('No label') }}
-      </gl-filtered-search-suggestion>
+      <gl-filtered-search-suggestion :value="$options.noLabel">{{
+        __('No label')
+      }}</gl-filtered-search-suggestion>
       <gl-dropdown-divider />
       <gl-loading-icon v-if="loading" />
       <template v-else>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 2665bb4aa92..2625fcc9d09 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -105,7 +105,7 @@ export default {
       </template>
     </section>
 
-    <section v-if="$slots.default" class="header-action-buttons">
+    <section v-if="$slots.default" data-testid="headerButtons" class="gl-display-flex">
       <slot></slot>
     </section>
     <gl-deprecated-button