Merge pull request #7811 from michaelchadwick/frontend-4116-add-ics-t…

…o-main-nav Move ICS Feed button from Ilios Calendar to Main Navigation
ilios · Jul 19, 2024 · 4522f1a · 4522f1a
2 parents e5f841e + 8b7e10f
commit 4522f1a
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 98 deletions.
diff --git a/packages/ilios-common/addon/components/dashboard/navigation.hbs b/packages/ilios-common/addon/components/dashboard/navigation.hbs
@@ -35,5 +35,11 @@
         {{t "general.calendar"}}
       </LinkTo>
     </li>
+    <li>
+      <IcsFeed
+        @url={{this.icsFeedUrl}}
+        @instructions={{this.icsInstructions}}
+      />
+    </li>
   </ul>
 </nav>
diff --git a/packages/ilios-common/addon/components/dashboard/navigation.js b/packages/ilios-common/addon/components/dashboard/navigation.js
@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { dropTask } from 'ember-concurrency';
+
+export default class NavigationComponent extends Component {
+  @service currentUser;
+  @service iliosConfig;
+
+  @tracked icsFeedUrl;
+  @tracked icsInstructions;
+
+  constructor() {
+    super(...arguments);
+    this.setup.perform();
+  }
+
+  setup = dropTask(async () => {
+    const user = await this.currentUser.getModel();
+    const icsFeedKey = user.icsFeedKey;
+    const apiHost = this.iliosConfig.apiHost;
+    const loc = window.location.protocol + '//' + window.location.hostname;
+    const server = apiHost ? apiHost : loc;
+    this.icsFeedUrl = server + '/ics/' + icsFeedKey;
+    this.icsInstructions = 'Copy My ICS Link';
+  });
+}
diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs
@@ -3,20 +3,24 @@
   data-test-ics-feed
   ...attributes
 >
-  <p data-test-instructions>
-    {{@instructions}}
-  </p>
-  <p>
-    <span>
-      <CopyButton @clipboardText={{@url}} @success={{perform this.textCopied}}>
-        <FaIcon @icon="copy" />
-        {{t "general.copyIcsFeedUrl"}}
-      </CopyButton>
-      {{#if this.textCopied.isRunning}}
-        <span class="yes">
-          {{t "general.copiedSuccessfully"}}
-        </span>
-      {{/if}}
-    </span>
-  </p>
+  <CopyButton
+    @clipboardText={{@url}}
+    @success={{perform this.textCopied}}
+    {{!-- template-lint-disable no-at-ember-render-modifiers --}}
+    {{did-insert (set this.copyButton)}}
+    aria-label={{if @instructions @instructions (t "general.copyIcsFeedUrl")}}
+    class="link-button highlight"
+    {{mouse-hover-toggle (set this.showTooltip)}}
+  >
+    <FaIcon @icon="square-rss" />
+  </CopyButton>
+  {{#if (and this.copyButton this.showTooltip)}}
+    <IliosTooltip
+      @target={{this.copyButton}}
+      @options={{this.popperOptions}}
+      class="ics-feed-tooltip"
+    >
+      {{t "general.copyIcsFeedUrl"}}
+    </IliosTooltip>
+  {{/if}}
 </div>
diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js
@@ -1,8 +1,23 @@
 import Component from '@glimmer/component';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { restartableTask } from 'ember-concurrency';
+import { service } from '@ember/service';
 
 export default class IcsFeedComponent extends Component {
+  @service flashMessages;
+
   textCopied = restartableTask(async () => {
-    await timeout(3000);
+    this.flashMessages.success('general.copiedIcsFeedUrl');
   });
+
+  popperOptions = {
+    placement: 'right',
+    modifiers: [
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['bottom'],
+        },
+      },
+    ],
+  };
 }
diff --git a/packages/ilios-common/addon/components/ilios-calendar.hbs b/packages/ilios-common/addon/components/ilios-calendar.hbs
@@ -1,16 +1,5 @@
 <div class="ilios-calendar" data-test-ilios-calendar>
   <ul class="inline calendar-view-picker">
-    <li>
-      <button
-        class="link-button highlight {{if this.showIcsFeed "on"}}"
-        title={{t (if this.showIcsFeed "general.hideIcsFeed" "general.showIcsFeed")}}
-        type="button"
-        {{on "click" (toggle "showIcsFeed" this)}}
-        data-test-ics
-      >
-        <FaIcon @icon="square-rss" />
-      </button>
-    </li>
     {{#each (array "day" "week" "month") as |viewType|}}
       <li data-test-view-mode>
         {{#if (eq @selectedView viewType)}}
@@ -39,12 +28,6 @@
     </li>
   </ul>
   <div class="ilios-calendar-calendar">
-    {{#if this.showIcsFeed}}
-      <IcsFeed
-        @url={{@icsFeedUrl}}
-        @instructions={{@icsInstructions}}
-      />
-    {{/if}}
     <this.calendarViewComponent
       @isLoadingEvents={{@isLoadingEvents}}
       @calendarEvents={{this.sortedEvents}}

diff --git a/packages/ilios-common/addon/components/ilios-calendar.js b/packages/ilios-common/addon/components/ilios-calendar.js
@@ -1,14 +1,11 @@
 import Component from '@glimmer/component';
 import { DateTime } from 'luxon';
-import { tracked } from '@glimmer/tracking';
 import { ensureSafeComponent } from '@embroider/util';
 import IliosCalendarDay from './ilios-calendar-day';
 import IliosCalendarWeek from './ilios-calendar-week';
 import IliosCalendarMonth from './ilios-calendar-month';
 
 export default class IliosCalendarComponent extends Component {
-  @tracked showIcsFeed = false;
-
   get calendarViewComponent() {
     let calendar = IliosCalendarDay;
     if (this.args.selectedView === 'week') {

diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss
@@ -7,6 +7,7 @@
   margin: 0.5rem 0 0 0.5rem;
 
   ul {
+    align-items: center;
     display: flex;
     justify-content: space-around;
     list-style-type: none;
@@ -15,13 +16,34 @@
 
     li {
       margin: 0;
+
+      .ilios-calendar-ics-feed {
+        padding: 0;
+        text-align: center;
+        width: 90%;
+
+        .highlight {
+          @include m.for-phone-only {
+            /* stylelint-disable property-disallowed-list */
+            width: 7vw;
+          }
+          align-items: center;
+          display: flex;
+          color: c.$orange;
+          @include m.font-size("large");
+        }
+      }
     }
 
     @include m.for-tablet-and-up {
       justify-content: flex-start;
 
       li {
         margin-right: 3em;
+
+        &:nth-of-type(3) {
+          margin-right: 0.5em;
+        }
       }
     }
   }

diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-calendar.scss
@@ -48,29 +48,6 @@
     }
   }
 
-  .ilios-calendar-ics-feed {
-    border: 1px dotted c.$orange;
-    margin: auto;
-    margin-bottom: 1em;
-    padding: 2em;
-    text-align: center;
-    width: 90%;
-
-    span {
-      display: inline-block;
-      margin: 0;
-      padding: 0;
-
-      &.yes {
-        color: c.$fernGreen;
-      }
-    }
-
-    button {
-      @include m.ilios-button;
-    }
-  }
-
   .no-content {
     list-style-type: none;
   }

diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss
@@ -38,7 +38,17 @@
     right: -4px;
   }
 
+  &[data-popper-placement^="right"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   &[data-popper-placement^="right"] .arrow {
     left: -4px;
   }
 }
+
+// tooltips are outside the document flow so have to be styled outside the component
+.ilios-tooltip.ics-feed-tooltip .content {
+  max-width: 100%;
+}
diff --git a/packages/ilios-common/translations/en-us.yaml b/packages/ilios-common/translations/en-us.yaml
@@ -59,6 +59,7 @@ general:
   confirmRemove: "Are you sure you want to delete this offering with {learnerGroupCount} learner groups? This action cannot be undone."
   confirmSessionRemoval: Are you sure you want to delete this session?
   contentAuthor: Content Author
+  copiedIcsFeedUrl: Copied My ICS Link successfully
   copiedSuccessfully: Copied Successfully
   copyIcsFeedUrl: Copy My ICS Link
   copyLink: Copy link

diff --git a/packages/ilios-common/translations/es.yaml b/packages/ilios-common/translations/es.yaml
@@ -59,6 +59,7 @@ general:
   confirmRemove: "¿Estás seguro que quieres borrar este ofrecimiento con {learnerGroupCount} grupos de aprendedores? Esta acción no se puede deshacer."
   confirmSessionRemoval: ¿Está seguro que desea eliminar este sessión?
   contentAuthor: Autor del Contenido
+  copiedIcsFeedUrl: Copiado Mi Enlace ICS con Éxito
   copiedSuccessfully: Copiado con Éxito
   copyIcsFeedUrl: Copiar Mi Enlace ICS
   copyLink: Copiar el enlace

diff --git a/packages/ilios-common/translations/fr.yaml b/packages/ilios-common/translations/fr.yaml
@@ -59,6 +59,7 @@ general:
   confirmRemove: "Êtes-vous sûr vous voulez supprimer cette offre avec {learnerGroupCount} groupes d'apprenants?  Ça action ne peut pas être défait."
   confirmSessionRemoval: Êtes vous sûr de vouloir supprimer cette séance?
   contentAuthor: Auteur
+  copiedIcsFeedUrl: Copié mon lien ICS avec succès
   copiedSuccessfully: Copié avec succès
   copyIcsFeedUrl: Copier mon lien ICS
   copyLink: Copier le lien

diff --git a/packages/test-app/tests/integration/components/ics-feed-test.js b/packages/test-app/tests/integration/components/ics-feed-test.js
@@ -7,14 +7,6 @@ import { component } from 'ilios-common/page-objects/components/ics-feed';
 module('Integration | Component | ics feed', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it show instructions', async function (assert) {
-    const instructions = 'SOME TEST INS';
-    this.set('instructions', instructions);
-    await render(hbs`<IcsFeed @instructions={{this.instructions}} />
-`);
-    assert.strictEqual(component.instructions, instructions);
-  });
-
   test('copy', async function (assert) {
     //skip this test if we can't access the clipboard
     if (!navigator.clipboard) {
@@ -31,8 +23,7 @@ module('Integration | Component | ics feed', function (hooks) {
     };
     this.set('url', url);
     this.set('instructions', instructions);
-    await render(hbs`<IcsFeed @instructions={{this.instructions}} @url={{this.url}} />
-`);
+    await render(hbs`<IcsFeed @instructions={{this.instructions}} @url={{this.url}} />`);
     await component.copy.click();
     // undo writeText overwrite.
     navigator.clipboard.writeText = writeText;

diff --git a/packages/test-app/tests/integration/components/ilios-calendar-test.js b/packages/test-app/tests/integration/components/ilios-calendar-test.js
@@ -106,31 +106,4 @@ module('Integration | Component | ilios calendar', function (hooks) {
     assert.strictEqual(component.goBack.linksTo, '/dashboard/calendar?date=2015-08-30');
     assert.strictEqual(component.goForward.linksTo, '/dashboard/calendar?date=2015-10-30');
   });
-
-  test('toggle ics feed visibility', async function (assert) {
-    const date = DateTime.fromObject({
-      year: 2015,
-      month: 9,
-      day: 30,
-      hour: 12,
-      minute: 0,
-      second: 0,
-    });
-    this.set('date', date.toJSDate());
-
-    await render(hbs`<IliosCalendar
-      @selectedDate={{this.date}}
-      @selectedView="month"
-      @calendarEvents={{(array)}}
-      @changeDate={{(noop)}}
-      @changeView={{(noop)}}
-      @selectEvent={{(noop)}}
-    />
-`);
-    assert.notOk(component.icsFeed.isVisible);
-    await component.icsFeedToggle.click();
-    assert.ok(component.icsFeed.isVisible);
-    await component.icsFeedToggle.click();
-    assert.notOk(component.icsFeed.isVisible);
-  });
 });