fixup! AIMAAS #197: refactor users/groups state management

SUSE · Apr 3, 2024 · c26d147 · c26d147
1 parent 28a588d
commit c26d147
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 71 deletions.
diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { shallowRef } from "vue";
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityList from "@/components/EntityList";
 import EntityForm from "@/components/inputs/EntityForm";
@@ -33,31 +33,31 @@ export default {
       tabs: [
         {
           name: "Entities",
-          component: shallowRef(EntityList),
+          component: markRaw(EntityList),
           icon: "table_view",
           tooltip: "Show entities"
         },
         {
           name: "Edit / Show",
-          component: shallowRef(SchemaEdit),
+          component: markRaw(SchemaEdit),
           icon: "mode_edit",
           tooltip: "Edit/Show schema structure"
         },
         {
           name: "Add Entity",
-          component: shallowRef(EntityForm),
+          component: markRaw(EntityForm),
           icon: 'add_circle',
           tooltip: 'Add new entity'
         },
         {
           name: "Permissions",
-          component: shallowRef(PermissionList),
+          component: markRaw(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the schema"
         },
         {
           name: "History",
-          component: shallowRef(Changes),
+          component: markRaw(Changes),
           icon: 'history',
           tooltip: 'Change history of schema'
         }

diff --git a/frontend/src/components/SearchPanel.vue b/frontend/src/components/SearchPanel.vue
@@ -86,7 +86,7 @@
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import {TYPE_INPUT_MAP} from "@/utils";
 import IntegerInput from "@/components/inputs/IntegerInput.vue";
 import FloatInput from "@/components/inputs/FloatInput.vue";
@@ -148,7 +148,7 @@ export default {
         operator: null,
         value: null,
         operatorOptions: [],
-        component: shallowRef(TextInput)
+        component: markRaw(TextInput)
       });
     },
     clearFilters() {

diff --git a/frontend/src/components/auth/GroupManager.vue b/frontend/src/components/auth/GroupManager.vue
@@ -27,7 +27,12 @@
       <div v-if="activeGroup" class="d-flex justify-content-between">
         <h4 class="">{{ activeGroup.name }}</h4>
         <ConfirmButton
-          :callback="() => { deleteGroup(activeGroup.id); activeGroup = undefined }"
+          :callback="
+            () => {
+              deleteGroup(activeGroup.id);
+              activeGroup = undefined;
+            }
+          "
           btnClass="btn-outline-danger order-last"
           :reverse="true"
         >
@@ -54,7 +59,8 @@ import ModalDialog from "@/components/layout/ModalDialog";
 import PermissionList from "@/components/auth/PermissionList";
 import { useAuthStore } from "../../store/auth";
 
-const { groups, tree, loadGroupData, deleteGroup, createGroup } = useAuthStore();
+const { groups, tree, loadGroupData, deleteGroup, createGroup } =
+  useAuthStore();
 
 const toggleButton = new Button({
   css: "btn-outline-primary flex-grow-1",
@@ -69,7 +75,7 @@ const addGroupModalButtons = [
     icon: "group_add",
     text: "Add",
     callback: () => {
-      createGroup(addGroupModalContent.value.myGroup)
+      createGroup(addGroupModalContent.value.myGroup);
     },
   }),
 ];
@@ -95,25 +101,22 @@ const tabs = [
   },
 ];
 
-const bindArgs = computed(() => (
-  [
-    { group: activeGroup.value },
-    { group: activeGroup.value },
-    { recipientType: "Group", recipientId: activeGroup.value?.id },
-  ]
-));
-
+const bindArgs = computed(() => [
+  { group: activeGroup.value },
+  { group: activeGroup.value },
+  { recipientType: "Group", recipientId: activeGroup.value?.id },
+]);
 
 const rootGroups = computed(() => {
   return tree.value[null]?.map((i) => groups.value[i]);
-})
+});
 
 const activeGroup = ref();
 function selectGroup(newGroup) {
   if (newGroup.id === activeGroup.value?.id) {
     activeGroup.value = undefined;
   } else {
-    activeGroup.value = newGroup
+    activeGroup.value = newGroup;
   }
 }
 

diff --git a/frontend/src/components/auth/GroupMemberships.vue b/frontend/src/components/auth/GroupMemberships.vue
@@ -12,12 +12,7 @@
 </template>
 <script setup>
 import { api } from "@/composables/api";
-import { onActivated } from "vue";
 
 const props = defineProps(["username"]);
 const memberships = await api.getUserMemberships({ username: props.username });
-
-onActivated(async () => {
-  memberships.value = await api.getUserMemberships({ username: props.username });
-})
 </script>
diff --git a/frontend/src/components/auth/UserDetails.vue b/frontend/src/components/auth/UserDetails.vue
@@ -10,22 +10,32 @@
   </div>
   <div class="row">
     <div class="col-3 fw-bold">Email:</div>
-    <div class="col-9"><a :href="`mailto:${user?.email}`">{{ user?.email }}</a></div>
+    <div class="col-9">
+      <a :href="`mailto:${user?.email}`">{{ user?.email }}</a>
+    </div>
   </div>
   <div class="row">
     <div class="col-3 fw-bold">Is Active?</div>
     <div class="col-9 d-flex flex-row justify-content-between flex-grow-0">
       <div>
-        <span class="badge" :class="user?.is_active? 'bg-success text-black': 'bg-dark text-light'">
-          {{ user?.is_active ? 'Yes' : 'No' }}
+        <span
+          class="badge"
+          :class="
+            user?.is_active ? 'bg-success text-black' : 'bg-dark text-light'
+          "
+        >
+          {{ user?.is_active ? "Yes" : "No" }}
         </span>
       </div>
-      <button class="btn" @click="onClick"
-              :class="`btn-outline-${user?.is_active? 'danger': 'primary'}`">
+      <button
+        class="btn"
+        @click="onClick"
+        :class="`btn-outline-${user?.is_active ? 'danger' : 'primary'}`"
+      >
         <i class="eos-icons me-1">
-          {{ user?.is_active? 'block': 'play_arrow'}}
+          {{ user?.is_active ? "block" : "play_arrow" }}
         </i>
-        {{ user?.is_active? 'Deactivate': 'Activate'}}
+        {{ user?.is_active ? "Deactivate" : "Activate" }}
       </button>
     </div>
   </div>
@@ -49,28 +59,26 @@ export default {
   props: {
     user: {
       required: false,
-      type: Object
-    }
+      type: Object,
+    },
   },
   setup() {
-    const { activateUser, deactivateUser} = useAuthStore();
-    return { activateUser, deactivateUser }
+    const { activateUser, deactivateUser } = useAuthStore();
+    return { activateUser, deactivateUser };
   },
   methods: {
     async onClick() {
       if (this.user === null) {
         return;
       }
       if (this.user?.is_active) {
-        await this.deactivateUser(this.user.username)
+        await this.deactivateUser(this.user.username);
       } else {
-        await this.activateUser(this.user.username)
+        await this.activateUser(this.user.username);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/auth/UserManager.vue b/frontend/src/components/auth/UserManager.vue
@@ -17,11 +17,9 @@
         </li>
       </ul>
     </div>
-    <div v-show="selectedUser" class="user-detail">
+    <div v-show="selectedUser" class="user-detail flex-fill">
       <h4>{{ selectedUser?.username}}</h4>
-      <keep-alive>
-        <Tabbing :bind-args="bindArgs" :tabs="tabs" />
-      </keep-alive>
+      <Tabbing :bind-args="bindArgs" :tabs="tabs" />
     </div>
   </div>
 </template>

diff --git a/frontend/src/components/change_review/Changes.vue b/frontend/src/components/change_review/Changes.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import AutoPagination from "@/components/layout/AutoPagination";
 import BaseLayout from "@/components/layout/BaseLayout";
 import ChangePage from "@/components/change_review/ChangePage";
@@ -32,7 +32,7 @@ export default {
   },
   data() {
     return {
-      pageComponent: shallowRef(ChangePage)
+      pageComponent: markRaw(ChangePage)
     }
   },
   computed: {

diff --git a/frontend/src/components/layout/Tabbing.vue b/frontend/src/components/layout/Tabbing.vue
@@ -59,7 +59,6 @@ export default {
       currentTab: this.initialTab
     }
   },
-  expose: ['currentTab'],
   methods: {
     navLinkClass(tabIndex) {
       if (this.currentTab === tabIndex) {

diff --git a/frontend/src/composables/api.js b/frontend/src/composables/api.js
@@ -210,9 +210,7 @@ class API {
   async getEntity({ schemaSlug, entityIdOrSlug } = {}) {
     const params = new URLSearchParams();
     return this._fetch({
-      url: `${
-        this.base
-      }/entity/${schemaSlug}/${entityIdOrSlug}?${params.toString()}`,
+      url: `${this.base}/entity/${schemaSlug}/${entityIdOrSlug}?${params.toString()}`,
     });
   }
 
@@ -356,7 +354,11 @@ class API {
       method: "PATCH",
     });
     if (response !== null) {
-      this.alerts.push("success", `User activated: ${username}`);
+      if (response) {
+        this.alerts.push("success", `User activated: ${username}`);
+      } else {
+        this.alerts.push("success", `User already activated: ${username}`);
+      }
     }
     return response;
   }
@@ -367,7 +369,11 @@ class API {
       method: "DELETE",
     });
     if (response !== null) {
-      this.alerts.push("success", `User deactivated: ${username}`);
+      if (response) {
+        this.alerts.push("success", `User deactivated: ${username}`);
+      } else {
+        this.alerts.push("success", `User already deactivated: ${username}`);
+      }
     }
     return response;
   }

diff --git a/frontend/src/store/auth.js b/frontend/src/store/auth.js
@@ -21,14 +21,20 @@ export const useAuthStore = () => {
     return computedTree;
   })
 
-  const loadGroupData = async () => {
+  const fetchGroupData = async () => {
     const response = await api.getGroups();
 
     for (let group of (response || [])) {
       groups.value[group.id] = group;
     }
   }
 
+  const loadGroupData = async () => {
+    if (Object.values(groups.value).length === 0) {
+      await fetchGroupData()
+    }
+  }
+
   const updateGroup = async (groupId, groupData) => {
     try {
       const response = await api.updateGroup({ groupId: groupId, body: groupData });
@@ -56,29 +62,39 @@ export const useAuthStore = () => {
     }
   }
 
-  const loadUserData = async () => {
+  const fetchUserData = async () => {
     const response = await api.getUsers();
     for (const user of (response || [])) {
       users.value[user.id] = user;
     }
   }
 
+  const loadUserData = async () => {
+    if (Object.values(users.value).length === 0) {
+      await fetchUserData();
+    }
+  }
+
   const activateUser = async (username) => {
-    await api.activate_user({username: username});
-    Object.values(users.value).forEach(user => {
-      if(user.username === username) {
-        user.is_active = !user.is_active
-      }
-    });
+    const result = await api.activate_user({username: username});
+    if (result != null) {
+      Object.values(users.value).forEach(user => {
+        if(user.username === username) {
+          user.is_active = true;
+        }
+      });
+    }
   }
 
   const deactivateUser = async (username) => {
-    await api.deactivate_user({username: username});
-    Object.values(users.value).forEach(user => {
-      if(user.username === username) {
-        user.is_active = !user.is_active
-      }
-    });
+    const result = await api.deactivate_user({username: username});
+    if (result !== null) {
+      Object.values(users.value).forEach(user => {
+        if(user.username === username) {
+          user.is_active = false;
+        }
+      });
+    }
   }
 
   return {