Add latest changes from gitlab-org/gitlab@master

3 files changed, 124 insertions, 0 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/components/delete_button.vue b/app/assets/javascripts/ml/experiment_tracking/components/delete_button.vue
new file mode 100644
index 00000000000..4c0f99cf62c
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/components/delete_button.vue
@@ -0,0 +1,98 @@
+<script>
+import {
+  GlModal,
+  GlDropdown,
+  GlTooltipDirective,
+  GlDropdownItem,
+  GlModalDirective,
+} from '@gitlab/ui';
+import { __ } from '~/locale';
+import csrf from '~/lib/utils/csrf';
+
+export default {
+  components: {
+    GlModal,
+    GlDropdown,
+    GlDropdownItem,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlModalDirective,
+  },
+  props: {
+    deletePath: {
+      type: String,
+      required: true,
+    },
+    deleteConfirmationText: {
+      type: String,
+      required: true,
+    },
+    actionPrimaryText: {
+      type: String,
+      required: true,
+    },
+    modalTitle: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isDeleteModalVisible: false,
+      modal: {
+        id: 'ml-experiments-delete-modal',
+        deleteConfirmation: this.deleteConfirmationText,
+        actionPrimary: {
+          text: this.actionPrimaryText,
+          attributes: { variant: 'danger' },
+        },
+        actionCancel: {
+          text: __('Cancel'),
+        },
+      },
+    };
+  },
+  methods: {
+    confirmDelete() {
+      this.$refs.deleteForm.submit();
+    },
+  },
+  csrf,
+};
+</script>
+
+<template>
+  <gl-dropdown
+    right
+    category="tertiary"
+    :aria-label="__('More actions')"
+    icon="ellipsis_v"
+    no-caret
+  >
+    <gl-dropdown-item
+      v-gl-modal-directive="modal.id"
+      :aria-label="actionPrimaryText"
+      variant="danger"
+    >
+      {{ actionPrimaryText }}
+
+      <form ref="deleteForm" method="post" :action="deletePath">
+        <input type="hidden" name="_method" value="delete" />
+        <input type="hidden" name="authenticity_token" :value="$options.csrf.token" />
+      </form>
+
+      <gl-modal
+        :modal-id="modal.id"
+        :title="modalTitle"
+        :action-primary="modal.actionPrimary"
+        :action-cancel="modal.actionCancel"
+        @primary="confirmDelete"
+      >
+        <p>
+          {{ deleteConfirmationText }}
+        </p>
+      </gl-modal>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</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 ca0a42fda10..40b9e0723e9 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,6 +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 {
   LIST_KEY_CREATED_AT,
   BASE_SORT_FIELDS,
@@ -30,8 +31,13 @@ export default {
     IncubationAlert,
     RegistrySearch,
     KeysetPagination,
+    DeleteButton,
   },
   props: {
+    experiment: {
+      type: Object,
+      required: true,
+    },
     candidates: {
       type: Array,
       required: true,
@@ -157,6 +163,21 @@ 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>
+
     <registry-search
       :filters="filters"
       :sorting="sorting"
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js
index 63b0d902b72..5c34a66921d 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/translations.js
@@ -14,3 +14,8 @@ export const EMPTY_STATE_DESCRIPTION_LABEL = s__(
   'MlExperimentTracking|No candidates logged for the query. Create new candidates using the MLflow client.',
 );
 export const EMPTY_STATE_TITLE_LABEL = s__('MlExperimentTracking|No candidates');
+export const DELETE_EXPERIMENT_CONFIRMATION_MESSAGE = s__(
+  'MlExperimentTracking|Deleting this experiment will also delete its candidates and their associated metadata.',
+);
+export const DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL = s__('MlExperimentTracking|Delete experiment');
+export const DELETE_EXPERIMENT_MODAL_TITLE = s__('MLExperimentTracking|Delete experiment?');