Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

12 files changed, 40 insertions, 29 deletions

diff --git a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_app.vue b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_app.vue
index 9e886fd7a48..605d40eddee 100644
--- a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_app.vue
+++ b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import GetFailedJobsQuery from '../../graphql/queries/get_failed_jobs.query.graphql';
 import { prepareFailedJobs } from './utils';
@@ -47,7 +47,7 @@ export default {
         this.preparedFailedJobs = prepareFailedJobs(this.failedJobs, this.failedJobsSummary);
       },
       error() {
-        createFlash({ message: s__('Jobs|There was a problem fetching the failed jobs.') });
+        createAlert({ message: s__('Jobs|There was a problem fetching the failed jobs.') });
       },
     },
   },
diff --git a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue
index 0c6b8b9ed2b..18607bfae1c 100644
--- a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue
+++ b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlLink, GlSafeHtmlDirective, GlTableLite } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import RetryFailedJobMutation from '../../graphql/mutations/retry_failed_job.mutation.graphql';
@@ -49,7 +49,7 @@ export default {
       return job.retryable && job.userPermissions.updateBuild;
     },
     showErrorMessage() {
-      createFlash({ message: s__('Job|There was a problem retrying the failed job.') });
+      createAlert({ message: s__('Job|There was a problem retrying the failed job.') });
     },
   },
 };
diff --git a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue
index 18e9ffa23cf..f1ad312dcaa 100644
--- a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue
+++ b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIntersectionObserver, GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
 import produce from 'immer';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import eventHub from '~/jobs/components/table/event_hub';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
@@ -42,7 +42,7 @@ export default {
         this.jobsPageInfo = data.project?.pipeline?.jobs?.pageInfo || {};
       },
       error() {
-        createFlash({ message: __('An error occurred while fetching the pipelines jobs.') });
+        createAlert({ message: __('An error occurred while fetching the pipelines jobs.') });
       },
     },
   },
diff --git a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
index ca2537ca4f4..7ee5ec48f44 100644
--- a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { dasherize } from '~/lib/utils/text_utility';
@@ -81,7 +81,7 @@ export default {
 
           reportToSentry('action_component', err);
 
-          createFlash({
+          createAlert({
             message: __('An error occurred while making the request.'),
           });
         });
diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
index a68797a7235..f1c6c6633eb 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
@@ -14,7 +14,7 @@
 
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 import eventHub from '../../event_hub';
@@ -94,7 +94,7 @@ export default {
           this.$refs.dropdown.hide();
           this.isLoading = false;
 
-          createFlash({
+          createAlert({
             message: __('Something went wrong on our end.'),
           });
         });
diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
index df59962569e..2a78636261b 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
@@ -56,7 +56,12 @@ export default {
 
 <template>
   <gl-tabs>
-    <gl-tab ref="pipelineTab" :title="$options.i18n.tabs.pipelineTitle" data-testid="pipeline-tab">
+    <gl-tab
+      ref="pipelineTab"
+      :title="$options.i18n.tabs.pipelineTitle"
+      data-testid="pipeline-tab"
+      lazy
+    >
       <pipeline-graph-wrapper />
     </gl-tab>
     <gl-tab
@@ -64,6 +69,7 @@ export default {
       :title="$options.i18n.tabs.needsTitle"
       :active="isActive($options.tabNames.needs)"
       data-testid="dag-tab"
+      lazy
     >
       <dag />
     </gl-tab>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
index 2d2f649f651..73a255f392b 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
@@ -55,6 +55,9 @@ export default {
     };
   },
   computed: {
+    hasArtifacts() {
+      return this.artifacts.length > 0;
+    },
     filteredArtifacts() {
       return this.searchQuery.length > 0
         ? fuzzaldrinPlus.filter(this.artifacts, this.searchQuery, { key: 'name' })
@@ -86,7 +89,9 @@ export default {
         });
     },
     handleDropdownShown() {
-      this.$refs.searchInput.focusInput();
+      if (this.hasArtifacts) {
+        this.$refs.searchInput.focusInput();
+      }
     },
   },
 };
@@ -112,12 +117,12 @@ export default {
 
     <gl-loading-icon v-else-if="isLoading" size="sm" />
 
-    <gl-dropdown-item v-else-if="!artifacts.length" data-testid="artifacts-empty-message">
+    <gl-dropdown-item v-else-if="!hasArtifacts" data-testid="artifacts-empty-message">
       {{ $options.i18n.emptyArtifactsMessage }}
     </gl-dropdown-item>
 
     <template #header>
-      <gl-search-box-by-type v-if="artifacts.length" ref="searchInput" v-model.trim="searchQuery" />
+      <gl-search-box-by-type v-if="hasArtifacts" ref="searchInput" v-model.trim="searchQuery" />
     </template>
 
     <gl-dropdown-item
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index f9022be888a..30528ce8d17 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO, VARIANT_WARNING } from '~/flash';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
@@ -249,7 +249,7 @@ export default {
 
       this.updateContent(params);
 
-      this.track('click_filter_tabs', { label: TRACKING_CATEGORIES.tabs });
+      this.track('click_filter_tabs', { label: TRACKING_CATEGORIES.tabs, property: scope });
     },
     successCallback(resp) {
       // Because we are polling & the user is interacting verify if the response received
@@ -267,14 +267,14 @@ export default {
         .postAction(endpoint)
         .then(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash({
+          createAlert({
             message: s__('Pipelines|Project cache successfully reset.'),
-            type: 'notice',
+            variant: VARIANT_INFO,
           });
         })
         .catch(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash({
+          createAlert({
             message: s__('Pipelines|Something went wrong while cleaning runners cache.'),
           });
         });
@@ -301,9 +301,9 @@ export default {
         }
 
         if (!filter.type) {
-          createFlash({
+          createAlert({
             message: RAW_TEXT_WARNING,
-            type: 'warning',
+            variant: VARIANT_WARNING,
           });
         }
       });
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 16a747f6165..f34b3f56c5b 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
@@ -1,6 +1,6 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { s__, __, sprintf } from '~/locale';
@@ -66,7 +66,7 @@ export default {
         })
         .catch(() => {
           this.isLoading = false;
-          createFlash({ message: __('An error occurred while making the request.') });
+          createAlert({ message: __('An error occurred while making the request.') });
         });
     },
     isActionDisabled(action) {
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
index 1db2898b72a..b57d0ac1fd7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
@@ -2,7 +2,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -45,7 +45,7 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash({
+          createAlert({
             message: FETCH_BRANCH_ERROR_MESSAGE,
           });
           this.loading = false;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
index afcdd63b664..5846a1f6ed9 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
@@ -2,7 +2,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -38,7 +38,7 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash({
+          createAlert({
             message: FETCH_TAG_ERROR_MESSAGE,
           });
           this.loading = false;
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
index 746cf238646..73f7d3f52c3 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import {
   ANY_TRIGGER_AUTHOR,
   FETCH_AUTHOR_ERROR_MESSAGE,
@@ -61,7 +61,7 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash({
+          createAlert({
             message: FETCH_AUTHOR_ERROR_MESSAGE,
           });
           this.loading = false;