fix(ui): add Vue and Stylistic ESLint rules and update components

Author: luizhf42

ui/admin/src/App.vue

@@ -2,7 +2,8 @@
   <v-app :theme>
     <component
       :is="layout"
-      :data-test="`${layout}-component`" />
+      :data-test="`${layout}-component`"
+    />
   </v-app>
 </template>
 

ui/admin/src/components/Announcement/AnnouncementDelete.vue

@@ -1,12 +1,15 @@
 <template>
-  <v-tooltip bottom anchor="bottom">
-    <template v-slot:activator="{ props }">
+  <v-tooltip
+    bottom
+    anchor="bottom"
+  >
+    <template #activator="{ props }">
       <v-icon
         tag="button"
         v-bind="props"
         data-test="delete-button"
-        @click="showDialog = true"
         icon="mdi-delete"
+        @click="showDialog = true"
       />
     </template>
     <span>Remove</span>

ui/admin/src/components/Announcement/AnnouncementEdit.vue

@@ -1,13 +1,16 @@
 <template>
-  <v-tooltip bottom anchor="bottom">
-    <template v-slot:activator="{ props }">
+  <v-tooltip
+    bottom
+    anchor="bottom"
+  >
+    <template #activator="{ props }">
       <v-icon
-        @click="open"
         tag="button"
         v-bind="props"
         tabindex="0"
         data-test="edit-button"
         icon="mdi-pencil"
+        @click="open"
       />
     </template>
     <span>Edit</span>
@@ -33,8 +36,8 @@
         color="primary"
       />
       <Editor
-        :api-key="tinyMceKey"
         v-model="contentInHtml"
+        :api-key="tinyMceKey"
         :init="{
           plugins: 'lists link image code help wordcount',
           menubar: 'file edit insert view tools help',
@@ -82,23 +85,27 @@ const announcementStore = useAnnouncementStore();
 const snackbar = useSnackbar();
 const showDialog = ref(false);
 const md = new MarkdownIt();
-const turndownService = new TurndownService();
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const { turndown } = new TurndownService() as {
+  turndown: (input: string) => string;
+};
 const tinyMceKey = computed(() => envVariables.tinyMceKey);
 const isTinyMceKeyEmpty = computed(() => tinyMceKey.value === "");
 const announcement = computed(() => announcementStore.announcement);
 const contentInHtml = ref("");
 const contentError = ref(false);
 
-const {
-  value: title,
-  errorMessage: titleError,
-} = useField<string | undefined>("title", yup.string().required(), {
-  initialValue: props.announcementItem.title,
-});
+const { value: title, errorMessage: titleError } = useField<string | undefined>(
+  "title",
+  yup.string().required(),
+  {
+    initialValue: props.announcementItem.title,
+  },
+);
 
 const getAnnouncement = async () => {
   await announcementStore.fetchAnnouncement(props.announcementItem.uuid);
-  contentInHtml.value = md.render(announcement.value.content as string);
+  contentInHtml.value = md.render(announcement.value.content);
 };
 
 const open = async () => {
@@ -120,8 +127,11 @@ const onSubmit = async () => {
   }
 
   try {
-    const contentInMarkdown = turndownService.turndown(contentInHtml.value);
-    await announcementStore.updateAnnouncement(announcement.value.uuid as string, { title: title.value ?? "", content: contentInMarkdown });
+    const contentInMarkdown = turndown(contentInHtml.value);
+    await announcementStore.updateAnnouncement(announcement.value.uuid, {
+      title: title.value ?? "",
+      content: contentInMarkdown,
+    });
     snackbar.showSuccess("Announcement updated successfully.");
     showDialog.value = false;
     emit("update");
@@ -135,7 +145,8 @@ defineExpose({ showDialog, announcement, contentInHtml, contentError, title });
 </script>
 
 <style lang="scss">
-.tox .tox-notification--warn, .tox .tox-notification--warning {
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
   display: none !important;
 }
 </style>

ui/admin/src/components/Announcement/AnnouncementList.vue

@@ -1,16 +1,19 @@
 <template>
   <DataTable
+    v-model:items-per-page="itemsPerPage"
+    v-model:page="page"
     :headers
     :items="announcements"
-    v-model:itemsPerPage="itemsPerPage"
-    v-model:page="page"
-    :totalCount="announcementCount"
+    :total-count="announcementCount"
     :loading
-    :itemsPerPageOptions="[10, 20, 50, 100]"
+    :items-per-page-options="[10, 20, 50, 100]"
     data-test="announcement-list"
   >
-    <template v-slot:rows>
-      <tr v-for="(announcement, index) in announcements" :key="index">
+    <template #rows>
+      <tr
+        v-for="(announcement, index) in announcements"
+        :key="index"
+      >
         <td data-test="announcement-uuid">
           <v-chip>
             {{ announcement.uuid }}
@@ -23,23 +26,26 @@
           {{ formatDate(announcement.date) }}
         </td>
         <td data-test="announcement-actions">
-          <v-tooltip bottom anchor="bottom">
-            <template v-slot:activator="{ props }">
+          <v-tooltip
+            bottom
+            anchor="bottom"
+          >
+            <template #activator="{ props }">
               <v-icon
                 tag="a"
                 dark
                 v-bind="props"
-                @click="redirectToAnnouncement(announcement)"
-                @keyup.enter="redirectToAnnouncement(announcement)"
                 tabindex="0"
                 icon="mdi-information"
+                @click="redirectToAnnouncement(announcement)"
+                @keyup.enter="redirectToAnnouncement(announcement)"
               />
             </template>
             <span>Info</span>
           </v-tooltip>
 
           <AnnouncementEdit
-            :announcementItem="announcement"
+            :announcement-item="announcement"
             @update="refreshAnnouncements"
           />
 
@@ -109,11 +115,8 @@ const refreshAnnouncements = async () => {
 
 const formatDate = (date: string) => moment(date).format("LL");
 
-const redirectToAnnouncement = (announcement: IAdminAnnouncementShort) => {
-  router.push({
-    name: "announcementDetails",
-    params: { uuid: announcement.uuid },
-  });
+const redirectToAnnouncement = async (announcement: IAdminAnnouncementShort) => {
+  await router.push({ name: "announcementDetails", params: { uuid: announcement.uuid } });
 };
 
 watch([itemsPerPage, page], async () => {

ui/admin/src/components/Device/DeviceIcon.vue

@@ -1,5 +1,8 @@
 <template>
-  <i :class="iconName" style="font-size: 20px" />
+  <i
+    :class="iconName"
+    style="font-size: 20px"
+  />
 </template>
 
 <script setup lang="ts">

ui/admin/src/components/Device/DeviceList.vue

@@ -1,21 +1,34 @@
 <template>
   <div>
     <DataTable
+      v-model:items-per-page="itemsPerPage"
+      v-model:page="page"
       :headers
       :items="devices"
-      v-model:itemsPerPage="itemsPerPage"
       :loading
-      :totalCount="devicesCount"
-      v-model:page="page"
-      :itemsPerPageOptions="[10, 20, 50, 100]"
-      @update:sort="sortByItem"
+      :total-count="devicesCount"
+      :items-per-page-options="[10, 20, 50, 100]"
       data-test="devices-list"
+      @update:sort="sortByItem"
     >
-      <template v-slot:rows>
-        <tr v-for="(item, i) in devices" :key="i">
+      <template #rows>
+        <tr
+          v-for="(item, i) in devices"
+          :key="i"
+        >
           <td>
-            <v-icon v-if="item.online" color="success" data-test="success-icon" icon="mdi-check-circle" />
-            <v-icon v-else color="#E53935" data-test="error-icon" icon="mdi-close-circle" />
+            <v-icon
+              v-if="item.online"
+              color="success"
+              data-test="success-icon"
+              icon="mdi-check-circle"
+            />
+            <v-icon
+              v-else
+              color="#E53935"
+              data-test="error-icon"
+              icon="mdi-close-circle"
+            />
           </td>
           <td>{{ item.name }}</td>
           <td>
@@ -26,10 +39,10 @@
           </td>
           <td>
             <span
-              @click="goToNamespace(item.tenant_id)"
-              @keypress.enter="goToNamespace(item.tenant_id)"
               tabindex="0"
               class="hover"
+              @click="goToNamespace(item.tenant_id)"
+              @keypress.enter="goToNamespace(item.tenant_id)"
             >
               {{ item.namespace }}
             </span>
@@ -43,7 +56,10 @@
                 :disabled="!showTag(tag.name)"
               >
                 <template #activator="{ props }">
-                  <v-chip size="small" v-bind="props">
+                  <v-chip
+                    size="small"
+                    v-bind="props"
+                  >
                     {{ displayOnlyTenCharacters(tag.name) }}
                   </v-chip>
                 </template>
@@ -63,16 +79,19 @@
             </v-chip>
           </td>
           <td>
-            <v-tooltip bottom anchor="bottom">
-              <template v-slot:activator="{ props }">
+            <v-tooltip
+              bottom
+              anchor="bottom"
+            >
+              <template #activator="{ props }">
                 <v-icon
                   tag="a"
                   dark
                   v-bind="props"
-                  @click="redirectToDevice(item.uid)"
-                  @keypress.enter="redirectToDevice(item.uid)"
                   tabindex="0"
                   icon="mdi-information"
+                  @click="redirectToDevice(item.uid)"
+                  @keypress.enter="redirectToDevice(item.uid)"
                 />
               </template>
               <span>Info</span>
@@ -104,7 +123,7 @@ const itemsPerPage = ref(10);
 const loading = ref(false);
 const devices = computed(() => devicesStore.devices);
 const devicesCount = computed(() => devicesStore.deviceCount);
-const sortField = ref();
+const sortField = ref<string>();
 const sortOrder = ref<"asc" | "desc" | undefined>(undefined);
 
 const headers = ref([
@@ -173,12 +192,12 @@ const sortByItem = async (field: string) => {
   await fetchDevices();
 };
 
-const goToNamespace = (namespace: string) => {
-  router.push({ name: "namespaceDetails", params: { id: namespace } });
+const goToNamespace = async (namespace: string) => {
+  await router.push({ name: "namespaceDetails", params: { id: namespace } });
 };
 
-const redirectToDevice = (deviceId: string) => {
-  router.push({ name: "deviceDetails", params: { id: deviceId } });
+const redirectToDevice = async (deviceId: string) => {
+  await router.push({ name: "deviceDetails", params: { id: deviceId } });
 };
 
 watch([itemsPerPage, page], async () => {

ui/admin/src/components/FirewallRules/FirewallRulesList.vue

@@ -1,16 +1,19 @@
 <template>
   <DataTable
+    v-model:items-per-page="itemsPerPage"
+    v-model:page="page"
     :headers
     :items="firewallRules"
-    v-model:itemsPerPage="itemsPerPage"
-    v-model:page="page"
     :loading
-    :totalCount="firewallRulesCount"
-    :itemsPerPageOptions="[10, 20, 50, 100]"
+    :total-count="firewallRulesCount"
+    :items-per-page-options="[10, 20, 50, 100]"
     data-test="firewall-rules-list"
   >
-    <template v-slot:rows>
-      <tr v-for="(firewallRule, index) in firewallRules" :key="index">
+    <template #rows>
+      <tr
+        v-for="firewallRule in firewallRules"
+        :key="firewallRule.id"
+      >
         <td>
           {{ firewallRule.tenant_id }}
         </td>
@@ -55,16 +58,19 @@
           </div>
         </td>
         <td>
-          <v-tooltip bottom anchor="bottom">
-            <template v-slot:activator="{ props }">
+          <v-tooltip
+            bottom
+            anchor="bottom"
+          >
+            <template #activator="{ props }">
               <v-icon
                 tag="a"
                 dark
                 v-bind="props"
-                @click="goToFirewallRule(firewallRule.id)"
-                @keypress.enter="goToFirewallRule(firewallRule.id)"
                 tabindex="0"
                 icon="mdi-information"
+                @click="goToFirewallRule(firewallRule.id)"
+                @keypress.enter="goToFirewallRule(firewallRule.id)"
               />
             </template>
             <span>Details</span>