handle refresh in nav guard, not onMounted, avoid whole setup() function this way

Author: nucleogenesis

kolibri/plugins/facility/assets/src/views/users/sidePanels/AssignCoachesSidePanel.vue

@@ -99,7 +99,7 @@
 
 <script>
 
-  import { onMounted, ref, computed } from 'vue';
+  import { ref, computed } from 'vue';
   import { useRoute } from 'vue-router/composables';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import KIcon from 'kolibri-design-system/lib/KIcon';
@@ -111,6 +111,7 @@
   import FacilityUserResource from 'kolibri-common/apiResources/FacilityUserResource';
   import flatMap from 'lodash/flatMap';
   import CloseConfirmationGuard from '../common/CloseConfirmationGuard.vue';
+  import { PageNames } from '../../../constants.js';
   import { getRootRouteName, overrideRoute } from '../../../utils';
   import SelectableList from '../../common/SelectableList.vue';
   import { _userState } from '../../../modules/mappers';
@@ -141,13 +142,6 @@
         },
       });
 
-      onMounted(() => {
-        // Answering the question "what happens when we refresh?"
-        if (props.selectedUsers.size === 0) {
-          goBack();
-        }
-      });
-
       const {
         coachesAssignedNotice$,
         assignCoachUndoneNotice$,
@@ -325,6 +319,19 @@
         default: () => {},
       },
     },
+    beforeRouteEnter(to, from, next) {
+      // We can't land here without having navigated to here from the users root page - we can't
+      // have selected any users if we load into this page, so go to the users table.
+      if (from.name === null) {
+        next(
+          // Override to to keep params like facility_id in place
+          overrideRoute(to, {
+            name: PageNames.USER_MGMT_PAGE,
+          }),
+        );
+      }
+      next();
+    },
     beforeRouteLeave(to, from, next) {
       this.$refs.closeConfirmationGuardRef?.beforeRouteLeave(to, from, next);
     },

kolibri/plugins/facility/assets/src/views/users/sidePanels/EnrollLearnersSidePanel.vue

@@ -103,7 +103,7 @@
 <script>
 
   import { useRoute } from 'vue-router/composables';
-  import { onMounted, getCurrentInstance, ref, computed } from 'vue';
+  import { getCurrentInstance, ref, computed } from 'vue';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { useGoBack } from 'kolibri-common/composables/usePreviousRoute';
@@ -112,6 +112,7 @@
   import groupBy from 'lodash/groupBy';
   import SelectableList from '../../common/SelectableList.vue';
   import useActionWithUndo from '../../../composables/useActionWithUndo';
+  import { PageNames } from '../../../constants.js';
   import { getRootRouteName, overrideRoute } from '../../../utils';
   import CloseConfirmationGuard from '../common/CloseConfirmationGuard.vue';
 
@@ -134,13 +135,6 @@
         },
       });
 
-      onMounted(() => {
-        // Answering the question "what happens when we refresh?"
-        if (props.selectedUsers.size === 0) {
-          goBack();
-        }
-      });
-
       const loading = ref(false);
       const showErrorWarning = ref(false);
       const selectedOptions = ref([]);
@@ -302,6 +296,19 @@
         default: () => {},
       },
     },
+    beforeRouteEnter(to, from, next) {
+      // We can't land here without having navigated to here from the users root page - we can't
+      // have selected any users if we load into this page, so go to the users table.
+      if (from.name === null) {
+        next(
+          // Override to to keep params like facility_id in place
+          overrideRoute(to, {
+            name: PageNames.USER_MGMT_PAGE,
+          }),
+        );
+      }
+      next();
+    },
     beforeRouteLeave(to, from, next) {
       this.$refs.closeConfirmationGuardRef?.beforeRouteLeave(to, from, next);
     },

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

@@ -112,6 +112,7 @@
   import { UserKinds } from 'kolibri/constants';
   import groupBy from 'lodash/groupBy';
   import { useGoBack } from 'kolibri-common/composables/usePreviousRoute';
+  import { PageNames } from '../../../constants.js';
   import SelectableList from '../../common/SelectableList.vue';
   import { getRootRouteName, overrideRoute } from '../../../utils';
   import useActionWithUndo from '../../../composables/useActionWithUndo';
@@ -305,10 +306,6 @@
       });
 
       onMounted(() => {
-        // Answering the question "what happens when we refresh?"
-        if (props.selectedUsers.size === 0) {
-          goBack();
-        }
         setClassUsers();
       });
 
@@ -359,6 +356,19 @@
         default: () => {},
       },
     },
+    beforeRouteEnter(to, from, next) {
+      // We can't land here without having navigated to here from the users root page - we can't
+      // have selected any users if we load into this page, so go to the users table.
+      if (from.name === null) {
+        next(
+          // Override to to keep params like facility_id in place
+          overrideRoute(to, {
+            name: PageNames.USER_MGMT_PAGE,
+          }),
+        );
+      }
+      next();
+    },
     beforeRouteLeave(to, from, next) {
       this.$refs.closeConfirmationGuardRef?.beforeRouteLeave(to, from, next);
     },