Merge branch...

Merge branch '409790-use-experiment-tag-remove-mentions-to-incubation-from-the-model-experiments-banner-3' into 'master'

Remove incubation banner from the ml_experiments_show

See merge request !119674



Merged-by: Himanshu Kapoor <info@fleon.org>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Himanshu Kapoor <info@fleon.org>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: Eduardo Bonet <ebonet@gitlab.com>
Reviewed-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Co-authored-by: Eduardo Bonet <ebonet@gitlab.com>

app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue

-<script>
-import { GlButton } from '@gitlab/ui';
-import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
-import { __ } from '~/locale';
-import { visitUrl } from '~/lib/utils/url_utility';
-
-export default {
-  name: 'ExperimentHeader',
-  components: {
-    DeleteButton,
-    GlButton,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    deleteInfo: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    downloadCsv() {
-      const currentPath = window.location.pathname;
-      const currentSearch = window.location.search;
-
-      visitUrl(`${currentPath}.csv${currentSearch}`);
-    },
-  },
-  i18n: {
-    downloadAsCsvLabel: __('Download as CSV'),
-  },
-};
-</script>
-
-<template>
-  <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">{{ title }}</h1>
-
-      <gl-button @click="downloadCsv">{{ $options.i18n.downloadAsCsvLabel }}</gl-button>
-
-      <delete-button v-bind="deleteInfo" />
-    </div>
-  </div>
-</template>

app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue

 <script>
-import { GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
+import { GlTableLite, GlLink, GlEmptyState, GlButton } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -7,8 +7,9 @@ import { FEATURE_NAME, FEATURE_FEEDBACK_ISSUE } from '~/ml/experiment_tracking/c
 import { queryToObject, setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import KeysetPagination from '~/vue_shared/components/incubation/pagination.vue';
-import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
-import ExperimentHeader from './components/experiment_header.vue';
+import ModelExperimentsHeader from '~/ml/experiment_tracking/components/model_experiments_header.vue';
+import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+
 import {
   LIST_KEY_CREATED_AT,
   BASE_SORT_FIELDS,
@@ -23,11 +24,12 @@ export default {
     GlTableLite,
     GlLink,
     GlEmptyState,
+    GlButton,
     TimeAgo,
-    IncubationAlert,
     RegistrySearch,
     KeysetPagination,
-    ExperimentHeader,
+    ModelExperimentsHeader,
+    DeleteButton,
   },
   props: {
     experiment: {
@@ -153,6 +155,12 @@ export default {
       this.updateSorting(newValue);
       this.submitFilters();
     },
+    downloadCsv() {
+      const currentPath = window.location.pathname;
+      const currentSearch = window.location.search;
+
+      visitUrl(`${currentPath}.csv${currentSearch}`);
+    },
   },
   i18n: translations,
   constants: {
@@ -165,12 +173,12 @@ export default {
 
 <template>
   <div>
-    <incubation-alert
-      :feature-name="$options.constants.FEATURE_NAME"
-      :link-to-feedback-issue="$options.constants.FEATURE_FEEDBACK_ISSUE"
-    />
-
-    <experiment-header :title="experiment.name" :delete-info="deleteButtonInfo" />
+    <model-experiments-header :page-title="experiment.name">
+      <gl-button class="gl-mr-3" @click="downloadCsv">{{
+        $options.i18n.DOWNLOAD_AS_CSV_LABEL
+      }}</gl-button>
+      <delete-button v-bind="deleteButtonInfo" />
+    </model-experiments-header>
 
     <registry-search
       :filters="filters"

app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js

@@ -19,3 +19,4 @@ export const DELETE_EXPERIMENT_CONFIRMATION_MESSAGE = s__(
 );
 export const DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL = s__('MlExperimentTracking|Delete experiment');
 export const DELETE_EXPERIMENT_MODAL_TITLE = s__('MLExperimentTracking|Delete experiment?');
+export const DOWNLOAD_AS_CSV_LABEL = s__('MlExperimentTracking|Download as CSV');

locale/gitlab.pot

@@ -15930,9 +15930,6 @@ msgstr ""
 msgid "Download artifacts"
 msgstr ""
-msgid "Download as CSV"
-msgstr ""
-
 msgid "Download codes"
 msgstr ""
@@ -28750,6 +28747,9 @@ msgstr ""
 msgid "MlExperimentTracking|Details"
 msgstr ""
+msgid "MlExperimentTracking|Download as CSV"
+msgstr ""
+
 msgid "MlExperimentTracking|Experiment"
 msgstr ""

spec/frontend/ml/experiment_tracking/routes/experiments/show/components/experiment_header_spec.js

-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');
-    });
-  });
-});

spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js

-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();