Merge branch 'alert-users-of-legacy-flags' into 'master'

Alert users of legacy flags

See merge request gitlab-org/gitlab!30543

ee/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue

 <script>
-import { GlLoadingIcon, GlToggle } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { LEGACY_FLAG } from '../constants';
 import store from '../store/index';
 import FeatureFlagForm from './form.vue';
 
@@ -11,6 +12,7 @@ const { mapState, mapActions } = createNamespacedHelpers('edit');
 export default {
   store,
   components: {
+    GlAlert,
     GlLoadingIcon,
     GlToggle,
     FeatureFlagForm,
@@ -30,6 +32,11 @@ export default {
       required: true,
     },
   },
+  translations: {
+    legacyFlagAlert: s__(
+      'FeatureFlags|GitLab is moving to a new way of managing feature flags, and in 13.4, this feature flag will become read-only. Please create a new feature flag.',
+    ),
+  },
   computed: {
     ...mapState([
       'error',
@@ -48,6 +55,9 @@ export default {
         ? `^${this.iid} ${this.name}`
         : sprintf(s__('Edit %{name}'), { name: this.name });
     },
+    deprecated() {
+      return this.glFeatures.featureFlagsNewVersion && this.version === LEGACY_FLAG;
+    },
   },
   created() {
     this.setPath(this.path);
@@ -69,6 +79,9 @@ export default {
     <gl-loading-icon v-if="isLoading" />
 
     <template v-else-if="!isLoading && !hasError">
+      <gl-alert v-if="deprecated" variant="warning" :dismissible="false" class="gl-my-5">
+        {{ $options.translations.legacyFlagAlert }}
+      </gl-alert>
       <div class="d-flex align-items-center mb-3 mt-3">
         <gl-toggle :value="active" class="m-0 mr-3" @change="toggleActive" />
         <h3 class="page-title m-0">{{ title }}</h3>

ee/app/assets/javascripts/feature_flags/components/feature_flags_table.vue

 <script>
 import { escape } from 'lodash';
-import { GlDeprecatedButton, GlTooltipDirective, GlModal, GlToggle } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlModal, GlToggle, GlIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT } from '../constants';
+import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT, NEW_VERSION_FLAG } from '../constants';
 
 export default {
   components: {
     GlDeprecatedButton,
-    Icon,
+    GlIcon,
     GlModal,
     GlToggle,
   },
@@ -33,10 +32,16 @@ export default {
       deleteFeatureFlagName: null,
     };
   },
+  translations: {
+    legacyFlagAlert: s__('FeatureFlags|Flag becomes read only soon'),
+  },
   computed: {
     permissions() {
       return this.glFeatures.featureFlagPermissions;
     },
+    isNewVersionFlagsEnabled() {
+      return this.glFeatures.featureFlagsNewVersion;
+    },
     modalTitle() {
       return sprintf(
         s__('FeatureFlags|Delete %{name}?'),
@@ -60,6 +65,9 @@ export default {
     },
   },
   methods: {
+    isLegacyFlag(flag) {
+      return this.isNewVersionFlagsEnabled && flag.version !== NEW_VERSION_FLAG;
+    },
     scopeTooltipText(scope) {
       return !scope.active
         ? sprintf(s__('FeatureFlags|Inactive flag for %{scope}'), {
@@ -149,7 +157,17 @@ export default {
             {{ s__('FeatureFlags|Feature Flag') }}
           </div>
           <div class="table-mobile-content d-flex flex-column js-feature-flag-title">
-            <div class="feature-flag-name text-monospace text-truncate">{{ featureFlag.name }}</div>
+            <div class="gl-display-flex gl-align-items-center">
+              <div class="feature-flag-name text-monospace text-truncate">
+                {{ featureFlag.name }}
+              </div>
+              <gl-icon
+                v-if="isLegacyFlag(featureFlag)"
+                v-gl-tooltip.hover="$options.translations.legacyFlagAlert"
+                class="gl-ml-3"
+                name="information-o"
+              />
+            </div>
             <div class="feature-flag-description text-secondary text-truncate">
               {{ featureFlag.description }}
             </div>
@@ -186,7 +204,7 @@ export default {
                 variant="outline-primary"
                 :href="featureFlag.edit_path"
               >
-                <icon name="pencil" :size="16" />
+                <gl-icon name="pencil" :size="16" />
               </gl-deprecated-button>
             </template>
             <template v-if="featureFlag.destroy_path">
@@ -197,7 +215,7 @@ export default {
                 :disabled="!canDeleteFlag(featureFlag)"
                 @click="setDeleteModalData(featureFlag)"
               >
-                <icon name="remove" :size="16" />
+                <gl-icon name="remove" :size="16" />
               </gl-deprecated-button>
             </template>
           </div>

locale/gitlab.pot

@@ -9146,9 +9146,15 @@ msgstr ""
 msgid "FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality."
 msgstr ""
 
+msgid "FeatureFlags|Flag becomes read only soon"
+msgstr ""
+
 msgid "FeatureFlags|Get started with feature flags"
 msgstr ""
 
+msgid "FeatureFlags|GitLab is moving to a new way of managing feature flags, and in 13.4, this feature flag will become read-only. Please create a new feature flag."
+msgstr ""
+
 msgid "FeatureFlags|ID"
 msgstr ""