fix(ui): Resolve ESLint warnings related to typage and props

This commit is related to the ESlint plugin for Vue 3 Lint, it aims
to resolve issues faced by the usage of the 9.17.0 version.

ui/src/components/Billing/BillingPayment.vue

@@ -101,11 +101,12 @@ import BillingIcon from "./BillingIcon.vue";
 import { useStore } from "../../store";
 import handleError from "@/utils/handleError";
 import { envVariables } from "../../envVariables";
+import { Customer } from "@/interfaces/ICustomer";
 
 const emit = defineEmits(["no-payment-methods", "has-default-payment", "customer-id-created"]);
 const stripeKey = computed(() => envVariables.stripeKey);
 const stripeLoaded = ref(false);
-const customer: any = reactive({ name: "", email: "", payment_methods: [] });
+const customer: Customer = reactive({ name: "", email: "", payment_methods: [] });
 const store = useStore();
 const consumerData = computed(() => store.getters["customer/getCustomer"]);
 const card = ref();
@@ -169,30 +170,43 @@ const fetchData = async () => {
   }
 };
 
+class CustomError {
+  code: string;
+
+  message: string;
+
+  constructor(code: string, message: string) {
+    this.code = code;
+    this.message = message;
+  }
+}
+
 const savePayment = async () => {
   const cardElement = card.value.stripeElement;
   elms.value.instance.createPaymentMethod({
     type: "card",
     card: cardElement,
   })
-    .then(async (result: any) => {
+    .then(async (result: { paymentMethod: { id: string; }; }) => {
       try {
         const id: string = result.paymentMethod.id || "";
         await store.dispatch("customer/attachPaymentMethod", id);
         await fetchData();
         alertRender.value = false;
         addNewCard.value = false;
-      } catch (error: any) {
-        alertRender.value = true;
+      } catch (error) {
         const errorMessages = {
-          card_declined: "Your payment method was declined, check if your card is valid or have sufficient funds",
+          card_declined: "Your payment method was declined, check if your card is valid or has sufficient funds",
           expired_card: "Your payment was declined because the card has expired.",
           incorrect_cvc: "Your payment was declined due to an incorrect CVC.",
           processing_error: "Your payment was declined due to a processing error.",
           incorrect_number: "Your payment was declined because the card number is incorrect.",
           default: "An error occurred during payment processing.",
         };
-        errorMessage.value = errorMessages[error.code] || errorMessages.default;
+
+        alertRender.value = true;
+        const isMessageError = (error: unknown): error is CustomError => typeof error === "object" && error !== null && "code" in error;
+        errorMessage.value = isMessageError(error) ? errorMessages[error.code] : errorMessages.default;
       }
     });
 };

ui/src/components/DataTable.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 type HeaderItem = {
   text: string;
@@ -119,7 +119,7 @@ export default defineComponent({
   },
   emits: ["changeItemsPerPage", "clickNextPage", "clickPreviousPage", "clickSortableIcon"],
   setup(props) {
-    const itemsPerPageRef = ref(props.itemsPerPage);
+    const itemsPerPageRef = computed(() => props.itemsPerPage);
     const pageQuantity = computed(() => Math.ceil(props.totalCount / props.itemsPerPage));
 
     return {

ui/src/components/Devices/DeviceRename.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref, computed } from "vue";
 import { useField } from "vee-validate";
 import * as yup from "yup";
 import axios, { AxiosError } from "axios";
@@ -74,6 +74,7 @@ export default defineComponent({
   },
   emits: ["new-hostname"],
   setup(props, ctx) {
+    const name = computed(() => props.name);
     const showDialog = ref(false);
     const messages = ref(
       "Examples: (foobar, foo-bar-ba-z-qux, foo-example, 127-0-0-1)",
@@ -85,7 +86,7 @@ export default defineComponent({
       errorMessage: editNameError,
       setErrors: setEditNameError,
     } = useField<string | undefined>("name", yup.string().required(), {
-      initialValue: props.name,
+      initialValue: name.value,
     });
 
     const close = () => {

ui/src/components/PrivateKeys/PrivateKeyEdit.vue

@@ -72,6 +72,7 @@ import {
   ref,
   watch,
   onMounted,
+  toRefs,
 } from "vue";
 import * as yup from "yup";
 import { useStore } from "../../store";
@@ -107,14 +108,15 @@ export default defineComponent({
       username: "",
       data: "",
     });
+    const { keyObject } = toRefs(props);
     const supportedKeys = ref(
       "Supports RSA, DSA, ECDSA (nistp-*) and ED25519 key types, in PEM (PKCS#1, PKCS#8) and OpenSSH formats.",
     );
 
     const { value: name, errorMessage: nameError } = useField<
       string | undefined
     >("name", yup.string().required(), {
-      initialValue: props.keyObject.name,
+      initialValue: keyObject.value.name,
     });
 
     watch(name, () => {

ui/src/components/PublicKeys/PublicKeyEdit.vue

@@ -167,6 +167,7 @@ export default defineComponent({
     const choiceFilter = ref("hostname");
     const validateLength = ref(true);
     const errMsg = ref("");
+    const prop = computed(() => props);
     const choiceUsername = ref("username");
     const filterList = ref([
       {
@@ -207,7 +208,7 @@ export default defineComponent({
       errorMessage: nameError,
       setErrors: setnameError,
     } = useField<string>("name", yup.string().required(), {
-      initialValue: props.keyObject.name,
+      initialValue: prop.value.keyObject.name,
     });
 
     watch(name, () => {
@@ -219,7 +220,7 @@ export default defineComponent({
       errorMessage: usernameError,
       setErrors: setUsernameError,
     } = useField<string>("username", yup.string().required(), {
-      initialValue: props.keyObject.username,
+      initialValue: prop.value.keyObject.username,
     });
 
     watch(username, () => {
@@ -231,14 +232,14 @@ export default defineComponent({
       errorMessage: hostnameError,
       setErrors: setHostnameError,
     } = useField<string>("hostname", yup.string().required(), {
-      initialValue: props.keyObject.filter?.hostname || "",
+      initialValue: prop.value.keyObject.filter?.hostname || "",
     });
 
     const {
       value: publicKeyData,
       errorMessage: publicKeyDataError,
     } = useField<string>("publicKeyData", yup.string().required(), {
-      initialValue: props.keyObject.data,
+      initialValue: prop.value.keyObject.data,
     });
 
     watch(username, () => {

ui/src/components/Sessions/SessionPlay.vue

@@ -254,7 +254,7 @@ export default defineComponent({
       let between: number;
       let lowerBound = 0;
       let higherBound = frames.length - 1;
-      let nextTimeSetPrint: any;
+      let nextTimeSetPrint;
 
       for (; higherBound - lowerBound > 1;) {
         // progressive increment search

ui/src/components/Tags/TagEdit.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { useField } from "vee-validate";
-import { defineComponent, onMounted, ref } from "vue";
+import { defineComponent, onMounted, ref, computed } from "vue";
 import * as yup from "yup";
 import { useStore } from "../../store";
 import {
@@ -78,6 +78,7 @@ export default defineComponent({
     const store = useStore();
     const showDialog = ref(false);
 
+    const prop = computed(() => props);
     const { value: tagLocal, errorMessage: tagLocalError, resetField: resetTagLocal } = useField<string>(
       "tagLocal",
       yup
@@ -87,7 +88,7 @@ export default defineComponent({
         .max(255)
         .matches(/^[^/|@|&|:]*$/, "The name must not contain /, @, &, and :"),
       {
-        initialValue: props.tag,
+        initialValue: prop.value.tag,
       },
     );
 

ui/src/components/Tags/TagFormUpdate.vue

@@ -93,7 +93,8 @@ export default defineComponent({
     const showDialog = ref(false);
 
     const hasTags = computed(() => props.tagsList.length > 0);
-    const inputTags = ref(props.tagsList);
+    const prop = computed(() => props);
+    const inputTags = ref(prop.value.tagsList);
     const tagsError = ref("");
 
     const tagsHasLessThan3Characters = computed(() => inputTags.value.some((tag) => tag.length < 3));

ui/src/components/Terminal/TerminalDialog.vue

@@ -189,7 +189,8 @@ export default defineComponent({
     const terminal = ref<HTMLElement>({} as HTMLElement);
     const attachAddon = ref<AttachAddon | null>({} as AttachAddon);
 
-    const showTerminal = ref(store.getters["modal/terminal"] === props.uid);
+    const uid = computed(() => props.uid);
+    const showTerminal = ref(store.getters["modal/terminal"] === uid.value);
 
     const {
       value: username,

ui/src/interfaces/ICustomer.ts

@@ -14,3 +14,19 @@ export interface ICustomer {
   email: string,
   payment_methods: Array<IPaymentMethod>,
 }
+
+export interface PaymentMethod {
+  brand: string;
+  number: string;
+  exp_month: number;
+  exp_year: number;
+  cvc: string;
+  id: string;
+  default:boolean;
+}
+
+export interface Customer {
+  name: string;
+  email: string;
+  payment_methods: Array<PaymentMethod>;
+}

ui/src/store/api/public_keys.ts

@@ -1,8 +1,8 @@
 import http from "../helpers/http";
 import { sshApi } from "../../api/http";
-import { IPublicKey } from "@/interfaces/IPublicKey";
+import { PublicKeyRequest, UpdatePublicKeyRequest } from "@/api/client/api";
 
-export const postPublicKey = async (data : any | IPublicKey) => sshApi.createPublicKey(data);
+export const postPublicKey = async (data : PublicKeyRequest) => sshApi.createPublicKey(data);
 
 export const fetchPublicKeys = async (
   page : number,
@@ -16,6 +16,8 @@ export const fetchPublicKeys = async (
 
 export const getPublicKey = async (fingerprint : string) => http().get(`/sshkeys/public-keys/${fingerprint}`); // TODO
 
-export const putPublicKey = async (data : any | IPublicKey) => sshApi.updatePublicKey(data.fingerprint, data);
+export const putPublicKey = async (data : { fingerprint: string } & UpdatePublicKeyRequest) => {
+  sshApi.updatePublicKey(data.fingerprint, data);
+};
 
 export const removePublicKey = async (fingerprint : string) => sshApi.deletePublicKey(fingerprint);

ui/src/store/modules/customer.ts

@@ -10,6 +10,7 @@ export interface CustomerState {
 }
 
 type errorResponseData = {
+  code: string;
   message: string;
 };
 
@@ -52,7 +53,7 @@ export const customer: Module<CustomerState, State> = {
       try {
         await apiBilling.attachPaymentMethod(id);
         commit("setCustomer", customer);
-      } catch (error: any) {
+      } catch (error) {
         if (isAxiosError<errorResponseData>(error)) {
           throw error.response?.data;
         } else {

ui/src/utils/billInfoExtract.ts

@@ -5,7 +5,6 @@ export default function infoExtract(data, periodEnd) {
   const upcomingInvoice = data.upcoming_invoice;
   const productDescription = data.product_description;
   const pms = data.payment_methods;
-  const pm = data.default_payment_method;
 
   const showLink = (r, s) => {
     if (s === "open") {

ui/src/views/Dashboard.vue

@@ -27,7 +27,7 @@ import axios, { AxiosError } from "axios";
 import Card from "../components/Card/Card.vue";
 import { useStore } from "../store";
 import handleError from "@/utils/handleError";
-import { INotificationsSuccess, INotificationsError } from "@/interfaces/INotifications";
+import { INotificationsError } from "@/interfaces/INotifications";
 
 type ItemCard = {
   id: number;