Display toast message on submit

Adds the toast component to the
VSA app

Update gitlab pot file

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

 <script>
-import { GlEmptyState, GlLoadingIcon, GlButton } from '@gitlab/ui';
+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';
@@ -199,8 +200,9 @@ export default {
     onStageReorder(data) {
       this.reorderStage(data);
     },
-    onCreateValueStream() {
-      // stub handler - to be implemented in a follow up
+    onCreateValueStream({ name }) {
+      // stub - this will eventually trigger a vuex action
+      this.$toast.show(sprintf(__("'%{name}' Value Stream created"), { name }));
     },
   },
   multiProjectSelect: true,
@@ -224,16 +226,15 @@ export default {
       class="gl-mb-3 gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between"
     >
       <h3>{{ __('Value Stream Analytics') }}</h3>
-      <div
+      <value-stream-select
         v-if="shouldDisplayCreateMultipleValueStreams"
         class="gl-align-self-center"
         :class="{
           'gl-w-full': isXSBreakpoint,
           'gl-mt-5': !isXSBreakpoint,
         }"
-      >
-        <value-stream-select @create="onCreateValueStream" />
-      </div>
+        @create="onCreateValueStream"
+      />
     </div>
     <div class="mw-100">
       <div class="mt-3 py-2 px-3 bg-gray-light border-top border-bottom">

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

@@ -11,12 +11,16 @@ export default {
     GlModalDirective,
   },
   props: {},
-  computed: {},
   data() {
     return {
       name: '',
     };
   },
+  computed: {
+    isValid() {
+      return Boolean(this.name.length);
+    },
+  },
 };
 </script>
 <template>
@@ -26,17 +30,22 @@ export default {
       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') }"
+      :title="__('Value Stream Name')"
+      :action-primary="{
+        text: __('Create value stream'),
+        attributes: [
+          { variant: 'primary' },
+          {
+            disabled: !isValid,
+          },
+        ],
+      }"
       :action-cancel="{ text: __('Cancel') }"
-      @primary="$emit('create')"
+      @primary="$emit('create', { name })"
     >
-      <gl-form-input id="name" :value="name" :placeholder="__('Example: My value stream')" />
+      <gl-form-input id="name" v-model="name" :placeholder="__('Example: My value stream')" />
     </gl-modal>
-    <!-- :action-cancel -->
   </div>
 </template>

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

@@ -3,6 +3,9 @@ import CycleAnalytics from './components/base.vue';
 import createStore from './store';
 import { buildCycleAnalyticsInitialData } from '../shared/utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import { GlToast } from '@gitlab/ui';
+
+Vue.use(GlToast);
 
 export default () => {
   const el = document.querySelector('#js-cycle-analytics-app');

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

@@ -18,6 +18,7 @@ import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import TypeOfWorkCharts from 'ee/analytics/cycle_analytics/components/type_of_work_charts.vue';
+import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatusCodes from '~/lib/utils/http_status';
 import * as commonUtils from '~/lib/utils/common_utils';
@@ -44,6 +45,7 @@ const defaultStubs = {
   'labels-selector': true,
   DurationChart: true,
   GroupsDropdownFilter: true,
+  ValueStreamSelect: true,
 };
 
 const defaultFeatureFlags = {
@@ -171,7 +173,7 @@ describe('Cycle Analytics component', () => {
   };
 
   const displaysCreateValueStream = flag => {
-    expect(wrapper.find('[data-testid="create-value-stream"]').exists()).toBe(flag);
+    expect(wrapper.find(ValueStreamSelect).exists()).toBe(flag);
   };
 
   beforeEach(() => {
@@ -237,6 +239,7 @@ describe('Cycle Analytics component', () => {
       it('does not display the path navigation', () => {
         displaysPathNavigation(false);
       });
+
       it('does not display the create multiple value streams button', () => {
         displaysCreateValueStream(false);
       });

locale/gitlab.pot

@@ -735,6 +735,9 @@ msgstr ""
 msgid "'%{level}' is not a valid visibility level"
 msgstr ""
 
+msgid "'%{name}' Value Stream created"
+msgstr ""
+
 msgid "'%{name}' stage already exists"
 msgstr ""
 
@@ -6857,6 +6860,9 @@ msgstr ""
 msgid "Create snippet"
 msgstr ""
 
+msgid "Create value stream"
+msgstr ""
+
 msgid "Create wildcard: %{searchTerm}"
 msgstr ""
 
@@ -9451,6 +9457,9 @@ msgstr ""
 msgid "Example: @sub\\.company\\.com$"
 msgstr ""
 
+msgid "Example: My value stream"
+msgstr ""
+
 msgid "Example: Usage = single query. (Requested) / (Capacity) = multiple queries combined into a formula."
 msgstr ""
 
@@ -25592,6 +25601,9 @@ msgstr ""
 msgid "Value Stream Analytics gives an overview of how much time it takes to go from idea to production in your project."
 msgstr ""
 
+msgid "Value Stream Name"
+msgstr ""
+
 msgid "ValueStreamAnalytics|%{days}d"
 msgstr ""