AIMAAS #25: refactor users/groups state management

SUSE · Mar 26, 2024 · 9251ea7 · 9251ea7
1 parent 914bc16
commit 9251ea7
Show file tree

Hide file tree

Showing 22 changed files with 1,600 additions and 1,382 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -22,10 +22,10 @@
   </nav>
   <AlertDisplay/>
   <div class="container mt-2">
-    <router-view v-slot="{Component}">
-      <component :is="Component"/>
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
     </router-view>
-  </div>
+  </div>  
 
 </template>
 <style>
@@ -36,15 +36,15 @@
 }
 </style>
 <script>
-import {computed} from "vue";
+import { computed } from "vue";
 import 'bootstrap/dist/js/bootstrap.min.js';
 import "eos-icons/dist/css/eos-icons.css";
 import "suse-bootstrap5-theme/dist/css/suse.css";
 
 import AuthNav from "@/components/auth/AuthNav";
 import AlertDisplay from "@/components/alerts/AlertDisplay";
 import HelpNav from "@/components/help/HelpNav";
-import SchemaList from "@/components/SchemaList";
+import SchemaList from "@/components/SchemaList"
 import ReviewNav from "@/components/change_review/ReviewNav";
 import usePageTitle from '@/composables/usePageTitle';
 

diff --git a/frontend/src/components/Entity.vue b/frontend/src/components/Entity.vue
@@ -15,12 +15,12 @@
     </div>
     </template>
   </BaseLayout>
-  <Tabbing :bind-args="currentProperties" :tabs="tabs" ref="entitytabbing"
+  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="entitytabbing"
            :tabEvents="{update: onUpdate}"/>
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityForm from "@/components/inputs/EntityForm";
 import Changes from "@/components/change_review/Changes";
@@ -38,19 +38,19 @@ export default {
       tabs: [
         {
           name: 'Show/Edit',
-          component: shallowRef(EntityForm),
+          component: markRaw(EntityForm),
           icon: "mode_edit",
           tooltip: "Edit/show entity details"
         },
         {
           name: "Permissions",
-          component: PermissionList,
+          component: markRaw(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the entity"
         },
         {
           name: "History",
-          component: shallowRef(Changes),
+          component: markRaw(Changes),
           icon: "history",
           tooltip: 'Change history of entity'
         }
@@ -61,23 +61,13 @@ export default {
     title() {
       return this.entity?.name || this.$route.params.entitySlug || '-';
     },
-    currentProperties() {
-      const currIndex = this.$refs.entitytabbing?.currentTab || 0;
-      if (this.tabs[currIndex].component.name === "PermissionList") {
-        return {objectType: "Entity", objectId: this.entity?.id};
-      }
-      let props = {schema: this.activeSchema};
-
-      if (this.tabs[currIndex].component.name === "Changes") {
-        props.entitySlug = this.$route.params.entitySlug;
-      }
-
-      if (this.tabs[currIndex].component.name === "EntityForm") {
-        props.entity = this.entity;
-      }
-
-      return props;
-    }
+    bindArgs() {
+      return [
+        { schema: this.activeSchema, entity: this.entity },
+        { objectType: "Entity", objectId: this.entity?.id },
+        { schema: this.activeSchema, entitySlug: this.$route.params.entitySlug },
+      ]
+    },
   },
   methods: {
     async updateEntity() {

diff --git a/frontend/src/components/EntityList.vue b/frontend/src/components/EntityList.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import {computed} from "vue";
+// import {computed} from "vue";
 
 import ConfirmButton from "@/components/inputs/ConfirmButton";
 import Pagination from "./layout/Pagination.vue";
@@ -79,13 +79,13 @@ export default {
     this.getEntities({resetPage: false});
   },
   computed: {
-    pages: computed(() => {
+    pages() {
       try {
         return this.$refs.paginator.pageCount;
       } catch (e) {
         return 0;
       }
-    }),
+    },
     numSelected() {
       return this.selected.length;
     },

diff --git a/frontend/src/components/Schema.vue b/frontend/src/components/Schema.vue
@@ -11,12 +11,12 @@
     </template>
   </BaseLayout>
 
-  <Tabbing :bind-args="currentProperties" :tabs="tabs" ref="schematabbing"/>
+  <Tabbing :bind-args="bindArgs" :tabs="tabs" ref="schematabbing"/>
 
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import { shallowRef } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityList from "@/components/EntityList";
 import EntityForm from "@/components/inputs/EntityForm";
@@ -51,7 +51,7 @@ export default {
         },
         {
           name: "Permissions",
-          component: PermissionList,
+          component: shallowRef(PermissionList),
           icon: "security",
           tooltip: "Manage permissions on the schema"
         },
@@ -66,18 +66,14 @@ export default {
   },
   inject: ['activeSchema'],
   computed: {
-    currentProperties() {
-      const currIndex = this.$refs.schematabbing?.currentTab || 0;
-      if (this.tabs[currIndex].component.name === "PermissionList") {
-        return {objectType: "Schema", objectId: this.activeSchema.id};
-      }
-
-      const props = {schema: this.activeSchema};
-
-      if (this.tabs[currIndex].component.name === "EntityList") {
-        props.advancedControls = true;
-      }
-      return props;
+    bindArgs() {
+      return [
+        { schema: this.activeSchema, advancedControls: true },
+        { schema: this.activeSchema },
+        { schema: this.activeSchema },
+        { objectType: "Schema", objectId: this.activeSchema?.id },
+        { schema: this.activeSchema },
+      ]
     },
     title() {
       try {

diff --git a/frontend/src/components/auth/AuthManager.vue b/frontend/src/components/auth/AuthManager.vue
@@ -4,63 +4,30 @@
       <li class="breadcrumb-item active">User Management</li>
     </template>
   </BaseLayout>
-
-  <Tabbing :bind-args="{}" :tabs="tabs" ref="admtabbing"/>
+  <Tabbing :tabs="tabs" ref="admtabbing" />
 </template>
 
-<script>
-import {computed, shallowRef} from "vue";
+<script setup>
+import { markRaw } from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import GroupManager from "@/components/auth/GroupManager";
 import UserManager from "@/components/auth/UserManager";
 import Tabbing from "@/components/layout/Tabbing";
-import {loadGroupData, loadUserData} from "@/composables/auth";
 
-export default {
-  name: "AuthManager",
-  components: {Tabbing, BaseLayout},
-  data() {
-    return {
-      groups: {},
-      users: {},
-      tree: {},
-      activeGroup: null,
-      tabs: [
-        {
-          name: "Groups",
-          component: shallowRef(GroupManager),
-          icon: "groups",
-          tooltip: "Manage groups"
-        },
-        {
-          name: "Users",
-          component: shallowRef(UserManager),
-          icon: "person",
-          tooltip: "Manage users"
-        }
-      ]
-    };
-  },
-  provide() {
-    return {
-      groups: computed(() => this.groups),
-      users: computed(() => this.users),
-      tree: computed(() => this.tree)
-    }
+const tabs = [
+  {
+    name: "Groups",
+    component: markRaw(GroupManager),
+    icon: "groups",
+    tooltip: "Manage groups",
   },
-  async activated() {
-    await this.loadData();
+  {
+    name: "Users",
+    component: markRaw(UserManager),
+    icon: "person",
+    tooltip: "Manage users",
   },
-  methods: {
-    async loadData() {
-      [this.groups, this.tree] = await loadGroupData(this.$api);
-      this.users = await loadUserData(this.$api);
-    },
-
-  }
-}
+];
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/auth/GroupEdit.vue b/frontend/src/components/auth/GroupEdit.vue