Alert Users That Lists Are Modified By API Only

This adds a small alert to inform users that the ability to create and
edit user lists exists only via the API.

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

@@ -7,6 +7,8 @@ import {
   GlDeprecatedButton,
   GlModalDirective,
   GlLink,
+  GlAlert,
+  GlSprintf,
 } from '@gitlab/ui';
 import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
 import FeatureFlagsTable from './feature_flags_table.vue';
@@ -36,6 +38,8 @@ export default {
     GlLoadingIcon,
     GlDeprecatedButton,
     GlLink,
+    GlAlert,
+    GlSprintf,
     ConfigureFeatureFlagsModal,
   },
   directives: {
@@ -66,6 +70,10 @@ export default {
       type: String,
       required: true,
     },
+    userListsApiDocPath: {
+      type: String,
+      required: true,
+    },
     rotateInstanceIdPath: {
       type: String,
       required: false,
@@ -93,6 +101,7 @@ export default {
     return {
       scope: getParameterByName('scope') || this.$options.scopes.featureFlags,
       page: getParameterByName('page') || '1',
+      isUserListAlertDismissed: false,
     };
   },
   scopes: {
@@ -261,6 +270,19 @@ export default {
         >
       </div>
     </h3>
+    <gl-alert v-if="!isUserListAlertDismissed" @dismiss="isUserListAlertDismissed = true">
+      <gl-sprintf
+        :message="
+          __('User Lists can only be created and modified with %{linkStart}the API%{linkEnd}')
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="userListsApiDocPath" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
 
     <div v-if="shouldRenderTabs" class="top-area scrolling-tabs-container inner-page-scroll-tabs">
       <navigation-tabs :tabs="tabs" scope="featureflags" @onChangeTab="onChangeTab" />

ee/app/assets/javascripts/feature_flags/index.js

@@ -27,6 +27,7 @@ export default () =>
           canUserConfigure: this.dataset.canUserAdminFeatureFlag,
           newFeatureFlagPath: this.dataset.newFeatureFlagPath,
           rotateInstanceIdPath: this.dataset.rotateInstanceIdPath,
+          userListsApiDocPath: this.dataset.userListsApiDocPath,
         },
       });
     },

ee/app/views/projects/feature_flags/index.html.haml

@@ -9,4 +9,5 @@
   "unleash-api-instance-id" => (unleash_api_instance_id(@project) if can?(current_user, :admin_feature_flag, @project)),
   "can-user-admin-feature-flag" => can?(current_user, :admin_feature_flag, @project),
   "new-feature-flag-path" => can?(current_user, :create_feature_flag, @project) ? new_project_feature_flag_path(@project): nil,
-  "rotate-instance-id-path" => can?(current_user, :admin_feature_flags_client, @project) ? reset_token_project_feature_flags_client_path(@project, format: :json) : nil } }
+  "rotate-instance-id-path" => can?(current_user, :admin_feature_flags_client, @project) ? reset_token_project_feature_flags_client_path(@project, format: :json) : nil,
+  "user-lists-api-doc-path" => help_page_path("api/feature_flag_user_lists.md") } }

ee/changelogs/unreleased/alert-users-of-user-lists-api.yml

+---
+title: Alert Users That Lists Are Modified By API Only
+merge_request: 34559
+author:
+type: added

ee/spec/frontend/feature_flags/components/feature_flags_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import Api from 'ee/api';
 import store from 'ee/feature_flags/store';
 import FeatureFlagsComponent from 'ee/feature_flags/components/feature_flags.vue';
@@ -9,6 +9,7 @@ import UserListsTable from 'ee/feature_flags/components/user_lists_table.vue';
 import ConfigureFeatureFlagsModal from 'ee/feature_flags/components/configure_feature_flags_modal.vue';
 import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from 'ee/feature_flags/constants';
 import { TEST_HOST } from 'spec/test_constants';
+import { trimText } from 'helpers/text_helper';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import axios from '~/lib/utils/axios_utils';
@@ -21,6 +22,7 @@ describe('Feature flags', () => {
     errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
     featureFlagsHelpPagePath: '/help/feature-flags',
     featureFlagsAnchoredHelpPagePath: '/help/feature-flags#unleash-clients',
+    userListsApiDocPath: '/help/api/user_lists',
     unleashApiUrl: `${TEST_HOST}/api/unleash`,
     unleashApiInstanceId: 'oP6sCNRqtRHmpy1gw2-F',
     canUserConfigure: true,
@@ -32,8 +34,8 @@ describe('Feature flags', () => {
   let wrapper;
   let mock;
 
-  const factory = (propsData = mockData) => {
-    wrapper = shallowMount(FeatureFlagsComponent, {
+  const factory = (propsData = mockData, fn = shallowMount) => {
+    wrapper = fn(FeatureFlagsComponent, {
       propsData,
     });
   };
@@ -62,6 +64,30 @@ describe('Feature flags', () => {
     wrapper.destroy();
   });
 
+  describe('user lists alert', () => {
+    let alert;
+
+    beforeEach(async () => {
+      factory(mockData, mount);
+
+      await wrapper.vm.$nextTick();
+      alert = wrapper.find(GlAlert);
+    });
+
+    it('should show that user lists can only be modified by the API', () => {
+      expect(trimText(alert.text())).toContain(
+        'User Lists can only be created and modified with the API',
+      );
+    });
+
+    it('should be dismissible', async () => {
+      alert.find('button').trigger('click');
+
+      await wrapper.vm.$nextTick();
+      expect(alert.exists()).toBe(false);
+    });
+  });
+
   describe('without permissions', () => {
     const propsData = {
       endpoint: `${TEST_HOST}/endpoint.json`,
@@ -74,6 +100,7 @@ describe('Feature flags', () => {
       unleashApiUrl: `${TEST_HOST}/api/unleash`,
       unleashApiInstanceId: 'oP6sCNRqtRHmpy1gw2-F',
       projectId: '8',
+      userListsApiDocPath: '/help/api/user_lists',
     };
 
     beforeEach(done => {

locale/gitlab.pot

@@ -24437,6 +24437,9 @@ msgstr ""
 msgid "User IDs"
 msgstr ""
 
+msgid "User Lists can only be created and modified with %{linkStart}the API%{linkEnd}"
+msgstr ""
+
 msgid "User OAuth applications"
 msgstr ""