chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/ResetPassword.vue

@@ -69,7 +69,7 @@ const resetError = () => {
     <div class="text-xl mt-4 mb-8 text-center font-weight-bold">{{ $t('activity.changePwd') }}</div>
     <a-form
       ref="formValidator"
-      data-cy="nc-user-settings-form"
+      data-testid="nc-user-settings-form"
       layout="vertical"
       class="change-password lg:max-w-3/4 w-full !mx-auto"
       no-style
@@ -78,7 +78,7 @@ const resetError = () => {
     >
       <Transition name="layout">
         <div v-if="error" class="mx-auto mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
-          <div data-cy="nc-user-settings-form__error" class="flex items-center gap-2 justify-center">
+          <div data-testid="nc-user-settings-form__error" class="flex items-center gap-2 justify-center">
             <MaterialSymbolsWarning />
             {{ error }}
           </div>
@@ -88,7 +88,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
         <a-input-password
           v-model:value="form.currentPassword"
-          data-cy="nc-user-settings-form__current-password"
+          data-testid="nc-user-settings-form__current-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.current')"
@@ -99,7 +99,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
         <a-input-password
           v-model:value="form.password"
-          data-cy="nc-user-settings-form__new-password"
+          data-testid="nc-user-settings-form__new-password"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.new')"
@@ -110,7 +110,7 @@ const resetError = () => {
       <a-form-item :label="$t('placeholder.password.confirm')" name="passwordRepeat" :rules="formRules.passwordRepeat">
         <a-input-password
           v-model:value="form.passwordRepeat"
-          data-cy="nc-user-settings-form__new-password-repeat"
+          data-testid="nc-user-settings-form__new-password-repeat"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.confirm')"
@@ -119,7 +119,7 @@ const resetError = () => {
       </a-form-item>
 
       <div class="text-center">
-        <button data-cy="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
+        <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MdiKeyChange />
             {{ $t('activity.changePwd') }}

packages/nc-gui/components/account/SignupSettings.vue

@@ -30,14 +30,14 @@ loadSettings()
 </script>
 
 <template>
-  <div>
+  <div data-testid="nc-app-settings">
     <div class="text-xl mt-4 mb-8 text-center font-weight-bold">Settings</div>
     <div class="flex justify-center">
       <a-form-item>
         <a-checkbox
           v-model:checked="settings.invite_only_signup"
           v-e="['c:account:enable-signup']"
-          class="nc-checkbox"
+          class="nc-checkbox nc-invite-only-signup-checkbox"
           name="virtual"
           @change="saveSettings"
         >

packages/nc-gui/components/account/Token.vue

@@ -97,13 +97,13 @@ const descriptionInput = ref((el) => {
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2 ">
+  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
     <div class="text-xl mt-4 mb-8 text-center font-weight-bold">Token Management</div>
-    <div class="max-w-[900px] mx-auto p-4" data-cy="nc-token-list">
+    <div class="max-w-[900px] mx-auto p-4" data-testid="nc-token-list">
       <div class="py-2 flex gap-4 items-center">
         <div class="flex-grow"></div>
         <MdiReload class="cursor-pointer" @click="loadTokens" />
-        <a-button data-cy="nc-token-create" size="small" type="primary" @click="showNewTokenModal = true">
+        <a-button data-testid="nc-token-create" size="small" type="primary" @click="showNewTokenModal = true">
           <div class="flex items-center gap-1">
             <MdiAdd />
             Add new token
@@ -193,9 +193,9 @@ const descriptionInput = ref((el) => {
                 </div>
 
                 <template #overlay>
-                  <a-menu>
+                  <a-menu data-testid="nc-token-row-action-icon">
                     <a-menu-item>
-                      <div class="flex flex-row items-center py-3 h-[1rem]" @click="deleteToken(record.token)">
+                      <div class="flex flex-row items-center py-3 h-[1rem] nc-delete-token" @click="deleteToken(record.token)">
                         <MdiDeleteOutline class="flex" />
                         <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
                       </div>
@@ -243,13 +243,13 @@ const descriptionInput = ref((el) => {
           <a-input
             :ref="descriptionInput"
             v-model:value="selectedTokenData.description"
-            data-cy="nc-token-modal-description"
+            data-testid="nc-token-modal-description"
             :placeholder="$t('labels.description')"
           />
 
           <!-- Generate -->
           <div class="flex flex-row justify-center">
-            <a-button type="primary" html-type="submit" data-cy="nc-token-modal-save">
+            <a-button type="primary" html-type="submit" data-testid="nc-token-modal-save">
               {{ $t('general.generate') }}
             </a-button>
           </div>

packages/nc-gui/components/account/UserList.vue

@@ -123,7 +123,7 @@ const copyPasswordResetUrl = async (user: User) => {
 </script>
 
 <template>
-  <div data-cy="nc-super-user-list">
+  <div data-testid="nc-super-user-list">
     <div class="text-xl mt-4 mb-8 text-center font-weight-bold">User Management</div>
     <div class="max-w-[900px] mx-auto p-4">
       <div class="py-2 flex gap-4 items-center">
@@ -139,7 +139,7 @@ const copyPasswordResetUrl = async (user: User) => {
         <div class="flex-grow"></div>
         <MdiReload class="cursor-pointer" @click="loadUsers" />
         <a-button
-          data-cy="nc-super-user-invite"
+          data-testid="nc-super-user-invite"
           size="small"
           type="primary"
           @click="
@@ -188,14 +188,22 @@ const copyPasswordResetUrl = async (user: User) => {
                 :dropdown-match-select-width="false"
                 @change="updateRole(record.id, record.roles)"
               >
-                <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
+                <a-select-option
+                  class="nc-users-list-role-option"
+                  :value="Role.OrgLevelCreator"
+                  :label="$t(`objects.roleType.orgLevelCreator`)"
+                >
                   <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                   <span class="text-gray-500 text-xs whitespace-normal">
                     {{ $t('msg.info.roles.orgCreator') }}
                   </span>
                 </a-select-option>
 
-                <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
+                <a-select-option
+                  class="nc-users-list-role-option"
+                  :value="Role.OrgLevelViewer"
+                  :label="$t(`objects.roleType.orgLevelViewer`)"
+                >
                   <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                   <span class="text-gray-500 text-xs whitespace-normal">
                     {{ $t('msg.info.roles.orgViewer') }}
@@ -224,7 +232,7 @@ const copyPasswordResetUrl = async (user: User) => {
                 <div class="flex flex-row items-center">
                   <a-button type="text" class="!px-0">
                     <div class="flex flex-row items-center h-[1.2rem]">
-                      <MdiDotsHorizontal/>
+                      <MdiDotsHorizontal class="nc-user-row-action" />
                     </div>
                   </a-button>
                 </div>
@@ -254,7 +262,7 @@ const copyPasswordResetUrl = async (user: User) => {
                     </a-menu-item>
                     <a-menu-item>
                       <div class="flex flex-row items-center py-3" @click="deleteUser(text)">
-                        <MdiDeleteOutline data-cy="nc-super-user-delete" class="flex h-[1rem] text-gray-500" />
+                        <MdiDeleteOutline data-testid="nc-super-user-delete" class="flex h-[1rem] text-gray-500" />
                         <div class="text-xs pl-2">{{ $t('general.delete') }}</div>
                       </div>
                     </a-menu-item>

packages/nc-gui/components/account/UsersModal.vue

@@ -129,7 +129,7 @@ const emailInput = ref((el) => {
 
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
-            <MaterialSymbolsCloseRounded data-cy="nc-root-user-invite-modal-close" class="flex mx-auto" />
+            <MaterialSymbolsCloseRounded data-testid="nc-root-user-invite-modal-close" class="flex mx-auto" />
           </template>
         </a-button>
       </div>
@@ -213,14 +213,22 @@ const emailInput = ref((el) => {
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
                     <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
-                      <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
+                      <a-select-option
+                        class="nc-role-option"
+                        :value="Role.OrgLevelCreator"
+                        :label="$t(`objects.roleType.orgLevelCreator`)"
+                      >
                         <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                         <span class="text-gray-500 text-xs whitespace-normal">
                           {{ $t('msg.info.roles.orgCreator') }}
                         </span>
                       </a-select-option>
 
-                      <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
+                      <a-select-option
+                        class="nc-role-option"
+                        :value="Role.OrgLevelViewer"
+                        :label="$t(`objects.roleType.orgLevelViewer`)"
+                      >
                         <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                         <span class="text-gray-500 text-xs whitespace-normal">
                           {{ $t('msg.info.roles.orgViewer') }}

packages/nc-gui/layouts/base.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, navigateTo, ref, useGlobal, useNuxtApp, useRoute, useSidebar, useUIPermission } from '#imports'
+import { computed, navigateTo, ref, useGlobal, useNuxtApp, useRoute, useSidebar } from '#imports'
 
 const { signOut, signedIn, isLoading, user, currentVersion } = useGlobal()
 
@@ -13,8 +13,6 @@ const hasSider = ref(false)
 
 const sidebar = ref<HTMLDivElement>()
 
-const { isUIAllowed } = useUIPermission()
-
 const logout = () => {
   signOut()
   navigateTo('/signin')
@@ -56,7 +54,7 @@ hooks.hook('page:finish', () => {
             </template>
             <div class="flex items-center gap-2">
               <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-              <img width="90" v-show="!isDashboard" alt="NocoDB" src="~/assets/img/brand/text.png" />
+              <img v-show="!isDashboard" width="90" alt="NocoDB" src="~/assets/img/brand/text.png" />
             </div>
           </a-tooltip>
         </div>
@@ -96,12 +94,11 @@ hooks.hook('page:finish', () => {
                     <MdiAccountCircleOutline class="mt-1 group-hover:text-accent" />&nbsp;
                     <div class="prose group-hover:text-primary">
                       <div>Account</div>
-                      <div class="text-xs text-gray-500"> {{ email }}</div>
+                      <div class="text-xs text-gray-500">{{ email }}</div>
                     </div>
                   </nuxt-link>
                 </a-menu-item>
 
-                <a-menu-divider class="!m-0" />
                 <a-menu-divider class="!m-0" />
                 <!--                <a-menu-item v-if="isUIAllowed('appStore')" key="0" class="!rounded-t">
                   <nuxt-link

packages/nc-gui/nuxt.config.ts

@@ -75,14 +75,6 @@ export default defineNuxtConfig({
     },
   },
 
-  ignore: ['./tests/**'],
-
-  typescript:{
-    tsConfig:{
-      exclude: [ './tests/**'],
-    }
-  },
-
   vite: {
     build: {
       commonjsOptions: {
@@ -176,7 +168,6 @@ export default defineNuxtConfig({
 
   // ignore: [`tests/**`],
 
-
   experimental: {
     reactivityTransform: true,
   },

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -458,11 +458,15 @@ onBeforeUnmount(reset)
                       <template #expandIcon></template>
 
                       <a-menu-item key="0" class="!rounded-t">
-                        <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/account/users">
+                        <nuxt-link
+                          v-e="['c:navbar:user:email']"
+                          class="nc-project-menu-item group !no-underline"
+                          to="/account/users"
+                        >
                           <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
                           <div class="prose group-hover:text-primary">
                             <div>Account</div>
-                            <div class="text-xs text-gray-500"> {{ email }}</div>
+                            <div class="text-xs text-gray-500">{{ email }}</div>
                           </div>
                         </nuxt-link>
                       </a-menu-item>

packages/nc-gui/pages/account/index.vue

@@ -4,7 +4,13 @@ import { navigateTo, useUIPermission } from '#imports'
 const { isUIAllowed } = useUIPermission()
 const $route = useRoute()
 
-const selectedKeys = computed(() => [/^\/account\/users\/?$/.test($route.fullPath) ? (isUIAllowed('superAdminUserManagement') ? 'list' : 'settings') : $route.params.nestedPage ?? $route.params.page])
+const selectedKeys = computed(() => [
+  /^\/account\/users\/?$/.test($route.fullPath)
+    ? isUIAllowed('superAdminUserManagement')
+      ? 'list'
+      : 'settings'
+    : $route.params.nestedPage ?? $route.params.page,
+])
 const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
 </script>
 
@@ -14,8 +20,13 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
       <!-- Side tabs -->
       <a-layout-sider>
         <div class="h-full bg-white nc-user-sidebar">
-          <a-menu :inline-indent="16" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys"
-                  class="tabs-menu h-full" mode="inline">
+          <a-menu
+            v-model:openKeys="openKeys"
+            v-model:selectedKeys="selectedKeys"
+            :inline-indent="16"
+            class="tabs-menu h-full"
+            mode="inline"
+          >
             <!--            <a-menu-item
                           key="users-old"
                           class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
@@ -28,7 +39,6 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
                           </div>
                         </a-menu-item> -->
 
-
             <div class="text-xs text-gray-500 ml-4 pt-4 pb-2 font-weight-bold">Account Settings</div>
 
             <a-sub-menu key="users" class="!bg-white">
@@ -37,8 +47,12 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
               </template>
               <template #title>Users</template>
 
-              <a-menu-item v-if="isUIAllowed('superAdminUserManagement')" key="list" class="text-xs"
-                           @click="navigateTo('/account/users/list')">
+              <a-menu-item
+                v-if="isUIAllowed('superAdminUserManagement')"
+                key="list"
+                class="text-xs"
+                @click="navigateTo('/account/users/list')"
+              >
                 <span class="ml-4">User Management</span>
               </a-menu-item>
               <a-menu-item key="password-reset" class="text-xs" @click="navigateTo('/account/users/password-reset')">
@@ -90,19 +104,16 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
   @apply bg-transparent;
 }
 
-:deep(.nc-user-sidebar .ant-menu-item-only-child), :deep(.ant-menu-submenu-title) {
+:deep(.nc-user-sidebar .ant-menu-item-only-child),
+:deep(.ant-menu-submenu-title) {
   @apply !h-[30px] !leading-[30px];
 }
 
-:deep(.ant-menu-submenu-arrow){
+:deep(.ant-menu-submenu-arrow) {
   @apply !text-gray-400;
 }
 
-
-:deep(.ant-menu-submenu-selected .ant-menu-submenu-arrow){
+:deep(.ant-menu-submenu-selected .ant-menu-submenu-arrow) {
   @apply !text-inherit;
 }
-
-
-
 </style>

packages/nc-gui/pages/account/index/users/[[nestedPage]].vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useUIPermission } from '#imports'
+
+const { isUIAllowed } = useUIPermission()
+</script>
+
 <template>
   <template v-if="$route.params.nestedPage === 'password-reset'">
     <LazyAccountResetPassword />
@@ -9,11 +15,3 @@
     <LazyAccountUserList />
   </template>
 </template>
-
-<script setup lang="ts">
-
-import { useUIPermission } from '#imports'
-
-const { isUIAllowed } = useUIPermission()
-
-</script>