From 7a2e58d25bd98c3889fb4d39ae8c3182534cd7b3 Mon Sep 17 00:00:00 2001
From: Michaela <michaela@learningequality.org>
Date: Fri, 4 Jun 2021 12:19:28 +0200
Subject: [PATCH] Add learning activity bar component

---
 .../assets/src/views/LearningActivityBar.vue  | 268 ++++++++++++++++++
 .../test/views/learning-activity-bar.spec.js  | 194 +++++++++++++
 2 files changed, 462 insertions(+)
 create mode 100644 kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
 create mode 100644 kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js

diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
new file mode 100644
index 00000000000..00f31d9dab9
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -0,0 +1,268 @@
+<template>
+
+  <UiToolbar>
+    <KLabeledIcon :style="{ 'margin-top': '8px' }">
+      <template #icon>
+        <LearningActivityIcon
+          v-if="learningActivityKind"
+          data-test="learningActivityIcon"
+          :kind="learningActivityKind"
+        />
+      </template>
+      <TextTruncator
+        :text="resourceTitle"
+        :maxHeight="30"
+      />
+    </KLabeledIcon>
+
+    <template #icon>
+      <KIconButton
+        icon="back"
+        data-test="backButton"
+        @click="onBackButtonClick"
+      />
+    </template>
+
+    <template #actions>
+      <KIconButton
+        v-for="action in barActions"
+        :key="action.id"
+        :data-test="`bar_${action.dataTest}`"
+        :icon="action.icon"
+        :color="action.iconColor"
+        :tooltip="action.label"
+        @click="onActionClick(action.event)"
+      />
+
+      <span class="menu-wrapper">
+        <KIconButton
+          v-if="menuActions.length"
+          ref="menuButton"
+          data-test="menuButton"
+          icon="optionsHorizontal"
+          tooltip="More options"
+          @click="toggleMenu"
+        />
+        <CoreMenu
+          v-show="isMenuOpen"
+          ref="menu"
+          class="menu"
+          :raised="true"
+          :isOpen="isMenuOpen"
+          :containFocus="true"
+          @close="closeMenu"  
+        >
+          <template #options>
+            <CoreMenuOption
+              v-for="action in menuActions"
+              :key="action.id"
+              :data-test="`menu_${action.dataTest}`"
+              :style="{ 'cursor': 'pointer' }"
+              @select="onActionClick(action.event)"
+            >
+              <KLabeledIcon>
+                <template #icon>
+                  <KIcon
+                    :icon="action.icon" 
+                    :color="action.iconColor"  
+                  />
+                </template>
+                <div>{{ action.label }}</div>
+              </KLabeledIcon>
+            </CoreMenuOption>
+          </template>
+        </CoreMenu>
+      </span>
+    </template>
+  </UiToolbar>
+
+</template>
+
+
+<script>
+
+  import difference from 'lodash/difference';
+  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
+  import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
+  import UiToolbar from 'kolibri.coreVue.components.UiToolbar';
+  import TextTruncator from 'kolibri.coreVue.components.TextTruncator';
+  import { LearningActivityKinds } from 'kolibri.coreVue.vuex.constants';
+  import LearningActivityIcon from './LearningActivityIcon.vue';
+
+  export default {
+    name: 'LearningActivityBar',
+    components: {
+      CoreMenu,
+      CoreMenuOption,
+      UiToolbar,
+      TextTruncator,
+      LearningActivityIcon,
+    },
+    mixins: [KResponsiveWindowMixin],
+    props: {
+      resourceTitle: {
+        type: String,
+        required: true,
+      },
+      /**
+       * Learning activity constant
+       */
+      learningActivityKind: {
+        type: String,
+        required: true,
+        validator(value) {
+          return Object.values(LearningActivityKinds).includes(value);
+        },
+      },
+      /**
+       * Is the bar used in the context of a lesson?
+       * There are slight differences in rendering
+       * related to the context, e.g. action buttons labels.
+       */
+      isLessonContext: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      isBookmarked: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      /**
+       * Does a resource have the option to be
+       * manually marked as complete?
+       * Used to determine if a button for this action
+       * should be displayed.
+       */
+      allowMarkComplete: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isMenuOpen: false,
+      };
+    },
+    computed: {
+      allActions() {
+        const actions = [
+          {
+            id: 'view-resource-list',
+            icon: 'resourceList',
+            label: this.isLessonContext ? 'View lesson plan' : 'View topic resources',
+            event: 'viewResourceList',
+            dataTest: this.isLessonContext ? 'viewLessonPlanButton' : 'viewTopicResourcesButton',
+          },
+          {
+            id: 'bookmark',
+            icon: this.isBookmarked ? 'bookmark' : 'bookmarkEmpty',
+            label: this.isBookmarked ? 'Remove from bookmarks' : 'Save to bookmarks',
+            event: 'toogleBookmark',
+            dataTest: this.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton',
+          },
+        ];
+        if (this.allowMarkComplete) {
+          actions.push({
+            id: 'mark-complete',
+            icon: 'star',
+            iconColor: this.$themePalette.yellow.v_700,
+            label: 'Mark resource as finished',
+            event: 'markComplete',
+            dataTest: 'markCompleteButton',
+          });
+        }
+        actions.push({
+          id: 'view-info',
+          icon: 'info',
+          label: 'View information',
+          event: 'viewInfo',
+          dataTest: 'viewInfoButton',
+        });
+
+        return actions;
+      },
+      barActions() {
+        const actions = [];
+        if (this.windowBreakpoint >= 1) {
+          actions.push(this.allActions.find(action => action.id === 'view-resource-list'));
+        }
+        if (this.windowBreakpoint >= 2) {
+          actions.push(this.allActions.find(action => action.id === 'bookmark'));
+          if (!this.allowMarkComplete) {
+            actions.push(this.allActions.find(action => action.id === 'view-info'));
+          }
+        }
+        return actions;
+      },
+      menuActions() {
+        return difference(this.allActions, this.barActions);
+      },
+    },
+    created() {
+      window.addEventListener('click', this.onWindowClick);
+    },
+    beforeDestroy() {
+      window.removeEventListener('click', this.onWindowClick);
+    },
+    methods: {
+      closeMenu({ focusMenuButton = true } = {}) {
+        this.isMenuOpen = false;
+        if (!focusMenuButton) {
+          return;
+        }
+        this.$nextTick(() => {
+          this.$refs.menuButton.$el.focus();
+        });
+      },
+      toggleMenu() {
+        this.isMenuOpen = !this.isMenuOpen;
+        if (!this.isMenuOpen) {
+          return;
+        }
+        this.$nextTick(() => {
+          this.$refs.menu.$el.focus();
+        });
+      },
+      onBackButtonClick() {
+        this.$emit('navigateBack');
+      },
+      onActionClick(actionEvent) {
+        this.$emit(actionEvent);
+      },
+      onWindowClick(event) {
+        if (!this.isMenuOpen) {
+          return;
+        }
+        // close menu on outside click
+        if (
+          !this.$refs.menu.$el.contains(event.target) &&
+          !this.$refs.menuButton.$el.contains(event.target)
+        ) {
+          this.closeMenu({ focusMenuButton: false });
+        }
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .menu-wrapper {
+    position: relative;
+  }
+
+  .menu {
+    position: absolute;
+    top: 50%;
+    right: 10px; // right-align to the menu icon
+    min-width: 270px;
+    transform: translateY(16px);
+  }
+
+</style>
diff --git a/kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js b/kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js
new file mode 100644
index 00000000000..b0258478d69
--- /dev/null
+++ b/kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js
@@ -0,0 +1,194 @@
+import { shallowMount, mount } from '@vue/test-utils';
+
+import { LearningActivityKinds } from 'kolibri.coreVue.vuex.constants';
+import LearningActivityBar from '../../src/views/LearningActivityBar';
+
+function makeWrapper({ propsData } = {}) {
+  return mount(LearningActivityBar, { propsData });
+}
+
+describe('LearningActivityBar', () => {
+  it('smoke test', () => {
+    const wrapper = shallowMount(LearningActivityBar);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should show a resource title in the bar', () => {
+    const wrapper = makeWrapper({
+      propsData: { resourceTitle: 'Practice and applications of math' },
+    });
+    expect(wrapper.text()).toContain('Practice and applications of math');
+  });
+
+  it('should show the back button in the bar', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('[data-test="backButton"]').exists()).toBeTruthy();
+  });
+
+  it('should emit `navigateBack` event on the back button click', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('[data-test="backButton"]').trigger('click');
+    expect(wrapper.emitted().navigateBack.length).toBe(1);
+  });
+
+  it('should show a learning activity icon in the bar', () => {
+    const wrapper = makeWrapper({
+      propsData: {
+        learningActivityKind: LearningActivityKinds.WATCH,
+      },
+    });
+    expect(wrapper.find('[data-test="learningActivityIcon"]').exists()).toBeTruthy();
+  });
+
+  // Although there are basic tests for distribution
+  // of action buttons between the bar and the menu in the following tests,
+  // their position can further change based on the window size.
+  // Purpose of these tests is rather functional. Testing all screen
+  // sizes here would result in a huge test case and it needs to be
+  // tested visually anyways. For that reason, the following tests always
+  // assume a large screen.
+  describe('on a large screen', () => {
+    describe('in the lesson context', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { isLessonContext: true } });
+      });
+
+      it("shouldn't show 'View topic resources' button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_viewTopicResourcesButton']").exists()).toBeFalsy();
+      });
+
+      it("should show 'View lesson plan' button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_viewLessonPlanButton']").exists()).toBeTruthy();
+      });
+
+      it("should emit `viewResourceList` event on the 'View lesson plan' button click", () => {
+        wrapper.find('[data-test="bar_viewLessonPlanButton"]').trigger('click');
+        expect(wrapper.emitted().viewResourceList.length).toBe(1);
+      });
+    });
+
+    describe('in the non-lesson context', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { isLessonContext: false } });
+      });
+
+      it("shouldn't show 'View lesson plan' button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_viewLessonPlanButton']").exists()).toBeFalsy();
+      });
+
+      it("should show 'View topic resources' button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_viewTopicResourcesButton']").exists()).toBeTruthy();
+      });
+
+      it("should emit `viewResourceList` event on the 'View topic resources' button click", () => {
+        wrapper.find('[data-test="bar_viewTopicResourcesButton"]').trigger('click');
+        expect(wrapper.emitted().viewResourceList.length).toBe(1);
+      });
+    });
+
+    describe('when a resource is bookmarked', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { isBookmarked: true } });
+      });
+
+      it("shouldn't show the add bookmark button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_addBookmarkButton']").exists()).toBeFalsy();
+      });
+
+      it('should show the remove bookmark button in the bar', () => {
+        expect(wrapper.find("[data-test='bar_removeBookmarkButton']").exists()).toBeTruthy();
+      });
+
+      it('should emit `toogleBookmark` event on the remove bookmark button click', () => {
+        wrapper.find("[data-test='bar_removeBookmarkButton']").trigger('click');
+        expect(wrapper.emitted().toogleBookmark.length).toBe(1);
+      });
+    });
+
+    describe('when a resource is not bookmarked', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { isBookmarked: false } });
+      });
+
+      it("shouldn't show the remove bookmark button in the bar", () => {
+        expect(wrapper.find("[data-test='bar_removeBookmarkButton']").exists()).toBeFalsy();
+      });
+
+      it('should show the add bookmark button in the bar', () => {
+        expect(wrapper.find("[data-test='bar_addBookmarkButton']").exists()).toBeTruthy();
+      });
+
+      it('should emit `toogleBookmark` event on the add bookmark button click', () => {
+        wrapper.find("[data-test='bar_addBookmarkButton']").trigger('click');
+        expect(wrapper.emitted().toogleBookmark.length).toBe(1);
+      });
+    });
+
+    describe('if a resource can be manually marked as complete', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { allowMarkComplete: true } });
+      });
+
+      it('should show the menu button', () => {
+        expect(wrapper.find("[data-test='menuButton']").exists()).toBeTruthy();
+      });
+
+      it("should show 'Mark resource as finished' button in the menu", () => {
+        expect(wrapper.find("[data-test='bar_markCompleteButton']").exists()).toBeFalsy();
+        expect(wrapper.find("[data-test='menu_markCompleteButton']").exists()).toBeTruthy();
+      });
+
+      it("should emit `markComplete` event on the 'Mark resource as finished' button click", () => {
+        wrapper.find("[data-test='menu_markCompleteButton']").vm.$emit('select');
+        expect(wrapper.emitted().markComplete.length).toBe(1);
+      });
+
+      it("should show 'View information' button in the menu", () => {
+        expect(wrapper.find("[data-test='bar_viewInfoButton']").exists()).toBeFalsy();
+        expect(wrapper.find("[data-test='menu_viewInfoButton']").exists()).toBeTruthy();
+      });
+
+      it("should emit `viewInfo` event on the 'View information' menu button click", () => {
+        wrapper.find("[data-test='menu_viewInfoButton']").vm.$emit('select');
+        expect(wrapper.emitted().viewInfo.length).toBe(1);
+      });
+    });
+
+    describe("if a resource can't be manually marked as complete", () => {
+      let wrapper;
+
+      beforeEach(() => {
+        wrapper = makeWrapper({ propsData: { allowMarkComplete: false } });
+      });
+
+      it("shouldn't show the menu button", () => {
+        expect(wrapper.find("[data-test='menuButton']").exists()).toBeFalsy();
+      });
+
+      it("shouldn't show 'Mark resource as finished' button", () => {
+        expect(wrapper.find("[data-test='bar_markCompleteButton']").exists()).toBeFalsy();
+        expect(wrapper.find("[data-test='menu_markCompleteButton']").exists()).toBeFalsy();
+      });
+
+      it("should show 'View information' button in the bar", () => {
+        expect(wrapper.find("[data-test='menu_viewInfoButton']").exists()).toBeFalsy();
+        expect(wrapper.find("[data-test='bar_viewInfoButton']").exists()).toBeTruthy();
+      });
+
+      it("should emit `viewInfo` event on the 'View information' bar button click", () => {
+        wrapper.find("[data-test='bar_viewInfoButton']").trigger('click');
+        expect(wrapper.emitted().viewInfo.length).toBe(1);
+      });
+    });
+  });
+});