hides user profile calendar behind toggle-button by default.

app/components/user-profile-calendar.hbs

@@ -1,7 +1,8 @@
 <div
   class="user-profile-calendar"
-    {{did-insert (perform this.load) @user this.date}}
-    {{did-update (perform this.load) @user this.date}}
+  {{did-insert (perform this.load) @user this.date}}
+  {{did-update (perform this.load) @user this.date}}
+  data-test-user-profile-calendar
 >
   <h2 class="title">
     {{t "general.calendar"}}

app/components/user-profile.hbs

@@ -16,7 +16,18 @@
     {{/if}}
   </div>
   <PendingSingleUserUpdate @user={{@user}} @canUpdate={{@canUpdate}} />
+  <div class="user-profile-actions" data-test-user-profile-actions>
+    <ToggleButtons
+      @firstOptionSelected={{not this.showCalendar}}
+      @firstLabel={{t "general.hideCalendar"}}
+      @secondLabel={{t "general.showCalendar"}}
+      @toggle={{toggle "showCalendar" this}}
+    />
+  </div>
   <div class="blocks">
+    {{#if this.showCalendar}}
+      <UserProfileCalendar @user={{@user}} />
+    {{/if}}
     <UserProfileBio
       @user={{@user}}
       @isManageable={{@canUpdate}}
@@ -51,7 +62,7 @@
       @setSchool={{@setPermissionsSchool}}
       @setYear={{@setPermissionsYear}}
     />
-    <UserProfileCalendar @user={{@user}} />
+
     <UserProfile::LearnerGroups @user={{@user}} />
   </div>
 </div>

app/components/user-profile.js

@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
 export default class UserProfileComponent extends Component {
   @service currentUser;
+  @tracked showCalendar = false;
 }

app/styles/components/user-profile.scss

@@ -10,6 +10,12 @@
     text-align: center;
   }
 
+  .user-profile-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 1rem 0 1rem 1rem;
+  }
+
   .blocks {
     @include m.admin-blocks;
   }

tests/integration/components/user-profile-test.js

@@ -0,0 +1,69 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { render } from '@ember/test-helpers';
+import Service from '@ember/service';
+import { hbs } from 'ember-cli-htmlbars';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { component } from 'ilios/tests/pages/components/user-profile';
+
+module('Integration | Component | user-profile', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+  setupMirage(hooks);
+
+  hooks.beforeEach(async function () {
+    const school = this.server.create('school');
+    const program = this.server.create('program', { school });
+    this.programYear = this.server.create('programYear', { program });
+    this.cohort = this.server.create('cohort', { programYear: this.programYear });
+
+    const user = this.server.create('user', { school });
+    const userModel = await this.owner.lookup('service:store').findRecord('user', user.id);
+    class CurrentUserMock extends Service {
+      async getModel() {
+        return userModel;
+      }
+      getRolesInSchool() {
+        return [];
+      }
+    }
+    this.owner.register('service:currentUser', CurrentUserMock);
+  });
+
+  test('user profile calendar', async function (assert) {
+    const user = this.server.create('user');
+    const userModel = await this.owner.lookup('service:store').findRecord('user', user.id);
+    this.set('user', userModel);
+
+    await render(hbs`<UserProfile
+  @user={{this.user}}
+  @canUpdate={{false}}
+  @canCreate={{false}}
+  @isManagingBio={{false}}
+  @setIsManagingBio={{(noop)}}
+  @isManagingRoles={{false}}
+  @setIsManagingRoles={{(noop)}}
+  @isManagingCohorts={{false}}
+  @setIsManagingCohorts={{(noop)}}
+  @isManagingIcs={{false}}
+  @setIsManagingIcs={{(noop)}}
+  @isManagingSchools={{false}}
+  @setIsManagingSchools={{(noop)}}
+  @permissionsSchool={{null}}
+  @permissionsYear={{null}}
+  @setPermissionsSchool={{(noop)}}
+  @setPermissionsYear={{(noop)}}
+    />`);
+
+    assert.notOk(component.calendar.isVisible);
+    assert.strictEqual(component.actions.calendarToggle.firstLabel.text, 'Hide Calendar');
+    assert.ok(component.actions.calendarToggle.firstButton.isChecked);
+    assert.strictEqual(component.actions.calendarToggle.secondLabel.text, 'Show Calendar');
+    assert.notOk(component.actions.calendarToggle.secondButton.isChecked);
+    await component.actions.calendarToggle.secondButton.click();
+    assert.ok(component.calendar.isVisible);
+    await component.actions.calendarToggle.firstButton.click();
+    assert.notOk(component.calendar.isVisible);
+  });
+});

tests/integration/components/visualizer-program-year-objectives-test.js

@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { setupIntl } from 'ember-intl/test-support';
-import { render } from '@ember/test-helpers';
+import { render, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 
@@ -78,6 +78,9 @@ module('Integration | Component | visualizer-program-year-objectives', function
     this.set('programYear', programYearModel);
     await render(hbs`<VisualizerProgramYearObjectives @programYear={{this.programYear}} />`);
 
+    await waitFor('.loaded');
+    await waitFor('svg .links');
+    await waitFor('svg .nodes');
     assert.dom('svg').exists({ count: 1 });
     assert.dom('svg g.links').exists({ count: 1 });
     assert.dom('svg g.nodes').exists({ count: 1 });

tests/pages/components/user-profile-calendar.js

@@ -0,0 +1,9 @@
+import { create } from 'ember-cli-page-object';
+
+// @todo flesh this out. [ST 2023/09/08]
+const definition = {
+  scope: '[data-test-user-profile-calendar]',
+};
+
+export default definition;
+export const component = create(definition);

tests/pages/components/user-profile.js

@@ -0,0 +1,29 @@
+import { create } from 'ember-cli-page-object';
+
+import bio from 'ilios/tests/pages/components/user-profile-bio';
+import calendar from 'ilios/tests/pages/components/user-profile-calendar';
+import cohorts from 'ilios/tests/pages/components/user-profile-cohorts';
+import ics from 'ilios/tests/pages/components/user-profile-ics';
+import learnerGroups from 'ilios/tests/pages/components/user-profile/learner-groups';
+import permissions from 'ilios/tests/pages/components/user-profile-permissions';
+import roles from 'ilios/tests/pages/components/user-profile-roles';
+import toggleButtons from 'ilios-common/page-objects/components/toggle-buttons';
+
+// @todo flesh this out. [ST 2023/09/08]
+const definition = {
+  scope: '[data-test-user-profile]',
+  actions: {
+    scope: '[data-test-user-profile-actions]',
+    calendarToggle: toggleButtons,
+  },
+  bio,
+  calendar,
+  cohorts,
+  learnerGroups,
+  ics,
+  permissions,
+  roles,
+};
+
+export default definition;
+export const component = create(definition);