Added currentGroupPath getter for groupLabels request

The group path is needed to fetch group
labels, previously this was passed from the
backend, but with the new vuex store, we can
retrieve this from state.

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

@@ -55,7 +55,7 @@ export default {
       'summary',
       'dataTimeframe',
     ]),
-    ...mapGetters(['currentStage', 'defaultStage', 'hasNoAccessError']),
+    ...mapGetters(['currentStage', 'defaultStage', 'hasNoAccessError', 'currentGroupPath']),
     shouldRenderEmptyState() {
       return !this.selectedGroup;
     },
@@ -161,7 +161,6 @@ export default {
           )
         "
       />
-      <div v-else class="cycle-analytics mt-0">
       <summary-table class="js-summary-table" :items="summary" />
       <stage-table
         v-if="currentStage"
@@ -180,5 +179,4 @@ export default {
       />
     </div>
   </div>
-  </div>
 </template>

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

 <script>
 // NOTE: this is a temporary component while cycle-analytics is being refactored
 //        post refactor we will have a vuex store and functionality to fetch data
-// https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/15039
+// https://gitlab.com/gitlab-org/gitlab/issues/32019
 import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import createFlash from '~/flash';

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

@@ -6,7 +6,7 @@ import StageNavItem from './stage_nav_item.vue';
 import StageEventList from './stage_event_list.vue';
 import StageTableHeader from './stage_table_header.vue';
 import AddStageButton from './add_stage_button.vue';
-import CustomStageForm from './custom_stage_form.vue';
+import CustomStageFormContainer from './custom_stage_form_container.vue';
 
 export default {
   name: 'StageTable',
@@ -18,7 +18,7 @@ export default {
     StageNavItem,
     StageTableHeader,
     AddStageButton,
-    CustomStageForm,
+    CustomStageFormContainer,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -60,6 +60,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    groupPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     stageName() {
@@ -149,7 +154,11 @@ export default {
             :description="__('Want to see the data? Please ask an administrator for access.')"
             :svg-path="noAccessSvgPath"
           />
-          <custom-stage-form v-else-if="isAddingCustomStage" />
+          <custom-stage-form-container
+            v-else-if="isAddingCustomStage"
+            :events="events"
+            :namespace="groupPath"
+          />
           <template v-else>
             <stage-event-list v-if="shouldDisplayStage" :stage="currentStage" :events="events" />
             <gl-empty-state

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

@@ -7,3 +7,6 @@ export const currentStage = ({ stages, selectedStageName }) =>
 export const defaultStage = state => (state.stages.length ? state.stages[0] : null);
 
 export const hasNoAccessError = state => state.errorCode === httpStatus.FORBIDDEN;
+
+export const currentGroupPath = state =>
+  state.selectedGroup ? state.selectedGroup.full_path : null;