Map feature flag userWithId strategy parameters between BE and FE

Add feature specs for new version feature flags

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

@@ -69,7 +69,7 @@ export default {
 };
 </script>
 <template>
-  <gl-new-dropdown>
+  <gl-new-dropdown class="js-new-environments-dropdown">
     <template #button-content>
       <span class="d-md-none mr-1">
         {{ $options.translations.addEnvironmentsLabel }}

ee/app/assets/javascripts/feature_flags/store/modules/helpers.js

@@ -161,16 +161,30 @@ const mapStrategyScopesToView = scopes =>
     environmentScope: s.environment_scope,
   }));
 
+const mapStrategiesParametersToViewModel = params => {
+  if (params.userIds) {
+    return { ...params, userIds: params.userIds.split(',').join(', ') };
+  }
+  return params;
+};
+
 export const mapStrategiesToViewModel = strategiesFromRails =>
   (strategiesFromRails || []).map(s => ({
     id: s.id,
     name: s.name,
-    parameters: s.parameters,
+    parameters: mapStrategiesParametersToViewModel(s.parameters),
     // eslint-disable-next-line no-underscore-dangle
     shouldBeDestroyed: Boolean(s._destroy),
     scopes: mapStrategyScopesToView(s.scopes),
   }));
 
+const mapStrategiesParametersToRails = params => {
+  if (params.userIds) {
+    return { ...params, userIds: params.userIds.split(', ').join(',') };
+  }
+  return params;
+};
+
 export const mapStrategiesToRails = params => ({
   operations_feature_flag: {
     name: params.name,
@@ -179,7 +193,7 @@ export const mapStrategiesToRails = params => ({
     strategies_attributes: (params.strategies || []).map(s => ({
       id: s.id,
       name: s.name,
-      parameters: s.parameters,
+      parameters: mapStrategiesParametersToRails(s.parameters),
       _destroy: s.shouldBeDestroyed,
       scopes_attributes: mapStrategyScopesToRails(s.scopes || []),
     })),

ee/spec/features/projects/feature_flags/user_creates_feature_flag_spec.rb

@@ -12,10 +12,30 @@ describe 'User creates feature flag', :js do
     project.add_developer(user)
     stub_licensed_features(feature_flags: true)
     stub_feature_flags(feature_flag_permissions: false)
-    stub_feature_flags(feature_flags_new_version: false)
     sign_in(user)
   end
 
+  it 'user creates a flag enabled for user ids' do
+    visit(new_project_feature_flag_path(project))
+    set_feature_flag_info('test_feature', 'Test feature')
+    within_strategy_row(1) do
+      select 'User IDs', from: 'Type'
+      fill_in 'User IDs', with: 'user1, user2'
+      environment_plus_button.click
+      environment_search_input.set('production')
+      environment_search_results.first.click
+    end
+    click_button 'Create feature flag'
+
+    expect_user_to_see_feature_flags_index_page
+    expect(page).to have_text('test_feature')
+  end
+
+  context 'with new version flags disabled' do
+    before do
+      stub_feature_flags(feature_flags_new_version: false)
+    end
+
     context 'when creates without changing scopes' do
       before do
         visit(new_project_feature_flag_path(project))
@@ -133,6 +153,7 @@ describe 'User creates feature flag', :js do
         end
       end
     end
+  end
 
   private
 
@@ -140,4 +161,16 @@ describe 'User creates feature flag', :js do
     fill_in 'Name', with: name
     fill_in 'Description', with: description
   end
+
+  def environment_plus_button
+    find('.js-new-environments-dropdown')
+  end
+
+  def environment_search_input
+    find('.js-new-environments-dropdown input')
+  end
+
+  def environment_search_results
+    all('.js-new-environments-dropdown button.dropdown-item')
+  end
 end

ee/spec/frontend/feature_flags/store/helpers_spec.js

@@ -378,7 +378,23 @@ describe('feature flags helpers spec', () => {
         },
       ]);
     });
+
+    it('inserts spaces between user ids', () => {
+      const strategy = _.first(
+        mapStrategiesToViewModel([
+          {
+            id: '1',
+            name: 'userWithId',
+            parameters: { userIds: 'user1,user2,user3' },
+            scopes: [],
+          },
+        ]),
+      );
+
+      expect(strategy.parameters).toEqual({ userIds: 'user1, user2, user3' });
+    });
   });
+
   describe('mapStrategiesToRails', () => {
     it('should map rails casing to view model casing', () => {
       expect(
@@ -425,6 +441,7 @@ describe('feature flags helpers spec', () => {
         },
       });
     });
+
     it('should insert a default * scope if there are none', () => {
       expect(
         mapStrategiesToRails({
@@ -460,5 +477,24 @@ describe('feature flags helpers spec', () => {
         },
       });
     });
+
+    it('removes white space between user ids', () => {
+      const result = mapStrategiesToRails({
+        name: 'test',
+        version: NEW_VERSION_FLAG,
+        strategies: [
+          {
+            id: '1',
+            name: 'userWithId',
+            parameters: { userIds: 'user1, user2, user3' },
+            scopes: [],
+          },
+        ],
+      });
+
+      const strategyAttrs = _.first(result.operations_feature_flag.strategies_attributes);
+
+      expect(strategyAttrs.parameters).toEqual({ userIds: 'user1,user2,user3' });
+    });
   });
 });

ee/spec/support/helpers/feature_flag_helpers.rb

@@ -32,6 +32,12 @@ module FeatureFlagHelpers
     end
   end
 
+  def within_strategy_row(index)
+    within ".feature-flags-form > fieldset > div:nth-child(#{index + 3})" do
+      yield
+    end
+  end
+
   def within_environment_spec
     within '.table-section:nth-child(1)' do
       yield
@@ -49,4 +55,11 @@ module FeatureFlagHelpers
       yield
     end
   end
+
+  def expect_user_to_see_feature_flags_index_page
+    expect(page).to have_css('h3.page-title', text: 'Feature Flags')
+    expect(page).to have_text('All')
+    expect(page).to have_text('Enabled')
+    expect(page).to have_text('Disabled')
+  end
 end