actions.js 10.9 KB
Newer Older
1
import createFlash from '~/flash';
2 3
import { s__ } from '~/locale';

4 5 6 7
import { EXTEND_AS } from '../constants';
import epicChildEpics from '../queries/epicChildEpics.query.graphql';
import groupEpics from '../queries/groupEpics.query.graphql';
import groupMilestones from '../queries/groupMilestones.query.graphql';
8
import * as epicUtils from '../utils/epic_utils';
Florie Guibert's avatar
Florie Guibert committed
9
import * as roadmapItemUtils from '../utils/roadmap_item_utils';
10 11 12 13 14
import {
  getEpicsTimeframeRange,
  sortEpics,
  extendTimeframeForPreset,
} from '../utils/roadmap_utils';
Florie Guibert's avatar
Florie Guibert committed
15

Kushal Pandya's avatar
Kushal Pandya committed
16 17 18 19
import * as types from './mutation_types';

export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);

20
const fetchGroupEpics = (
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
  { epicIid, fullPath, epicsState, sortedBy, presetType, filterParams, timeframe },
  defaultTimeframe,
) => {
  let query;
  let variables = {
    fullPath,
    state: epicsState,
    sort: sortedBy,
    ...getEpicsTimeframeRange({
      presetType,
      timeframe: defaultTimeframe || timeframe,
    }),
  };

  // When epicIid is present,
  // Roadmap is being accessed from within an Epic,
  // and then we don't need to pass `filterParams`.
  if (epicIid) {
    query = epicChildEpics;
    variables.iid = epicIid;
  } else {
    query = groupEpics;
    variables = {
      ...variables,
      ...filterParams,
46
      first: gon.roadmap_epics_limit + 1,
47
    };
Rajat Jain's avatar
Rajat Jain committed
48 49

    if (filterParams?.epicIid) {
50
      variables.iid = filterParams.epicIid.split('::&').pop();
Rajat Jain's avatar
Rajat Jain committed
51
    }
52 53 54 55 56 57 58 59
  }

  return epicUtils.gqClient
    .query({
      query,
      variables,
    })
    .then(({ data }) => {
60
      const edges = epicIid
61 62
        ? data?.group?.epic?.children?.edges || []
        : data?.group?.epics?.edges || [];
63

64
      return edges.map((e) => e.node);
65 66 67
    });
};

68
export const fetchChildrenEpics = (state, { parentItem }) => {
69 70
  const { iid, group } = parentItem;
  const { filterParams, epicsState } = state;
71 72 73 74

  return epicUtils.gqClient
    .query({
      query: epicChildEpics,
75
      variables: { iid, fullPath: group?.fullPath, state: epicsState, ...filterParams },
76 77 78
    })
    .then(({ data }) => {
      const edges = data?.group?.epic?.children?.edges || [];
79
      return edges.map((e) => e.node);
80 81 82
    });
};

83
export const receiveEpicsSuccess = (
84
  { commit, dispatch, state },
85 86
  { rawEpics, newEpic, timeframeExtended },
) => {
87
  const epicIds = [];
88
  const epics = rawEpics.reduce((filteredEpics, epic) => {
89
    const { presetType, timeframe } = state;
Florie Guibert's avatar
Florie Guibert committed
90
    const formattedEpic = roadmapItemUtils.formatRoadmapItemDetails(
91
      epic,
92 93
      roadmapItemUtils.timeframeStartDate(presetType, timeframe),
      roadmapItemUtils.timeframeEndDate(presetType, timeframe),
94
    );
95 96 97

    formattedEpic.isChildEpic = false;

98 99 100
    // Exclude any Epic that has invalid dates
    // or is already present in Roadmap timeline
    if (
101
      formattedEpic.startDate.getTime() <= formattedEpic.endDate.getTime() &&
102 103 104 105 106 107
      state.epicIds.indexOf(formattedEpic.id) < 0
    ) {
      Object.assign(formattedEpic, {
        newEpic,
      });
      filteredEpics.push(formattedEpic);
108
      epicIds.push(formattedEpic.id);
109 110 111 112
    }
    return filteredEpics;
  }, []);

113
  commit(types.UPDATE_EPIC_IDS, epicIds);
114
  dispatch('initItemChildrenFlags', { epics });
115

116 117 118 119 120 121 122 123 124 125
  if (timeframeExtended) {
    const updatedEpics = state.epics.concat(epics);
    sortEpics(updatedEpics, state.sortedBy);
    commit(types.RECEIVE_EPICS_FOR_TIMEFRAME_SUCCESS, updatedEpics);
  } else {
    commit(types.RECEIVE_EPICS_SUCCESS, epics);
  }
};
export const receiveEpicsFailure = ({ commit }) => {
  commit(types.RECEIVE_EPICS_FAILURE);
126 127 128
  createFlash({
    message: s__('GroupRoadmap|Something went wrong while fetching epics'),
  });
129 130
};

131 132 133 134
export const requestChildrenEpics = ({ commit }, { parentItemId }) => {
  commit(types.REQUEST_CHILDREN_EPICS, { parentItemId });
};
export const receiveChildrenSuccess = (
135
  { commit, dispatch, state },
136 137 138
  { parentItemId, rawChildren },
) => {
  const children = rawChildren.reduce((filteredChildren, epic) => {
139
    const { presetType, timeframe } = state;
140 141
    const formattedChild = roadmapItemUtils.formatRoadmapItemDetails(
      epic,
142 143
      roadmapItemUtils.timeframeStartDate(presetType, timeframe),
      roadmapItemUtils.timeframeEndDate(presetType, timeframe),
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
    );

    formattedChild.isChildEpic = true;

    // Exclude any Epic that has invalid dates
    if (formattedChild.startDate.getTime() <= formattedChild.endDate.getTime()) {
      filteredChildren.push(formattedChild);
    }
    return filteredChildren;
  }, []);
  dispatch('expandEpic', {
    parentItemId,
  });
  dispatch('initItemChildrenFlags', { epics: children });
  commit(types.RECEIVE_CHILDREN_SUCCESS, { parentItemId, children });
};

Coung Ngo's avatar
Coung Ngo committed
161 162
export const fetchEpics = ({ state, commit, dispatch }) => {
  commit(types.REQUEST_EPICS);
163 164

  fetchGroupEpics(state)
165
    .then((rawEpics) => {
166 167 168
      dispatch('receiveEpicsSuccess', { rawEpics });
    })
    .catch(() => dispatch('receiveEpicsFailure'));
169 170
};

Coung Ngo's avatar
Coung Ngo committed
171 172
export const fetchEpicsForTimeframe = ({ state, commit, dispatch }, { timeframe }) => {
  commit(types.REQUEST_EPICS_FOR_TIMEFRAME);
173

174
  return fetchGroupEpics(state, timeframe)
175
    .then((rawEpics) => {
176 177 178 179 180 181 182 183 184
      dispatch('receiveEpicsSuccess', {
        rawEpics,
        newEpic: true,
        timeframeExtended: true,
      });
    })
    .catch(() => dispatch('receiveEpicsFailure'));
};

185 186 187 188 189
/**
 * Adds more EpicItemTimeline cells to the start or end of the roadmap.
 *
 * @param extendAs An EXTEND_AS enum value
 */
190
export const extendTimeframe = ({ commit, state }, { extendAs }) => {
191
  const isExtendTypePrepend = extendAs === EXTEND_AS.PREPEND;
192
  const { presetType, timeframe } = state;
193 194
  const timeframeToExtend = extendTimeframeForPreset({
    extendAs,
195 196 197 198
    presetType,
    initialDate: isExtendTypePrepend
      ? roadmapItemUtils.timeframeStartDate(presetType, timeframe)
      : roadmapItemUtils.timeframeEndDate(presetType, timeframe),
199 200 201 202 203 204 205 206 207
  });

  if (isExtendTypePrepend) {
    commit(types.PREPEND_TIMEFRAME, timeframeToExtend);
  } else {
    commit(types.APPEND_TIMEFRAME, timeframeToExtend);
  }
};

208 209 210 211 212 213 214 215 216 217 218 219 220 221
export const initItemChildrenFlags = ({ commit }, data) =>
  commit(types.INIT_EPIC_CHILDREN_FLAGS, data);

export const expandEpic = ({ commit }, { parentItemId }) =>
  commit(types.EXPAND_EPIC, { parentItemId });
export const collapseEpic = ({ commit }, { parentItemId }) =>
  commit(types.COLLAPSE_EPIC, { parentItemId });

export const toggleEpic = ({ state, dispatch }, { parentItem }) => {
  const parentItemId = parentItem.id;
  if (!state.childrenFlags[parentItemId].itemExpanded) {
    if (!state.childrenEpics[parentItemId]) {
      dispatch('requestChildrenEpics', { parentItemId });
      fetchChildrenEpics(state, { parentItem })
222
        .then((rawChildren) => {
223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240
          dispatch('receiveChildrenSuccess', {
            parentItemId,
            rawChildren,
          });
        })
        .catch(() => dispatch('receiveEpicsFailure'));
    } else {
      dispatch('expandEpic', {
        parentItemId,
      });
    }
  } else {
    dispatch('collapseEpic', {
      parentItemId,
    });
  }
};

241 242 243 244
/**
 * For epics that have no start or end date, this function updates their start and end dates
 * so that the epic bars get longer to appear infinitely scrolling.
 */
245
export const refreshEpicDates = ({ commit, state }) => {
246 247
  const { presetType, timeframe } = state;

248
  const epics = state.epics.map((epic) => {
249
    // Update child epic dates too
250
    if (epic.children?.edges?.length > 0) {
251
      epic.children.edges.map((childEpic) =>
252
        roadmapItemUtils.processRoadmapItemDates(
253
          childEpic,
254 255
          roadmapItemUtils.timeframeStartDate(presetType, timeframe),
          roadmapItemUtils.timeframeEndDate(presetType, timeframe),
256 257 258 259
        ),
      );
    }
    return roadmapItemUtils.processRoadmapItemDates(
Florie Guibert's avatar
Florie Guibert committed
260
      epic,
261 262
      roadmapItemUtils.timeframeStartDate(presetType, timeframe),
      roadmapItemUtils.timeframeEndDate(presetType, timeframe),
263 264
    );
  });
265 266 267 268

  commit(types.SET_EPICS, epics);
};

Florie Guibert's avatar
Florie Guibert committed
269 270 271 272 273 274 275 276 277 278 279 280
export const fetchGroupMilestones = (
  { fullPath, presetType, filterParams, timeframe },
  defaultTimeframe,
) => {
  const query = groupMilestones;
  const variables = {
    fullPath,
    state: 'active',
    ...getEpicsTimeframeRange({
      presetType,
      timeframe: defaultTimeframe || timeframe,
    }),
281
    includeDescendants: true,
Florie Guibert's avatar
Florie Guibert committed
282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304
    ...filterParams,
  };

  return epicUtils.gqClient
    .query({
      query,
      variables,
    })
    .then(({ data }) => {
      const { group } = data;

      const edges = (group.milestones && group.milestones.edges) || [];

      return roadmapItemUtils.extractGroupMilestones(edges);
    });
};

export const requestMilestones = ({ commit }) => commit(types.REQUEST_MILESTONES);

export const fetchMilestones = ({ state, dispatch }) => {
  dispatch('requestMilestones');

  return fetchGroupMilestones(state)
305
    .then((rawMilestones) => {
Florie Guibert's avatar
Florie Guibert committed
306 307 308 309 310 311
      dispatch('receiveMilestonesSuccess', { rawMilestones });
    })
    .catch(() => dispatch('receiveMilestonesFailure'));
};

export const receiveMilestonesSuccess = (
312
  { commit, state },
Florie Guibert's avatar
Florie Guibert committed
313 314
  { rawMilestones, newMilestone }, // timeframeExtended
) => {
315
  const { presetType, timeframe } = state;
Florie Guibert's avatar
Florie Guibert committed
316 317 318 319
  const milestoneIds = [];
  const milestones = rawMilestones.reduce((filteredMilestones, milestone) => {
    const formattedMilestone = roadmapItemUtils.formatRoadmapItemDetails(
      milestone,
320 321
      roadmapItemUtils.timeframeStartDate(presetType, timeframe),
      roadmapItemUtils.timeframeEndDate(presetType, timeframe),
Florie Guibert's avatar
Florie Guibert committed
322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343
    );
    // Exclude any Milestone that has invalid dates
    // or is already present in Roadmap timeline
    if (
      formattedMilestone.startDate.getTime() <= formattedMilestone.endDate.getTime() &&
      state.milestoneIds.indexOf(formattedMilestone.id) < 0
    ) {
      Object.assign(formattedMilestone, {
        newMilestone,
      });
      filteredMilestones.push(formattedMilestone);
      milestoneIds.push(formattedMilestone.id);
    }
    return filteredMilestones;
  }, []);

  commit(types.UPDATE_MILESTONE_IDS, milestoneIds);
  commit(types.RECEIVE_MILESTONES_SUCCESS, milestones);
};

export const receiveMilestonesFailure = ({ commit }) => {
  commit(types.RECEIVE_MILESTONES_FAILURE);
344 345 346
  createFlash({
    message: s__('GroupRoadmap|Something went wrong while fetching milestones'),
  });
Florie Guibert's avatar
Florie Guibert committed
347 348
};

349 350 351
export const refreshMilestoneDates = ({ commit, state }) => {
  const { presetType, timeframe } = state;

352
  const milestones = state.milestones.map((milestone) =>
Florie Guibert's avatar
Florie Guibert committed
353 354
    roadmapItemUtils.processRoadmapItemDates(
      milestone,
355 356
      roadmapItemUtils.timeframeStartDate(presetType, timeframe),
      roadmapItemUtils.timeframeEndDate(presetType, timeframe),
Florie Guibert's avatar
Florie Guibert committed
357 358 359 360 361 362
    ),
  );

  commit(types.SET_MILESTONES, milestones);
};

363
export const setBufferSize = ({ commit }, bufferSize) => commit(types.SET_BUFFER_SIZE, bufferSize);
364 365 366 367 368 369 370

export const setEpicsState = ({ commit }, epicsState) => commit(types.SET_EPICS_STATE, epicsState);

export const setFilterParams = ({ commit }, filterParams) =>
  commit(types.SET_FILTER_PARAMS, filterParams);

export const setSortedBy = ({ commit }, sortedBy) => commit(types.SET_SORTED_BY, sortedBy);