Adds create value stream button

Adds the valueStreamAnalyticsCreateMultipleValueStreams
feature flag to toggle the button on and off

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

 <script>
-import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
 import { PROJECTS_PER_PAGE, STAGE_ACTIONS } from '../constants';
@@ -25,6 +26,7 @@ export default {
   components: {
     DateRange,
     DurationChart,
+    GlButton,
     GlLoadingIcon,
     GlEmptyState,
     GroupsDropdownFilter,
@@ -111,9 +113,15 @@ export default {
       // https://gitlab.com/gitlab-org/gitlab/-/issues/223735
       return this.featureFlags.hasFilterBar && this.currentGroupPath;
     },
+    canCreateMultipleValueStreams() {
+      return Boolean(this.featureFlags.hasCreateMultipleValueStreams);
+    },
     isLoadingTypeOfWork() {
       return this.isLoadingTasksByTypeChartTopLabels || this.isLoadingTasksByTypeChart;
     },
+    isXSBreakpoint() {
+      return bp.getBreakpointSize() === 'xs';
+    },
     hasDateRangeSet() {
       return this.startDate && this.endDate;
     },
@@ -190,6 +198,9 @@ export default {
     onStageReorder(data) {
       this.reorderStage(data);
     },
+    onCreateValueStream() {
+      // stub handler - to be implemented in a follow up
+    },
   },
   multiProjectSelect: true,
   dateOptions: [7, 30, 90],
@@ -208,8 +219,19 @@ export default {
 </script>
 <template>
   <div>
-    <div class="mb-3">
+    <div
+      class="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
+        class="gl-align-self-center"
+        :class="{
+          'gl-w-full': isXSBreakpoint,
+          'gl-mt-5': !isXSBreakpoint,
+        }"
+      >
+        <gl-button @click="onCreateValueStream">{{ __('Create new value stream') }}</gl-button>
+      </div>
     </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/index.js

@@ -14,11 +14,18 @@ export default () => {
     cycleAnalyticsScatterplotMedianEnabled: hasDurationChartMedian = false,
     valueStreamAnalyticsPathNavigation: hasPathNavigation = false,
     valueStreamAnalyticsFilterBar: hasFilterBar = false,
+    valueStreamAnalyticsCreateMultipleValueStreams: hasCreateMultipleValueStreams = false,
   } = gon?.features;
 
   store.dispatch('initializeCycleAnalytics', {
     ...initialData,
-    featureFlags: { hasDurationChart, hasDurationChartMedian, hasPathNavigation, hasFilterBar },
+    featureFlags: {
+      hasDurationChart,
+      hasDurationChartMedian,
+      hasPathNavigation,
+      hasFilterBar,
+      hasCreateMultipleValueStreams,
+    },
   });
 
   return new Vue({

ee/app/controllers/analytics/cycle_analytics_controller.rb

@@ -16,6 +16,7 @@ class Analytics::CycleAnalyticsController < Analytics::ApplicationController
     push_frontend_feature_flag(:cycle_analytics_scatterplot_median_enabled, default_enabled: true)
     push_frontend_feature_flag(:value_stream_analytics_path_navigation, @group)
     push_frontend_feature_flag(:value_stream_analytics_filter_bar, @group)
+    push_frontend_feature_flag(:value_stream_analytics_create_multiple_value_streams, @group)
   end
 
   private