Merge pull request #10703 from Wck-iipi/10313Solution

Gives indication of user having permission to join the facility not showing the devices that don't have sign up enabled.
learningequality · Jun 9, 2023 · 9025057 · 9025057
2 parents 0e2dc3a + eae1aa8
commit 9025057
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/SelectDeviceForm.vue b/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/SelectDeviceForm.vue
@@ -38,10 +38,10 @@
             :key="idx"
             v-model="selectedDeviceId"
             class="radio-button"
-            :value="d.id"
+            :value="canLearnerSignUp(d.id) ? d.id : false"
             :label="d.nickname"
             :description="d.base_url"
-            :disabled="formDisabled || !isDeviceAvailable(d.id)"
+            :disabled="!canLearnerSignUp(d.id) || formDisabled || !isDeviceAvailable(d.id)"
           />
           <KButton
             :key="`forget-${idx}`"
@@ -65,10 +65,13 @@
             :key="d.id"
             v-model="selectedDeviceId"
             class="radio-button"
-            :value="d.instance_id"
+            :value="canLearnerSignUp(d.id) ? d.instance_id : false"
             :label="formatNameAndId(d.device_name, d.id)"
             :description="formatBaseDevice(d)"
-            :disabled="formDisabled || fetchFailed || !isDeviceAvailable(d.id)"
+            :disabled="!canLearnerSignUp(d.id)
+              || formDisabled
+              || fetchFailed
+              || !isDeviceAvailable(d.id)"
           />
         </div>
       </template>
@@ -133,8 +136,8 @@
 
 <script>
 
-  import { computed } from 'kolibri.lib.vueCompositionApi';
-  import { useLocalStorage, get } from '@vueuse/core';
+  import { computed, ref } from 'kolibri.lib.vueCompositionApi';
+  import { useLocalStorage, get, computedAsync } from '@vueuse/core';
   import find from 'lodash/find';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -147,6 +150,7 @@
     useDevicesForLearnOnlyDevice,
   } from './useDevices.js';
   import useConnectionChecker from './useConnectionChecker.js';
+  import { deviceFacilityCanSignUp } from './api.js';
 
   export default {
     name: 'SelectDeviceForm',
@@ -196,6 +200,24 @@
       const discoveredDevices = computed(() => get(devices).filter(d => d.dynamic));
       const savedDevices = computed(() => get(devices).filter(d => !d.dynamic));
 
+      const isLoading = ref(false);
+
+      const lodsWithSignupFacility = computedAsync(
+        async () => {
+          const devicesAvailable = get(devices);
+          const allDevices = {};
+          for (const i of devicesAvailable) {
+            const canSignUp = await deviceFacilityCanSignUp(i.id);
+            if (canSignUp) {
+              allDevices[i.id] = true;
+            }
+          }
+          return allDevices;
+        },
+        {},
+        isLoading
+      );
+
       return {
         // useDevices
         devices,
@@ -215,6 +237,7 @@
         discoveredDevices,
         savedDevices,
         storageDeviceId,
+        lodsWithSignupFacility,
       };
     },
     props: {
@@ -366,6 +389,9 @@
           this.$emit('removed_address');
         });
       },
+      canLearnerSignUp(id) {
+        return this.lodsWithSignupFacility && id in this.lodsWithSignupFacility;
+      },
     },
     $trs: {
       deletingFailedText: {

diff --git a/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/__test__/SelectDeviceForm.spec.js b/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/__test__/SelectDeviceForm.spec.js
@@ -6,6 +6,7 @@ jest.mock('../api.js', () => ({
   fetchDevices: jest.fn(),
   deleteDevice: jest.fn().mockResolvedValue(),
   updateConnectionStatus: jest.fn(),
+  deviceFacilityCanSignUp: jest.fn().mockResolvedValue(true),
 }));
 
 const devices = [
@@ -39,7 +40,13 @@ const staticDevices = devices.map(a => ({ ...a, dynamic: false }));
 const dynamicDevices = devices.map(a => ({ ...a, dynamic: true }));
 
 function makeWrapper() {
-  const wrapper = shallowMount(SelectDeviceForm);
+  const deviceIdMap = devices.reduce((acc, device) => {
+    acc[device.id] = device;
+    return acc;
+  }, {});
+  const wrapper = shallowMount(SelectDeviceForm, {
+    mocks: { lodsWithSignupFacility: deviceIdMap },
+  });
   // prettier-ignore
   const els = {
     KModal: () => wrapper.findComponent({ name: 'KModal' }),

diff --git a/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/api.js b/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/api.js
@@ -58,3 +58,20 @@ export function channelIsAvailableAtDevice(channelId, device) {
 export function updateConnectionStatus(device) {
   return NetworkLocationResource.updateConnectionStatus(device.id);
 }
+
+/**
+ * @param {string} deviceId
+ * @return {Promise<boolean>}
+ */
+export function deviceFacilityCanSignUp(deviceId) {
+  return NetworkLocationResource.fetchFacilities(deviceId).then(({ device_id, facilities }) => {
+    if (deviceId === device_id) {
+      for (const facility of facilities) {
+        if (facility.learner_can_sign_up) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+}