Merge branch '267536-vsa-create-form-feature-flag' into 'master'

Add feature flag for extended VSA form

See merge request gitlab-org/gitlab!50229

config/feature_flags/development/value_stream_analytics_extended_form.yml

+---
+name: value_stream_analytics_extended_form
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/50229
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/294190
+milestone: '13.7'
+type: development
+group: group::optimize
+default_enabled: false

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

@@ -179,6 +179,7 @@ export default {
       <value-stream-select
         v-if="shouldDisplayCreateMultipleValueStreams"
         class="gl-align-self-start gl-sm-align-self-start gl-mt-0 gl-sm-mt-5"
+        :has-extended-form-fields="featureFlags.hasExtendedFormFields"
       />
     </div>
     <gl-empty-state

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_form.vue

@@ -46,6 +46,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    hasExtendedFormFields: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -143,6 +148,7 @@ export default {
           @input="onHandleInput"
         />
       </gl-form-group>
+      <div v-if="hasExtendedFormFields" data-testid="extended-form-fields"></div>
     </gl-form>
   </gl-modal>
 </template>

ee/app/assets/javascripts/analytics/cycle_analytics/index.js

@@ -23,6 +23,7 @@ export default () => {
     cycleAnalyticsScatterplotEnabled: hasDurationChart = false,
     valueStreamAnalyticsPathNavigation: hasPathNavigation = false,
     valueStreamAnalyticsCreateMultipleValueStreams: hasCreateMultipleValueStreams = false,
+    valueStreamAnalyticsExtendedForm: hasExtendedFormFields = false,
   } = gon?.features;
 
   const {
@@ -42,6 +43,7 @@ export default () => {
       hasDurationChart,
       hasPathNavigation,
       hasCreateMultipleValueStreams,
+      hasExtendedFormFields,
     },
   });
 

ee/app/controllers/groups/analytics/cycle_analytics_controller.rb

@@ -16,6 +16,7 @@ class Groups::Analytics::CycleAnalyticsController < Groups::Analytics::Applicati
     push_frontend_feature_flag(:cycle_analytics_scatterplot_enabled, default_enabled: true)
     push_frontend_feature_flag(:value_stream_analytics_path_navigation, @group)
     push_frontend_feature_flag(:value_stream_analytics_create_multiple_value_streams, default_enabled: true)
+    push_frontend_feature_flag(:value_stream_analytics_extended_form, @group)
     render_403 unless can?(current_user, :read_group_cycle_analytics, @group)
   end
 

ee/spec/features/groups/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -19,7 +19,8 @@ RSpec.describe 'Group value stream analytics' do
 
     expect(page).to have_pushed_frontend_feature_flags(
       cycleAnalyticsScatterplotEnabled: true,
-      valueStreamAnalyticsPathNavigation: true
+      valueStreamAnalyticsPathNavigation: true,
+      valueStreamAnalyticsExtendedForm: true
     )
   end
 
@@ -35,6 +36,18 @@ RSpec.describe 'Group value stream analytics' do
     end
   end
 
+  context 'when `value_stream_analytics_extended_form` is disabled for a group' do
+    before do
+      stub_feature_flags(value_stream_analytics_extended_form: false, thing: group)
+    end
+
+    it 'pushes disabled feature flag to the frontend' do
+      visit group_analytics_cycle_analytics_path(group)
+
+      expect(page).to have_pushed_frontend_feature_flags(valueStreamAnalyticsExtendedForm: false)
+    end
+  end
+
   context 'when `value_stream_analytics_create_multiple_value_streams` is disabled for a group' do
     before do
       stub_feature_flags(value_stream_analytics_create_multiple_value_streams: false, thing: group)

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js

@@ -27,7 +27,7 @@ describe('ValueStreamForm', () => {
       },
     });
 
-  const createComponent = ({ data = {}, initialState = {} } = {}) =>
+  const createComponent = ({ props = {}, data = {}, initialState = {} } = {}) =>
     shallowMount(ValueStreamForm, {
       localVue,
       store: fakeStore({ initialState }),
@@ -36,6 +36,9 @@ describe('ValueStreamForm', () => {
           ...data,
         };
       },
+      propsData: {
+        ...props,
+      },
       mocks: {
         $toast: {
           show: mockToastShow,
@@ -48,6 +51,7 @@ describe('ValueStreamForm', () => {
     findModal().props('actionPrimary').attributes[1].disabled;
   const submitModal = () => findModal().vm.$emit('primary', mockEvent);
   const findFormGroup = () => wrapper.find(GlFormGroup);
+  const findExtendedFormFields = () => wrapper.find('[data-testid="extended-form-fields"]');
 
   afterEach(() => {
     wrapper.destroy();
@@ -56,12 +60,26 @@ describe('ValueStreamForm', () => {
 
   describe('default state', () => {
     beforeEach(() => {
-      wrapper = createComponent({ initialState: {} });
+      wrapper = createComponent();
     });
 
     it('submit button is disabled', () => {
       expect(createSubmitButtonDisabledState()).toBe(true);
     });
+
+    it('does not include extended fields', () => {
+      expect(findExtendedFormFields().exists()).toBe(false);
+    });
+  });
+
+  describe('with hasExtendedFormFields=true', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ props: { hasExtendedFormFields: true } });
+    });
+
+    it('has the extended fields', () => {
+      expect(findExtendedFormFields().exists()).toBe(true);
+    });
   });
 
   describe('form errors', () => {