Add latest changes from gitlab-org/gitlab@master

3 files changed, 58 insertions, 75 deletions

diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js
index 017db647ac6..0c83be1822e 100644
--- a/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js
@@ -1,8 +1,9 @@
 import { GlEmptyState, GlLink, GlTableLite } from '@gitlab/ui';
 import MlExperimentsIndexApp from '~/ml/experiment_tracking/routes/experiments/index';
-import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { TITLE_LABEL } from '~/ml/experiment_tracking/routes/experiments/index/translations';
 import {
   startCursor,
   firstExperiment,
@@ -14,11 +15,10 @@ import {
 let wrapper;
 const createWrapper = (defaultExperiments = [], pageInfo = defaultPageInfo) => {
   wrapper = mountExtended(MlExperimentsIndexApp, {
-    propsData: { experiments: defaultExperiments, pageInfo },
+    propsData: { experiments: defaultExperiments, pageInfo, emptyStateSvgPath: 'path' },
   });
 };
 
-const findAlert = () => wrapper.findComponent(IncubationAlert);
 const findPagination = () => wrapper.findComponent(Pagination);
 const findEmptyState = () => wrapper.findComponent(GlEmptyState);
 const findTable = () => wrapper.findComponent(GlTableLite);
@@ -28,6 +28,7 @@ const findNthTableRow = (idx) => findTableRows().at(idx);
 const findColumnInRow = (row, col) => findNthTableRow(row).findAll('td').at(col);
 const hrefInRowAndColumn = (row, col) =>
   findColumnInRow(row, col).findComponent(GlLink).attributes().href;
+const findTitleHeader = () => wrapper.findComponent(ModelExperimentsHeader);
 
 describe('MlExperimentsIndex', () => {
   describe('empty state', () => {
@@ -44,12 +45,18 @@ describe('MlExperimentsIndex', () => {
     it('does not show pagination', () => {
       expect(findPagination().exists()).toBe(false);
     });
+
+    it('does not render header', () => {
+      expect(findTitleHeader().exists()).toBe(false);
+    });
   });
 
-  it('displays IncubationAlert', () => {
-    createWrapper(experiments);
+  describe('Title header', () => {
+    beforeEach(() => createWrapper(experiments));
 
-    expect(findAlert().exists()).toBe(true);
+    it('has the right title', () => {
+      expect(findTitleHeader().props('pageTitle')).toBe(TITLE_LABEL);
+    });
   });
 
   describe('experiments table', () => {
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/show/components/experiment_header_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/show/components/experiment_header_spec.js
deleted file mode 100644
index b56755043fb..00000000000
--- a/spec/frontend/ml/experiment_tracking/routes/experiments/show/components/experiment_header_spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { GlButton } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
-import ExperimentHeader from '~/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue';
-import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
-import setWindowLocation from 'helpers/set_window_location_helper';
-import * as urlHelpers from '~/lib/utils/url_utility';
-import { MOCK_EXPERIMENT } from '../mock_data';
-
-const DELETE_INFO = {
-  deletePath: '/delete',
-  deleteConfirmationText: 'MODAL_BODY',
-  actionPrimaryText: 'Delete!',
-  modalTitle: 'MODAL_TITLE',
-};
-
-describe('~/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue', () => {
-  let wrapper;
-
-  const createWrapper = () => {
-    wrapper = mountExtended(ExperimentHeader, {
-      propsData: { title: MOCK_EXPERIMENT.name, deleteInfo: DELETE_INFO },
-    });
-  };
-
-  const findDeleteButton = () => wrapper.findComponent(DeleteButton);
-  const findButton = () => wrapper.findComponent(GlButton);
-
-  beforeEach(createWrapper);
-
-  describe('Delete', () => {
-    it('shows delete button', () => {
-      expect(findDeleteButton().exists()).toBe(true);
-    });
-
-    it('passes the right props', () => {
-      expect(findDeleteButton().props()).toMatchObject(DELETE_INFO);
-    });
-  });
-
-  describe('CSV download', () => {
-    it('shows download CSV button', () => {
-      expect(findDeleteButton().exists()).toBe(true);
-    });
-
-    it('calls the action to download the CSV', () => {
-      setWindowLocation('https://blah.com/something/1?name=query&orderBy=name');
-      jest.spyOn(urlHelpers, 'visitUrl').mockImplementation(() => {});
-
-      findButton().vm.$emit('click');
-
-      expect(urlHelpers.visitUrl).toHaveBeenCalledTimes(1);
-      expect(urlHelpers.visitUrl).toHaveBeenCalledWith('/something/1.csv?name=query&orderBy=name');
-    });
-  });
-});
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
index 38b3d96ed11..5961babc5f8 100644
--- a/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
@@ -1,7 +1,8 @@
-import { GlAlert, GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { GlTableLite, GlLink, GlEmptyState, GlButton } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import MlExperimentsShow from '~/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue';
-import ExperimentHeader from '~/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue';
+import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
@@ -17,9 +18,10 @@ describe('MlExperimentsShow', () => {
     paramNames = [],
     pageInfo = MOCK_PAGE_INFO,
     experiment = MOCK_EXPERIMENT,
+    emptyStateSvgPath = 'path',
   ) => {
-    wrapper = mountExtended(MlExperimentsShow, {
-      propsData: { experiment, candidates, metricNames, paramNames, pageInfo },
+    wrapper = mount(MlExperimentsShow, {
+      propsData: { experiment, candidates, metricNames, paramNames, pageInfo, emptyStateSvgPath },
     });
   };
 
@@ -27,7 +29,6 @@ describe('MlExperimentsShow', () => {
     createWrapper(MOCK_CANDIDATES, ['rmse', 'auc', 'mae'], ['l1_ratio'], pageInfo);
   };
 
-  const findAlert = () => wrapper.findComponent(GlAlert);
   const findPagination = () => wrapper.findComponent(Pagination);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findRegistrySearch = () => wrapper.findComponent(RegistrySearch);
@@ -36,17 +37,13 @@ describe('MlExperimentsShow', () => {
   const findTableRows = () => findTable().findAll('tbody > tr');
   const findNthTableRow = (idx) => findTableRows().at(idx);
   const findColumnInRow = (row, col) => findNthTableRow(row).findAll('td').at(col);
-  const findExperimentHeader = () => wrapper.findComponent(ExperimentHeader);
+  const findExperimentHeader = () => wrapper.findComponent(ModelExperimentsHeader);
+  const findDeleteButton = () => wrapper.findComponent(DeleteButton);
+  const findDownloadButton = () => findExperimentHeader().findComponent(GlButton);
 
   const hrefInRowAndColumn = (row, col) =>
     findColumnInRow(row, col).findComponent(GlLink).attributes().href;
 
-  it('shows incubation warning', () => {
-    createWrapper();
-
-    expect(findAlert().exists()).toBe(true);
-  });
-
   describe('default inputs', () => {
     beforeEach(() => {
       createWrapper();
@@ -65,7 +62,7 @@ describe('MlExperimentsShow', () => {
     });
 
     it('passes the correct title to experiment header', () => {
-      expect(findExperimentHeader().props('title')).toBe(MOCK_EXPERIMENT.name);
+      expect(findExperimentHeader().props('pageTitle')).toBe(MOCK_EXPERIMENT.name);
     });
 
     it('does not show table', () => {
@@ -84,6 +81,40 @@ describe('MlExperimentsShow', () => {
     });
   });
 
+  describe('Delete', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows delete button', () => {
+      expect(findDeleteButton().exists()).toBe(true);
+    });
+
+    it('passes the right props', () => {
+      expect(findDeleteButton().props('deletePath')).toBe(MOCK_EXPERIMENT.path);
+    });
+  });
+
+  describe('CSV download', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows download CSV button', () => {
+      expect(findDownloadButton().exists()).toBe(true);
+    });
+
+    it('calls the action to download the CSV', () => {
+      setWindowLocation('https://blah.com/something/1?name=query&orderBy=name');
+      jest.spyOn(urlHelpers, 'visitUrl').mockImplementation(() => {});
+
+      findDownloadButton().vm.$emit('click');
+
+      expect(urlHelpers.visitUrl).toHaveBeenCalledTimes(1);
+      expect(urlHelpers.visitUrl).toHaveBeenCalledWith('/something/1.csv?name=query&orderBy=name');
+    });
+  });
+
   describe('Search', () => {
     it('shows search box', () => {
       createWrapper();