Add latest changes from gitlab-org/gitlab@master

2 files changed, 45 insertions, 24 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/components/model_experiments_header.vue b/app/assets/javascripts/ml/experiment_tracking/components/model_experiments_header.vue
new file mode 100644
index 00000000000..02869bacb66
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/components/model_experiments_header.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlBadge } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  components: {
+    GlBadge,
+  },
+  props: {
+    pageTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    experimentBadgeLabel: __('Experiment'),
+  },
+  experimentDocHref: helpPagePath('user/project/ml/experiment_tracking/index.md'),
+};
+</script>
+
+<template>
+  <div class="detail-page-header gl-flex-wrap">
+    <div class="detail-page-header-body">
+      <div class="page-title gl-flex-grow-1 gl-display-flex gl-align-items-center">
+        <h3 class="gl-font-size-h-display gl-my-0">{{ pageTitle }}</h3>
+        <gl-badge class="gl-mx-4" variant="info" size="lg" :href="$options.experimentDocHref">
+          {{ $options.i18n.experimentBadgeLabel }}
+        </gl-badge>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
index b671bdc47a6..cef5da726f3 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/ml_candidates_show.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlLink } from '@gitlab/ui';
-import { FEATURE_NAME, FEATURE_FEEDBACK_ISSUE } from '~/ml/experiment_tracking/constants';
-import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
 import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
 import {
   TITLE_LABEL,
@@ -22,7 +21,7 @@ import {
 export default {
   name: 'MlCandidatesShow',
   components: {
-    IncubationAlert,
+    ModelExperimentsHeader,
     DeleteButton,
     GlLink,
   },
@@ -65,32 +64,19 @@ export default {
       ];
     },
   },
-  FEATURE_NAME,
-  FEATURE_FEEDBACK_ISSUE,
 };
 </script>
 
 <template>
   <div>
-    <incubation-alert
-      :feature-name="$options.FEATURE_NAME"
-      :link-to-feedback-issue="$options.FEATURE_FEEDBACK_ISSUE"
-    />
-
-    <div class="detail-page-header gl-flex-wrap">
-      <div class="detail-page-header-body">
-        <h1 class="page-title gl-font-size-h-display flex-fill">
-          {{ $options.i18n.TITLE_LABEL }}
-        </h1>
-
-        <delete-button
-          :delete-path="candidate.info.path"
-          :delete-confirmation-text="$options.i18n.DELETE_CANDIDATE_CONFIRMATION_MESSAGE"
-          :action-primary-text="$options.i18n.DELETE_CANDIDATE_PRIMARY_ACTION_LABEL"
-          :modal-title="$options.i18n.DELETE_CANDIDATE_MODAL_TITLE"
-        />
-      </div>
-    </div>
+    <model-experiments-header :page-title="$options.i18n.TITLE_LABEL">
+      <delete-button
+        :delete-path="candidate.info.path"
+        :delete-confirmation-text="$options.i18n.DELETE_CANDIDATE_CONFIRMATION_MESSAGE"
+        :action-primary-text="$options.i18n.DELETE_CANDIDATE_PRIMARY_ACTION_LABEL"
+        :modal-title="$options.i18n.DELETE_CANDIDATE_MODAL_TITLE"
+      />
+    </model-experiments-header>
 
     <table class="candidate-details gl-w-full">
       <tbody>