Merge branch '229857-follow-up-from-resolve-set-a-deploy-freeze-in-the-ui' into 'master'

Move deploy freeze timezone manipulation from actions.js to mutations.js

Closes #229857

See merge request gitlab-org/gitlab!37370

app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue

@@ -3,7 +3,7 @@ import { GlFormGroup, GlFormInput, GlModal, GlSprintf, GlLink } from '@gitlab/ui
 import { mapActions, mapState } from 'vuex';
 import { mapComputed } from '~/vuex_shared/bindings';
 import { __ } from '~/locale';
-import { MODAL_ID } from '../constants';
+import { MODAL_ID } from '../utils/constants';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import { isValidCron } from 'cron-validator';
 

app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue

@@ -2,7 +2,7 @@
 import { GlTable, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { mapState, mapActions } from 'vuex';
-import { MODAL_ID } from '../constants';
+import { MODAL_ID } from '../utils/constants';
 
 export default {
   modalId: MODAL_ID,

app/assets/javascripts/deploy_freeze/store/actions.js

@@ -2,7 +2,6 @@ import * as types from './mutation_types';
 import Api from '~/api';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export const requestAddFreezePeriod = ({ commit }) => {
   commit(types.REQUEST_ADD_FREEZE_PERIOD);
@@ -35,26 +34,12 @@ export const addFreezePeriod = ({ state, dispatch, commit }) => {
     });
 };
 
-export const requestFreezePeriods = ({ commit }) => {
+export const fetchFreezePeriods = ({ commit, state }) => {
   commit(types.REQUEST_FREEZE_PERIODS);
-};
-export const receiveFreezePeriodsSuccess = ({ state, commit }, freezePeriods) => {
-  const addTimezoneIdentifier = freezePeriod =>
-    convertObjectPropsToCamelCase({
-      ...freezePeriod,
-      cron_timezone: state.timezoneData.find(tz => tz.identifier === freezePeriod.cron_timezone)
-        ?.name,
-    });
-
-  commit(types.RECEIVE_FREEZE_PERIODS_SUCCESS, freezePeriods.map(addTimezoneIdentifier));
-};
-
-export const fetchFreezePeriods = ({ dispatch, state }) => {
-  dispatch('requestFreezePeriods');
 
   return Api.freezePeriods(state.projectId)
     .then(({ data }) => {
-      dispatch('receiveFreezePeriodsSuccess', convertObjectPropsToCamelCase(data));
+      commit(types.RECEIVE_FREEZE_PERIODS_SUCCESS, data);
     })
     .catch(() => {
       createFlash(__('There was an error fetching the deploy freezes.'));

app/assets/javascripts/deploy_freeze/store/mutations.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import * as types from './mutation_types';
 
+const formatTimezoneName = (freezePeriod, timezoneList) =>
+  convertObjectPropsToCamelCase({
+    ...freezePeriod,
+    cron_timezone: timezoneList.find(tz => tz.identifier === freezePeriod.cron_timezone)?.name,
+  });
+
 export default {
   [types.REQUEST_FREEZE_PERIODS](state) {
     state.isLoading = true;
@@ -7,7 +14,9 @@ export default {
 
   [types.RECEIVE_FREEZE_PERIODS_SUCCESS](state, freezePeriods) {
     state.isLoading = false;
-    state.freezePeriods = freezePeriods;
+    state.freezePeriods = freezePeriods.map(freezePeriod =>
+      formatTimezoneName(freezePeriod, state.timezoneData),
+    );
   },
 
   [types.REQUEST_ADD_FREEZE_PERIOD](state) {

spec/frontend/deploy_freeze/mock_data.js

@@ -9,7 +9,7 @@ export const mockFreezePeriods = [
     id: 3,
     freeze_start: '5 4 * * *',
     freeze_end: '5 9 * 8 *',
-    cron_timezone: 'Eastern Time (US & Canada)',
+    cron_timezone: 'America/New_York',
     created_at: '2020-07-10T05:10:35.122Z',
     updated_at: '2020-07-10T05:10:35.122Z',
   },
@@ -17,7 +17,7 @@ export const mockFreezePeriods = [
     id: 8,
     freeze_start: '0 12 * * 1-5',
     freeze_end: '0 1 5 * *',
-    cron_timezone: 'Mountain Time (US & Canada)',
+    cron_timezone: 'Etc/UTC',
     created_at: '2020-07-10T19:27:57.378Z',
     updated_at: '2020-07-10T19:27:57.378Z',
   },
@@ -25,7 +25,7 @@ export const mockFreezePeriods = [
     id: 9,
     freeze_start: '0 12 * * 1-5',
     freeze_end: '0 16 * * 6',
-    cron_timezone: 'Central Time (US & Canada)',
+    cron_timezone: 'Europe/Berlin',
     created_at: '2020-07-10T19:29:15.240Z',
     updated_at: '2020-07-10T19:29:15.240Z',
   },

spec/frontend/deploy_freeze/store/actions_spec.js

@@ -95,11 +95,11 @@ describe('deploy freeze store actions', () => {
         actions.fetchFreezePeriods,
         {},
         state,
-        [],
         [
-          { type: 'requestFreezePeriods' },
-          { type: 'receiveFreezePeriodsSuccess', payload: mockFreezePeriods },
+          { type: types.REQUEST_FREEZE_PERIODS },
+          { type: types.RECEIVE_FREEZE_PERIODS_SUCCESS, payload: mockFreezePeriods },
         ],
+        [],
       );
     });
 
@@ -110,8 +110,8 @@ describe('deploy freeze store actions', () => {
         actions.fetchFreezePeriods,
         {},
         state,
+        [{ type: types.REQUEST_FREEZE_PERIODS }],
         [],
-        [{ type: 'requestFreezePeriods' }],
         () =>
           expect(createFlash).toHaveBeenCalledWith(
             'There was an error fetching the deploy freezes.',

spec/frontend/deploy_freeze/store/mutations_spec.js

@@ -2,8 +2,9 @@ import state from '~/deploy_freeze/store/state';
 import mutations from '~/deploy_freeze/store/mutations';
 import * as types from '~/deploy_freeze/store/mutation_types';
 import { mockFreezePeriods, mockTimezoneData } from '../mock_data';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
-describe('CI variable list mutations', () => {
+describe('Deploy freeze mutations', () => {
   let stateCopy;
   beforeEach(() => {
     stateCopy = state({
@@ -24,10 +25,17 @@ describe('CI variable list mutations', () => {
   });
 
   describe('RECEIVE_FREEZE_PERIODS_SUCCESS', () => {
-    it('should set environments', () => {
+    it('should set freeze periods and format timezones from identifiers to names', () => {
+      const timezoneNames = ['Eastern Time (US & Canada)', 'UTC', 'Berlin'];
+
       mutations[types.RECEIVE_FREEZE_PERIODS_SUCCESS](stateCopy, mockFreezePeriods);
 
-      expect(stateCopy.freezePeriods).toEqual(mockFreezePeriods);
+      const expectedFreezePeriods = mockFreezePeriods.map((freezePeriod, index) => ({
+        ...convertObjectPropsToCamelCase(freezePeriod),
+        cronTimezone: timezoneNames[index],
+      }));
+
+      expect(stateCopy.freezePeriods).toMatchObject(expectedFreezePeriods);
     });
   });