Merge branch 'tr-on-call-rotation-interval-frontend' into 'master'

Update on-call rotation time interval restrictions

See merge request gitlab-org/gitlab!54280

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue

@@ -101,7 +101,6 @@ export default {
     return {
       participantsArr: [],
       endDateEnabled: false,
-      restrictToTimeEnabled: false,
     };
   },
   methods: {
@@ -295,15 +294,21 @@ export default {
       </gl-card>
 
       <gl-toggle
-        v-model="restrictToTimeEnabled"
+        :value="form.isRestrictedToTime"
         data-testid="restricted-to-toggle"
         :label="$options.i18n.fields.restrictToTime.enableToggle"
         label-position="left"
         class="gl-mt-5"
+        @change="
+          $emit('update-rotation-form', {
+            type: 'isRestrictedToTime',
+            value: !form.isRestrictedToTime,
+          })
+        "
       />
 
       <gl-card
-        v-if="restrictToTimeEnabled"
+        v-if="form.isRestrictedToTime"
         data-testid="restricted-to-time"
         class="gl-mt-5 gl-border-gray-400 gl-bg-gray-10"
       >
@@ -317,15 +322,17 @@ export default {
             <span> {{ __('From') }} </span>
             <gl-dropdown
               data-testid="restricted-from"
-              :text="format24HourTimeStringFromInt(form.restrictedTo.from)"
+              :text="format24HourTimeStringFromInt(form.restrictedTo.startTime)"
               class="gl-px-3"
             >
               <gl-dropdown-item
                 v-for="time in $options.HOURS_IN_DAY"
                 :key="time"
-                :is-checked="form.restrictedTo.from === time"
+                :is-checked="form.restrictedTo.startTime === time"
                 is-check-item
-                @click="$emit('update-rotation-form', { type: 'restrictedTo.from', value: time })"
+                @click="
+                  $emit('update-rotation-form', { type: 'restrictedTo.startTime', value: time })
+                "
               >
                 <span class="gl-white-space-nowrap">
                   {{ format24HourTimeStringFromInt(time) }}</span
@@ -335,15 +342,17 @@ export default {
             <span> {{ __('To') }} </span>
             <gl-dropdown
               data-testid="restricted-to"
-              :text="format24HourTimeStringFromInt(form.restrictedTo.to)"
+              :text="format24HourTimeStringFromInt(form.restrictedTo.endTime)"
               class="gl-px-3"
             >
               <gl-dropdown-item
                 v-for="time in $options.HOURS_IN_DAY"
                 :key="time"
-                :is-checked="form.restrictedTo.to === time"
+                :is-checked="form.restrictedTo.endTime === time"
                 is-check-item
-                @click="$emit('update-rotation-form', { type: 'restrictedTo.to', value: time })"
+                @click="
+                  $emit('update-rotation-form', { type: 'restrictedTo.endTime', value: time })
+                "
               >
                 <span class="gl-white-space-nowrap">
                   {{ format24HourTimeStringFromInt(time) }}</span

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_modal.vue

 <script>
 import { GlModal, GlAlert } from '@gitlab/ui';
-import { set } from 'lodash';
+import { cloneDeep, set } from 'lodash';
 import { LENGTH_ENUM } from 'ee/oncall_schedules/constants';
 import createOncallScheduleRotationMutation from 'ee/oncall_schedules/graphql/mutations/create_oncall_schedule_rotation.mutation.graphql';
 import updateOncallScheduleRotationMutation from 'ee/oncall_schedules/graphql/mutations/update_oncall_schedule_rotation.mutation.graphql';
@@ -21,9 +21,30 @@ export const i18n = {
   cancel: __('Cancel'),
 };
 
+export const formEmptyState = {
+  name: '',
+  participants: [],
+  rotationLength: {
+    length: 1,
+    unit: LENGTH_ENUM.days,
+  },
+  startsAt: {
+    date: null,
+    time: 0,
+  },
+  endsAt: {
+    date: null,
+    time: 0,
+  },
+  isRestrictedToTime: false,
+  restrictedTo: {
+    startTime: 0,
+    endTime: 0,
+  },
+};
+
 export default {
   i18n,
-  LENGTH_ENUM,
   components: {
     GlModal,
     GlAlert,
@@ -67,26 +88,7 @@ export default {
       participants: [],
       loading: false,
       ptSearchTerm: '',
-      form: {
-        name: '',
-        participants: [],
-        rotationLength: {
-          length: 1,
-          unit: this.$options.LENGTH_ENUM.days,
-        },
-        startsAt: {
-          date: null,
-          time: 0,
-        },
-        endsAt: {
-          date: null,
-          time: 0,
-        },
-        restrictedTo: {
-          from: 0,
-          to: 0,
-        },
-      },
+      form: cloneDeep(formEmptyState),
       error: '',
       validationState: {
         name: true,
@@ -134,7 +136,7 @@ export default {
         endsAt: { date: endDate, time: endTime },
       } = this.form;
 
-      return {
+      const variables = {
         projectPath: this.projectPath,
         scheduleIid: this.schedule.iid,
         name,
@@ -154,6 +156,13 @@ export default {
         },
         participants: getParticipantsForSave(participants),
       };
+      if (this.form.isRestrictedToTime) {
+        variables.activePeriod = {
+          startTime: format24HourTimeStringFromInt(this.form.restrictedTo.startTime),
+          endTime: format24HourTimeStringFromInt(this.form.restrictedTo.endTime),
+        };
+      }
+      return variables;
     },
     title() {
       return this.isEditMode ? this.$options.i18n.editRotation : this.$options.i18n.addRotation;
@@ -273,6 +282,9 @@ export default {
         this.validationState.endsAt = this.isEndDateValid;
       }
     },
+    afterCloseModal() {
+      this.form = cloneDeep(formEmptyState);
+    },
   },
 };
 </script>
@@ -286,6 +298,7 @@ export default {
     :action-cancel="actionsProps.cancel"
     modal-class="rotations-modal"
     @primary.prevent="isEditMode ? editRotation() : createRotation()"
+    @hide="afterCloseModal"
   >
     <gl-alert v-if="error" variant="danger" @dismiss="error = ''">
       {{ error || $options.i18n.errorMsg }}

ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue

@@ -135,6 +135,7 @@ export default {
               :title="$options.i18n.editRotationLabel"
               icon="pencil"
               :aria-label="$options.i18n.editRotationLabel"
+              @click="setRotationToUpdate(rotation)"
             />
             <gl-button
               v-gl-modal="$options.deleteRotationModalId"

ee/app/assets/javascripts/oncall_schedules/graphql/fragments/oncall_schedule_rotation.fragment.graphql

@@ -7,6 +7,10 @@ fragment OnCallRotation on IncidentManagementOncallRotation {
   endsAt
   length
   lengthUnit
+  activePeriod {
+    startTime
+    endTime
+  }
   participants {
     nodes {
       ...OnCallParticipant

ee/spec/frontend/oncall_schedule/mocks/apollo_mock.js

@@ -10,6 +10,7 @@ export const participants = [
     name: 'test',
     avatar: '',
     avatarUrl: '',
+    webUrl: '',
   },
   {
     id: '2',
@@ -17,6 +18,7 @@ export const participants = [
     name: 'hello',
     avatar: '',
     avatarUrl: '',
+    webUrl: '',
   },
 ];
 
@@ -142,6 +144,10 @@ export const createRotationResponse = {
         endsAt: '2021-03-17T12:00:00Z',
         length: 5,
         lengthUnit: 'WEEKS',
+        activePeriod: {
+          startTime: '02:00',
+          endTime: '10:00',
+        },
         participants: {
           nodes: [
             {
@@ -176,6 +182,10 @@ export const createRotationResponseWithErrors = {
         endsAt: '2021-03-17T12:00:00Z',
         length: 5,
         lengthUnit: 'WEEKS',
+        activePeriod: {
+          startTime: '02:00',
+          endTime: '10:00',
+        },
         participants: {
           nodes: [
             {

ee/spec/frontend/oncall_schedule/mocks/mock_rotation.json

@@ -5,6 +5,10 @@
     "endsAt": "2021-03-13T10:04:56.333Z",
     "length": 1,
     "lengthUnit": "WEEKS",
+    "activePeriod": {
+      "startTime": "02:00",
+      "endTime": "10:00"
+    },
     "participants": {
       "nodes": [
         {
@@ -58,6 +62,10 @@
     "endsAt": "2021-03-13T10:04:56.333Z",
     "length": 1,
     "lengthUnit": "WEEKS",
+    "activePeriod": {
+      "startTime": "02:00",
+      "endTime": "10:00"
+    },
     "participants": {
       "nodes": [
         {
@@ -107,6 +115,10 @@
     "endsAt": "2021-01-10T10:04:56.333Z",
     "length": 1,
     "lengthUnit": "WEEKS",
+    "activePeriod": {
+      "startTime": "02:00",
+      "endTime": "10:00"
+    },
     "participants": {
       "nodes": [
         {
@@ -156,6 +168,10 @@
   "endsAt": "2021-01-11T10:04:56.333Z",
   "length": 1,
   "lengthUnit": "WEEKS",
+  "activePeriod": {
+    "startTime": "02:00",
+    "endTime": "10:00"
+  },
   "participants": {
     "nodes": [
       {

ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_modal_spec.js

-import { GlModal, GlAlert } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlAlert, GlModal } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import AddEditRotationForm from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue';
 import AddEditRotationModal, {
@@ -18,6 +18,7 @@ import {
   createRotationResponse,
   createRotationResponseWithErrors,
 } from '../../mocks/apollo_mock';
+import mockRotation from '../../mocks/mock_rotation.json';
 
 jest.mock('~/flash');
 
@@ -102,6 +103,7 @@ describe('AddEditRotationModal', () => {
       propsData: {
         modalId: addRotationModalId,
         schedule,
+        rotation: mockRotation[0],
       },
       apolloProvider: fakeApollo,
       data() {