Move ICS Feed button from Ilios Calendar to Main Navigation

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>

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';
+  });
+}

packages/ilios-common/addon/components/ics-feed.hbs

@@ -3,20 +3,22 @@
   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)}}
+    title={{if @instructions @instructions 'Copy My ICS Link'}}
+    class="link-button highlight"
+  >
+    <FaIcon @icon="square-rss" />
+  </CopyButton>
+  {{#if (and this.copyButton this.textCopied.isRunning)}}
+    <IliosTooltip
+      @target={{this.copyButton}}
+      class="ics-feed-display-success-message-tooltip"
+    >
+      {{t "general.copiedSuccessfully"}}
+    </IliosTooltip>
+  {{/if}}
 </div>

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}}

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') {

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: 3vw;
+          }
+          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;
+        }
       }
     }
   }
@@ -42,3 +64,11 @@
     }
   }
 }
+
+// tooltips are outside the document flow so have to be styled outside the component
+.ics-feed-display-success-message-tooltip {
+  padding: 0;
+  &.ilios-tooltip .content {
+    max-width: 100%;
+  }
+}

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;
   }

packages/test-app/tests/integration/components/ics-feed-test.js

@@ -9,14 +9,6 @@ module('Integration | Component | ics feed', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks, 'en-us');
 
-  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) {
@@ -33,8 +25,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;

packages/test-app/tests/integration/components/ilios-calendar-test.js

@@ -108,31 +108,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);
-  });
 });