Remote connection status

kolibri/core/assets/src/views/CorePage/ImmersivePage.vue

@@ -8,7 +8,11 @@
         :route="route"
         :icon="icon"
         :isFullscreen="primary"
-      />
+      >
+        <template #actions>
+          <slot name="actions"></slot>
+        </template>
+      </ImmersiveToolbar>
       <KLinearLoader
         v-if="loading"
         type="indeterminate"

kolibri/core/assets/src/views/ImmersiveToolbar.vue

@@ -53,6 +53,9 @@
           />
         </span>
       </template>
+      <template #actions>
+        <slot name="actions"></slot>
+      </template>
     </UiToolbar>
   </header>
 

kolibri/plugins/learn/assets/src/views/DeviceConnectionStatus.vue

@@ -0,0 +1,47 @@
+<template>
+
+  <span v-if="!devices.some(device => device.id === deviceId && device.available)">
+    <span class="inner" style="font-size: 14px;">
+      {{ coreString('disconnected') }}
+    </span>
+    <KIconButton
+      icon="disconnected"
+      data-test="disconnected-icon"
+      :color="color"
+      :tooltip="coreString('disconnected')"
+      :ariaLabel="coreString('disconnected')"
+    />
+  </span>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { useDevicesWithFacility } from 'kolibri.coreVue.componentSets.sync';
+
+  export default {
+    name: 'DeviceConnectionStatus',
+    mixins: [commonCoreStrings],
+    setup() {
+      const { devices } = useDevicesWithFacility();
+      return {
+        devices,
+      };
+    },
+    props: {
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      deviceId: {
+        type: String,
+        required: true,
+      },
+      color: {
+        type: String,
+        // 'primary' by default, but could add more later
+        default: 'primary',
+      },
+    },
+  };
+
+</script>

kolibri/plugins/learn/assets/src/views/HomePage/__tests__/HomePage.spec.js

@@ -2,6 +2,7 @@ import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import Vuex from 'vuex';
 
+import { useDevicesWithFacility } from 'kolibri.coreVue.componentSets.sync';
 import { ClassesPageNames } from '../../../constants';
 import HomePage from '../index';
 /* eslint-disable import/named */
@@ -12,23 +13,14 @@ import useLearnerResources, {
   useLearnerResourcesMock,
 } from '../../../composables/useLearnerResources';
 /* eslint-enable import/named */
-
+jest.mock('kolibri.coreVue.componentSets.sync');
 jest.mock('../../../composables/useChannels');
 jest.mock('../../../composables/useUser');
 jest.mock('../../../composables/useDeviceSettings');
 jest.mock('../../../composables/useLearnerResources');
 jest.mock('../../../composables/useContentLink');
-
-jest.mock('kolibri.utils.coreStrings', () => {
-  const translations = {
-    readReference: 'Reference',
-  };
-  return {
-    $tr: jest.fn(key => {
-      return translations[key];
-    }),
-  };
-});
+// Needed to test anything using mount() where children use this composable
+jest.mock('../../../composables/useLearningActivities');
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -95,6 +87,14 @@ describe(`HomePage`, () => {
     useUser.mockImplementation(() => useUserMock());
     useDeviceSettings.mockImplementation(() => useDeviceSettingsMock());
     useLearnerResources.mockImplementation(() => useLearnerResourcesMock());
+    useDevicesWithFacility.mockReturnValue({
+      devices: [
+        {
+          id: '1',
+          available: true,
+        },
+      ],
+    });
   });
 
   it(`smoke test`, () => {

kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue

@@ -9,6 +9,9 @@
     :route="route"
     :title="appBarTitle"
   >
+    <template #actions>
+      <DeviceConnectionStatus :deviceId="deviceId" color="white" />
+    </template>
 
     <template
       v-if="!deviceId"
@@ -30,15 +33,18 @@
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import LearnTopNav from './LearnTopNav';
+  import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
 
   export default {
     name: 'LearnAppBarPage',
     components: {
       AppBarPage,
       ImmersivePage,
       LearnTopNav,
+      DeviceConnectionStatus,
     },
     mixins: [commonCoreStrings],
+
     props: {
       appBarTitle: {
         type: String,

kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue

@@ -66,6 +66,8 @@
             </div>
           </template>
         </CoreMenu>
+        <DeviceConnectionStatus :deviceId="deviceId" />
+
         <KIconButton
           v-for="action in barActions"
           :key="action.id"
@@ -142,8 +144,10 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import SuggestedTime from 'kolibri.coreVue.components.SuggestedTime';
+  import get from 'lodash/get';
   import LearningActivityIcon from './LearningActivityIcon.vue';
   import commonLearnStrings from './commonLearnStrings';
+  import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
 
   export default {
     name: 'LearningActivityBar',
@@ -157,6 +161,7 @@
       UiToolbar,
       TimeDuration,
       SuggestedTime,
+      DeviceConnectionStatus,
     },
     mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],
     /**
@@ -283,6 +288,10 @@
       };
     },
     computed: {
+      deviceId() {
+        return get(this.$route, 'params.deviceId');
+      },
+
       showMarkComplete() {
         return this.allowMarkComplete && this.contentProgress < 1;
       },

kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue

@@ -10,10 +10,14 @@
       v-else-if="!loading"
       :loading="loading"
       :route="back"
-      :appBarTitle="(topic && topic.title) || ''"
+      :appBarTitle="barTitle"
       :appearanceOverrides="{}"
+      :primary="!allowDownloads"
       class="page"
     >
+      <template #actions>
+        <DeviceConnectionStatus :deviceId="deviceId" color="white" />
+      </template>
       <!-- Header with thumbail and tagline -->
       <TopicsHeader
         v-if="!windowIsSmall"
@@ -275,6 +279,7 @@
   import CustomContentRenderer from '../ChannelRenderer/CustomContentRenderer';
   import CategorySearchModal from '../CategorySearchModal';
   import SearchResultsGrid from '../SearchResultsGrid';
+  import DeviceConnectionStatus from '../DeviceConnectionStatus.vue';
   import TopicsHeader from './TopicsHeader';
   import ToggleHeaderTabs from './ToggleHeaderTabs';
   import TopicsMobileHeader from './TopicsMobileHeader';
@@ -315,6 +320,7 @@
       TopicSubsection,
       SearchPanelModal,
       ImmersivePage,
+      DeviceConnectionStatus,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings, commonLearnStrings],
     setup() {
@@ -381,6 +387,11 @@
       allowDownloads() {
         return Boolean(this.deviceId);
       },
+      barTitle() {
+        return this.deviceId
+          ? this.learnString('exploreLibraries')
+          : (this.topic && this.topic.title) || '';
+      },
       childrenToDisplay() {
         return Math.max(this.numCols, 3);
       },

kolibri/plugins/learn/assets/test/views/breadcrumbs.spec.js

@@ -5,6 +5,7 @@ import TopicsPage from '../../src/views/TopicsPage';
 import makeStore from '../makeStore';
 import { PageNames } from '../../src/constants';
 
+jest.mock('kolibri.resources');
 jest.mock('plugin_data', () => {
   return {
     __esModule: true,

kolibri/plugins/learn/assets/test/views/device-connection-status.spec.js

@@ -0,0 +1,50 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { useDevicesWithFacility } from 'kolibri.coreVue.componentSets.sync';
+import DeviceConnectionStatus from '../../src/views/DeviceConnectionStatus';
+
+jest.mock('kolibri.coreVue.componentSets.sync');
+
+function makeWrapper({ propsData } = {}) {
+  return mount(DeviceConnectionStatus, { propsData });
+}
+
+describe('DeviceConnectionStatus', () => {
+  beforeEach(() => {
+    useDevicesWithFacility.mockReturnValue({
+      devices: [
+        {
+          id: '1',
+          available: true,
+        },
+      ],
+    });
+  });
+  it('smoke test', () => {
+    const wrapper = shallowMount(DeviceConnectionStatus, {
+      propsData: {
+        deviceId: '1',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('does not show the disconnected icon', () => {
+    const wrapper = makeWrapper({
+      propsData: {
+        deviceId: '1',
+      },
+    });
+
+    expect(wrapper.find('[data-test="disconnected-icon"]').exists()).toBeFalsy();
+  });
+
+  it('shows the disconnected icon', () => {
+    useDevicesWithFacility.mockReturnValue({ devices: [] });
+    const wrapper = makeWrapper({
+      propsData: {
+        deviceId: '1',
+      },
+    });
+    expect(wrapper.find('[data-test="disconnected-icon"]').exists()).toBeTruthy();
+  });
+});

kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js

@@ -1,13 +1,24 @@
 import { shallowMount, mount } from '@vue/test-utils';
-
+import { useDevicesWithFacility } from 'kolibri.coreVue.componentSets.sync';
 import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
 import LearningActivityBar from '../../src/views/LearningActivityBar';
 
+jest.mock('kolibri.coreVue.componentSets.sync');
 function makeWrapper({ propsData } = {}) {
   return mount(LearningActivityBar, { propsData });
 }
 
 describe('LearningActivityBar', () => {
+  beforeEach(() => {
+    useDevicesWithFacility.mockReturnValue({
+      devices: [
+        {
+          id: '1',
+          available: true,
+        },
+      ],
+    });
+  });
   it('smoke test', () => {
     const wrapper = shallowMount(LearningActivityBar, {
       propsData: {

kolibri/plugins/learn/assets/test/views/topics-page.spec.js

@@ -2,6 +2,7 @@ import VueRouter from 'vue-router';
 
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+import { useDevicesWithFacility } from 'kolibri.coreVue.componentSets.sync';
 import makeStore from '../makeStore';
 import CustomContentRenderer from '../../src/views/ChannelRenderer/CustomContentRenderer';
 import { PageNames } from '../../src/constants';
@@ -10,6 +11,7 @@ import TopicsPage from '../../src/views/TopicsPage';
 import useSearch, { useSearchMock } from '../../src/composables/useSearch';
 import plugin_data from 'plugin_data';
 
+jest.mock('kolibri.coreVue.componentSets.sync');
 jest.mock('plugin_data', () => {
   return {
     __esModule: true,
@@ -64,6 +66,14 @@ describe('TopicsPage', () => {
       ...store.state.core,
       loading: false,
     };
+    useDevicesWithFacility.mockReturnValue({
+      devices: [
+        {
+          id: '1',
+          available: true,
+        },
+      ],
+    });
   });
 
   describe('When current topic modality is CUSTOM_NAVIGATION and custom channel nav is enabled', () => {