refactor(ui): created a generic component to maintain the device listing

This commit adds a generic component to remove an old outdated device list that repeated code too much, the new component logic maintains the old one visual, accepting diverse store methods to display a device list that lists be meant for accepting, pending or rejected devices.
shellhub-io · Jun 19, 2024 · 7637622 · 7637622
1 parent ad2f5d0
commit 7637622
Show file tree

Hide file tree

Showing 15 changed files with 779 additions and 820 deletions.
diff --git a/ui/src/components/Devices/Device.vue b/ui/src/components/Devices/Device.vue
@@ -3,13 +3,10 @@
     <v-tabs background-color="secondary" stacked color="primary">
       <v-tab to="/devices"> Device List </v-tab>
       <v-tab to="/devices/pending"> Pending </v-tab>
-
       <v-tab to="/devices/rejected"> Rejected </v-tab>
     </v-tabs>
-
     <v-divider />
   </v-card>
-
   <v-card>
     <router-view />
   </v-card>

diff --git a/ui/src/components/Devices/DeviceActionButton.vue b/ui/src/components/Devices/DeviceActionButton.vue
@@ -12,11 +12,11 @@
         Accept
       </v-btn>
     </v-list-item>
-    <v-list-item @click="dialog = !dialog" v-else data-test="list-item">
+    <v-list-item v-else @click="dialog = !dialog" data-test="list-item">
       <v-tooltip location="bottom" class="text-center" :disabled="hasAuthorization">
         <template v-slot:activator="{ props }">
           <span v-bind="props">
-            <v-list-item-title data-test="action-item" v-on="props">
+            <v-list-item-title data-test="action-item">
               <v-icon>{{ icon }}</v-icon>
               {{ capitalizeText(action) }}
             </v-list-item-title>
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, PropType } from "vue";
 import axios, { AxiosError } from "axios";
 import { useStore } from "../../store";
 import { authorizer, actions } from "../../authorizer";
@@ -76,9 +76,9 @@ const props = defineProps({
     default: false,
   },
   action: {
-    type: String,
+    type: String as PropType<"accept" | "reject" | "remove">,
+    required: true,
     default: "accept",
-    validator: (value: string) => ["accept", "reject", "remove"].includes(value),
   },
   show: {
     type: Boolean,