Add client linting to GitHub Actions workflow

Enhance CI/CD pipeline by introducing a new job to run ESLint on the client application. This ensures code quality and consistency for the frontend codebase.

client/components/pages/admin/AddUserToWorkspace.vue

@@ -35,8 +35,8 @@
 </template>
 
 <script setup>
-const props = defineProps({
-  isWorkspaceAdmin: {},
+defineProps({
+  isWorkspaceAdmin: { type: Boolean, default: false },
   disabled: {
     type: Boolean,
     default: false,

client/components/pages/admin/BillingEmail.vue

@@ -63,7 +63,7 @@ onMounted(() => {
         loadingBillingEmail.value = false
         userCreated.value = true
         form.billing_email = data.billing_email
-    }).catch(error => {
+    }).catch(() => {
         loadingBillingEmail.value = false
         userCreated.value = false
     })

client/components/pages/admin/DeletedForms.vue

@@ -26,7 +26,8 @@
     </UTable>
     <div 
       v-if="forms?.length > pageCount"
-      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700"
+    >
       <UPagination
         v-model="page"
         :page-count="pageCount"

client/components/pages/admin/EditWorkSpaceUser.vue

@@ -42,6 +42,7 @@
 <script setup>
 import {watch, ref} from "vue"
 
+// eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['user', 'showEditUserModal'])
 const emit = defineEmits(['close', 'fetchUsers'])
 
@@ -73,7 +74,7 @@ const updateUserRole = () => {
     useAlert().success("User role updated.")
     emit('fetchUsers')
     emit('close')
-  }).catch((error) => {
+  }).catch(() => {
     useAlert().error("There was an error updating user role")
   }).finally(() => {
     updatingUserRoleState.value = false

client/components/pages/admin/ImpersonateUser.vue

@@ -3,6 +3,7 @@
     size="sm"
     color="white"
     icon="i-heroicons-eye-16-solid"
+    :loading="loading"
     @click="impersonate"
   >
     Impersonate User
@@ -18,13 +19,13 @@ const authStore = useAuthStore()
 const formsStore = useFormsStore()
 const workspacesStore = useWorkspacesStore()
 
-let loading = ref(false)
+const loading = ref(false)
 
 const impersonate = () => {
-  loading = true
+  loading.value = true
   authStore.startImpersonating()
   opnFetch(`/moderator/impersonate/${props.user.id}`).then(async (data) => {
-    loading = false
+    loading.value = false
 
     // Save the token.
     authStore.setToken(data.token, false)
@@ -47,7 +48,7 @@ const impersonate = () => {
   })
     .catch((error) => {
       useAlert().error(error.data.message)
-      loading = false
+      loading.value = false
     })
 }
 </script>

client/components/pages/admin/UserWorkspaces.vue

@@ -1,16 +1,16 @@
 <template>
-    <AdminCard
-      title="Workspaces"
-      icon="heroicons:globe-alt"
+  <AdminCard
+    title="Workspaces"
+    icon="heroicons:globe-alt"
+  >
+    <UTable
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      :progress="{ color: 'primary', animation: 'carousel' }"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }"
+      :columns="columns"
+      :rows="rows"
+      class="-mx-6"
     >
-      <UTable
-        :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
-        :progress="{ color: 'primary', animation: 'carousel' }"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }"
-        :columns="columns"
-        :rows="rows"
-        class="-mx-6"
-      >
       <template #plan-data="{ row }">
         <span
           class="text-xs select-all rounded-md px-2 py-1 border"
@@ -19,18 +19,19 @@
           {{ row.plan }}
         </span>
       </template>
-      </UTable>
-      <div 
-        v-if="workspaces?.length > pageCount"
-        class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
-        <UPagination
-          v-model="page"
-          :page-count="pageCount"
-          :total="workspaces?.length"
-        />
-      </div>
-    </AdminCard>
-  </template>
+    </UTable>
+    <div 
+      v-if="workspaces?.length > pageCount"
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700"
+    >
+      <UPagination
+        v-model="page"
+        :page-count="pageCount"
+        :total="workspaces?.length"
+      />
+    </div>
+  </AdminCard>
+</template>
   
 <script setup>
 

client/components/pages/forms/show/ExtraMenu.vue

@@ -84,7 +84,6 @@
 
 <script setup>
 import { ref, defineProps, computed } from "vue"
-import Dropdown from "~/components/global/Dropdown.vue"
 import FormTemplateModal from "../../../open/forms/components/templates/FormTemplateModal.vue"
 import FormWorkspaceModal from "../../../open/forms/components/FormWorkspaceModal.vue"
 

client/components/pages/settings/WorkSpaceCustomDomains.vue

@@ -74,7 +74,6 @@ import {watch} from "vue"
 const crisp = useCrisp()
 const workspacesStore = useWorkspacesStore()
 const workspace = computed(() => workspacesStore.getCurrent)
-const loading = computed(() => workspacesStore.loading)
 
 const customDomainsForm = useForm({
   custom_domain: "",

client/components/pages/settings/WorkSpaceUser.vue

@@ -281,7 +281,7 @@ const removeUser = (index) => {
       ).then(() => {
         useAlert().success("User successfully removed.")
         getWorkspaceUsers()
-      }).catch((error) => {
+      }).catch(() => {
         useAlert().error("There was an error removing user")
       }).finally(() => {
         loadingUsers.value = false
@@ -319,7 +319,7 @@ const leaveWorkSpace = (workspaceId) => {
         useAlert().success("You have left the workspace.")
         workspacesStore.remove(workspaceId)
         getWorkspaceUsers()
-      }).catch((error) => {
+      }).catch(() => {
         useAlert().error("There was an error leaving the workspace.")
       }).finally(() => {
         leaveWorkspaceLoadingState.value = false