Mount Components for Editing and Creating Lists

This sets up proper mounting of the vue side of things for editing and
creating user lists.

doc/operations/feature_flags.md

@@ -136,10 +136,47 @@ target users. See the [Ruby example](#ruby-application-example) below.
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/35930) in GitLab 13.1.
 
-Enables the feature for lists of users created with the [Feature Flag User List API](../api/feature_flag_user_lists.md).
+Enables the feature for lists of users created [in the Feature Flags UI](#create-a-user-list), or with the [Feature Flag User List API](../api/feature_flag_user_lists.md).
 Similar to [User IDs](#user-ids), it uses the Unleash [`userWithId`](https://unleash.github.io/docs/activation_strategy#userwithid)
 activation strategy.
 
+#### Create a user list
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13308) in GitLab 13.3.
+
+To create a user list:
+
+1. In your project, navigate to **Operations > Feature Flags**.
+1. Click on **New list**.
+1. Enter a name for the list.
+1. Click **Create**.
+
+You can view a list's User IDs by clicking the **{pencil}** (edit) button next to it.
+When viewing a list, you can rename it by clicking the **Edit** button.
+
+#### Add users to a user list
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13308) in GitLab 13.3.
+
+To add users to a user list:
+
+1. In your project, navigate to **Operations > Feature Flags**.
+1. Click on the **{pencil}** (edit) button next to the list you want to add users to.
+1. Click on **Add Users**.
+1. Enter the user IDs as a comma-separated list of values. For example,
+   `user@example.com, user2@example.com`, or `username1,username2,username3`, and so on.
+1. Click on **Add**.
+
+#### Remove users from a user list
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13308) in GitLab 13.3.
+
+To remove users from a user list:
+
+1. In your project, navigate to **Operations > Feature Flags**.
+1. Click on the **{pencil}** (edit) button next to the list you want to change.
+1. Click on the **{remove}** (remove) button next to the ID you want to remove.
+
 ### Enable or disable feature flag strategies
 
 This feature is under development, but is ready for production use. It's

ee/app/assets/javascripts/pages/projects/feature_flags_user_lists/edit/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import EditUserList from 'ee/user_lists/components/edit_user_list.vue';
+import createStore from 'ee/user_lists/store/edit';
+
+Vue.use(Vuex);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-edit-user-list');
+  const { userListsDocsPath } = el.dataset;
+  return new Vue({
+    el,
+    store: createStore(el.dataset),
+    provide: { userListsDocsPath },
+    render(h) {
+      return h(EditUserList, {});
+    },
+  });
+});

ee/app/assets/javascripts/pages/projects/feature_flags_user_lists/new/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import NewUserList from 'ee/user_lists/components/new_user_list.vue';
+import createStore from 'ee/user_lists/store/new';
+
+Vue.use(Vuex);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-new-user-list');
+  const { userListsDocsPath, featureFlagsPath } = el.dataset;
+  return new Vue({
+    el,
+    store: createStore(el.dataset),
+    provide: {
+      userListsDocsPath,
+      featureFlagsPath,
+    },
+    render(h) {
+      return h(NewUserList);
+    },
+  });
+});

ee/app/assets/javascripts/user_lists/components/edit_user_list.vue

@@ -11,12 +11,7 @@ export default {
     GlLoadingIcon,
     UserListForm,
   },
-  props: {
-    userListsDocsPath: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['userListsDocsPath'],
   translations: {
     saveButtonLabel: s__('UserLists|Save'),
   },

ee/app/assets/javascripts/user_lists/components/new_user_list.vue

@@ -9,16 +9,7 @@ export default {
     GlAlert,
     UserListForm,
   },
-  props: {
-    featureFlagsPath: {
-      type: String,
-      required: true,
-    },
-    userListsDocsPath: {
-      type: String,
-      required: true,
-    },
-  },
+  inject: ['userListsDocsPath', 'featureFlagsPath'],
   translations: {
     pageTitle: s__('UserLists|New list'),
     createButtonLabel: s__('UserLists|Create'),

ee/app/assets/javascripts/user_lists/components/user_list_form.vue

@@ -76,8 +76,12 @@ export default {
         </gl-sprintf>
       </div>
       <div class="gl-flex-fill-1 gl-ml-7">
-        <gl-form-group :label="$options.translations.nameLabel" class="gl-mb-7">
-          <gl-form-input v-model="name" data-testid="user-list-name" required />
+        <gl-form-group
+          label-for="user-list-name"
+          :label="$options.translations.nameLabel"
+          class="gl-mb-7"
+        >
+          <gl-form-input id="user-list-name" v-model="name" data-testid="user-list-name" required />
         </gl-form-group>
         <div :class="$options.classes.actionContainer">
           <gl-button variant="success" data-testid="save-user-list" @click="submit">

ee/app/views/projects/feature_flags_user_lists/edit.html.haml

 - add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
-- breadcrumb_title s_('FeatureFlags|Edit list')
-- page_title s_('FeatureFlags|Edit Feature Flag User List')
+- breadcrumb_title s_('FeatureFlags|Edit User List')
+- page_title s_('FeatureFlags|Edit User List')
 
-Edit list
-
-%label{ for: 'name' }= s_('FeatureFlags|Name')
-%input{ id: 'name', value: @user_list.name }
+#js-edit-user-list{ data: { 'user-lists-docs-path' => help_page_path('operations/feature_flags.md', anchor: 'user-list'),
+  'user-list-iid' => @user_list.iid,
+  'project-id' => @project.id } }

ee/app/views/projects/feature_flags_user_lists/new.html.haml

+- @breadcrumb_link = new_project_feature_flags_user_list_path(@project)
 - add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
-- breadcrumb_title s_('FeatureFlags|New list')
-- page_title s_('FeatureFlags|New Feature Flag User List')
+- breadcrumb_title s_('FeatureFlags|New User List')
+- page_title s_('FeatureFlags|New User List')
 
-New list
+#js-new-user-list{ data: { 'user-lists-docs-path' => help_page_path('operations/feature_flags.md', anchor: 'user-list'),
+  'feature-flags-path' => project_feature_flags_path(@project),
+  'project-id' => @project.id } }

ee/spec/frontend/user_lists/components/edit_user_list_spec.js

@@ -32,7 +32,7 @@ describe('ee/user_lists/components/edit_user_list', () => {
     wrapper = mount(EditUserList, {
       localVue,
       store: createStore({ projectId: '1', userListIid: '2' }),
-      propsData: {
+      provide: {
         userListsDocsPath: '/docs/user_lists',
       },
     });

ee/spec/frontend/user_lists/components/new_user_list_spec.js

@@ -26,7 +26,7 @@ describe('ee/user_lists/components/new_user_list', () => {
     wrapper = mount(NewUserList, {
       localVue,
       store: createStore({ projectId: '1' }),
-      propsData: {
+      provide: {
         featureFlagsPath: '/feature_flags',
         userListsDocsPath: '/docs/user_lists',
       },

locale/gitlab.pot

@@ -10219,10 +10219,7 @@ msgstr ""
 msgid "FeatureFlags|Edit Feature Flag"
 msgstr ""
 
-msgid "FeatureFlags|Edit Feature Flag User List"
-msgstr ""
-
-msgid "FeatureFlags|Edit list"
+msgid "FeatureFlags|Edit User List"
 msgstr ""
 
 msgid "FeatureFlags|Enable features for specific users and specific environments by defining feature flag strategies."
@@ -10303,15 +10300,12 @@ msgstr ""
 msgid "FeatureFlags|New Feature Flag"
 msgstr ""
 
-msgid "FeatureFlags|New Feature Flag User List"
+msgid "FeatureFlags|New User List"
 msgstr ""
 
 msgid "FeatureFlags|New feature flag"
 msgstr ""
 
-msgid "FeatureFlags|New list"
-msgstr ""
-
 msgid "FeatureFlags|Percent rollout (logged in users)"
 msgstr ""