Add latest changes from gitlab-org/gitlab@master

2 files changed, 58 insertions, 16 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
new file mode 100644
index 00000000000..5b840a5ed43
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
@@ -0,0 +1,47 @@
+<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-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>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
index 40b9e0723e9..acb5fc7cad2 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
@@ -12,7 +12,7 @@ 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 DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+import ExperimentHeader from './components/experiment_header.vue';
 import {
   LIST_KEY_CREATED_AT,
   BASE_SORT_FIELDS,
@@ -31,7 +31,7 @@ export default {
     IncubationAlert,
     RegistrySearch,
     KeysetPagination,
-    DeleteButton,
+    ExperimentHeader,
   },
   props: {
     experiment: {
@@ -130,6 +130,14 @@ export default {
     hasItems() {
       return this.candidates.length > 0;
     },
+    deleteButtonInfo() {
+      return {
+        deletePath: this.experiment.path,
+        deleteConfirmationText: translations.DELETE_EXPERIMENT_CONFIRMATION_MESSAGE,
+        actionPrimaryText: translations.DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL,
+        modalTitle: translations.DELETE_EXPERIMENT_MODAL_TITLE,
+      };
+    },
   },
   methods: {
     submitFilters() {
@@ -163,20 +171,7 @@ export default {
       :link-to-feedback-issue="$options.constants.FEATURE_FEEDBACK_ISSUE"
     />
 
-    <div class="detail-page-header gl-flex-wrap-wrap">
-      <div class="detail-page-header-body">
-        <h1 class="page-title gl-font-size-h-display flex-fill">
-          {{ experiment.name }}
-        </h1>
-
-        <delete-button
-          :delete-path="experiment.path"
-          :delete-confirmation-text="$options.i18n.DELETE_EXPERIMENT_CONFIRMATION_MESSAGE"
-          :action-primary-text="$options.i18n.DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL"
-          :modal-title="$options.i18n.DELETE_EXPERIMENT_MODAL_TITLE"
-        />
-      </div>
-    </div>
+    <experiment-header :title="experiment.name" :delete-info="deleteButtonInfo" />
 
     <registry-search
       :filters="filters"