Add latest changes from gitlab-org/gitlab@master

2 files changed, 55 insertions, 8 deletions

diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue
index 2ea92ca0d9c..a86c3fec1ab 100644
--- a/app/assets/javascripts/feature_flags/components/feature_flags.vue
+++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue
@@ -1,7 +1,8 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { isEmpty } from 'lodash';
-import { GlButton, GlModalDirective, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlButton, GlModalDirective, GlSprintf, GlTabs } from '@gitlab/ui';
+
 import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
 import FeatureFlagsTab from './feature_flags_tab.vue';
 import FeatureFlagsTable from './feature_flags_table.vue';
@@ -9,9 +10,9 @@ import UserListsTable from './user_lists_table.vue';
 import { s__ } from '~/locale';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import {
+  buildUrlWithCurrentLocation,
   getParameterByName,
   historyPushState,
-  buildUrlWithCurrentLocation,
 } from '~/lib/utils/common_utils';
 
 import ConfigureFeatureFlagsModal from './configure_feature_flags_modal.vue';
@@ -20,13 +21,15 @@ const SCOPES = { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE };
 
 export default {
   components: {
+    ConfigureFeatureFlagsModal,
+    FeatureFlagsTab,
     FeatureFlagsTable,
-    UserListsTable,
-    TablePagination,
+    GlAlert,
     GlButton,
+    GlSprintf,
     GlTabs,
-    FeatureFlagsTab,
-    ConfigureFeatureFlagsModal,
+    TablePagination,
+    UserListsTable,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -44,6 +47,20 @@ export default {
       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,
@@ -69,6 +86,7 @@ export default {
       scope,
       page: getParameterByName('page') || '1',
       isUserListAlertDismissed: false,
+      shouldShowFeatureFlagsLimitWarning: this.featureFlagsLimitExceeded,
       selectedTab: Object.values(SCOPES).indexOf(scope),
     };
   },
@@ -184,11 +202,36 @@ export default {
     dataForScope(scope) {
       return this[scope];
     },
+    onDismissFeatureFlagsLimitWarning() {
+      this.shouldShowFeatureFlagsLimitWarning = false;
+    },
+    onNewFeatureFlagCLick() {
+      if (this.featureFlagsLimitExceeded) {
+        this.shouldShowFeatureFlagsLimitWarning = true;
+      }
+    },
   },
 };
 </script>
 <template>
   <div>
+    <gl-alert
+      v-if="shouldShowFeatureFlagsLimitWarning"
+      variant="warning"
+      @dismiss="onDismissFeatureFlagsLimitWarning"
+    >
+      <gl-sprintf
+        :message="
+          s__(
+            'FeatureFlags|Feature flags limit reached (%{featureFlagsLimit}). Delete one or more feature flags before adding new ones.',
+          )
+        "
+      >
+        <template #featureFlagsLimit>
+          <span>{{ featureFlagsLimit }}</span>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <configure-feature-flags-modal
       v-if="canUserConfigure"
       :help-client-libraries-path="featureFlagsClientLibrariesHelpPagePath"
@@ -228,9 +271,10 @@ export default {
 
         <gl-button
           v-if="hasNewPath"
-          :href="newFeatureFlagPath"
+          :href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
           variant="success"
           data-testid="ff-new-button"
+          @click="onNewFeatureFlagCLick"
         >
           {{ s__('FeatureFlags|New feature flag') }}
         </gl-button>
@@ -306,9 +350,10 @@ export default {
 
             <gl-button
               v-if="hasNewPath"
-              :href="newFeatureFlagPath"
+              :href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
               variant="success"
               data-testid="ff-new-button"
+              @click="onNewFeatureFlagCLick"
             >
               {{ s__('FeatureFlags|New feature flag') }}
             </gl-button>
diff --git a/app/assets/javascripts/feature_flags/index.js b/app/assets/javascripts/feature_flags/index.js
index 48160fe687c..784e58125f7 100644
--- a/app/assets/javascripts/feature_flags/index.js
+++ b/app/assets/javascripts/feature_flags/index.js
@@ -36,6 +36,8 @@ export default () => {
             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,