Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

9 files changed, 179 insertions, 188 deletions

diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
new file mode 100644
index 00000000000..a4a1cb5584d
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -0,0 +1,94 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
+import getLinkedPipelinesQuery from '../graphql/queries/get_linked_pipelines.query.graphql';
+
+export default {
+  i18n: {
+    linkedPipelinesFetchError: __('There was a problem fetching linked pipelines.'),
+  },
+  components: {
+    GlLoadingIcon,
+    PipelineMiniGraph,
+    LinkedPipelinesMiniList: () =>
+      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
+  },
+  inject: {
+    fullPath: {
+      default: '',
+    },
+    iid: {
+      default: '',
+    },
+  },
+  props: {
+    stages: {
+      type: Array,
+      required: true,
+    },
+  },
+  apollo: {
+    pipeline: {
+      query: getLinkedPipelinesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+          iid: this.iid,
+        };
+      },
+      skip() {
+        return !this.fullPath || !this.iid;
+      },
+      update({ project }) {
+        return project?.pipeline;
+      },
+      error() {
+        createFlash({ message: this.$options.i18n.linkedPipelinesFetchError });
+      },
+    },
+  },
+  data() {
+    return {
+      pipeline: null,
+    };
+  },
+  computed: {
+    hasDownstream() {
+      return this.pipeline?.downstream?.nodes.length > 0;
+    },
+    downstreamPipelines() {
+      return this.pipeline?.downstream?.nodes;
+    },
+    upstreamPipeline() {
+      return this.pipeline?.upstream;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="$apollo.queries.pipeline.loading" />
+    <div v-else>
+      <linked-pipelines-mini-list
+        v-if="upstreamPipeline"
+        :triggered-by="[upstreamPipeline]"
+        data-testid="commit-box-mini-graph-upstream"
+      />
+
+      <pipeline-mini-graph
+        :stages="stages"
+        class="gl-display-inline"
+        data-testid="commit-box-mini-graph"
+      />
+
+      <linked-pipelines-mini-list
+        v-if="hasDownstream"
+        :triggered="downstreamPipelines"
+        data-testid="commit-box-mini-graph-downstream"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql
new file mode 100644
index 00000000000..f7e930bb3f2
--- /dev/null
+++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql
@@ -0,0 +1,32 @@
+query getLinkedPipelines($fullPath: ID!, $iid: ID!) {
+  project(fullPath: $fullPath) {
+    pipeline(iid: $iid) {
+      downstream {
+        nodes {
+          id
+          path
+          project {
+            name
+          }
+          detailedStatus {
+            group
+            icon
+            label
+          }
+        }
+      }
+      upstream {
+        id
+        path
+        project {
+          name
+        }
+        detailedStatus {
+          group
+          icon
+          label
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
index 9173f5c771f..1d4ec4c110b 100644
--- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
+++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js
@@ -1,24 +1,41 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
 
 export const initCommitPipelineMiniGraph = async (selector = '.js-commit-pipeline-mini-graph') => {
   const el = document.querySelector(selector);
+
   if (!el) {
     return;
   }
 
+  const { stages, fullPath, iid } = el.dataset;
+
   // Some commits have no pipeline, code splitting to load the pipeline optionally
-  const { stages } = el.dataset;
-  const { default: PipelineMiniGraph } = await import(
-    /* webpackChunkName: 'pipelineMiniGraph' */ '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'
+  const { default: CommitBoxPipelineMiniGraph } = await import(
+    /* webpackChunkName: 'commitBoxPipelineMiniGraph' */ './components/commit_box_pipeline_mini_graph.vue'
   );
 
   // eslint-disable-next-line no-new
   new Vue({
     el,
+    apolloProvider,
+    provide: {
+      fullPath,
+      iid,
+      dataMethod: 'graphql',
+    },
     render(createElement) {
-      return createElement(PipelineMiniGraph, {
+      return createElement(CommitBoxPipelineMiniGraph, {
         props: {
-          stages: JSON.parse(stages),
+          // if stages do not exist for some reason, protect JSON.parse from erroring out
+          stages: stages ? JSON.parse(stages) : [],
         },
       });
     },
diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue
index f7cfc82db11..f2c1c843878 100644
--- a/app/assets/javascripts/projects/compare/components/app.vue
+++ b/app/assets/javascripts/projects/compare/components/app.vue
@@ -122,7 +122,7 @@ export default {
       />
     </div>
     <div class="gl-mt-4">
-      <gl-button category="primary" variant="success" @click="onSubmit">
+      <gl-button category="primary" variant="confirm" @click="onSubmit">
         {{ s__('CompareRevisions|Compare') }}
       </gl-button>
       <gl-button data-testid="swapRevisionsButton" class="btn btn-default" @click="onSwapRevision">
diff --git a/app/assets/javascripts/projects/compare/components/app_legacy.vue b/app/assets/javascripts/projects/compare/components/app_legacy.vue
deleted file mode 100644
index d3f09f7d69f..00000000000
--- a/app/assets/javascripts/projects/compare/components/app_legacy.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-import { GlButton } from '@gitlab/ui';
-import csrf from '~/lib/utils/csrf';
-import RevisionDropdown from './revision_dropdown_legacy.vue';
-
-export default {
-  csrf,
-  components: {
-    RevisionDropdown,
-    GlButton,
-  },
-  props: {
-    projectCompareIndexPath: {
-      type: String,
-      required: true,
-    },
-    refsProjectPath: {
-      type: String,
-      required: true,
-    },
-    paramsFrom: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    paramsTo: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    projectMergeRequestPath: {
-      type: String,
-      required: true,
-    },
-    createMrPath: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      from: this.paramsFrom,
-      to: this.paramsTo,
-    };
-  },
-  methods: {
-    onSubmit() {
-      this.$refs.form.submit();
-    },
-    onSwapRevision() {
-      [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to'
-    },
-    onSelectRevision({ direction, revision }) {
-      this[direction] = revision; // direction is either 'from' or 'to'
-    },
-  },
-};
-</script>
-
-<template>
-  <form
-    ref="form"
-    class="form-inline js-requires-input js-signature-container"
-    method="POST"
-    :action="projectCompareIndexPath"
-  >
-    <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    <revision-dropdown
-      :refs-project-path="refsProjectPath"
-      revision-text="Source"
-      params-name="to"
-      :params-branch="to"
-      data-testid="sourceRevisionDropdown"
-      @selectRevision="onSelectRevision"
-    />
-    <div class="compare-ellipsis gl-display-inline" data-testid="ellipsis">...</div>
-    <revision-dropdown
-      :refs-project-path="refsProjectPath"
-      revision-text="Target"
-      params-name="from"
-      :params-branch="from"
-      data-testid="targetRevisionDropdown"
-      @selectRevision="onSelectRevision"
-    />
-    <gl-button category="primary" variant="success" class="gl-ml-3" @click="onSubmit">
-      {{ s__('CompareRevisions|Compare') }}
-    </gl-button>
-    <gl-button
-      data-testid="swapRevisionsButton"
-      class="btn btn-default gl-button gl-ml-3"
-      @click="onSwapRevision"
-    >
-      {{ s__('CompareRevisions|Swap revisions') }}
-    </gl-button>
-    <gl-button
-      v-if="projectMergeRequestPath"
-      :href="projectMergeRequestPath"
-      data-testid="projectMrButton"
-      class="btn btn-default gl-button gl-ml-3"
-    >
-      {{ s__('CompareRevisions|View open merge request') }}
-    </gl-button>
-    <gl-button
-      v-else-if="createMrPath"
-      :href="createMrPath"
-      data-testid="createMrButton"
-      class="btn btn-default gl-button gl-ml-3"
-    >
-      {{ s__('CompareRevisions|Create merge request') }}
-    </gl-button>
-  </form>
-</template>
diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js
index 322dff773b8..e485a086d39 100644
--- a/app/assets/javascripts/projects/compare/index.js
+++ b/app/assets/javascripts/projects/compare/index.js
@@ -1,44 +1,9 @@
 import Vue from 'vue';
 import CompareApp from './components/app.vue';
-import CompareAppLegacy from './components/app_legacy.vue';
 
 export default function init() {
   const el = document.getElementById('js-compare-selector');
 
-  if (gon.features?.compareRepoDropdown) {
-    const {
-      refsProjectPath,
-      paramsFrom,
-      paramsTo,
-      projectCompareIndexPath,
-      projectMergeRequestPath,
-      createMrPath,
-      projectTo,
-      projectsFrom,
-    } = el.dataset;
-
-    return new Vue({
-      el,
-      components: {
-        CompareApp,
-      },
-      render(createElement) {
-        return createElement(CompareApp, {
-          props: {
-            refsProjectPath,
-            paramsFrom,
-            paramsTo,
-            projectCompareIndexPath,
-            projectMergeRequestPath,
-            createMrPath,
-            defaultProject: JSON.parse(projectTo),
-            projects: JSON.parse(projectsFrom),
-          },
-        });
-      },
-    });
-  }
-
   const {
     refsProjectPath,
     paramsFrom,
@@ -46,15 +11,17 @@ export default function init() {
     projectCompareIndexPath,
     projectMergeRequestPath,
     createMrPath,
+    projectTo,
+    projectsFrom,
   } = el.dataset;
 
   return new Vue({
     el,
     components: {
-      CompareAppLegacy,
+      CompareApp,
     },
     render(createElement) {
-      return createElement(CompareAppLegacy, {
+      return createElement(CompareApp, {
         props: {
           refsProjectPath,
           paramsFrom,
@@ -62,6 +29,8 @@ export default function init() {
           projectCompareIndexPath,
           projectMergeRequestPath,
           createMrPath,
+          defaultProject: JSON.parse(projectTo),
+          projects: JSON.parse(projectsFrom),
         },
       });
     },
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
index 0b0560f63c1..d3cadcd2bd5 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
+++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue
@@ -239,7 +239,7 @@ export default {
       };
     },
   },
-  successColor: '#608b2f',
+  successColor: '#366800',
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
   timesChartOptions: {
     height: INNER_CHART_HEIGHT,
diff --git a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
index 0b398eddc9c..02e31d6fbb3 100644
--- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
+++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlBanner } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
+import { setCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 
 export default {
@@ -16,50 +16,36 @@ export default {
   components: {
     GlBanner,
   },
-  props: {
-    projectId: {
-      type: Number,
-      required: true,
-    },
-  },
+  inject: ['terraformImagePath', 'bannerDismissedKey'],
   data() {
     return {
       isVisible: true,
     };
   },
   computed: {
-    bannerDissmisedKey() {
-      return `terraform_notification_dismissed_for_project_${this.projectId}`;
-    },
     docsUrl() {
       return helpPagePath('user/infrastructure/terraform_state');
     },
   },
-  created() {
-    if (parseBoolean(getCookie(this.bannerDissmisedKey))) {
-      this.isVisible = false;
-    }
-  },
   methods: {
     handleClose() {
-      setCookie(this.bannerDissmisedKey, true);
+      setCookie(this.bannerDismissedKey, true);
       this.isVisible = false;
     },
   },
 };
 </script>
 <template>
-  <div v-if="isVisible">
-    <div class="gl-py-5">
-      <gl-banner
-        :title="$options.i18n.title"
-        :button-text="$options.i18n.buttonText"
-        :button-link="docsUrl"
-        variant="introduction"
-        @close="handleClose"
-      >
-        <p>{{ $options.i18n.description }}</p>
-      </gl-banner>
-    </div>
+  <div v-if="isVisible" class="gl-py-5">
+    <gl-banner
+      :title="$options.i18n.title"
+      :button-text="$options.i18n.buttonText"
+      :button-link="docsUrl"
+      :svg-path="terraformImagePath"
+      variant="promotion"
+      @close="handleClose"
+    >
+      <p>{{ $options.i18n.description }}</p>
+    </gl-banner>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js
index eb04f109a8e..0a273247930 100644
--- a/app/assets/javascripts/projects/terraform_notification/index.js
+++ b/app/assets/javascripts/projects/terraform_notification/index.js
@@ -1,18 +1,23 @@
 import Vue from 'vue';
+import { parseBoolean, getCookie } from '~/lib/utils/common_utils';
 import TerraformNotification from './components/terraform_notification.vue';
 
 export default () => {
   const el = document.querySelector('.js-terraform-notification');
+  const bannerDismissedKey = 'terraform_notification_dismissed';
 
-  if (!el) {
+  if (!el || parseBoolean(getCookie(bannerDismissedKey))) {
     return false;
   }
 
-  const { projectId } = el.dataset;
+  const { terraformImagePath } = el.dataset;
 
   return new Vue({
     el,
-    render: (createElement) =>
-      createElement(TerraformNotification, { props: { projectId: Number(projectId) } }),
+    provide: {
+      terraformImagePath,
+      bannerDismissedKey,
+    },
+    render: (createElement) => createElement(TerraformNotification),
   });
 };