Add latest changes from gitlab-org/gitlab@master

6 files changed, 94 insertions, 29 deletions

diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
index d05a0761ae3..051ab710e5f 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
@@ -18,7 +18,6 @@ export default {
   modalOptions: {
     ref: 'modal',
     modalId: 'deploy-freeze-modal',
-    title: __('Add deploy freeze'),
     actionCancel: {
       text: __('Cancel'),
     },
@@ -30,10 +29,13 @@ export default {
     cronSyntaxInstructions: __(
       'Define a custom deploy freeze pattern with %{cronSyntaxStart}cron syntax%{cronSyntaxEnd}',
     ),
+    addTitle: __('Add deploy freeze'),
+    editTitle: __('Edit deploy freeze'),
   },
   computed: {
     ...mapState([
       'projectId',
+      'selectedId',
       'selectedTimezone',
       'timezoneData',
       'freezeStartCron',
@@ -45,9 +47,9 @@ export default {
     ]),
     addDeployFreezeButton() {
       return {
-        text: __('Add deploy freeze'),
+        text: this.isEditing ? __('Save deploy freeze') : __('Add deploy freeze'),
         attributes: [
-          { variant: 'success' },
+          { variant: 'confirm' },
           {
             disabled:
               !isValidCron(this.freezeStartCron) ||
@@ -77,9 +79,17 @@ export default {
         this.setSelectedTimezone(selectedTimezone);
       },
     },
+    isEditing() {
+      return Boolean(this.selectedId);
+    },
+    modalTitle() {
+      return this.isEditing
+        ? this.$options.translations.editTitle
+        : this.$options.translations.addTitle;
+    },
   },
   methods: {
-    ...mapActions(['addFreezePeriod', 'setSelectedTimezone', 'resetModal']),
+    ...mapActions(['addFreezePeriod', 'updateFreezePeriod', 'setSelectedTimezone', 'resetModal']),
     resetModalHandler() {
       this.resetModal();
     },
@@ -89,6 +99,13 @@ export default {
       }
       return '';
     },
+    submit() {
+      if (this.isEditing) {
+        this.updateFreezePeriod();
+      } else {
+        this.addFreezePeriod();
+      }
+    },
   },
 };
 </script>
@@ -96,8 +113,9 @@ export default {
 <template>
   <gl-modal
     v-bind="$options.modalOptions"
+    :title="modalTitle"
     :action-primary="addDeployFreezeButton"
-    @primary="addFreezePeriod"
+    @primary="submit"
     @canceled="resetModalHandler"
   >
     <p>
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
index 0d6657973c3..6ce934dbaea 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTable, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
 
 export default {
   fields: [
@@ -17,9 +17,16 @@ export default {
       key: 'cronTimezone',
       label: s__('DeployFreeze|Time zone'),
     },
+    {
+      key: 'edit',
+      label: s__('DeployFreeze|Edit'),
+    },
   ],
   translations: {
-    addDeployFreeze: __('Add deploy freeze'),
+    addDeployFreeze: s__('DeployFreeze|Add deploy freeze'),
+    emptyStateText: s__(
+      'DeployFreeze|No deploy freezes exist for this project. To add one, select %{strongStart}Add deploy freeze%{strongEnd}',
+    ),
   },
   components: {
     GlTable,
@@ -39,7 +46,7 @@ export default {
     this.fetchFreezePeriods();
   },
   methods: {
-    ...mapActions(['fetchFreezePeriods']),
+    ...mapActions(['fetchFreezePeriods', 'setFreezePeriod']),
   },
 };
 </script>
@@ -53,15 +60,20 @@ export default {
       show-empty
       stacked="lg"
     >
+      <template #cell(cronTimezone)="{ item }">
+        {{ item.cronTimezone.formattedTimezone }}
+      </template>
+      <template #cell(edit)="{ item }">
+        <gl-button
+          v-gl-modal.deploy-freeze-modal
+          icon="pencil"
+          data-testid="edit-deploy-freeze"
+          @click="setFreezePeriod(item)"
+        />
+      </template>
       <template #empty>
         <p data-testid="empty-freeze-periods" class="gl-text-center text-plain">
-          <gl-sprintf
-            :message="
-              s__(
-                'DeployFreeze|No deploy freezes exist for this project. To add one, click %{strongStart}Add deploy freeze%{strongEnd}',
-              )
-            "
-          >
+          <gl-sprintf :message="$options.translations.emptyStateText">
             <template #strong="{ content }">
               <strong>{{ content }}</strong>
             </template>
@@ -73,7 +85,7 @@ export default {
       v-gl-modal.deploy-freeze-modal
       data-testid="add-deploy-freeze"
       category="primary"
-      variant="success"
+      variant="confirm"
     >
       {{ $options.translations.addDeployFreeze }}
     </gl-button>
diff --git a/app/assets/javascripts/deploy_freeze/store/actions.js b/app/assets/javascripts/deploy_freeze/store/actions.js
index 62045d2517d..56e45595dc5 100644
--- a/app/assets/javascripts/deploy_freeze/store/actions.js
+++ b/app/assets/javascripts/deploy_freeze/store/actions.js
@@ -3,37 +3,53 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
-export const requestAddFreezePeriod = ({ commit }) => {
+export const requestFreezePeriod = ({ commit }) => {
   commit(types.REQUEST_ADD_FREEZE_PERIOD);
 };
 
-export const receiveAddFreezePeriodSuccess = ({ commit }) => {
+export const receiveFreezePeriodSuccess = ({ commit }) => {
   commit(types.RECEIVE_ADD_FREEZE_PERIOD_SUCCESS);
 };
 
-export const receiveAddFreezePeriodError = ({ commit }, error) => {
+export const receiveFreezePeriodError = ({ commit }, error) => {
   commit(types.RECEIVE_ADD_FREEZE_PERIOD_ERROR, error);
 };
 
-export const addFreezePeriod = ({ state, dispatch, commit }) => {
-  dispatch('requestAddFreezePeriod');
+const receiveFreezePeriod = (store, request) => {
+  const { dispatch, commit } = store;
+  dispatch('requestFreezePeriod');
 
-  return Api.createFreezePeriod(state.projectId, {
-    freeze_start: state.freezeStartCron,
-    freeze_end: state.freezeEndCron,
-    cron_timezone: state.selectedTimezoneIdentifier,
-  })
+  request(store)
     .then(() => {
-      dispatch('receiveAddFreezePeriodSuccess');
+      dispatch('receiveFreezePeriodSuccess');
       commit(types.RESET_MODAL);
       dispatch('fetchFreezePeriods');
     })
     .catch((error) => {
       createFlash(__('Error: Unable to create deploy freeze'));
-      dispatch('receiveAddFreezePeriodError', error);
+      dispatch('receiveFreezePeriodError', error);
     });
 };
 
+export const addFreezePeriod = (store) =>
+  receiveFreezePeriod(store, ({ state }) =>
+    Api.createFreezePeriod(state.projectId, {
+      freeze_start: state.freezeStartCron,
+      freeze_end: state.freezeEndCron,
+      cron_timezone: state.selectedTimezoneIdentifier,
+    }),
+  );
+
+export const updateFreezePeriod = (store) =>
+  receiveFreezePeriod(store, ({ state }) =>
+    Api.updateFreezePeriod(state.projectId, {
+      id: state.selectedId,
+      freeze_start: state.freezeStartCron,
+      freeze_end: state.freezeEndCron,
+      cron_timezone: state.selectedTimezoneIdentifier,
+    }),
+  );
+
 export const fetchFreezePeriods = ({ commit, state }) => {
   commit(types.REQUEST_FREEZE_PERIODS);
 
@@ -46,6 +62,13 @@ export const fetchFreezePeriods = ({ commit, state }) => {
     });
 };
 
+export const setFreezePeriod = ({ commit }, freezePeriod) => {
+  commit(types.SET_SELECTED_ID, freezePeriod.id);
+  commit(types.SET_SELECTED_TIMEZONE, freezePeriod.cronTimezone);
+  commit(types.SET_FREEZE_START_CRON, freezePeriod.freezeStart);
+  commit(types.SET_FREEZE_END_CRON, freezePeriod.freezeEnd);
+};
+
 export const setSelectedTimezone = ({ commit }, timezone) => {
   commit(types.SET_SELECTED_TIMEZONE, timezone);
 };
diff --git a/app/assets/javascripts/deploy_freeze/store/mutation_types.js b/app/assets/javascripts/deploy_freeze/store/mutation_types.js
index 47a4874a5cf..8e6fdfd4443 100644
--- a/app/assets/javascripts/deploy_freeze/store/mutation_types.js
+++ b/app/assets/javascripts/deploy_freeze/store/mutation_types.js
@@ -6,6 +6,7 @@ export const RECEIVE_ADD_FREEZE_PERIOD_SUCCESS = 'RECEIVE_ADD_FREEZE_PERIOD_SUCC
 export const RECEIVE_ADD_FREEZE_PERIOD_ERROR = 'RECEIVE_ADD_FREEZE_PERIOD_ERROR';
 
 export const SET_SELECTED_TIMEZONE = 'SET_SELECTED_TIMEZONE';
+export const SET_SELECTED_ID = 'SET_SELECTED_ID';
 export const SET_FREEZE_START_CRON = 'SET_FREEZE_START_CRON';
 export const SET_FREEZE_END_CRON = 'SET_FREEZE_END_CRON';
 
diff --git a/app/assets/javascripts/deploy_freeze/store/mutations.js b/app/assets/javascripts/deploy_freeze/store/mutations.js
index 3b34f3950e6..e62000c007c 100644
--- a/app/assets/javascripts/deploy_freeze/store/mutations.js
+++ b/app/assets/javascripts/deploy_freeze/store/mutations.js
@@ -4,7 +4,11 @@ import * as types from './mutation_types';
 const formatTimezoneName = (freezePeriod, timezoneList) =>
   convertObjectPropsToCamelCase({
     ...freezePeriod,
-    cron_timezone: timezoneList.find((tz) => tz.identifier === freezePeriod.cron_timezone)?.name,
+    cron_timezone: {
+      formattedTimezone: timezoneList.find((tz) => tz.identifier === freezePeriod.cron_timezone)
+        ?.name,
+      identifier: freezePeriod.cronTimezone,
+    },
   });
 
 export default {
@@ -45,10 +49,15 @@ export default {
     state.freezeEndCron = freezeEndCron;
   },
 
+  [types.SET_SELECTED_ID](state, id) {
+    state.selectedId = id;
+  },
+
   [types.RESET_MODAL](state) {
     state.freezeStartCron = '';
     state.freezeEndCron = '';
     state.selectedTimezone = '';
     state.selectedTimezoneIdentifier = '';
+    state.selectedId = '';
   },
 };
diff --git a/app/assets/javascripts/deploy_freeze/store/state.js b/app/assets/javascripts/deploy_freeze/store/state.js
index 4cc38c097b6..1b16b4c645b 100644
--- a/app/assets/javascripts/deploy_freeze/store/state.js
+++ b/app/assets/javascripts/deploy_freeze/store/state.js
@@ -6,6 +6,7 @@ export default ({
   selectedTimezoneIdentifier = '',
   freezeStartCron = '',
   freezeEndCron = '',
+  selectedId = '',
 }) => ({
   projectId,
   freezePeriods,
@@ -14,4 +15,5 @@ export default ({
   selectedTimezoneIdentifier,
   freezeStartCron,
   freezeEndCron,
+  selectedId,
 });