Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

4 files changed, 16 insertions, 6 deletions

diff --git a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
index 05d557db942..2bdc95e798c 100644
--- a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
+++ b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlAlert, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { sprintf, s__ } from '~/locale';
+import { sprintf, __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import FeatureFlagForm from './form.vue';
 
@@ -10,6 +10,7 @@ export default {
     GlAlert,
     GlLoadingIcon,
     GlToggle,
+    FeatureFlagActions: () => import('ee_component/feature_flags/components/actions.vue'),
     FeatureFlagForm,
   },
   mixins: [glFeatureFlagMixin()],
@@ -28,7 +29,7 @@ export default {
     title() {
       return this.iid
         ? `^${this.iid} ${this.name}`
-        : sprintf(s__('Edit %{name}'), { name: this.name });
+        : sprintf(this.$options.i18n.editTitle, { name: this.name });
     },
   },
   created() {
@@ -37,6 +38,11 @@ export default {
   methods: {
     ...mapActions(['updateFeatureFlag', 'fetchFeatureFlag', 'toggleActive']),
   },
+  i18n: {
+    editTitle: __('Edit %{name}'),
+    toggleLabel: __('Feature flag status'),
+    submit: __('Save changes'),
+  },
 };
 </script>
 <template>
@@ -51,11 +57,13 @@ export default {
           data-track-action="click_button"
           data-track-label="feature_flag_toggle"
           class="gl-mr-4"
-          :label="__('Feature flag status')"
+          :label="$options.i18n.toggleLabel"
           label-position="hidden"
           @change="toggleActive"
         />
         <h3 class="page-title gl-m-0">{{ title }}</h3>
+
+        <feature-flag-actions class="gl-ml-auto" />
       </div>
 
       <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false">
@@ -67,7 +75,7 @@ export default {
         :description="description"
         :strategies="strategies"
         :cancel-path="path"
-        :submit-text="__('Save changes')"
+        :submit-text="$options.i18n.submit"
         :active="active"
         @handleSubmit="(data) => updateFeatureFlag(data)"
       />
diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index f7ad2c1f106..29e82289107 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -95,7 +95,7 @@ export default {
       return this.formStrategies.filter((s) => !s.shouldBeDestroyed);
     },
     showRelatedIssues() {
-      return this.featureFlagIssuesEndpoint.length > 0;
+      return Boolean(this.featureFlagIssuesEndpoint);
     },
   },
   methods: {
diff --git a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
index 858c30649bb..1a470d74b59 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/flexible_rollout.vue
@@ -17,7 +17,7 @@ export default {
     },
   },
   i18n: {
-    percentageDescription: __('Enter an integer number number between 0 and 100'),
+    percentageDescription: __('Enter an integer number between 0 and 100'),
     percentageInvalid: __('Percent rollout must be an integer number between 0 and 100'),
     percentageLabel: __('Percentage'),
     stickinessDescription: __('Consistency guarantee method'),
diff --git a/app/assets/javascripts/feature_flags/edit.js b/app/assets/javascripts/feature_flags/edit.js
index 98dee7c7e97..55dad87ea5b 100644
--- a/app/assets/javascripts/feature_flags/edit.js
+++ b/app/assets/javascripts/feature_flags/edit.js
@@ -15,6 +15,7 @@ export default () => {
     environmentsEndpoint,
     projectId,
     featureFlagIssuesEndpoint,
+    searchPath,
   } = el.dataset;
 
   return new Vue({
@@ -26,6 +27,7 @@ export default () => {
       environmentsEndpoint,
       projectId,
       featureFlagIssuesEndpoint,
+      searchPath,
     },
     render(createElement) {
       return createElement(EditFeatureFlag);