Add latest changes from gitlab-org/gitlab@master

8 files changed, 114 insertions, 65 deletions

diff --git a/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue b/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue
deleted file mode 100644
index 42f6394ed68..00000000000
--- a/app/assets/javascripts/ml/experiment_tracking/components/incubation_alert.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-import { GlAlert, GlLink } from '@gitlab/ui';
-import { __ } from '~/locale';
-
-export default {
-  i18n: {
-    titleLabel: __('Machine Learning Experiment Tracking is in Incubating Phase'),
-    contentLabel: __(
-      'GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited',
-    ),
-    learnMoreLabel: __('Learn more'),
-    feedbackLabel: __('Feedback'),
-  },
-  name: 'MlopsIncubationAlert',
-  components: { GlAlert, GlLink },
-  data() {
-    return {
-      isAlertDismissed: false,
-    };
-  },
-  computed: {
-    shouldShowAlert() {
-      return !this.isAlertDismissed;
-    },
-  },
-  methods: {
-    dismissAlert() {
-      this.isAlertDismissed = true;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-alert
-    v-if="shouldShowAlert"
-    :title="$options.i18n.titleLabel"
-    variant="warning"
-    :primary-button-text="$options.i18n.feedbackLabel"
-    primary-button-link="https://gitlab.com/gitlab-org/gitlab/-/issues/381660"
-    @dismiss="dismissAlert"
-  >
-    {{ $options.i18n.contentLabel }}
-    <gl-link href="https://about.gitlab.com/handbook/engineering/incubation/" target="_blank">{{
-      $options.i18n.learnMoreLabel
-    }}</gl-link>
-  </gl-alert>
-</template>
diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue
index 0bb2a913dec..a199b8414ba 100644
--- a/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_candidate.vue
@@ -1,7 +1,8 @@
 <script>
 import { GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
-import IncubationAlert from './incubation_alert.vue';
+import { FEATURE_NAME, FEATURE_FEEDBACK_ISSUE } from '~/ml/experiment_tracking/constants';
+import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
 
 export default {
   name: 'MlCandidate',
@@ -39,12 +40,17 @@ export default {
       ];
     },
   },
+  FEATURE_NAME,
+  FEATURE_FEEDBACK_ISSUE,
 };
 </script>
 
 <template>
   <div>
-    <incubation-alert />
+    <incubation-alert
+      :feature-name="$options.FEATURE_NAME"
+      :link-to-feedback-issue="$options.FEATURE_FEEDBACK_ISSUE"
+    />
 
     <h3>
       {{ $options.i18n.titleLabel }}
diff --git a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue
index 4b3f491266d..c09aabb0d40 100644
--- a/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/components/ml_experiment.vue
@@ -7,12 +7,14 @@ import {
   LIST_KEY_CREATED_AT,
   BASE_SORT_FIELDS,
   METRIC_KEY_PREFIX,
+  FEATURE_NAME,
+  FEATURE_FEEDBACK_ISSUE,
 } from '~/ml/experiment_tracking/constants';
 import { s__ } from '~/locale';
 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 './incubation_alert.vue';
+import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
 
 export default {
   name: 'MlExperiment',
@@ -119,12 +121,17 @@ export default {
     noDataContent: s__('MlExperimentTracking|-'),
     filterCandidatesLabel: s__('MlExperimentTracking|Filter candidates'),
   },
+  FEATURE_NAME,
+  FEATURE_FEEDBACK_ISSUE,
 };
 </script>
 
 <template>
   <div>
-    <incubation-alert />
+    <incubation-alert
+      :feature-name="$options.FEATURE_NAME"
+      :link-to-feedback-issue="$options.FEATURE_FEEDBACK_ISSUE"
+    />
 
     <h3>
       {{ $options.i18n.titleLabel }}
diff --git a/app/assets/javascripts/ml/experiment_tracking/constants.js b/app/assets/javascripts/ml/experiment_tracking/constants.js
index c9bdc78b69a..4092180b988 100644
--- a/app/assets/javascripts/ml/experiment_tracking/constants.js
+++ b/app/assets/javascripts/ml/experiment_tracking/constants.js
@@ -1,4 +1,4 @@
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const METRIC_KEY_PREFIX = 'metric.';
 
@@ -14,3 +14,7 @@ export const BASE_SORT_FIELDS = Object.freeze([
     label: __('Created at'),
   },
 ]);
+
+export const FEATURE_NAME = s__('MlExperimentTracking|Machine learning experiment tracking');
+
+export const FEATURE_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitlab/-/issues/381660';
diff --git a/app/assets/javascripts/vue_shared/components/incubation/incubation_alert.vue b/app/assets/javascripts/vue_shared/components/incubation/incubation_alert.vue
new file mode 100644
index 00000000000..b704cec2475
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/incubation/incubation_alert.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlAlert, GlLink } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  name: 'IncubationAlert',
+  components: { GlAlert, GlLink },
+  props: {
+    featureName: {
+      type: String,
+      required: true,
+    },
+    linkToFeedbackIssue: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isAlertDismissed: false,
+    };
+  },
+  computed: {
+    shouldShowAlert() {
+      return !this.isAlertDismissed;
+    },
+    titleLabel() {
+      return sprintf(this.$options.i18n.titleLabel, { featureName: this.featureName });
+    },
+  },
+  methods: {
+    dismissAlert() {
+      this.isAlertDismissed = true;
+    },
+  },
+  i18n: {
+    titleLabel: s__('Incubation|%{featureName} is in incubating phase'),
+    contentLabel: s__(
+      'Incubation|GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited.',
+    ),
+    learnMoreLabel: s__('Incubation|Learn more about incubating features'),
+    feedbackLabel: s__('Incubation|Give feedback on this feature'),
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    v-if="shouldShowAlert"
+    :title="titleLabel"
+    variant="warning"
+    :primary-button-text="$options.i18n.feedbackLabel"
+    :primary-button-link="linkToFeedbackIssue"
+    @dismiss="dismissAlert"
+  >
+    {{ $options.i18n.contentLabel }}
+    <gl-link href="https://about.gitlab.com/handbook/engineering/incubation/" target="_blank">{{
+      $options.i18n.learnMoreLabel
+    }}</gl-link>
+  </gl-alert>
+</template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 79fb72bbbb0..63d1b789f64 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -17432,9 +17432,6 @@ msgstr ""
 msgid "February"
 msgstr ""
 
-msgid "Feedback"
-msgstr ""
-
 msgid "Feedback and Updates"
 msgstr ""
 
@@ -22317,6 +22314,18 @@ msgstr ""
 msgid "Increase"
 msgstr ""
 
+msgid "Incubation|%{featureName} is in incubating phase"
+msgstr ""
+
+msgid "Incubation|GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited."
+msgstr ""
+
+msgid "Incubation|Give feedback on this feature"
+msgstr ""
+
+msgid "Incubation|Learn more about incubating features"
+msgstr ""
+
 msgid "Indent line"
 msgstr ""
 
@@ -27238,6 +27247,9 @@ msgstr ""
 msgid "MlExperimentTracking|Filter candidates"
 msgstr ""
 
+msgid "MlExperimentTracking|Machine learning experiment tracking"
+msgstr ""
+
 msgid "MlExperimentTracking|Name"
 msgstr ""
 
diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
index 0c3d3e78038..7d7eee2bc2c 100644
--- a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
+++ b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
@@ -24,14 +24,14 @@ exports[`MlCandidate renders correctly 1`] = `
       <h2
         class="gl-alert-title"
       >
-        Machine Learning Experiment Tracking is in Incubating Phase
+        Machine learning experiment tracking is in incubating phase
       </h2>
        
       <div
         class="gl-alert-body"
       >
         
-  GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited
+  GitLab incubates features to explore new use cases. These features are updated regularly, and support is limited.
   
         <a
           class="gl-link"
@@ -39,7 +39,7 @@ exports[`MlCandidate renders correctly 1`] = `
           rel="noopener noreferrer"
           target="_blank"
         >
-          Learn more
+          Learn more about incubating features
         </a>
       </div>
        
@@ -58,7 +58,7 @@ exports[`MlCandidate renders correctly 1`] = `
             class="gl-button-text"
           >
             
-          Feedback
+          Give feedback on this feature
         
           </span>
         </a>
diff --git a/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js b/spec/frontend/vue_shared/components/incubation/incubation_alert_spec.js
index 7dca360c7ee..1783538beb3 100644
--- a/spec/frontend/ml/experiment_tracking/components/incubation_alert_spec.js
+++ b/spec/frontend/vue_shared/components/incubation/incubation_alert_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { GlAlert, GlButton } from '@gitlab/ui';
-import IncubationAlert from '~/ml/experiment_tracking/components/incubation_alert.vue';
+import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
 
 describe('IncubationAlert', () => {
   let wrapper;
@@ -10,13 +10,20 @@ describe('IncubationAlert', () => {
   const findButton = () => wrapper.findComponent(GlButton);
 
   beforeEach(() => {
-    wrapper = mount(IncubationAlert);
+    wrapper = mount(IncubationAlert, {
+      propsData: {
+        featureName: 'some feature',
+        linkToFeedbackIssue: 'some_link',
+      },
+    });
+  });
+
+  it('displays the feature name in the title', () => {
+    expect(wrapper.html()).toContain('some feature is in incubating phase');
   });
 
   it('displays link to issue', () => {
-    expect(findButton().attributes().href).toBe(
-      'https://gitlab.com/gitlab-org/gitlab/-/issues/381660',
-    );
+    expect(findButton().attributes().href).toBe('some_link');
   });
 
   it('is removed if dismissed', async () => {