Show the dropdown when there are value streams

Updates the related create value stream specs
to check inside the dropdown

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

@@ -14,7 +14,6 @@ import { mapState, mapActions } from 'vuex';
 import { sprintf, __ } from '~/locale';
 import { debounce } from 'lodash';
 import { DATA_REFETCH_DELAY } from '../../shared/constants';
-import { DEFAULT_VALUE_STREAM_ID } from '../constants';
 
 const ERRORS = {
   MIN_LENGTH: __('Name is required'),
@@ -32,10 +31,6 @@ const validate = ({ name }) => {
   return errors;
 };
 
-const hasCustomValueStream = vs => {
-  return Boolean(vs.length > 1 || vs[0].name.toLowerCase().trim() !== DEFAULT_VALUE_STREAM_ID);
-};
-
 export default {
   components: {
     GlButton,
@@ -70,7 +65,7 @@ export default {
       return this.errors.name?.join('\n');
     },
     hasValueStreams() {
-      return Boolean(this.data.length && hasCustomValueStream(this.data));
+      return Boolean(this.data.length);
     },
     selectedValueStreamName() {
       return this.selectedValueStream?.name || '';
@@ -124,7 +119,12 @@ export default {
 </script>
 <template>
   <gl-form>
-    <gl-dropdown v-if="hasValueStreams" :text="selectedValueStreamName" right>
+    <gl-dropdown
+      v-if="hasValueStreams"
+      data-testid="dropdown-value-streams"
+      :text="selectedValueStreamName"
+      right
+    >
       <gl-dropdown-item
         v-for="{ id, name: streamName } in data"
         :key="id"

ee/app/assets/javascripts/analytics/cycle_analytics/store/mutations.js

@@ -147,6 +147,8 @@ export default {
   },
   [types.RECEIVE_VALUE_STREAMS_SUCCESS](state, data) {
     state.isLoadingValueStreams = false;
-    state.valueStreams = data;
+    state.valueStreams = data.sort(({ name: aName = '' }, { name: bName = '' }) => {
+      return aName.toUpperCase() > bName.toUpperCase() ? 1 : -1;
+    });
   },
 };

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

@@ -23,6 +23,7 @@ RSpec.describe 'Group Value Stream Analytics', :js do
   path_nav_selector = '.js-path-navigation'
   filter_bar_selector = '.js-filter-bar'
   duration_stage_selector = '.js-dropdown-stages'
+  value_stream_selector = '[data-testid="dropdown-value-streams"]'
 
   3.times do |i|
     let_it_be("issue_#{i}".to_sym) { create(:issue, title: "New Issue #{i}", project: project, created_at: 2.days.ago) }
@@ -1018,6 +1019,11 @@ RSpec.describe 'Group Value Stream Analytics', :js do
 
   describe 'Create value stream', :js do
     let(:custom_value_stream_name) { "Test value stream" }
+    let(:value_stream_dropdown) { page.find(value_stream_selector) }
+
+    def toggle_value_stream_dropdown
+      value_stream_dropdown.click
+    end
 
     before do
       visit analytics_cycle_analytics_path
@@ -1026,6 +1032,8 @@ RSpec.describe 'Group Value Stream Analytics', :js do
     end
 
     it 'can create a value stream' do
+      toggle_value_stream_dropdown
+
       page.find_button(_('Create new Value Stream')).click
 
       fill_in 'create-value-stream-name', with: custom_value_stream_name

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

@@ -84,6 +84,24 @@ describe('ValueStreamSelect', () => {
     });
   });
 
+  describe('Only the default value stream available', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        initialState: {
+          valueStreams: [{ id: 'default', name: 'default' }],
+        },
+      });
+    });
+
+    it('does not display the create value stream button', () => {
+      expect(findCreateValueStreamButton().exists()).toBe(false);
+    });
+
+    it('displays the select value stream dropdown', () => {
+      expect(findSelectValueStreamDropdown().exists()).toBe(true);
+    });
+  });
+
   describe('No value streams available', () => {
     beforeEach(() => {
       wrapper = createComponent({

ee/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js

@@ -76,6 +76,21 @@ describe('Cycle analytics mutations', () => {
     },
   );
 
+  describe(`${types.RECEIVE_VALUE_STREAMS_SUCCESS}`, () => {
+    const dummyValueStream = { id: 3, name: 'A new value stream' };
+    const sorted = [dummyValueStream, valueStreams[0], valueStreams[1]];
+    it('will sort the value streams alphabetically', () => {
+      state = { valueStreams: [] };
+      mutations[types.RECEIVE_VALUE_STREAMS_SUCCESS](state, [
+        valueStreams[1],
+        valueStreams[0],
+        dummyValueStream,
+      ]);
+
+      expect(state.valueStreams).toEqual(sorted);
+    });
+  });
+
   describe('with value streams available', () => {
     it.each`
       mutation                           | payload               | expectedState