Add api request for creating value streams

Submit a post request to create a new
value stream.

Clear the form after success

Replace breakpoint check with utility css

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

 <script>
 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
-import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { sprintf, __ } from '~/locale';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
 import { PROJECTS_PER_PAGE, STAGE_ACTIONS } from '../constants';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
@@ -121,9 +119,6 @@ export default {
     isLoadingTypeOfWork() {
       return this.isLoadingTasksByTypeChartTopLabels || this.isLoadingTasksByTypeChart;
     },
-    isXSBreakpoint() {
-      return bp.getBreakpointSize() === 'xs';
-    },
     hasDateRangeSet() {
       return this.startDate && this.endDate;
     },
@@ -200,10 +195,6 @@ export default {
     onStageReorder(data) {
       this.reorderStage(data);
     },
-    onCreateValueStream({ name }) {
-      // stub - this will eventually trigger a vuex action
-      this.$toast.show(sprintf(__("'%{name}' Value Stream created"), { name }));
-    },
   },
   multiProjectSelect: true,
   dateOptions: [7, 30, 90],
@@ -228,12 +219,7 @@ export default {
       <h3>{{ __('Value Stream Analytics') }}</h3>
       <value-stream-select
         v-if="shouldDisplayCreateMultipleValueStreams"
-        class="gl-align-self-center"
-        :class="{
-          'gl-w-full': isXSBreakpoint,
-          'gl-mt-5': !isXSBreakpoint,
-        }"
-        @create="onCreateValueStream"
+        class="gl-align-self-start gl-sm-align-self-start gl-mt-0 gl-sm-mt-5"
       />
     </div>
     <div class="mw-100">

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

 <script>
 import { GlButton, GlForm, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import { mapState, mapActions } from 'vuex';
+import { sprintf, __ } from '~/locale';
 
 export default {
   components: {
@@ -11,16 +13,35 @@ export default {
   directives: {
     GlModalDirective,
   },
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
   data() {
     return {
       name: '',
     };
   },
   computed: {
+    ...mapState({ isCreatingValueStream: 'isLoading' }),
     isValid() {
       return Boolean(this.name.length);
     },
   },
+  methods: {
+    ...mapActions(['createValueStream']),
+    onSubmit() {
+      const { name } = this;
+      return this.createValueStream({ name }).then(() => {
+        this.$refs.modal.hide();
+        this.$toast.show(sprintf(__("'%{name}' Value Stream created"), { name }));
+        this.name = '';
+      });
+    },
+  },
 };
 </script>
 <template>
@@ -29,6 +50,7 @@ export default {
       __('Create new value stream')
     }}</gl-button>
     <gl-modal
+      ref="modal"
       modal-id="create-value-stream-modal"
       :title="__('Value Stream Name')"
       :action-primary="{
@@ -38,10 +60,11 @@ export default {
           {
             disabled: !isValid,
           },
+          { loading: isLoading },
         ],
       }"
       :action-cancel="{ text: __('Cancel') }"
-      @primary="$emit('create', { name })"
+      @primary.prevent="onSubmit"
     >
       <gl-form-input id="name" v-model="name" :placeholder="__('Example: My value stream')" />
     </gl-modal>

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

@@ -295,3 +295,26 @@ export const reorderStage = ({ dispatch, state }, initialData) => {
       dispatch('receiveReorderStageError', { status, responseData }),
     );
 };
+
+export const receiveCreateValueStreamSuccess = ({ commit }) => {
+  // TODO: fetch / update list of value streams
+  commit(types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS);
+};
+
+export const createValueStream = ({ commit, rootState }, data) => {
+  const {
+    selectedGroup: { fullPath },
+  } = rootState;
+
+  commit(types.REQUEST_CREATE_VALUE_STREAM);
+
+  return Api.cycleAnalyticsCreateValueStream(fullPath, data)
+    .then(response => {
+      const { status, data: responseData } = response;
+      commit(types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS, { status, data: responseData });
+    })
+    .catch(({ response } = {}) => {
+      const { data: { message, errors } = null } = response;
+      commit(types.RECEIVE_CREATE_VALUE_STREAM_ERROR, { data, message, errors });
+    });
+};

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

@@ -35,3 +35,7 @@ export const INITIALIZE_CYCLE_ANALYTICS_SUCCESS = 'INITIALIZE_CYCLE_ANALYTICS_SU
 export const REQUEST_REORDER_STAGE = 'REQUEST_REORDER_STAGE';
 export const RECEIVE_REORDER_STAGE_SUCCESS = 'RECEIVE_REORDER_STAGE_SUCCESS';
 export const RECEIVE_REORDER_STAGE_ERROR = 'RECEIVE_REORDER_STAGE_ERROR';
+
+export const REQUEST_CREATE_VALUE_STREAM = 'REQUEST_CREATE_VALUE_STREAM';
+export const RECEIVE_CREATE_VALUE_STREAM_SUCCESS = 'RECEIVE_CREATE_VALUE_STREAM_SUCCESS';
+export const RECEIVE_CREATE_VALUE_STREAM_ERROR = 'RECEIVE_CREATE_VALUE_STREAM_ERROR';

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

@@ -122,4 +122,13 @@ export default {
     state.selectedMilestone = selectedMilestone;
     state.selectedLabels = selectedLabels;
   },
+  [types.REQUEST_CREATE_VALUE_STREAM](state) {
+    state.isCreatingValueStream = true;
+  },
+  [types.RECEIVE_CREATE_VALUE_STREAM_ERROR](state) {
+    state.isCreatingValueStream = false;
+  },
+  [types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS](state) {
+    state.isCreatingValueStream = false;
+  },
 };

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

@@ -23,6 +23,8 @@ export default () => ({
 
   currentStageEvents: [],
 
+  isCreatingValueStream: false,
+
   stages: [],
   summary: [],
   medians: {},

ee/app/assets/javascripts/api.js

@@ -18,6 +18,7 @@ export default {
   cycleAnalyticsSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/summary',
   cycleAnalyticsTimeSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/time_summary',
   cycleAnalyticsGroupStagesAndEventsPath: '/groups/:id/-/analytics/value_stream_analytics/stages',
+  cycleAnalyticsValueStreamsPath: '/groups/:id/-/analytics/value_stream_analytics/value_streams',
   cycleAnalyticsStageEventsPath:
     '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id/records',
   cycleAnalyticsStageMedianPath:
@@ -191,6 +192,11 @@ export default {
     return axios.post(url, data);
   },
 
+  cycleAnalyticsCreateValueStream(groupId, data) {
+    const url = Api.buildUrl(this.cycleAnalyticsValueStreamsPath).replace(':id', groupId);
+    return axios.post(url, data);
+  },
+
   cycleAnalyticsStageUrl(stageId, groupId) {
     return Api.buildUrl(this.cycleAnalyticsStagePath)
       .replace(':id', groupId)