Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

22 files changed, 189 insertions, 198 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index 9329a35ba99..fb45738f8d1 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -1,12 +1,12 @@
 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
+import getUserCallouts from '~/graphql_shared/queries/get_user_callouts.query.graphql';
 import { __ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
-import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql';
 import { reportToSentry, reportMessageToSentry } from '../../utils';
 import { listByLayers } from '../parsing_utils';
 import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW, VIEW_TYPE_KEY } from './constants';
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
index 1435276edd3..3c78b655dc7 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert, GlLoadingIcon, GlSegmentedControl, GlToggle } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { STAGE_VIEW, LAYER_VIEW } from './constants';
 
 export default {
@@ -36,20 +36,20 @@ export default {
   },
   i18n: {
     hoverTipText: __('Tip: Hover over a job to see the jobs it depends on to run.'),
-    linksLabelText: __('Show dependencies'),
+    linksLabelText: s__('GraphViewType|Show dependencies'),
     viewLabelText: __('Group jobs by'),
   },
   views: {
     [STAGE_VIEW]: {
       type: STAGE_VIEW,
       text: {
-        primary: __('Stage'),
+        primary: s__('GraphViewType|Stage'),
       },
     },
     [LAYER_VIEW]: {
       type: LAYER_VIEW,
       text: {
-        primary: __('Job dependencies'),
+        primary: s__('GraphViewType|Job dependencies'),
       },
     },
   },
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index 3f746731e34..b3c5af5418f 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -58,7 +58,7 @@ export default {
   },
   computed: {
     tooltipText() {
-      return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label}
+      return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} -
       ${this.sourceJobInfo}`;
     },
     buttonId() {
@@ -71,7 +71,7 @@ export default {
       return this.pipeline.project.name;
     },
     downstreamTitle() {
-      return this.childPipeline ? __('child-pipeline') : this.pipeline.project.name;
+      return this.childPipeline ? this.sourceJobName : this.pipeline.project.name;
     },
     parentPipeline() {
       return this.isUpstream && this.isSameProject;
@@ -163,7 +163,7 @@ export default {
         />
         <div v-else class="gl-pr-2"><gl-loading-icon inline /></div>
         <div class="gl-display-flex gl-flex-direction-column gl-w-13">
-          <span class="gl-text-truncate">
+          <span class="gl-text-truncate" data-testid="downstream-title">
             {{ downstreamTitle }}
           </span>
           <div class="gl-text-truncate">
diff --git a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js
index 7c306683305..7c62acbe8de 100644
--- a/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js
+++ b/app/assets/javascripts/pipelines/components/graph_shared/drawing_utils.js
@@ -60,8 +60,16 @@ export const generateLinksData = ({ links }, containerID, modifier = '') => {
       paddingTop +
       sourceNodeCoordinates.height / 2;
 
-    // Start point
-    path.moveTo(sourceNodeX, sourceNodeY);
+    const sourceNodeLeftX = sourceNodeCoordinates.left - containerCoordinates.x - paddingLeft;
+
+    // If the source and target X values are the same,
+    // it means the nodes are in the same column so we
+    // want to start the line on the left of the pill
+    // instead of the right to have a nice curve.
+    const firstPointCoordinateX = sourceNodeLeftX === targetNodeX ? sourceNodeLeftX : sourceNodeX;
+
+    // First point
+    path.moveTo(firstPointCoordinateX, sourceNodeY);
 
     // Make cross-stages lines a straight line all the way
     // until we can safely draw the bezier to look nice.
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index d8e7b83a8c1..b7500ef00b0 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -132,6 +132,16 @@ export default {
           };
       }
     },
+    canRetryPipeline() {
+      const { retryable, userPermissions } = this.pipeline;
+
+      return retryable && userPermissions.updatePipeline;
+    },
+    canCancelPipeline() {
+      const { cancelable, userPermissions } = this.pipeline;
+
+      return cancelable && userPermissions.updatePipeline;
+    },
   },
   watch: {
     isFinished(finished) {
@@ -219,7 +229,7 @@ export default {
       item-name="Pipeline"
     >
       <gl-button
-        v-if="pipeline.retryable"
+        v-if="canRetryPipeline"
         :loading="isRetrying"
         :disabled="isRetrying"
         category="secondary"
@@ -232,7 +242,7 @@ export default {
       </gl-button>
 
       <gl-button
-        v-if="pipeline.cancelable"
+        v-if="canCancelPipeline"
         :loading="isCanceling"
         :disabled="isCanceling"
         class="gl-ml-3"
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 3972c126673..d19215e7895 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 { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash 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,9 @@ export default {
 
           reportToSentry('action_component', err);
 
-          createFlash(__('An error occurred while making the request.'));
+          createFlash({
+            message: __('An error occurred while making the request.'),
+          });
         });
     },
   },
diff --git a/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue b/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue
deleted file mode 100644
index 6dff3828a34..00000000000
--- a/app/assets/javascripts/pipelines/components/notification/pipeline_notification.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-import { GlBanner, GlLink, GlSprintf } from '@gitlab/ui';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
-import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql';
-
-const featureName = 'pipeline_needs_banner';
-const enumFeatureName = featureName.toUpperCase();
-
-export default {
-  i18n: {
-    title: __('View job dependencies in the pipeline graph!'),
-    description: __(
-      'You can now group jobs in the pipeline graph based on which jobs are configured to run first, if you use the %{codeStart}needs:%{codeEnd} keyword to establish job dependencies in your CI/CD pipelines. %{linkStart}Learn how to speed up your pipeline with needs.%{linkEnd}',
-    ),
-    buttonText: __('Provide feedback'),
-  },
-  components: {
-    GlBanner,
-    GlLink,
-    GlSprintf,
-  },
-  apollo: {
-    callouts: {
-      query: getUserCallouts,
-      update(data) {
-        return data?.currentUser?.callouts?.nodes.map((c) => c.featureName);
-      },
-      error() {
-        this.hasError = true;
-      },
-    },
-  },
-  inject: ['dagDocPath'],
-  data() {
-    return {
-      callouts: [],
-      dismissedAlert: false,
-      hasError: false,
-    };
-  },
-  computed: {
-    showBanner() {
-      return (
-        !this.$apollo.queries.callouts?.loading &&
-        !this.hasError &&
-        !this.dismissedAlert &&
-        !this.callouts.includes(enumFeatureName)
-      );
-    },
-  },
-  methods: {
-    handleClose() {
-      this.dismissedAlert = true;
-      try {
-        this.$apollo.mutate({
-          mutation: DismissPipelineGraphCallout,
-          variables: {
-            featureName,
-          },
-        });
-      } catch {
-        createFlash(__('There was a problem dismissing this notification.'));
-      }
-    },
-  },
-};
-</script>
-<template>
-  <gl-banner
-    v-if="showBanner"
-    :title="$options.i18n.title"
-    :button-text="$options.i18n.buttonText"
-    button-link="https://gitlab.com/gitlab-org/gitlab/-/issues/327688"
-    variant="introduction"
-    @close="handleClose"
-  >
-    <p>
-      <gl-sprintf :message="$options.i18n.description">
-        <template #link="{ content }">
-          <gl-link :href="dagDocPath" target="_blank"> {{ content }}</gl-link>
-        </template>
-        <template #code="{ content }">
-          <code>{{ content }}</code>
-        </template>
-      </gl-sprintf>
-    </p>
-  </gl-banner>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/parsing_utils.js b/app/assets/javascripts/pipelines/components/parsing_utils.js
index 9d886e0e379..f1d9ced807b 100644
--- a/app/assets/javascripts/pipelines/components/parsing_utils.js
+++ b/app/assets/javascripts/pipelines/components/parsing_utils.js
@@ -55,28 +55,32 @@ export const createNodeDict = (nodes) => {
 export const makeLinksFromNodes = (nodes, nodeDict) => {
   const constantLinkValue = 10; // all links are the same weight
   return nodes
-    .map((group) => {
-      return group.jobs.map((job) => {
-        if (!job.needs) {
-          return [];
-        }
-
-        return job.needs.map((needed) => {
-          return {
-            source: nodeDict[needed]?.name,
-            target: group.name,
-            value: constantLinkValue,
-          };
-        });
-      });
-    })
+    .map(({ jobs, name: groupName }) =>
+      jobs.map(({ needs = [] }) =>
+        needs.reduce((acc, needed) => {
+          // It's possible that we have an optional job, which
+          // is being needed by another job. In that scenario,
+          // the needed job doesn't exist, so we don't want to
+          // create link for it.
+          if (nodeDict[needed]?.name) {
+            acc.push({
+              source: nodeDict[needed].name,
+              target: groupName,
+              value: constantLinkValue,
+            });
+          }
+
+          return acc;
+        }, []),
+      ),
+    )
     .flat(2);
 };
 
 export const getAllAncestors = (nodes, nodeDict) => {
   const needs = nodes
     .map((node) => {
-      return nodeDict[node].needs || '';
+      return nodeDict[node]?.needs || '';
     })
     .flat()
     .filter(Boolean);
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
index e9773f055a7..104a3caab4c 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue
@@ -2,6 +2,7 @@
 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { startCodeQualityWalkthrough, track } from '~/code_quality_walkthrough/utils';
 import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
+import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { getExperimentData } from '~/experimentation/utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
@@ -13,7 +14,9 @@ export default {
     description: s__(`Pipelines|GitLab CI/CD can automatically build,
       test, and deploy your code. Let GitLab take care of time
       consuming tasks, so you can spend more time creating.`),
-    btnText: s__('Pipelines|Get started with CI/CD'),
+    aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
+    installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
+    getStartedBtnText: s__('Pipelines|Get started with CI/CD'),
     codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
     codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
       readable, and accessible to contributors, use GitLab CI/CD
@@ -42,6 +45,11 @@ export default {
       required: false,
       default: null,
     },
+    ciRunnerSettingsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ciHelpPagePath() {
@@ -50,6 +58,12 @@ export default {
     isPipelineEmptyStateTemplatesExperimentActive() {
       return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates'));
     },
+    isCodeQualityExperimentActive() {
+      return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
+    },
+    isCiRunnerTemplatesExperimentActive() {
+      return this.canSetCi && Boolean(getExperimentData('ci_runner_templates'));
+    },
   },
   mounted() {
     startCodeQualityWalkthrough();
@@ -58,6 +72,10 @@ export default {
     trackClick() {
       track('cta_clicked');
     },
+    trackCiRunnerTemplatesClick(action) {
+      const tracking = new ExperimentTracking('ci_runner_templates');
+      tracking.event(action);
+    },
   },
 };
 </script>
@@ -72,7 +90,7 @@ export default {
           :title="$options.i18n.title"
           :svg-path="emptyStateSvgPath"
           :description="$options.i18n.description"
-          :primary-button-text="$options.i18n.btnText"
+          :primary-button-text="$options.i18n.getStartedBtnText"
           :primary-button-link="ciHelpPagePath"
         />
       </template>
@@ -80,7 +98,7 @@ export default {
         <pipelines-ci-templates />
       </template>
     </gitlab-experiment>
-    <gitlab-experiment v-else-if="canSetCi" name="code_quality_walkthrough">
+    <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
       <template #control>
         <gl-empty-state
           :title="$options.i18n.title"
@@ -89,7 +107,7 @@ export default {
         >
           <template #actions>
             <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()">
-              {{ $options.i18n.btnText }}
+              {{ $options.i18n.getStartedBtnText }}
             </gl-button>
           </template>
         </gl-empty-state>
@@ -108,6 +126,57 @@ export default {
         </gl-empty-state>
       </template>
     </gitlab-experiment>
+    <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
+      <template #control>
+        <gl-empty-state
+          :title="$options.i18n.title"
+          :svg-path="emptyStateSvgPath"
+          :description="$options.i18n.description"
+        >
+          <template #actions>
+            <gl-button
+              :href="ciHelpPagePath"
+              variant="confirm"
+              @click="trackCiRunnerTemplatesClick('get_started_button_clicked')"
+            >
+              {{ $options.i18n.getStartedBtnText }}
+            </gl-button>
+          </template>
+        </gl-empty-state>
+      </template>
+      <template #candidate>
+        <gl-empty-state
+          :title="$options.i18n.title"
+          :svg-path="emptyStateSvgPath"
+          :description="$options.i18n.description"
+        >
+          <template #actions>
+            <gl-button
+              :href="ciRunnerSettingsPath"
+              variant="confirm"
+              @click="trackCiRunnerTemplatesClick('install_runners_button_clicked')"
+            >
+              {{ $options.i18n.installRunnersBtnText }}
+            </gl-button>
+            <gl-button
+              :href="ciHelpPagePath"
+              variant="default"
+              @click="trackCiRunnerTemplatesClick('learn_button_clicked')"
+            >
+              {{ $options.i18n.aboutRunnersBtnText }}
+            </gl-button>
+          </template>
+        </gl-empty-state>
+      </template>
+    </gitlab-experiment>
+    <gl-empty-state
+      v-else-if="canSetCi"
+      :title="$options.i18n.title"
+      :svg-path="emptyStateSvgPath"
+      :description="$options.i18n.description"
+      :primary-button-text="$options.i18n.getStartedBtnText"
+      :primary-button-link="ciHelpPagePath"
+    />
     <gl-empty-state
       v-else
       title=""
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 d39e120dc6c..52c8ef2cf26 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -56,6 +56,7 @@ export default {
   <div class="pipeline-tags" data-testid="pipeline-url-table-cell">
     <gl-link
       :href="pipeline.path"
+      class="gl-text-decoration-underline"
       data-testid="pipeline-url-link"
       data-qa-selector="pipeline_url_link"
     >
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index 0218cb2e1b8..8bb2657c161 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 { GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -99,6 +99,11 @@ export default {
       required: false,
       default: null,
     },
+    ciRunnerSettingsPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -249,11 +254,16 @@ export default {
         .postAction(endpoint)
         .then(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice');
+          createFlash({
+            message: s__('Pipelines|Project cache successfully reset.'),
+            type: 'notice',
+          });
         })
         .catch(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.'));
+          createFlash({
+            message: s__('Pipelines|Something went wrong while cleaning runners cache.'),
+          });
         });
     },
     resetRequestData() {
@@ -278,7 +288,10 @@ export default {
         }
 
         if (!filter.type) {
-          createFlash(RAW_TEXT_WARNING, 'warning');
+          createFlash({
+            message: RAW_TEXT_WARNING,
+            type: 'warning',
+          });
         }
       });
 
@@ -337,6 +350,7 @@ export default {
         :empty-state-svg-path="emptyStateSvgPath"
         :can-set-ci="canCreatePipeline"
         :code-quality-page-path="codeQualityPagePath"
+        :ci-runner-settings-path="ciRunnerSettingsPath"
       />
 
       <gl-empty-state
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 20a232beb83..15ff7da35e1 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 { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -38,7 +38,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_BRANCH_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_BRANCH_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });
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 4a8d89ebe37..af62c492748 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 { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -38,7 +38,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_TAG_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_TAG_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });
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 3db5893b565..bc661f37493 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 { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import {
   ANY_TRIGGER_AUTHOR,
   FETCH_AUTHOR_ERROR_MESSAGE,
@@ -61,7 +61,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_AUTHOR_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });
diff --git a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_header_data.query.graphql b/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_header_data.query.graphql
index 1b3f80b1f18..de8de651eea 100644
--- a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_header_data.query.graphql
+++ b/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_header_data.query.graphql
@@ -8,6 +8,7 @@ query getPipelineHeaderData($fullPath: ID!, $iid: ID!) {
       cancelable
       userPermissions {
         destroyPipeline
+        updatePipeline
       }
       detailedStatus {
         detailsPath
diff --git a/app/assets/javascripts/pipelines/graphql/queries/get_user_callouts.query.graphql b/app/assets/javascripts/pipelines/graphql/queries/get_user_callouts.query.graphql
deleted file mode 100644
index 12b391e41ac..00000000000
--- a/app/assets/javascripts/pipelines/graphql/queries/get_user_callouts.query.graphql
+++ /dev/null
@@ -1,13 +0,0 @@
-query getUser {
-  currentUser {
-    id
-    __typename
-    callouts {
-      __typename
-      nodes {
-        __typename
-        featureName
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js b/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
index d9c9289f66e..082d67c938c 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines_mixin.js
@@ -1,5 +1,5 @@
 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
@@ -169,7 +169,11 @@ export default {
       this.service
         .postAction(endpoint)
         .then(() => this.updateTable())
-        .catch(() => createFlash(__('An error occurred while making the request.')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while making the request.'),
+          }),
+        );
     },
 
     /**
@@ -189,9 +193,11 @@ export default {
         .runMRPipeline(options)
         .then(() => this.updateTable())
         .catch(() => {
-          createFlash(
-            __('An error occurred while trying to run a new pipeline for this merge request.'),
-          );
+          createFlash({
+            message: __(
+              'An error occurred while trying to run a new pipeline for this merge request.',
+            ),
+          });
         })
         .finally(() => this.store.toggleIsRunningPipeline(false));
     },
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 911f40f4db3..9ab4753fec8 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -9,7 +9,6 @@ import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
 import createDagApp from './pipeline_details_dag';
 import { createPipelinesDetailApp } from './pipeline_details_graph';
 import { createPipelineHeaderApp } from './pipeline_details_header';
-import { createPipelineNotificationApp } from './pipeline_details_notification';
 import { apolloProvider } from './pipeline_shared_client';
 import createTestReportsStore from './stores/test_reports';
 import { reportToSentry } from './utils';
@@ -20,7 +19,6 @@ const SELECTORS = {
   PIPELINE_DETAILS: '.js-pipeline-details-vue',
   PIPELINE_GRAPH: '#js-pipeline-graph-vue',
   PIPELINE_HEADER: '#js-pipeline-header-vue',
-  PIPELINE_NOTIFICATION: '#js-pipeline-notification',
   PIPELINE_TESTS: '#js-pipeline-tests-detail',
 };
 
@@ -101,14 +99,6 @@ export default async function initPipelineDetailsBundle() {
     Flash(__('An error occurred while loading a section of this page.'));
   }
 
-  if (gon.features.pipelineGraphLayersView) {
-    try {
-      createPipelineNotificationApp(SELECTORS.PIPELINE_NOTIFICATION, apolloProvider);
-    } catch {
-      Flash(__('An error occurred while loading a section of this page.'));
-    }
-  }
-
   if (canShowNewPipelineDetails) {
     try {
       createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);
diff --git a/app/assets/javascripts/pipelines/pipeline_details_notification.js b/app/assets/javascripts/pipelines/pipeline_details_notification.js
deleted file mode 100644
index be234e8972d..00000000000
--- a/app/assets/javascripts/pipelines/pipeline_details_notification.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import PipelineNotification from './components/notification/pipeline_notification.vue';
-
-Vue.use(VueApollo);
-
-export const createPipelineNotificationApp = (elSelector, apolloProvider) => {
-  const el = document.querySelector(elSelector);
-
-  if (!el) {
-    return;
-  }
-
-  const { dagDocPath } = el?.dataset;
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    components: {
-      PipelineNotification,
-    },
-    provide: {
-      dagDocPath,
-    },
-    apolloProvider,
-    render(createElement) {
-      return createElement('pipeline-notification');
-    },
-  });
-};
diff --git a/app/assets/javascripts/pipelines/pipelines_index.js b/app/assets/javascripts/pipelines/pipelines_index.js
index c892311782c..925a96ea1aa 100644
--- a/app/assets/javascripts/pipelines/pipelines_index.js
+++ b/app/assets/javascripts/pipelines/pipelines_index.js
@@ -38,6 +38,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     projectId,
     params,
     codeQualityPagePath,
+    ciRunnerSettingsPath,
   } = el.dataset;
 
   return new Vue({
@@ -76,6 +77,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
           projectId,
           params: JSON.parse(params),
           codeQualityPagePath,
+          ciRunnerSettingsPath,
         },
       });
     },
diff --git a/app/assets/javascripts/pipelines/stores/test_reports/actions.js b/app/assets/javascripts/pipelines/stores/test_reports/actions.js
index 6de345233ae..7b28d48b5b6 100644
--- a/app/assets/javascripts/pipelines/stores/test_reports/actions.js
+++ b/app/assets/javascripts/pipelines/stores/test_reports/actions.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import * as types from './mutation_types';
@@ -12,7 +12,9 @@ export const fetchSummary = ({ state, commit, dispatch }) => {
       commit(types.SET_SUMMARY, data);
     })
     .catch(() => {
-      createFlash(s__('TestReports|There was an error fetching the summary.'));
+      createFlash({
+        message: s__('TestReports|There was an error fetching the summary.'),
+      });
     })
     .finally(() => {
       dispatch('toggleLoading');
@@ -36,7 +38,9 @@ export const fetchTestSuite = ({ state, commit, dispatch }, index) => {
     .get(state.suiteEndpoint, { params: { build_ids } })
     .then(({ data }) => commit(types.SET_SUITE, { suite: data, index }))
     .catch(() => {
-      createFlash(s__('TestReports|There was an error fetching the test suite.'));
+      createFlash({
+        message: s__('TestReports|There was an error fetching the test suite.'),
+      });
     })
     .finally(() => {
       dispatch('toggleLoading');
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 800a363cada..02a9e5b7fc6 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -39,7 +39,13 @@ export const generateJobNeedsDict = (jobs = {}) => {
       }
 
       return jobs[jobName].needs
-        .map((job) => {
+        .reduce((needsAcc, job) => {
+          // It's possible that a needs refer to an optional job
+          // that is not defined in which case we don't add that entry
+          if (!jobs[job]) {
+            return needsAcc;
+          }
+
           // If we already have the needs of a job in the accumulator,
           // then we use the memoized data instead of the recursive call
           // to save some performance.
@@ -50,11 +56,11 @@ export const generateJobNeedsDict = (jobs = {}) => {
           // to the list of `needs` to ensure we can properly reference it.
           const group = jobs[job];
           if (group.size > 1) {
-            return [job, group.name, newNeeds];
+            return [...needsAcc, job, group.name, newNeeds];
           }
 
-          return [job, newNeeds];
-        })
+          return [...needsAcc, job, newNeeds];
+        }, [])
         .flat(Infinity);
     };