Add value_stream_selector component

Moves the create value stream into
a separate component

Adds the create value stream modal

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

@@ -20,13 +20,13 @@ import CustomStageForm from './custom_stage_form.vue';
 import PathNavigation from './path_navigation.vue';
 import MetricCard from '../../shared/components/metric_card.vue';
 import FilterBar from './filter_bar.vue';
+import ValueStreamSelect from './value_stream_select.vue';
 
 export default {
   name: 'CycleAnalytics',
   components: {
     DateRange,
     DurationChart,
-    GlButton,
     GlLoadingIcon,
     GlEmptyState,
     GroupsDropdownFilter,
@@ -40,6 +40,7 @@ export default {
     PathNavigation,
     MetricCard,
     FilterBar,
+    ValueStreamSelect,
   },
   mixins: [UrlSyncMixin],
   props: {
@@ -231,9 +232,7 @@ export default {
           'gl-mt-5': !isXSBreakpoint,
         }"
       >
-        <gl-button data-testid="create-value-stream" @click="onCreateValueStream">{{
-          __('Create new value stream')
-        }}</gl-button>
+        <value-stream-select @create="onCreateValueStream" />
       </div>
     </div>
     <div class="mw-100">

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

+<script>
+import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+    GlFormInput,
+    GlModal,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  props: {},
+  computed: {},
+  data() {
+    return {
+      name: '',
+    };
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-button
+      v-gl-modal-directive="'create-value-stream-modal'"
+      data-testid="create-value-stream"
+      >{{ __('Create new value stream') }}</gl-button
+    >
+    <!-- no-fade: no idea 🤷‍♂️ -->
+    <gl-modal
+      modal-id="create-value-stream-modal"
+      :title="__('Value stream name')"
+      no-fade
+      :action-primary="{ text: __('Create value stream') }"
+      :action-cancel="{ text: __('Cancel') }"
+      @primary="$emit('create')"
+    >
+      <gl-form-input id="name" :value="name" :placeholder="__('Example: My value stream')" />
+    </gl-modal>
+    <!-- :action-cancel -->
+  </div>
+</template>