Alert Users that Legacy Flags will be Read Only

Add both an alert to the feature flag edit page and icon to the list to
inform users that legacy feature flags will be going read-only soon, and
that these flags should be re-created as a new version flag as soon as
possible.

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

@@ -9148,9 +9148,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 ""