Add latest changes from gitlab-org/gitlab@master

4 files changed, 67 insertions, 110 deletions

diff --git a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
index b652cb329d7..686399843dd 100644
--- a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
+++ b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
@@ -14,17 +14,6 @@ import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import Callout from '~/vue_shared/components/callout.vue';
 
 export default {
-  cancelActionLabel: __('Close'),
-  modalTitle: s__('FeatureFlags|Configure feature flags'),
-  apiUrlLabelText: s__('FeatureFlags|API URL'),
-  apiUrlCopyText: __('Copy URL'),
-  instanceIdLabelText: s__('FeatureFlags|Instance ID'),
-  instanceIdCopyText: __('Copy ID'),
-  instanceIdRegenerateError: __('Unable to generate new instance ID'),
-  instanceIdRegenerateText: __(
-    'Regenerating the instance ID can break integration depending on the client you are using.',
-  ),
-  instanceIdRegenerateActionLabel: __('Regenerate instance ID'),
   components: {
     GlFormGroup,
     GlFormInput,
@@ -42,18 +31,6 @@ export default {
   },
 
   props: {
-    helpClientLibrariesPath: {
-      type: String,
-      required: true,
-    },
-    helpClientExamplePath: {
-      type: String,
-      required: true,
-    },
-    apiUrl: {
-      type: String,
-      required: true,
-    },
     instanceId: {
       type: String,
       required: true,
@@ -76,7 +53,26 @@ export default {
       required: true,
     },
   },
-  inject: ['projectName', 'featureFlagsHelpPagePath'],
+  inject: [
+    'projectName',
+    'featureFlagsHelpPagePath',
+    'unleashApiUrl',
+    'featureFlagsClientExampleHelpPagePath',
+    'featureFlagsClientLibrariesHelpPagePath',
+  ],
+  translations: {
+    cancelActionLabel: __('Close'),
+    modalTitle: s__('FeatureFlags|Configure feature flags'),
+    apiUrlLabelText: s__('FeatureFlags|API URL'),
+    apiUrlCopyText: __('Copy URL'),
+    instanceIdLabelText: s__('FeatureFlags|Instance ID'),
+    instanceIdCopyText: __('Copy ID'),
+    instanceIdRegenerateError: __('Unable to generate new instance ID'),
+    instanceIdRegenerateText: __(
+      'Regenerating the instance ID can break integration depending on the client you are using.',
+    ),
+    instanceIdRegenerateActionLabel: __('Regenerate instance ID'),
+  },
   data() {
     return {
       enteredProjectName: '',
@@ -85,7 +81,7 @@ export default {
   computed: {
     cancelActionProps() {
       return {
-        text: this.$options.cancelActionLabel,
+        text: this.$options.translations.cancelActionLabel,
       };
     },
     canRegenerateInstanceId() {
@@ -94,7 +90,7 @@ export default {
     regenerateInstanceIdActionProps() {
       return this.canUserRotateToken
         ? {
-            text: this.$options.instanceIdRegenerateActionLabel,
+            text: this.$options.translations.instanceIdRegenerateActionLabel,
             attributes: [
               {
                 category: 'secondary',
@@ -129,7 +125,7 @@ export default {
     @primary.prevent="rotateToken"
   >
     <template #modal-title>
-      {{ $options.modalTitle }}
+      {{ $options.translations.modalTitle }}
     </template>
     <p>
       <gl-sprintf
@@ -140,7 +136,11 @@ export default {
         "
       >
         <template #docsLinkAnchored="{ content }">
-          <gl-link :href="helpClientLibrariesPath" target="_blank" data-testid="help-client-link">
+          <gl-link
+            :href="featureFlagsClientLibrariesHelpPagePath"
+            target="_blank"
+            data-testid="help-client-link"
+          >
             {{ content }}
           </gl-link>
         </template>
@@ -161,16 +161,18 @@ export default {
         "
       >
         <template #link="{ content }">
-          <gl-link :href="helpClientExamplePath" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="featureFlagsClientExampleHelpPagePath" target="_blank">{{
+            content
+          }}</gl-link>
         </template>
       </gl-sprintf>
     </callout>
     <div class="form-group">
-      <label for="api_url" class="label-bold">{{ $options.apiUrlLabelText }}</label>
+      <label for="api_url" class="label-bold">{{ $options.translations.apiUrlLabelText }}</label>
       <div class="input-group">
         <input
           id="api_url"
-          :value="apiUrl"
+          :value="unleashApiUrl"
           readonly
           class="form-control"
           type="text"
@@ -178,8 +180,8 @@ export default {
         />
         <span class="input-group-append">
           <modal-copy-button
-            :text="apiUrl"
-            :title="$options.apiUrlCopyText"
+            :text="unleashApiUrl"
+            :title="$options.translations.apiUrlCopyText"
             :modal-id="modalId"
             class="input-group-text"
           />
@@ -187,7 +189,9 @@ export default {
       </div>
     </div>
     <div class="form-group">
-      <label for="instance_id" class="label-bold">{{ $options.instanceIdLabelText }}</label>
+      <label for="instance_id" class="label-bold">{{
+        $options.translations.instanceIdLabelText
+      }}</label>
       <div class="input-group">
         <input
           id="instance_id"
@@ -207,7 +211,7 @@ export default {
         <div class="input-group-append">
           <modal-copy-button
             :text="instanceId"
-            :title="$options.instanceIdCopyText"
+            :title="$options.translations.instanceIdCopyText"
             :modal-id="modalId"
             :disabled="isRotating"
             class="input-group-text"
@@ -220,12 +224,12 @@ export default {
       class="text-danger d-flex align-items-center font-weight-normal mb-2"
     >
       <gl-icon name="warning" class="mr-1" />
-      <span>{{ $options.instanceIdRegenerateError }}</span>
+      <span>{{ $options.translations.instanceIdRegenerateError }}</span>
     </div>
     <callout
       v-if="canUserRotateToken"
       category="danger"
-      :message="$options.instanceIdRegenerateText"
+      :message="$options.translations.instanceIdRegenerateText"
     />
     <p v-if="canUserRotateToken" data-testid="prevent-accident-text">
       <gl-sprintf
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index a86c3fec1ab..eb7046a3d9b 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -34,51 +34,11 @@ export default {
   directives: {
     GlModal: GlModalDirective,
   },
-  props: {
-    csrfToken: {
-      type: String,
-      required: true,
-    },
-    featureFlagsClientLibrariesHelpPagePath: {
-      type: String,
-      required: true,
-    },
-    featureFlagsClientExampleHelpPagePath: {
-      type: String,
-      required: true,
-    },
-    featureFlagsLimit: {
-      type: String,
-      required: true,
-    },
-    featureFlagsLimitExceeded: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    rotateInstanceIdPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    unleashApiUrl: {
-      type: String,
-      required: true,
-    },
-    canUserConfigure: {
-      type: Boolean,
-      required: true,
-    },
-    newFeatureFlagPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    newUserListPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
+  inject: {
+    newUserListPath: { default: '' },
+    newFeatureFlagPath: { default: '' },
+    canUserConfigure: { required: true },
+    featureFlagsLimitExceeded: { required: true },
   },
   data() {
     const scope = getParameterByName('scope') || SCOPES.FEATURE_FLAG_SCOPE;
@@ -234,9 +194,6 @@ export default {
     </gl-alert>
     <configure-feature-flags-modal
       v-if="canUserConfigure"
-      :help-client-libraries-path="featureFlagsClientLibrariesHelpPagePath"
-      :help-client-example-path="featureFlagsClientExampleHelpPagePath"
-      :api-url="unleashApiUrl"
       :instance-id="instanceId"
       :is-rotating="isRotating"
       :has-rotate-error="hasRotateError"
@@ -296,7 +253,6 @@ export default {
         >
           <feature-flags-table
             v-if="shouldRenderFeatureFlags"
-            :csrf-token="csrfToken"
             :feature-flags="featureFlags"
             @toggle-flag="toggleFeatureFlag"
           />
diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
index c4e2be50d34..54d038606f4 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue
@@ -18,15 +18,12 @@ export default {
   },
   mixins: [glFeatureFlagMixin()],
   props: {
-    csrfToken: {
-      type: String,
-      required: true,
-    },
     featureFlags: {
       type: Array,
       required: true,
     },
   },
+  inject: ['csrfToken'],
   data() {
     return {
       deleteFeatureFlagUrl: null,
diff --git a/app/assets/javascripts/feature_flags/index.js b/app/assets/javascripts/feature_flags/index.js
index 784e58125f7..a92805d5d85 100644
--- a/app/assets/javascripts/feature_flags/index.js
+++ b/app/assets/javascripts/feature_flags/index.js
@@ -17,33 +17,33 @@ export default () => {
     projectId,
     unleashApiInstanceId,
     rotateInstanceIdPath,
+    featureFlagsClientLibrariesHelpPagePath,
+    featureFlagsClientExampleHelpPagePath,
+    unleashApiUrl,
+    canUserAdminFeatureFlag,
+    newFeatureFlagPath,
+    newUserListPath,
+    featureFlagsLimitExceeded,
   } = el.dataset;
 
   return new Vue({
     el,
     store: createStore({ endpoint, projectId, unleashApiInstanceId, rotateInstanceIdPath }),
-    provide() {
-      return {
-        projectName,
-        featureFlagsHelpPagePath,
-        errorStateSvgPath,
-      };
+    provide: {
+      projectName,
+      featureFlagsHelpPagePath,
+      errorStateSvgPath,
+      featureFlagsClientLibrariesHelpPagePath,
+      featureFlagsClientExampleHelpPagePath,
+      unleashApiUrl,
+      csrfToken: csrf.token,
+      canUserConfigure: canUserAdminFeatureFlag !== undefined,
+      newFeatureFlagPath,
+      newUserListPath,
+      featureFlagsLimitExceeded,
     },
     render(createElement) {
-      return createElement(FeatureFlagsComponent, {
-        props: {
-          featureFlagsClientLibrariesHelpPagePath:
-            el.dataset.featureFlagsClientLibrariesHelpPagePath,
-          featureFlagsClientExampleHelpPagePath: el.dataset.featureFlagsClientExampleHelpPagePath,
-          unleashApiUrl: el.dataset.unleashApiUrl,
-          featureFlagsLimitExceeded: el.dataset.featureFlagsLimitExceeded,
-          featureFlagsLimit: el.dataset.featureFlagsLimit,
-          csrfToken: csrf.token,
-          canUserConfigure: el.dataset.canUserAdminFeatureFlag,
-          newFeatureFlagPath: el.dataset.newFeatureFlagPath,
-          newUserListPath: el.dataset.newUserListPath,
-        },
-      });
+      return createElement(FeatureFlagsComponent);
     },
   });
 };