Oncall schedule collapse UI

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

@@ -4,6 +4,7 @@ import {
   GlButtonGroup,
   GlCard,
   GlCollapse,
+  GlIcon,
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -63,6 +64,7 @@ export default {
     GlButtonGroup,
     GlCard,
     GlCollapse,
+    GlIcon,
     AddEditRotationModal,
     DeleteRotationModal,
     DeleteScheduleModal,
@@ -177,7 +179,7 @@ export default {
         : this.$options.i18n.scheduleClose;
     },
     scheduleVisibleAngleIcon() {
-      return this.scheduleVisible ? 'angle-up' : 'angle-down';
+      return this.scheduleVisible ? 'angle-down' : 'angle-right';
     },
     selectedTimezone() {
       return this.timezones.find((tz) => tz.identifier === this.schedule.timezone);
@@ -231,13 +233,28 @@ export default {
 
 <template>
   <div>
-    <gl-card class="gl-mt-5" header-class="gl-py-3">
+    <gl-card
+      class="gl-mt-5"
+      :class="{ 'gl-border-bottom-0': !scheduleVisible }"
+      :body-class="{ 'gl-p-0': !scheduleVisible }"
+      header-class="gl-py-3"
+    >
       <template #header>
         <div
           class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-m-0"
           data-testid="scheduleHeader"
         >
-          <span class="gl-font-weight-bold gl-font-lg">{{ schedule.name }}</span>
+          <div class="gl-font-weight-bold gl-font-lg">
+            <gl-icon
+              v-gl-tooltip
+              class="gl-hover-cursor-pointer"
+              :aria-label="scheduleVisibleAriaLabel"
+              :size="12"
+              :name="scheduleVisibleAngleIcon"
+              @click="scheduleVisible = !scheduleVisible"
+            />
+            <span class="gl-pl-2">{{ schedule.name }}</span>
+          </div>
           <gl-button-group>
             <gl-button
               v-gl-modal="editScheduleModalId"
@@ -253,12 +270,6 @@ export default {
               icon="remove"
               :aria-label="$options.i18n.deleteScheduleLabel"
             />
-            <gl-button
-              v-gl-tooltip
-              :icon="scheduleVisibleAngleIcon"
-              :aria-label="scheduleVisibleAriaLabel"
-              @click="scheduleVisible = !scheduleVisible"
-            />
           </gl-button-group>
         </div>
       </template>

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

-import { GlButton, GlCard, GlCollapse } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon, GlCollapse } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -104,6 +104,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 findCollapsibleIcon = () => wrapper.findComponent(GlIcon);
 
   it('shows schedule title', () => {
     expect(findScheduleHeader().text()).toBe(mockSchedule.name);
@@ -160,11 +161,13 @@ describe('On-call schedule', () => {
 
   it('renders a open card for the first in the list by default', () => {
     expect(findCollapsible().attributes('visible')).toBe('true');
+    expect(findCollapsibleIcon().props('name')).toBe('angle-down');
   });
 
   it('renders a collapsed card if not the first in the list by default', () => {
     createComponent({ scheduleIndex: 1 });
     expect(findCollapsible().attributes('visible')).toBeUndefined();
+    expect(findCollapsibleIcon().props('name')).toBe('angle-right');
   });
 
   describe('Timeframe shift preset type', () => {