Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

11 files changed, 274 insertions, 242 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue
index df77d641e21..11a263015e4 100644
--- a/app/assets/javascripts/cycle_analytics/components/base.vue
+++ b/app/assets/javascripts/cycle_analytics/components/base.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlEmptyState, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import banner from './banner.vue';
 import stageCodeComponent from './stage_code_component.vue';
@@ -39,94 +39,59 @@ export default {
       type: String,
       required: true,
     },
-    store: {
-      type: Object,
-      required: true,
-    },
-    service: {
-      type: Object,
-      required: true,
-    },
   },
   data() {
     return {
-      state: this.store.state,
-      isLoading: false,
-      isLoadingStage: false,
-      isEmptyStage: false,
-      hasError: true,
-      startDate: 30,
       isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
     };
   },
   computed: {
-    currentStage() {
-      return this.store.currentActiveStage();
+    ...mapState([
+      'isLoading',
+      'isLoadingStage',
+      'isEmptyStage',
+      'selectedStage',
+      'selectedStageEvents',
+      'stages',
+      'summary',
+      'startDate',
+    ]),
+    displayStageEvents() {
+      const { selectedStageEvents, isLoadingStage, isEmptyStage } = this;
+      return selectedStageEvents.length && !isLoadingStage && !isEmptyStage;
+    },
+    displayNotEnoughData() {
+      const { selectedStage, isEmptyStage, isLoadingStage } = this;
+      return selectedStage && isEmptyStage && !isLoadingStage;
+    },
+    displayNoAccess() {
+      const { selectedStage } = this;
+      return selectedStage && !selectedStage.isUserAllowed;
     },
-  },
-  created() {
-    this.fetchCycleAnalyticsData();
   },
   methods: {
-    handleError() {
-      this.store.setErrorState(true);
-      return new Flash(__('There was an error while fetching value stream analytics data.'));
-    },
+    ...mapActions([
+      'fetchCycleAnalyticsData',
+      'fetchStageData',
+      'setSelectedStage',
+      'setDateRange',
+    ]),
     handleDateSelect(startDate) {
-      this.startDate = startDate;
-      this.fetchCycleAnalyticsData({ startDate: this.startDate });
+      this.setDateRange({ startDate });
+      this.fetchCycleAnalyticsData();
     },
-    fetchCycleAnalyticsData(options) {
-      const fetchOptions = options || { startDate: this.startDate };
-
-      this.isLoading = true;
-
-      this.service
-        .fetchCycleAnalyticsData(fetchOptions)
-        .then((response) => {
-          this.store.setCycleAnalyticsData(response);
-          this.selectDefaultStage();
-        })
-        .catch(() => {
-          this.handleError();
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
-    selectDefaultStage() {
-      const stage = this.state.stages[0];
-      this.selectStage(stage);
+    isActiveStage(stage) {
+      return stage.slug === this.selectedStage.slug;
     },
     selectStage(stage) {
-      if (this.isLoadingStage) return;
-      if (this.currentStage === stage) return;
+      if (this.selectedStage === stage) return;
 
+      this.setSelectedStage(stage);
       if (!stage.isUserAllowed) {
-        this.store.setActiveStage(stage);
         return;
       }
 
-      this.isLoadingStage = true;
-      this.store.setStageEvents([], stage);
-      this.store.setActiveStage(stage);
-
-      this.service
-        .fetchStageData({
-          stage,
-          startDate: this.startDate,
-          projectIds: this.selectedProjectIds,
-        })
-        .then((response) => {
-          this.isEmptyStage = !response.events.length;
-          this.store.setStageEvents(response.events, stage);
-        })
-        .catch(() => {
-          this.isEmptyStage = true;
-        })
-        .finally(() => {
-          this.isLoadingStage = false;
-        });
+      this.fetchStageData();
     },
     dismissOverviewDialog() {
       this.isOverviewDialogDismissed = true;
@@ -146,12 +111,13 @@ export default {
       <div class="card">
         <div class="card-header">{{ __('Recent Project Activity') }}</div>
         <div class="d-flex justify-content-between">
-          <div v-for="item in state.summary" :key="item.title" class="flex-grow text-center">
+          <div v-for="item in summary" :key="item.title" class="gl-flex-grow-1 gl-text-center">
             <h3 class="header">{{ item.value }}</h3>
             <p class="text">{{ item.title }}</p>
           </div>
           <div class="flex-grow align-self-center text-center">
             <div class="js-ca-dropdown dropdown inline">
+              <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle -->
               <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
                 <span class="dropdown-label">
                   <gl-sprintf :message="$options.i18n.dropdownText">
@@ -207,11 +173,9 @@ export default {
                   </span>
                 </li>
                 <li class="event-header pl-3">
-                  <span
-                    v-if="currentStage && currentStage.legend"
-                    class="stage-name font-weight-bold"
-                    >{{ currentStage ? __(currentStage.legend) : __('Related Issues') }}</span
-                  >
+                  <span v-if="selectedStage" class="stage-name font-weight-bold">{{
+                    selectedStage.legend ? __(selectedStage.legend) : __('Related Issues')
+                  }}</span>
                   <span
                     class="has-tooltip"
                     data-placement="top"
@@ -242,19 +206,19 @@ export default {
             <nav class="stage-nav">
               <ul>
                 <stage-nav-item
-                  v-for="stage in state.stages"
+                  v-for="stage in stages"
                   :key="stage.title"
                   :title="stage.title"
                   :is-user-allowed="stage.isUserAllowed"
                   :value="stage.value"
-                  :is-active="stage.active"
+                  :is-active="isActiveStage(stage)"
                   @select="selectStage(stage)"
                 />
               </ul>
             </nav>
             <section class="stage-events overflow-auto">
               <gl-loading-icon v-show="isLoadingStage" size="lg" />
-              <template v-if="currentStage && !currentStage.isUserAllowed">
+              <template v-if="displayNoAccess">
                 <gl-empty-state
                   class="js-empty-state"
                   :title="__('You need permission.')"
@@ -263,19 +227,19 @@ export default {
                 />
               </template>
               <template v-else>
-                <template v-if="currentStage && isEmptyStage && !isLoadingStage">
+                <template v-if="displayNotEnoughData">
                   <gl-empty-state
                     class="js-empty-state"
-                    :description="currentStage.emptyStageText"
+                    :description="selectedStage.emptyStageText"
                     :svg-path="noDataSvgPath"
                     :title="__('We don\'t have enough data to show this stage.')"
                   />
                 </template>
-                <template v-if="state.events.length && !isLoadingStage && !isEmptyStage">
+                <template v-if="displayStageEvents">
                   <component
-                    :is="currentStage.component"
-                    :stage="currentStage"
-                    :items="state.events"
+                    :is="selectedStage.component"
+                    :stage="selectedStage"
+                    :items="selectedStageEvents"
                   />
                 </template>
               </template>
diff --git a/app/assets/javascripts/cycle_analytics/constants.js b/app/assets/javascripts/cycle_analytics/constants.js
new file mode 100644
index 00000000000..d79de207afe
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/constants.js
@@ -0,0 +1 @@
+export const DEFAULT_DAYS_TO_DISPLAY = 30;
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
deleted file mode 100644
index d7fcda24352..00000000000
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import axios from '~/lib/utils/axios_utils';
-
-export default class CycleAnalyticsService {
-  constructor(options) {
-    this.axios = axios.create({
-      baseURL: options.requestPath,
-    });
-  }
-
-  fetchCycleAnalyticsData(options = { startDate: 30 }) {
-    const { startDate, projectIds } = options;
-
-    return this.axios
-      .get('', {
-        params: {
-          'cycle_analytics[start_date]': startDate,
-          'cycle_analytics[project_ids]': projectIds,
-        },
-      })
-      .then((x) => x.data);
-  }
-
-  fetchStageData(options) {
-    const { stage, startDate, projectIds } = options;
-
-    return this.axios
-      .get(`events/${stage.name}.json`, {
-        params: {
-          'cycle_analytics[start_date]': startDate,
-          'cycle_analytics[project_ids]': projectIds,
-        },
-      })
-      .then((x) => x.data);
-  }
-}
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
deleted file mode 100644
index 24ad6ef4c88..00000000000
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* eslint-disable no-param-reassign */
-
-import { dasherize } from '../lib/utils/text_utility';
-import { __ } from '../locale';
-import DEFAULT_EVENT_OBJECTS from './default_event_objects';
-
-const EMPTY_STAGE_TEXTS = {
-  issue: __(
-    'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
-  ),
-  plan: __(
-    'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
-  ),
-  code: __(
-    'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
-  ),
-  test: __(
-    'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
-  ),
-  review: __(
-    'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
-  ),
-  staging: __(
-    'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
-  ),
-};
-
-export default {
-  state: {
-    summary: '',
-    stats: '',
-    analytics: '',
-    events: [],
-    stages: [],
-  },
-  setCycleAnalyticsData(data) {
-    this.state = Object.assign(this.state, this.decorateData(data));
-  },
-  decorateData(data) {
-    const newData = {};
-
-    newData.stages = data.stats || [];
-    newData.summary = data.summary || [];
-
-    newData.summary.forEach((item) => {
-      item.value = item.value || '-';
-    });
-
-    newData.stages.forEach((item) => {
-      const stageSlug = dasherize(item.name.toLowerCase());
-      item.active = false;
-      item.isUserAllowed = data.permissions[stageSlug];
-      item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
-      item.component = `stage-${stageSlug}-component`;
-      item.slug = stageSlug;
-    });
-    newData.analytics = data;
-    return newData;
-  },
-  setLoadingState(state) {
-    this.state.isLoading = state;
-  },
-  setErrorState(state) {
-    this.state.hasError = state;
-  },
-  deactivateAllStages() {
-    this.state.stages.forEach((stage) => {
-      stage.active = false;
-    });
-  },
-  setActiveStage(stage) {
-    this.deactivateAllStages();
-    stage.active = true;
-  },
-  setStageEvents(events, stage) {
-    this.state.events = this.decorateEvents(events, stage);
-  },
-  decorateEvents(events, stage) {
-    const newEvents = [];
-
-    events.forEach((item) => {
-      if (!item) return;
-
-      const eventItem = { ...DEFAULT_EVENT_OBJECTS[stage.slug], ...item };
-
-      eventItem.totalTime = eventItem.total_time;
-
-      if (eventItem.author) {
-        eventItem.author.webUrl = eventItem.author.web_url;
-        eventItem.author.avatarUrl = eventItem.author.avatar_url;
-      }
-
-      if (eventItem.created_at) eventItem.createdAt = eventItem.created_at;
-      if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha;
-      if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url;
-
-      delete eventItem.author.web_url;
-      delete eventItem.author.avatar_url;
-      delete eventItem.total_time;
-      delete eventItem.created_at;
-      delete eventItem.short_sha;
-      delete eventItem.commit_url;
-
-      newEvents.push(eventItem);
-    });
-
-    return newEvents;
-  },
-  currentActiveStage() {
-    return this.state.stages.find((stage) => stage.active);
-  },
-};
diff --git a/app/assets/javascripts/cycle_analytics/index.js b/app/assets/javascripts/cycle_analytics/index.js
index 42d6700fae1..00192cc61f8 100644
--- a/app/assets/javascripts/cycle_analytics/index.js
+++ b/app/assets/javascripts/cycle_analytics/index.js
@@ -1,31 +1,29 @@
 import Vue from 'vue';
 import Translate from '../vue_shared/translate';
 import CycleAnalytics from './components/base.vue';
-import CycleAnalyticsService from './cycle_analytics_service';
-import CycleAnalyticsStore from './cycle_analytics_store';
+import createStore from './store';
 
 Vue.use(Translate);
 
-const createCycleAnalyticsService = (requestPath) =>
-  new CycleAnalyticsService({
-    requestPath,
-  });
-
 export default () => {
+  const store = createStore();
   const el = document.querySelector('#js-cycle-analytics');
-  const { noAccessSvgPath, noDataSvgPath } = el.dataset;
+  const { noAccessSvgPath, noDataSvgPath, requestPath } = el.dataset;
+
+  store.dispatch('initializeVsa', {
+    requestPath,
+  });
 
   // eslint-disable-next-line no-new
   new Vue({
     el,
     name: 'CycleAnalytics',
+    store,
     render: (createElement) =>
       createElement(CycleAnalytics, {
         props: {
           noDataSvgPath,
           noAccessSvgPath,
-          store: CycleAnalyticsStore,
-          service: createCycleAnalyticsService(el.dataset.requestPath),
         },
       }),
   });
diff --git a/app/assets/javascripts/cycle_analytics/store/actions.js b/app/assets/javascripts/cycle_analytics/store/actions.js
new file mode 100644
index 00000000000..fe3c6d6b3ba
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/store/actions.js
@@ -0,0 +1,51 @@
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
+import * as types from './mutation_types';
+
+export const fetchCycleAnalyticsData = ({
+  state: { requestPath, startDate },
+  dispatch,
+  commit,
+}) => {
+  commit(types.REQUEST_CYCLE_ANALYTICS_DATA);
+
+  return axios
+    .get(requestPath, {
+      params: { 'cycle_analytics[start_date]': startDate },
+    })
+    .then(({ data }) => commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS, data))
+    .then(() => dispatch('setSelectedStage'))
+    .then(() => dispatch('fetchStageData'))
+    .catch(() => {
+      commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR);
+      createFlash({
+        message: __('There was an error while fetching value stream analytics data.'),
+      });
+    });
+};
+
+export const fetchStageData = ({ state: { requestPath, selectedStage, startDate }, commit }) => {
+  commit(types.REQUEST_STAGE_DATA);
+
+  return axios
+    .get(`${requestPath}/events/${selectedStage.name}.json`, {
+      params: { 'cycle_analytics[start_date]': startDate },
+    })
+    .then(({ data }) => commit(types.RECEIVE_STAGE_DATA_SUCCESS, data))
+    .catch(() => commit(types.RECEIVE_STAGE_DATA_ERROR));
+};
+
+export const setSelectedStage = ({ commit, state: { stages } }, selectedStage = null) => {
+  const stage = selectedStage || stages[0];
+  commit(types.SET_SELECTED_STAGE, stage);
+};
+
+export const setDateRange = ({ commit }, { startDate = DEFAULT_DAYS_TO_DISPLAY }) =>
+  commit(types.SET_DATE_RANGE, { startDate });
+
+export const initializeVsa = ({ commit, dispatch }, initialData = {}) => {
+  commit(types.INITIALIZE_VSA, initialData);
+  return dispatch('fetchCycleAnalyticsData');
+};
diff --git a/app/assets/javascripts/cycle_analytics/store/index.js b/app/assets/javascripts/cycle_analytics/store/index.js
new file mode 100644
index 00000000000..ab47538dcf5
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/store/index.js
@@ -0,0 +1,21 @@
+/**
+ * While we are in the process implementing group level features at the project level
+ * we will use a simplified vuex store for the project level, eventually this can be
+ * replaced with the store at ee/app/assets/javascripts/analytics/cycle_analytics/store/index.js
+ * once we have enough of the same features implemented across the project and group level
+ */
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state,
+  });
diff --git a/app/assets/javascripts/cycle_analytics/store/mutation_types.js b/app/assets/javascripts/cycle_analytics/store/mutation_types.js
new file mode 100644
index 00000000000..00aae49ae9f
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/store/mutation_types.js
@@ -0,0 +1,12 @@
+export const INITIALIZE_VSA = 'INITIALIZE_VSA';
+
+export const SET_SELECTED_STAGE = 'SET_SELECTED_STAGE';
+export const SET_DATE_RANGE = 'SET_DATE_RANGE';
+
+export const REQUEST_CYCLE_ANALYTICS_DATA = 'REQUEST_CYCLE_ANALYTICS_DATA';
+export const RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS = 'RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS';
+export const RECEIVE_CYCLE_ANALYTICS_DATA_ERROR = 'RECEIVE_CYCLE_ANALYTICS_DATA_ERROR';
+
+export const REQUEST_STAGE_DATA = 'REQUEST_STAGE_DATA';
+export const RECEIVE_STAGE_DATA_SUCCESS = 'RECEIVE_STAGE_DATA_SUCCESS';
+export const RECEIVE_STAGE_DATA_ERROR = 'RECEIVE_STAGE_DATA_ERROR';
diff --git a/app/assets/javascripts/cycle_analytics/store/mutations.js b/app/assets/javascripts/cycle_analytics/store/mutations.js
new file mode 100644
index 00000000000..8fd5c78339a
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/store/mutations.js
@@ -0,0 +1,52 @@
+import { decorateData, decorateEvents } from '../utils';
+import * as types from './mutation_types';
+
+export default {
+  [types.INITIALIZE_VSA](state, { requestPath }) {
+    state.requestPath = requestPath;
+  },
+  [types.SET_SELECTED_STAGE](state, stage) {
+    state.isLoadingStage = true;
+    state.selectedStage = stage;
+    state.isLoadingStage = false;
+  },
+  [types.SET_DATE_RANGE](state, { startDate }) {
+    state.startDate = startDate;
+  },
+  [types.REQUEST_CYCLE_ANALYTICS_DATA](state) {
+    state.isLoading = true;
+    state.stages = [];
+    state.hasError = false;
+  },
+  [types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, data) {
+    state.isLoading = false;
+    const { stages, summary } = decorateData(data);
+    state.stages = stages;
+    state.summary = summary;
+    state.hasError = false;
+  },
+  [types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR](state) {
+    state.isLoading = false;
+    state.stages = [];
+    state.hasError = true;
+  },
+  [types.REQUEST_STAGE_DATA](state) {
+    state.isLoadingStage = true;
+    state.isEmptyStage = false;
+    state.selectedStageEvents = [];
+    state.hasError = false;
+  },
+  [types.RECEIVE_STAGE_DATA_SUCCESS](state, { events = [] }) {
+    const { selectedStage } = state;
+    state.isLoadingStage = false;
+    state.isEmptyStage = !events.length;
+    state.selectedStageEvents = decorateEvents(events, selectedStage);
+    state.hasError = false;
+  },
+  [types.RECEIVE_STAGE_DATA_ERROR](state) {
+    state.isLoadingStage = false;
+    state.isEmptyStage = true;
+    state.selectedStageEvents = [];
+    state.hasError = true;
+  },
+};
diff --git a/app/assets/javascripts/cycle_analytics/store/state.js b/app/assets/javascripts/cycle_analytics/store/state.js
new file mode 100644
index 00000000000..5db4e1878a9
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/store/state.js
@@ -0,0 +1,17 @@
+import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
+
+export default () => ({
+  requestPath: '',
+  startDate: DEFAULT_DAYS_TO_DISPLAY,
+  stages: [],
+  summary: [],
+  analytics: [],
+  stats: [],
+  selectedStage: {},
+  selectedStageEvents: [],
+  medians: {},
+  hasError: false,
+  isLoading: false,
+  isLoadingStage: false,
+  isEmptyStage: false,
+});
diff --git a/app/assets/javascripts/cycle_analytics/utils.js b/app/assets/javascripts/cycle_analytics/utils.js
new file mode 100644
index 00000000000..3afe4b021be
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/utils.js
@@ -0,0 +1,63 @@
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { dasherize } from '~/lib/utils/text_utility';
+import { __ } from '../locale';
+import DEFAULT_EVENT_OBJECTS from './default_event_objects';
+
+const EMPTY_STAGE_TEXTS = {
+  issue: __(
+    'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
+  ),
+  plan: __(
+    'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
+  ),
+  code: __(
+    'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
+  ),
+  test: __(
+    'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
+  ),
+  review: __(
+    'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
+  ),
+  staging: __(
+    'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
+  ),
+};
+
+/**
+ * These `decorate` methods will be removed when me migrate to the
+ * new table layout https://gitlab.com/gitlab-org/gitlab/-/issues/326704
+ */
+const mapToEvent = (event, stage) => {
+  return convertObjectPropsToCamelCase(
+    {
+      ...DEFAULT_EVENT_OBJECTS[stage.slug],
+      ...event,
+    },
+    { deep: true },
+  );
+};
+
+export const decorateEvents = (events, stage) => events.map((event) => mapToEvent(event, stage));
+
+const mapToStage = (permissions, item) => {
+  const slug = dasherize(item.name.toLowerCase());
+  return {
+    ...item,
+    slug,
+    active: false,
+    isUserAllowed: permissions[slug],
+    emptyStageText: EMPTY_STAGE_TEXTS[slug],
+    component: `stage-${slug}-component`,
+  };
+};
+
+const mapToSummary = ({ value, ...rest }) => ({ ...rest, value: value || '-' });
+
+export const decorateData = (data = {}) => {
+  const { permissions, stats, summary } = data;
+  return {
+    stages: stats?.map((item) => mapToStage(permissions, item)) || [],
+    summary: summary?.map((item) => mapToSummary(item)) || [],
+  };
+};