feat(ui): display contextual empty state for API keys, tags, and private keys

Show user-friendly messages when no API keys, tags, or private
keys are available. Introduced `NoItemsMessage` for better UX and
added loading indicators for initial data fetches. Adjusted
tests and snapshots accordingly to support the changes.

Author: luannmoreira

ui/src/components/Setting/SettingPrivateKeys.vue

@@ -24,7 +24,10 @@
               Manage your private keys securely with ShellHub
             </span>
           </template>
-          <template #append>
+          <template
+            v-if="hasPrivateKeys"
+            #append
+          >
             <v-btn
               color="primary"
               variant="elevated"
@@ -37,21 +40,54 @@
         </v-list-item>
       </v-card-item>
 
-      <PrivateKeyList data-test="private-key-list" />
+      <PrivateKeyList
+        v-if="hasPrivateKeys"
+        data-test="private-key-list"
+      />
+
+      <NoItemsMessage
+        v-else
+        item="Private Keys"
+        icon="mdi-shield-key"
+        data-test="no-items-message-component"
+      >
+        <template #content>
+          <p>
+            ShellHub provides secure storage for your SSH private keys.
+            This allows you to authenticate with your devices securely and automatically.
+          </p>
+          <p>
+            By adding your Private Keys here, you can streamline access to your
+            devices without managing passwords manually for every connection.
+          </p>
+        </template>
+        <template #action>
+          <v-btn
+            color="primary"
+            variant="elevated"
+            @click="privateKeyAdd = true"
+          >
+            Add Private Key
+          </v-btn>
+        </template>
+      </NoItemsMessage>
     </v-card>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import PrivateKeyAdd from "../PrivateKeys/PrivateKeyAdd.vue";
 import PrivateKeyList from "../PrivateKeys/PrivateKeyList.vue";
+import NoItemsMessage from "@/components/NoItemsMessage.vue";
 import handleError from "@/utils/handleError";
 import usePrivateKeysStore from "@/store/modules/private_keys";
 
 const privateKeysStore = usePrivateKeysStore();
 const privateKeyAdd = ref(false);
 
+const hasPrivateKeys = computed(() => privateKeysStore.privateKeys.length > 0);
+
 const getPrivateKeys = () => {
   try {
     privateKeysStore.getPrivateKeyList();

ui/src/components/Setting/SettingTags.vue

@@ -8,7 +8,18 @@
     class="mx-0 px-0"
     max-width="60rem"
   >
+    <div
+      v-if="loading"
+      class="d-flex justify-center mt-4"
+    >
+      <v-progress-circular
+        indeterminate
+        color="primary"
+      />
+    </div>
+
     <v-card
+      v-else
       variant="flat"
       class="bg-transparent"
       data-test="tags-settings-card"
@@ -31,8 +42,10 @@
               </template>
             </v-list-item>
           </v-col>
+
           <v-col cols="6">
             <v-text-field
+              v-if="hasTags"
               v-model.trim="filter"
               label="Search by Tag Name"
               variant="outlined"
@@ -45,11 +58,13 @@
               @keyup="searchTags"
             />
           </v-col>
+
           <v-col
             cols="3"
             class="d-flex justify-end"
           >
             <v-btn
+              v-if="hasTags"
               color="primary"
               variant="elevated"
               data-test="tag-create-button"
@@ -60,28 +75,61 @@
           </v-col>
         </v-row>
       </v-card-item>
+
       <TagList
+        v-if="hasTags"
         ref="tagListRef"
         class="mx-4"
       />
+
+      <NoItemsMessage
+        v-else
+        item="Tags"
+        icon="mdi-tag-multiple"
+        data-test="no-items-message-component"
+      >
+        <template #content>
+          <p>
+            ShellHub allows you to organize your resources using Tags.
+          </p>
+          <p>
+            You can assign tags to Devices, Public Keys, and Firewall Rules
+            to filter and group them effectively.
+          </p>
+        </template>
+        <template #action>
+          <v-btn
+            color="primary"
+            variant="elevated"
+            @click="openCreate"
+          >
+            Create Tag
+          </v-btn>
+        </template>
+      </NoItemsMessage>
     </v-card>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
 import TagList from "../Tags/TagList.vue";
 import TagCreate from "../Tags/TagCreate.vue";
+import NoItemsMessage from "@/components/NoItemsMessage.vue";
 import useTagsStore from "@/store/modules/tags";
 import useSnackbar from "@/helpers/snackbar";
+import handleError from "@/utils/handleError";
 
 const tagsStore = useTagsStore();
 const snackbar = useSnackbar();
 const tagListRef = ref<InstanceType<typeof TagList> | null>(null);
 const createDialog = ref(false);
 const filter = ref("");
+const loading = ref(true);
 const tenant = computed(() => localStorage.getItem("tenant") || "");
 
+const hasTags = computed(() => tagsStore.getNumberTags > 0);
+
 const searchTags = async () => {
   let encodedFilter = "";
 
@@ -109,7 +157,32 @@ const openCreate = () => {
   createDialog.value = true;
 };
 
-const refreshTagList = () => {
-  tagListRef.value?.refresh();
+const refreshTagList = async () => {
+  if (!hasTags.value) {
+    await fetchInitialTags();
+  } else {
+    tagListRef.value?.refresh();
+  }
+};
+
+const fetchInitialTags = async () => {
+  try {
+    loading.value = true;
+    await tagsStore.fetch({
+      tenant: tenant.value,
+      page: 1,
+      perPage: 10,
+      filter: "",
+    });
+  } catch (error) {
+    snackbar.showError("Failed to load tags.");
+    handleError(error);
+  } finally {
+    loading.value = false;
+  }
 };
+
+onMounted(async () => {
+  await fetchInitialTags();
+});
 </script>

ui/src/components/Team/ApiKeys/ApiKeyGenerate.vue

@@ -10,6 +10,7 @@
           <v-btn
             :disabled="!canGenerateApiKey"
             color="primary"
+            variant="elevated"
             data-test="api-key-generate-main-btn"
             @click="showDialog = true"
           >
@@ -52,6 +53,7 @@
     <ApiKeySuccess
       v-model="showSuccessDialog"
       :api-key="generatedApiKey"
+      @update:model-value="handleSuccessDialogUpdate"
     />
   </div>
 </template>
@@ -72,6 +74,7 @@ import { IApiKeyCreate } from "@/interfaces/IApiKey";
 const emit = defineEmits(["update"]);
 const snackbar = useSnackbar();
 const apiKeyStore = useApiKeysStore();
+
 const showDialog = ref(false);
 const showSuccessDialog = ref(false);
 const errorMessage = ref("");
@@ -80,6 +83,8 @@ const isFormValid = ref(false);
 const formRef = ref<InstanceType<typeof ApiKeyForm>>();
 const canGenerateApiKey = hasPermission("apiKey:create");
 
+const wasSuccessful = ref(false);
+
 const handleGenerateKeyError = (error: unknown) => {
   snackbar.showError("Failed to generate API Key.");
 
@@ -111,21 +116,32 @@ const handleSubmit = () => {
 const generateKey = async (formData: { name: string; expires_in?: number; role: BasicRole }) => {
   try {
     generatedApiKey.value = await apiKeyStore.generateApiKey(formData as IApiKeyCreate);
-    emit("update");
-
+    wasSuccessful.value = true;
     showDialog.value = false;
     showSuccessDialog.value = true;
   } catch (error: unknown) {
     handleGenerateKeyError(error);
   }
 };
 
+const handleSuccessDialogUpdate = (value: boolean) => {
+  showSuccessDialog.value = value;
+
+  if (!value && wasSuccessful.value) {
+    emit("update");
+    wasSuccessful.value = false;
+    generatedApiKey.value = "";
+  }
+};
+
 const close = () => {
   showDialog.value = false;
   showSuccessDialog.value = false;
-  generatedApiKey.value = "";
   errorMessage.value = "";
+  wasSuccessful.value = false;
+  generatedApiKey.value = "";
   formRef.value?.reset();
 };
+
 defineExpose({ generateKey, showDialog, errorMessage, close });
 </script>

ui/src/components/Team/ApiKeys/ApiKeyList.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import axios, { AxiosError } from "axios";
 import moment from "moment";
 import DataTable from "@/components/Tables/DataTable.vue";
@@ -218,9 +218,5 @@ const sortByItem = async (field: string) => {
   await fetchApiKeys();
 };
 
-onMounted(async () => {
-  await fetchApiKeys();
-});
-
 defineExpose({ refresh, hasKeyExpired, formatDate, itemsPerPage });
 </script>