Add latest changes from gitlab-org/gitlab@master

3 files changed, 51 insertions, 32 deletions

diff --git a/spec/frontend/ml/experiment_tracking/components/model_experiments_header_spec.js b/spec/frontend/ml/experiment_tracking/components/model_experiments_header_spec.js
new file mode 100644
index 00000000000..0794d4747b3
--- /dev/null
+++ b/spec/frontend/ml/experiment_tracking/components/model_experiments_header_spec.js
@@ -0,0 +1,35 @@
+import { GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
+
+describe('ml/experiment_tracking/components/model_experiments_header.vue', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(ModelExperimentsHeader, {
+      propsData: { pageTitle: 'Some Title' },
+      slots: {
+        default: 'Slot content',
+      },
+    });
+  };
+
+  beforeEach(createWrapper);
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findTitle = () => wrapper.find('h3');
+
+  it('renders title', () => {
+    expect(findTitle().text()).toBe('Some Title');
+  });
+
+  it('link points to documentation', () => {
+    expect(findBadge().attributes().href).toBe(
+      '/help/user/project/ml/experiment_tracking/index.md',
+    );
+  });
+
+  it('renders slots', () => {
+    expect(wrapper.html()).toContain('Slot content');
+  });
+});
diff --git a/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap b/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap
index e1ea3a351ec..0d2615e3b80 100644
--- a/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap
+++ b/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap
@@ -2,33 +2,16 @@
 
 exports[`MlCandidatesShow renders correctly 1`] = `
 <div>
-  <incubation-alert-stub
-    featurename="Machine learning experiment tracking"
-    linktofeedbackissue="https://gitlab.com/gitlab-org/gitlab/-/issues/381660"
-  />
-   
-  <div
-    class="detail-page-header gl-flex-wrap"
+  <model-experiments-header-stub
+    pagetitle="Model candidate details"
   >
-    <div
-      class="detail-page-header-body"
-    >
-      <h1
-        class="page-title gl-font-size-h-display flex-fill"
-      >
-        
-        Model candidate details
-      
-      </h1>
-       
-      <delete-button-stub
-        actionprimarytext="Delete candidate"
-        deleteconfirmationtext="Deleting this candidate will delete the associated parameters, metrics, and metadata."
-        deletepath="path_to_candidate"
-        modaltitle="Delete candidate?"
-      />
-    </div>
-  </div>
+    <delete-button-stub
+      actionprimarytext="Delete candidate"
+      deleteconfirmationtext="Deleting this candidate will delete the associated parameters, metrics, and metadata."
+      deletepath="path_to_candidate"
+      modaltitle="Delete candidate?"
+    />
+  </model-experiments-header-stub>
    
   <table
     class="candidate-details gl-w-full"
diff --git a/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js b/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js
index b2a16b7ae78..d7044cbcd9b 100644
--- a/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js
@@ -1,7 +1,8 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import MlCandidatesShow from '~/ml/experiment_tracking/routes/candidates/show';
+import { TITLE_LABEL } from '~/ml/experiment_tracking/routes/candidates/show/translations';
 import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
-import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
 
 describe('MlCandidatesShow', () => {
   let wrapper;
@@ -36,12 +37,8 @@ describe('MlCandidatesShow', () => {
 
   beforeEach(createWrapper);
 
-  const findAlert = () => wrapper.findComponent(IncubationAlert);
   const findDeleteButton = () => wrapper.findComponent(DeleteButton);
-
-  it('shows incubation warning', () => {
-    expect(findAlert().exists()).toBe(true);
-  });
+  const findHeader = () => wrapper.findComponent(ModelExperimentsHeader);
 
   it('shows delete button', () => {
     expect(findDeleteButton().exists()).toBe(true);
@@ -51,6 +48,10 @@ describe('MlCandidatesShow', () => {
     expect(findDeleteButton().props('deletePath')).toBe('path_to_candidate');
   });
 
+  it('passes the right title', () => {
+    expect(findHeader().props('pageTitle')).toBe(TITLE_LABEL);
+  });
+
   it('renders correctly', () => {
     expect(wrapper.element).toMatchSnapshot();
   });