refactor(ui): refactor and rename BoxMessage.vue

ui/src/components/NoItemsMessage.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-card class="bg-v-theme-surface mx-auto py-6 border text-center">
+    <v-card-title class="d-flex flex-column justify-center pa-5 ga-6">
+      <div>
+        <v-icon size="x-large" data-test="message-icon" :icon="icon" />
+      </div>
+      <div class="text-sm-h5 text-wrap font-weight-medium" data-test="message-title">
+        Looks like you don't have any {{ item }}
+      </div>
+    </v-card-title>
+
+    <v-card-text class="pb-0 px-4 py-1 d-flex flex-column ga-2 text-subtitle-1" data-test="message-content">
+      <slot name="content" />
+    </v-card-text>
+
+    <v-card-actions class="justify-center pt-8 pb-0">
+      <slot name="action" />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const { icon, item } = defineProps<{
+  icon: string;
+  item: string;
+}>();
+</script>

ui/src/components/PublicKeys/PublicKeysList.vue

@@ -197,25 +197,21 @@ const getPublicKeysList = async (
   perPageValue: number,
   pageValue: number,
 ) => {
-  if (store.getters["box/getStatus"]) {
-    const data = {
-      perPage: perPageValue,
-      page: pageValue,
-    };
-    try {
-      loading.value = true;
-      const hasPublicKeys = await store.dispatch("publicKeys/fetch", data);
-
-      if (!hasPublicKeys) {
-        page.value--;
-      }
-      loading.value = false;
-    } catch (error: unknown) {
-      snackbar.showError("Failed to load public keys.");
-      handleError(error);
+  const data = {
+    perPage: perPageValue,
+    page: pageValue,
+  };
+  try {
+    loading.value = true;
+    const hasPublicKeys = await store.dispatch("publicKeys/fetch", data);
+
+    if (!hasPublicKeys) {
+      page.value--;
     }
-  } else {
-    store.dispatch("box/setStatus", false);
+    loading.value = false;
+  } catch (error: unknown) {
+    snackbar.showError("Failed to load public keys.");
+    handleError(error);
   }
 };
 

ui/src/components/firewall/FirewallRuleList.vue

@@ -189,35 +189,30 @@ const getNumberFirewallRules = computed(
 );
 
 const getFirewalls = async (perPageValue: number, pageValue: number) => {
-  if (!store.getters["boxs/getStatus"]) {
-    const data = {
-      perPage: perPageValue,
-      page: pageValue,
-    };
+  const data = {
+    perPage: perPageValue,
+    page: pageValue,
+  };
 
-    try {
-      loading.value = true;
-      const hasRules = await store.dispatch("firewallRules/fetch", data);
-      if (!hasRules) {
-        page.value--;
-      }
-    } catch (error: unknown) {
-      if (axios.isAxiosError(error)) {
-        const axiosError = error as AxiosError;
-        if (axiosError.response?.status === 403) {
-          snackbar.showError("You don't have permission to access this resource.");
-          handleError(error);
-        }
-      } else {
-        snackbar.showError("An error occurred while loading the firewall rules.");
+  try {
+    loading.value = true;
+    const hasRules = await store.dispatch("firewallRules/fetch", data);
+    if (!hasRules) {
+      page.value--;
+    }
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 403) {
+        snackbar.showError("You don't have permission to access this resource.");
         handleError(error);
       }
-    } finally {
-      loading.value = false;
+    } else {
+      snackbar.showError("An error occurred while loading the firewall rules.");
+      handleError(error);
     }
-  } else {
-    // setArrays();
-    store.dispatch("boxs/setStatus", false);
+  } finally {
+    loading.value = false;
   }
 };
 

ui/src/store/index.ts

@@ -17,7 +17,6 @@ import { notifications, NotificationsState } from "./modules/notifications";
 import { firewallRules, FirewallRulesState } from "./modules/firewall_rules";
 import { devices, DevicesState } from "./modules/devices";
 import { container, ContainerState } from "./modules/container";
-import { box, BoxState } from "./modules/box";
 import { namespaces, NamespacesState } from "./modules/namespaces";
 import { tunnels, TunnelsState } from "./modules/tunnels";
 import { billing } from "./modules/billing";
@@ -30,7 +29,6 @@ export interface State {
   auth: AuthState;
   apiKeys: ApiKeysState;
   billing: NamespacesState;
-  box: BoxState;
   customer: CustomerState;
   connectors: ConnectorState;
   devices: DevicesState;
@@ -59,7 +57,6 @@ export const store = createStore<State>({
     auth,
     apiKeys,
     billing,
-    box,
     connectors,
     container,
     customer,