Add latest changes from gitlab-org/gitlab@master

7 files changed, 143 insertions, 3 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
index 08d246a9a00..4ebfec7a715 100644
--- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
@@ -16,6 +16,7 @@ import {
   TAB_QUERY_PARAM,
   TABS_INDEX,
   VALIDATE_TAB,
+  VALIDATE_TAB_BADGE_DISMISSED_KEY,
   VISUALIZE_TAB,
 } from '../constants';
 import getAppStatus from '../graphql/queries/client/app_status.query.graphql';
@@ -29,6 +30,7 @@ import WalkthroughPopover from './popovers/walkthrough_popover.vue';
 
 export default {
   i18n: {
+    new: __('NEW'),
     tabEdit: s__('Pipelines|Edit'),
     tabGraph: s__('Pipelines|Visualize'),
     tabLint: s__('Pipelines|Lint'),
@@ -87,6 +89,10 @@ export default {
       required: false,
       default: '',
     },
+    currentTab: {
+      type: String,
+      required: true,
+    },
     isNewCiConfigFile: {
       type: Boolean,
       required: true,
@@ -104,6 +110,11 @@ export default {
       },
     },
   },
+  data() {
+    return {
+      showValidateNewBadge: false,
+    };
+  },
   computed: {
     isMergedYamlAvailable() {
       return this.ciConfigData?.mergedYaml;
@@ -123,6 +134,16 @@ export default {
     isLoading() {
       return this.appStatus === EDITOR_APP_STATUS_LOADING;
     },
+    validateTabBadgeTitle() {
+      if (this.showValidateNewBadge) {
+        return this.$options.i18n.new;
+      }
+
+      return '';
+    },
+  },
+  mounted() {
+    this.showValidateNewBadge = !JSON.parse(localStorage.getItem(VALIDATE_TAB_BADGE_DISMISSED_KEY));
   },
   created() {
     const [tabQueryParam] = getParameterValues(TAB_QUERY_PARAM);
@@ -134,6 +155,11 @@ export default {
   },
   methods: {
     setCurrentTab(tabName) {
+      if (this.currentTab === VALIDATE_TAB) {
+        localStorage.setItem(VALIDATE_TAB_BADGE_DISMISSED_KEY, 'true');
+        this.showValidateNewBadge = false;
+      }
+
       this.$emit('set-current-tab', tabName);
     },
     setDefaultTab(tabName) {
@@ -189,6 +215,7 @@ export default {
       v-if="glFeatures.simulatePipeline"
       class="gl-mb-3"
       data-testid="validate-tab"
+      :badge-title="validateTabBadgeTitle"
       :title="$options.i18n.tabValidate"
       @click="setCurrentTab($options.tabConstants.VALIDATE_TAB)"
     >
diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue
new file mode 100644
index 00000000000..4730a521227
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/components/popovers/validate_pipeline_popover.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { VALIDATE_TAB_FEEDBACK_URL } from '../../constants';
+
+export const i18n = {
+  feedbackLink: __('Provide Feedback'),
+  popoverContent: s__(
+    'PipelineEditor|Pipeline behavior will be simulated including the %{codeStart}rules%{codeEnd} %{codeStart}only%{codeEnd} %{codeStart}except%{codeEnd} and %{codeStart}needs%{codeEnd} job dependencies. %{linkStart}Learn more%{linkEnd}',
+  ),
+  title: s__('PipelineEditor|Validate pipeline under simulated conditions'),
+};
+
+export default {
+  name: 'ValidatePipelinePopover',
+  directives: { Outside },
+  components: {
+    GlLink,
+    GlPopover,
+    GlSprintf,
+  },
+  inject: ['simulatePipelineHelpPagePath'],
+  data() {
+    return {
+      showPopover: false,
+    };
+  },
+  methods: {
+    dismiss() {
+      this.showPopover = false;
+    },
+  },
+  i18n,
+  VALIDATE_TAB_FEEDBACK_URL,
+};
+</script>
+
+<template>
+  <gl-popover
+    :show.sync="showPopover"
+    target="validate-pipeline-help"
+    triggers="hover focus"
+    placement="top"
+  >
+    <p class="gl-my-3 gl-font-weight-bold">{{ $options.i18n.title }}</p>
+    <p>
+      <gl-sprintf :message="$options.i18n.popoverContent">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+        <template #link="{ content }">
+          <gl-link
+            class="gl-font-sm"
+            target="_blank"
+            :href="simulatePipelineHelpPagePath"
+            data-testid="help-link"
+            >{{ content }}</gl-link
+          >
+        </template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-text-right gl-mb-3">
+      <gl-link
+        class="gl-font-sm"
+        target="_blank"
+        :href="$options.VALIDATE_TAB_FEEDBACK_URL"
+        data-testid="feedback-link"
+        >{{ $options.i18n.feedbackLink }}</gl-link
+      >
+    </p>
+  </gl-popover>
+</template>
diff --git a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
index 673599da085..f30017ecbce 100644
--- a/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
+++ b/app/assets/javascripts/pipeline_editor/components/ui/editor_tab.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAlert, GlTab } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlTab } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 /**
  * Wrapper of <gl-tab> to optionally lazily render this tab's content
@@ -48,6 +48,7 @@ export default {
   },
   components: {
     GlAlert,
+    GlBadge,
     GlTab,
     // Use a small renderless component to know when the tab content mounts because:
     // - gl-tab always gets mounted, even if lazy is `true`. See:
@@ -59,6 +60,16 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    badgeTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    badgeVariant: {
+      type: String,
+      required: false,
+      default: 'info',
+    },
     emptyMessage: {
       type: String,
       required: false,
@@ -91,6 +102,10 @@ export default {
       required: false,
       default: false,
     },
+    title: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -98,6 +113,9 @@ export default {
     };
   },
   computed: {
+    hasBadgeTitle() {
+      return this.badgeTitle.length > 0;
+    },
     slots() {
       return Object.keys(this.$slots);
     },
@@ -116,6 +134,12 @@ export default {
 </script>
 <template>
   <gl-tab :lazy="isLazy" v-bind="$attrs" v-on="$listeners">
+    <template #title>
+      <span>{{ title }}</span>
+      <gl-badge v-if="hasBadgeTitle" class="gl-ml-2" size="sm" :variant="badgeVariant">{{
+        badgeTitle
+      }}</gl-badge>
+    </template>
     <gl-alert v-if="isEmpty" variant="tip">{{ emptyMessage }}</gl-alert>
     <gl-alert v-else-if="isUnavailable" variant="danger" :dismissible="false">
       {{ $options.i18n.unavailable }}</gl-alert
diff --git a/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue
index 5f26318497b..4453796a0e4 100644
--- a/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue
+++ b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue
@@ -1,6 +1,7 @@
 <script>
-import { GlButton, GlDropdown, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
+import ValidatePipelinePopover from '../popovers/validate_pipeline_popover.vue';
 
 export const i18n = {
   help: __('Help'),
@@ -22,7 +23,9 @@ export default {
   components: {
     GlButton,
     GlDropdown,
+    GlIcon,
     GlSprintf,
+    ValidatePipelinePopover,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -43,6 +46,15 @@ export default {
         disabled
         data-testid="pipeline-source"
       />
+      <validate-pipeline-popover />
+      <gl-icon
+        id="validate-pipeline-help"
+        name="question-o"
+        class="gl-ml-1 gl-fill-blue-500"
+        category="secondary"
+        variant="confirm"
+        :aria-label="$options.i18n.help"
+      />
     </div>
     <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
       <img :src="validateTabIllustrationPath" />
diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index 8f688e6ba76..05db0afd15d 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -54,6 +54,7 @@ export const SOURCE_EDITOR_DEBOUNCE = 500;
 export const FILE_TREE_DISPLAY_KEY = 'pipeline_editor_file_tree_display';
 export const FILE_TREE_POPOVER_DISMISSED_KEY = 'pipeline_editor_file_tree_popover_dismissed';
 export const FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismissed';
+export const VALIDATE_TAB_BADGE_DISMISSED_KEY = 'pipeline_editor_validate_tab_badge_dismissed';
 
 export const STARTER_TEMPLATE_NAME = 'Getting-Started';
 
@@ -81,6 +82,7 @@ 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;
 
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 4caa253b85e..b056b086d57 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -40,6 +40,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     projectPath,
     projectNamespace,
     runnerHelpPagePath,
+    simulatePipelineHelpPagePath,
     totalBranches,
     validateTabIllustrationPath,
     ymlHelpPagePath,
@@ -130,6 +131,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       projectPath,
       projectNamespace,
       runnerHelpPagePath,
+      simulatePipelineHelpPagePath,
       totalBranches: parseInt(totalBranches, 10),
       validateTabIllustrationPath,
       ymlHelpPagePath,
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
index f26cdd8b017..2d5c01a58b7 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue
@@ -150,6 +150,7 @@ export default {
           :ci-config-data="ciConfigData"
           :ci-file-content="ciFileContent"
           :commit-sha="commitSha"
+          :current-tab="currentTab"
           :is-new-ci-config-file="isNewCiConfigFile"
           :show-drawer="showDrawer"
           v-on="$listeners"