app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue

@@ -90,7 +90,7 @@ export default {
         : ['gl-border-l-0!', ...this.$options.styles.flatLeftBorder];
     },
     buttonShadowClass() {
-      return this.isExpandBtnFocus ? '' : 'gl-shadow-none!';
+      return this.isExpandBtnFocus ? '' : '!gl-shadow-none';
     },
     buttonId() {
       return `js-linked-pipeline-${this.pipeline.id}`;
@@ -251,7 +251,7 @@ export default {
         />
         <div v-else class="gl-pr-3"><gl-loading-icon size="sm" inline /></div>
         <div
-          class="gl-display-flex gl-flex-direction-column gl-line-height-normal gl-downstream-pipeline-job-width"
+          class="gl-display-flex gl-flex-direction-column gl-leading-normal gl-downstream-pipeline-job-width"
         >
           <span class="gl-text-truncate" data-testid="downstream-title-content">
             {{ downstreamTitle }}

app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue

@@ -62,7 +62,7 @@ export default {
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
     'gl-text-truncate',
-    'gl-line-height-36',
+    'gl-leading-36',
   ],
   minWidth: `${ONE_COL_WIDTH}px`,
   computed: {

app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue

@@ -129,7 +129,7 @@ export default {
     <template #stages>
       <div
         data-testid="stage-column-title"
-        class="stage-column-title gl-display-flex gl-justify-content-space-between gl-relative gl-font-weight-bold gl-pipeline-job-width gl-text-truncate gl-line-height-36 gl-pl-4 -gl-mb-2"
+        class="stage-column-title gl-display-flex gl-justify-content-space-between gl-relative gl-font-weight-bold gl-pipeline-job-width gl-text-truncate gl-leading-36 gl-pl-4 -gl-mb-2"
       >
         <span :title="name" class="gl-text-truncate gl-pr-3 gl-w-17/20">
           {{ name }}

app/assets/javascripts/ci/pipeline_details/header/pipeline_header.vue

@@ -2,7 +2,7 @@
 import { GlAlert, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/constants';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { setUrlFragment, visitUrl } from '~/lib/utils/url_utility';
 import { __, n__, sprintf, formatNumber } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -37,6 +37,8 @@ export default {
     HeaderActions,
     HeaderBadges,
     TimeAgoTooltip,
+    PipelineAccountVerificationAlert: () =>
+      import('ee_component/vue_shared/components/pipeline_account_verification_alert.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -279,7 +281,7 @@ export default {
           this.reportFailure(DELETE_FAILURE, errors);
           this.isDeleting = false;
         } else {
-          redirectTo(setUrlFragment(this.paths.pipelinesPath, 'delete_success')); // eslint-disable-line import/no-deprecated
+          visitUrl(setUrlFragment(this.paths.pipelinesPath, 'delete_success'));
         }
       } catch {
         this.$apollo.queries.pipeline.startPolling(POLL_INTERVAL);
@@ -299,6 +301,7 @@ export default {
       :title="failure.text"
       :variant="failure.variant"
       :dismissible="false"
+      data-testid="error-alert"
     >
       <div v-for="(failureMessage, index) in failureMessages" :key="`failure-message-${index}`">
         {{ failureMessage }}
@@ -412,5 +415,7 @@ export default {
         @deletePipeline="deletePipeline($event)"
       />
     </div>
+
+    <pipeline-account-verification-alert class="gl-mt-4" />
   </div>
 </template>

app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue

@@ -4,7 +4,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import Tracking from '~/tracking';
-import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { visitUrl } from '~/lib/utils/url_utility';
 import CiIcon from '~/vue_shared/components/ci_icon/ci_icon.vue';
 import { TRACKING_CATEGORIES } from '~/ci/constants';
 import RetryFailedJobMutation from '../graphql/mutations/retry_failed_job.mutation.graphql';
@@ -45,7 +45,7 @@ export default {
         if (errors.length > 0) {
           this.showErrorMessage();
         } else {
-          redirectTo(job.detailedStatus.detailsPath); // eslint-disable-line import/no-deprecated
+          visitUrl(job.detailedStatus.detailsPath);
         }
       } catch {
         this.showErrorMessage();

app/assets/javascripts/ci/pipeline_details/pipeline_header.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import PipelineHeader from './header/pipeline_header.vue';
 
 Vue.use(VueApollo);
@@ -11,7 +12,13 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
     return;
   }
 
-  const { fullPath, pipelineIid, pipelinesPath } = el.dataset;
+  const {
+    fullPath,
+    pipelineIid,
+    pipelinesPath,
+    identityVerificationPath,
+    identityVerificationRequired,
+  } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -25,6 +32,8 @@ export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResou
         pipelinesPath,
       },
       pipelineIid,
+      identityVerificationPath,
+      identityVerificationRequired: parseBoolean(identityVerificationRequired),
     },
     render(createElement) {
       return createElement(PipelineHeader);

app/assets/javascripts/ci/pipeline_details/pipelines_index.js

@@ -45,6 +45,8 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     fullPath,
     visibilityPipelineIdType,
     showJenkinsCiPrompt,
+    identityVerificationPath,
+    identityVerificationRequired,
   } = el.dataset;
 
   return new Vue({
@@ -57,6 +59,8 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
       manualActionsLimit: 50,
       pipelineEditorPath,
       pipelineSchedulesPath,
+      identityVerificationPath,
+      identityVerificationRequired: parseBoolean(identityVerificationRequired),
       suggestedCiTemplates: JSON.parse(suggestedCiTemplates),
       showJenkinsCiPrompt: parseBoolean(showJenkinsCiPrompt),
     },

app/assets/javascripts/ci/pipeline_editor/components/commit/commit_form.vue

@@ -115,6 +115,7 @@ export default {
           v-model="message"
           class="!gl-font-monospace"
           required
+          no-resize
           :placeholder="defaultMessage"
         />
       </gl-form-group>

app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

@@ -9,7 +9,7 @@ import GettingStartedCard from './cards/getting_started_card.vue';
 import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
 import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
-const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20'];
+const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-leading-20'];
 
 export default {
   DRAWER_CARD_STYLES,

app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue

@@ -8,17 +8,14 @@ import {
   EDITOR_APP_DRAWER_JOB_ASSISTANT,
   EDITOR_APP_DRAWER_NONE,
   pipelineEditorTrackingOptions,
-  TEMPLATE_REPOSITORY_URL,
 } from '../../constants';
 
 export default {
   i18n: {
     browseCatalog: __('Browse CI/CD Catalog'),
-    browseTemplates: __('Browse templates'),
     help: __('Help'),
     jobAssistant: s__('JobAssistant|Job assistant'),
   },
-  TEMPLATE_REPOSITORY_URL,
   components: {
     GlButton,
   },
@@ -58,11 +55,6 @@ export default {
       const { label, actions } = pipelineEditorTrackingOptions;
       this.track(actions.openHelpDrawer, { label });
     },
-    trackTemplateBrowsing() {
-      const { label, actions } = pipelineEditorTrackingOptions;
-
-      this.track(actions.browseTemplates, { label });
-    },
   },
 };
 </script>
@@ -82,16 +74,6 @@ export default {
     >
       {{ $options.i18n.browseCatalog }}
     </gl-button>
-    <gl-button
-      :href="$options.TEMPLATE_REPOSITORY_URL"
-      size="small"
-      icon="external-link"
-      target="_blank"
-      data-testid="template-repo-link"
-      @click="trackTemplateBrowsing"
-    >
-      {{ $options.i18n.browseTemplates }}
-    </gl-button>
     <gl-button
       icon="information-o"
       size="small"

app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/artifacts_and_cache_item.vue

@@ -86,7 +86,7 @@ export default {
       >
         <div class="gl-flex-grow-1 gl-flex-basis-0 gl-mr-3">
           <gl-form-input
-            class="gl-w-full!"
+            class="!gl-w-full"
             :value="path"
             :data-testid="entry.generateInputDataTestId(index)"
             @input="$emit('update-job', `${entry.key}[${index}]`, $event)"

app/assets/javascripts/ci/pipeline_editor/constants.js

@@ -88,8 +88,6 @@ export const pipelineEditorTrackingOptions = {
   },
 };
 
-export const TEMPLATE_REPOSITORY_URL =
-  'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates';
 export const VALIDATE_TAB_FEEDBACK_URL = 'https://gitlab.com/gitlab-org/gitlab/-/issues/346687';
 
 export const COMMIT_SHA_POLL_INTERVAL = 1000;

app/assets/javascripts/ci/pipeline_editor/pipeline_editor_app.vue

 <script>
 import { GlLoadingIcon, GlModal } from '@gitlab/ui';
 import { fetchPolicies } from '~/lib/graphql';
-import { mergeUrlParams, queryToObject, redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { mergeUrlParams, queryToObject, visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/ci/pipeline_details/utils/unwrapping_utils';
@@ -325,7 +325,7 @@ export default {
         },
         this.newMergeRequestPath,
       );
-      redirectTo(url); // eslint-disable-line import/no-deprecated
+      visitUrl(url);
     },
     async refetchContent() {
       this.$apollo.queries.initialCiFileContent.skip = false;

app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue

@@ -136,7 +136,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-transition-medium gl-w-full">
+  <div class="gl-transition-all gl-w-full">
     <gl-modal
       v-if="showSwitchBranchModal"
       visible

app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue

@@ -137,7 +137,7 @@ export default {
 
     <template #header>
       <div
-        class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-font-sm gl-font-weight-bold gl-line-height-1"
+        class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-font-sm gl-font-weight-bold gl-leading-1"
       >
         <template v-if="isLoading">
           <span>{{ $options.i18n.stage }}</span>
@@ -155,7 +155,7 @@ export default {
       data-testid="pipeline-stage-loading-state"
     >
       <gl-loading-icon size="sm" class="gl-mr-3" />
-      <p class="gl-line-height-normal gl-mb-0">{{ $options.i18n.loadingText }}</p>
+      <p class="gl-leading-normal gl-mb-0">{{ $options.i18n.loadingText }}</p>
     </div>
     <ul
       v-else

app/assets/javascripts/ci/pipeline_new/components/pipeline_new_form.vue

@@ -17,10 +17,11 @@ import Vue from 'vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { fetchPolicies } from '~/lib/graphql';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
+import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __, n__ } from '~/locale';
 import {
   CC_VALIDATION_REQUIRED_ERROR,
+  IDENTITY_VERIFICATION_REQUIRED_ERROR,
   CONFIG_VARIABLES_TIMEOUT,
   FILE_TYPE,
   VARIABLE_TYPE,
@@ -71,6 +72,8 @@ export default {
     VariableValuesListbox,
     CcValidationRequiredAlert: () =>
       import('ee_component/billings/components/cc_validation_required_alert.vue'),
+    PipelineAccountVerificationAlert: () =>
+      import('ee_component/vue_shared/components/pipeline_account_verification_alert.vue'),
   },
   directives: { SafeHtml },
   props: {
@@ -223,6 +226,9 @@ export default {
     ccRequiredError() {
       return this.error === CC_VALIDATION_REQUIRED_ERROR && !this.ccAlertDismissed;
     },
+    identityVerificationRequiredError() {
+      return this.error === IDENTITY_VERIFICATION_REQUIRED_ERROR;
+    },
     variableTypeListboxItems() {
       return [
         {
@@ -347,7 +353,7 @@ export default {
       const { id, errors, totalWarnings, warnings } = data.createPipeline;
 
       if (id) {
-        redirectTo(`${this.pipelinesPath}/${id}`); // eslint-disable-line import/no-deprecated
+        visitUrl(`${this.pipelinesPath}/${id}`);
         return;
       }
 
@@ -390,6 +396,10 @@ export default {
 <template>
   <gl-form @submit.prevent="createPipeline">
     <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" @dismiss="dismissError" />
+    <pipeline-account-verification-alert
+      v-else-if="identityVerificationRequiredError"
+      class="gl-mb-4"
+    />
     <gl-alert
       v-else-if="error"
       :title="errorTitle"

app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue

@@ -59,7 +59,7 @@ export default {
     :translations="$options.i18n"
     :use-symbolic-ref-names="true"
     :query-params="queryParams"
-    toggle-button-class="gl-w-auto! gl-mb-0!"
+    toggle-button-class="!gl-w-auto gl-mb-0!"
     @input="setRefSelected"
   />
 </template>

app/assets/javascripts/ci/pipeline_new/constants.js

@@ -12,3 +12,6 @@ export const TAG_REF_TYPE = 'tag';
 export const CC_VALIDATION_REQUIRED_ERROR = __(
   'Credit card required to be on file in order to run CI jobs',
 );
+export const IDENTITY_VERIFICATION_REQUIRED_ERROR = __(
+  'Identity verification is required in order to run CI jobs',
+);

app/assets/javascripts/ci/pipeline_new/index.js

@@ -8,6 +8,7 @@ const mountPipelineNewForm = (el) => {
   const {
     // provide/inject
     projectRefsEndpoint,
+    identityVerificationPath,
 
     // props
     defaultBranch,
@@ -37,6 +38,12 @@ const mountPipelineNewForm = (el) => {
     apolloProvider,
     provide: {
       projectRefsEndpoint,
+      identityVerificationPath,
+      // Normally this will have a value from a helper. In this case, this is
+      // set to true because the alert that uses this field is dynamically
+      // rendered if a specific error is returned from the backend after
+      // the create pipeline XHR request completes
+      identityVerificationRequired: true,
     },
     render(createElement) {
       return createElement(PipelineNewForm, {

app/assets/javascripts/ci/pipelines_page/components/failure_widget/failed_job_details.vue

@@ -115,7 +115,7 @@ export default {
 };
 </script>
 <template>
-  <div class="container-fluid gl-grid-tpl-rows-auto">
+  <div class="container-fluid gl-grid-rows-auto">
     <div
       class="row gl-my-3 gl-cursor-pointer gl-display-flex gl-align-items-center"
       :aria-pressed="isJobLogVisible"