Merge branch '333236-fix-collapsing-card-quirck' into 'master'

Fix card jumping content on collapse

See merge request gitlab-org/gitlab!66562

ee/app/assets/javascripts/escalation_policies/components/escalation_policy.vue

@@ -70,6 +70,7 @@ export default {
   data() {
     return {
       isPolicyVisible: this.index === 0,
+      bodyClass: '',
     };
   },
   computed: {
@@ -94,7 +95,7 @@ export default {
     <gl-card
       class="gl-mt-5"
       :class="{ 'gl-border-bottom-0': !isPolicyVisible }"
-      :body-class="{ 'gl-p-0': !isPolicyVisible }"
+      :body-class="bodyClass"
       :header-class="{ 'gl-py-3': true, 'gl-rounded-base': !isPolicyVisible }"
     >
       <template #header>
@@ -129,7 +130,11 @@ export default {
           </gl-button-group>
         </div>
       </template>
-      <gl-collapse :visible="isPolicyVisible">
+      <gl-collapse
+        :visible="isPolicyVisible"
+        @hidden="bodyClass = 'gl-p-0'"
+        @show="bodyClass = 'gl-p-5'"
+      >
         <p v-if="policy.description" class="gl-text-gray-500 gl-mb-5">
           {{ policy.description }}
         </p>

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -125,6 +125,7 @@ export default {
       rotations: this.schedule.rotations.nodes,
       rotationToUpdate: {},
       scheduleVisible: this.scheduleIndex === 0,
+      bodyClass: this.scheduleIndex === 0 ? 'gl-p-5' : 'gl-p-0',
     };
   },
   computed: {
@@ -236,7 +237,7 @@ export default {
     <gl-card
       class="gl-mt-5"
       :class="{ 'gl-border-bottom-0': !scheduleVisible }"
-      :body-class="{ 'gl-p-0': !scheduleVisible }"
+      :body-class="bodyClass"
       :header-class="{ 'gl-py-3': true, 'gl-rounded-small': !scheduleVisible }"
     >
       <template #header>
@@ -270,7 +271,11 @@ export default {
           </gl-button-group>
         </div>
       </template>
-      <gl-collapse :visible="scheduleVisible">
+      <gl-collapse
+        :visible="scheduleVisible"
+        @hidden="bodyClass = 'gl-p-0'"
+        @show="bodyClass = 'gl-p-5'"
+      >
         <p class="gl-text-gray-500 gl-mb-5" data-testid="scheduleBody">
           {{ scheduleInfo }}
         </p>

ee/spec/frontend/escalation_policies/__snapshots__/escalation_policy_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`EscalationPolicy renders a policy with rules 1`] = `
 <div>
   <gl-card-stub
-    bodyclass="[object Object]"
+    bodyclass=""
     class="gl-mt-5"
     footerclass=""
     headerclass="[object Object]"

ee/spec/frontend/escalation_policies/escalation_policy_spec.js

-import { GlSprintf, GlIcon } from '@gitlab/ui';
+import { GlSprintf, GlIcon, GlCard, GlCollapse } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
+import { nextTick } from 'vue';
 import EditEscalationPolicyModal from 'ee/escalation_policies/components/add_edit_escalation_policy_modal.vue';
 import DeleteEscalationPolicyModal from 'ee/escalation_policies/components/delete_escalation_policy_modal.vue';
 import EscalationPolicy, { i18n } from 'ee/escalation_policies/components/escalation_policy.vue';
@@ -39,6 +40,8 @@ describe('EscalationPolicy', () => {
   const findDeleteModal = () => wrapper.findComponent(DeleteEscalationPolicyModal);
   const findEditModal = () => wrapper.findComponent(EditEscalationPolicyModal);
   const findWarningIcon = () => wrapper.findComponent(GlIcon);
+  const findGlCard = () => wrapper.findComponent(GlCard);
+  const findGlCollapse = () => wrapper.findComponent(GlCollapse);
 
   it('renders a policy with rules', () => {
     expect(wrapper.element).toMatchSnapshot();
@@ -78,4 +81,18 @@ describe('EscalationPolicy', () => {
       });
     });
   });
+
+  describe('Card collapsing behavior', () => {
+    it('adds content body padding when it is expanded', async () => {
+      findGlCollapse().vm.$emit('show');
+      await nextTick();
+      expect(findGlCard().props('bodyClass')).toBe('gl-p-5');
+    });
+
+    it('removes content body padding when it is collapsed', async () => {
+      findGlCollapse().vm.$emit('hidden');
+      await nextTick();
+      expect(findGlCard().props('bodyClass')).toBe('gl-p-0');
+    });
+  });
 });

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -102,6 +102,7 @@ describe('On-call schedule', () => {
   const findLoadPreviousTimeframeBtn = () => wrapper.findByTestId('previous-timeframe-btn');
   const findLoadNextTimeframeBtn = () => wrapper.findByTestId('next-timeframe-btn');
   const findCollapsible = () => wrapper.findComponent(GlCollapse);
+  const findGlCard = () => wrapper.findComponent(GlCard);
   const findCollapsibleIcon = () => wrapper.findComponent(GlIcon);
 
   it('shows schedule title', () => {
@@ -256,6 +257,20 @@ describe('On-call schedule', () => {
     });
   });
 
+  describe('Card collapsing behavior', () => {
+    it('adds content body padding when it is expanded', async () => {
+      findCollapsible().vm.$emit('show');
+      await nextTick();
+      expect(findGlCard().props('bodyClass')).toBe('gl-p-5');
+    });
+
+    it('removes content body padding when it is collapsed', async () => {
+      findCollapsible().vm.$emit('hidden');
+      await nextTick();
+      expect(findGlCard().props('bodyClass')).toBe('gl-p-0');
+    });
+  });
+
   describe('with Apollo mock', () => {
     it('renders rotations list from API response when resolved', async () => {
       createComponent();