fix(agenda): replace download cal dropdown with actual links (ietf-tools#5287)

Author: NGPixel

client/agenda/AgendaQuickAccess.vue

@@ -74,7 +74,6 @@
           size='large'
           :show-arrow='true'
           trigger='click'
-          @select='downloadIcs'
           )
           n-button.mt-2(
             id='agenda-quickaccess-addtocal-btn'
@@ -141,14 +140,26 @@ const route = useRoute()
 
 const downloadIcsOptions = [
   {
-    label: 'Subscribe... (webcal)',
     key: 'subscribe',
-    icon: () => h('i', { class: 'bi bi-calendar-week text-blue' })
+    type: 'render',
+    render: () => h('a', {
+      class: 'agenda-quickaccess-callinks',
+      href: `webcal://${window.location.host}${icsLink.value}`
+    }, [
+      h('i', { class: 'bi bi-calendar-week text-blue' }),
+      h('span', 'Subscribe... (webcal)')
+    ])
   },
   {
-    label: 'Download... (.ics)',
     key: 'download',
-    icon: () => h('i', { class: 'bi bi-arrow-down-square' })
+    type: 'render',
+    render: () => h('a', {
+      class: 'agenda-quickaccess-callinks',
+      href: icsLink.value
+    }, [
+      h('i', { class: 'bi bi-arrow-down-square' }),
+      h('span', 'Download... (.ics)')
+    ])
   }
 ]
 
@@ -158,6 +169,17 @@ const shortMode = computed(() => {
   return siteStore.viewport <= 1350
 })
 
+const icsLink = computed(() => {
+  if (agendaStore.pickerMode) {
+    const sessionKeywords = agendaStore.scheduleAdjusted.map(s => s.sessionKeyword)
+    return `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${sessionKeywords.join(',')}`
+  } else if (agendaStore.selectedCatSubs.length > 0) {
+    return `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${agendaStore.selectedCatSubs.join(',')}`
+  } else {
+    return `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}`
+  }
+})
+
 // METHODS
 
 function pickerStart () {
@@ -177,24 +199,6 @@ function pickerDiscard () {
   }
 }
 
-function downloadIcs (key) {
-  message.loading('Generating calendar file... Download will begin shortly.')
-  let icsUrl = ''
-  if (agendaStore.pickerMode) {
-    const sessionKeywords = agendaStore.scheduleAdjusted.map(s => s.sessionKeyword)
-    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${sessionKeywords.join(',')}`
-  } else if (agendaStore.selectedCatSubs.length > 0) {
-    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}?show=${agendaStore.selectedCatSubs.join(',')}`
-  } else {
-    icsUrl = `${getUrl('meetingCalIcs', { meetingNumber: agendaStore.meeting.number })}`
-  }
-  if (key === 'subscribe') {
-    window.location.assign(`webcal://${window.location.host}${icsUrl}`)
-  } else {
-    window.location.assign(icsUrl)
-  }
-}
-
 function scrollToDay (dayId, ev) {
   ev.preventDefault()
   document.getElementById(`agenda-day-${dayId}`)?.scrollIntoView(true)
@@ -284,5 +288,24 @@ function scrollToNow (ev) {
     margin-top: 15px;
     margin-bottom: 15px;
   }
+
+  &-callinks {
+    padding: 8px 16px;
+    display: flex;
+    text-decoration: none;
+    align-items: center;
+
+    &:hover, &:focus {
+      text-decoration: underline;
+    }
+
+    > i {
+      font-size: var(--n-font-size);
+    }
+
+    > span {
+      margin-left: 12px;
+    }
+  }
 }
 </style>

playwright/tests/meeting/agenda.spec.js

@@ -928,7 +928,7 @@ test.describe('past - desktop', () => {
   test('agenda add to calendar', async ({ page }) => {
     await expect(page.locator('#agenda-quickaccess-addtocal-btn')).toContainText('Add to your calendar')
     await page.locator('#agenda-quickaccess-addtocal-btn').click()
-    const ddnLocator = page.locator('.n-dropdown-menu > .n-dropdown-option')
+    const ddnLocator = page.locator('.n-dropdown-menu > div > a.agenda-quickaccess-callinks')
     await expect(ddnLocator).toHaveCount(2)
     await expect(ddnLocator.first()).toContainText('Subscribe')
     await expect(ddnLocator.last()).toContainText('Download')