From 1b6b59b7ff77bd90fda4c0dcd27adfbba61fb1ad Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 27 Aug 2024 07:23:44 +0000
Subject: [PATCH] refactor: lint and reset logic in test

---
 .../nc-gui/components/account/setup/List.vue     | 10 ++++++++--
 .../nc-gui/components/smartsheet/details/Api.vue |  9 +--------
 packages/nc-gui/utils/colorsUtils.ts             | 16 ++++++++--------
 .../tests/db/usersAccounts/accounSetup.spec.ts   |  4 ++++
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/account/setup/List.vue b/packages/nc-gui/components/account/setup/List.vue
index e402ed0d7a..033614e07a 100644
--- a/packages/nc-gui/components/account/setup/List.vue
+++ b/packages/nc-gui/components/account/setup/List.vue
@@ -55,7 +55,13 @@ const closeResetModal = () => {
       <div class="w-full">
         <div class="w-950px px-4 mt-3 mx-auto text-lg font-weight-bold">{{ category }} Services</div>
         <div class="container">
-          <div v-for="app in apps" :key="app.title" class="item group" @click="selectApp(app)" :data-testid="`nc-setup-list-item-${app.title}`">
+          <div
+            v-for="app in apps"
+            :key="app.title"
+            class="item group"
+            :data-testid="`nc-setup-list-item-${app.title}`"
+            @click="selectApp(app)"
+          >
             <AccountSetupAppIcon :app="app" class="icon" />
             <span class="title">{{ app.title }}</span>
             <div class="flex-grow" />
@@ -105,7 +111,7 @@ const closeResetModal = () => {
         </div>
         <div class="flex mt-6 justify-end space-x-2">
           <NcButton size="small" type="secondary" @click="closeResetModal"> {{ $t('general.cancel') }}</NcButton>
-          <NcButton size="small" type="danger" @click="resetPlugin" data-testid="nc-reset-confirm-btn">
+          <NcButton size="small" type="danger" data-testid="nc-reset-confirm-btn" @click="resetPlugin">
             {{ showResetActiveAppMsg ? `${$t('general.reset')} & ${$t('general.switch')}` : $t('general.reset') }}
           </NcButton>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/details/Api.vue b/packages/nc-gui/components/smartsheet/details/Api.vue
index 51ea2f70e1..fdaa44b6a5 100644
--- a/packages/nc-gui/components/smartsheet/details/Api.vue
+++ b/packages/nc-gui/components/smartsheet/details/Api.vue
@@ -86,14 +86,7 @@ const snippet = computed(
       method: 'GET',
       headers: [
         {
-          name: '' +
-            '' +
-            '' +
-            '' +
-            '' +
-            '' +
-            '' +
-            'xc-token',
+          name: '' + '' + '' + '' + '' + '' + '' + 'xc-token',
           value: `CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens`,
           comment: 'API token',
         },
diff --git a/packages/nc-gui/utils/colorsUtils.ts b/packages/nc-gui/utils/colorsUtils.ts
index 6aa792e32d..fba05294f6 100644
--- a/packages/nc-gui/utils/colorsUtils.ts
+++ b/packages/nc-gui/utils/colorsUtils.ts
@@ -373,8 +373,8 @@ export function getEnumColorByIndex(i: number, mode: 'light' | 'dark' = 'light')
 /**
  * ### Light Theme Configuration
  * In this project, we've integrated a custom WindiCSS configuration that aligns with our Figma design system.
- * This setup introduces shorthand class names for various UI elements like text color, border color, 
- * background color, and more. The goal is to ensure design consistency and streamline the development 
+ * This setup introduces shorthand class names for various UI elements like text color, border color,
+ * background color, and more. The goal is to ensure design consistency and streamline the development
  * process by directly reflecting Figma styles in our codebase.
  *
  * #### Why We Introduced This
@@ -430,7 +430,7 @@ export function getEnumColorByIndex(i: number, mode: 'light' | 'dark' = 'light')
 export const lightTheme = {
   content: {
     'nc-gray': {
-      extreme: themeV3Colors.base['black'],
+      extreme: themeV3Colors.base.black,
       emphasis: themeV3Colors.gray[900],
       DEFAULT: themeV3Colors.gray[800],
       subtle: themeV3Colors.gray[700],
@@ -443,8 +443,8 @@ export const lightTheme = {
       hover: themeV3Colors.gray[300],
     },
     'nc-inverted-primary': {
-      DEFAULT: themeV3Colors.base['white'],
-      hover: themeV3Colors.base['white'],
+      DEFAULT: themeV3Colors.base.white,
+      hover: themeV3Colors.base.white,
       disabled: themeV3Colors.gray[400],
     },
     'nc-inverted-secondary': {
@@ -494,7 +494,7 @@ export const lightTheme = {
     },
   },
   background: {
-    'nc-default': themeV3Colors.base['white'],
+    'nc-default': themeV3Colors.base.white,
     'nc-brand': themeV3Colors.brand[50],
     'nc-gray': {
       extralight: themeV3Colors.gray[50],
@@ -578,9 +578,9 @@ export const lightTheme = {
       disabled2: themeV3Colors.brand[200],
     },
     'nc-fill-secondary': {
-      DEFAULT: themeV3Colors.base['white'],
+      DEFAULT: themeV3Colors.base.white,
       hover: themeV3Colors.gray[50],
-      disabled: themeV3Colors.base['white'],
+      disabled: themeV3Colors.base.white,
     },
     'nc-fill-warning': {
       DEFAULT: themeV3Colors.red[500],
diff --git a/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts b/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
index d16dda094b..83749077b7 100644
--- a/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
+++ b/tests/playwright/tests/db/usersAccounts/accounSetup.spec.ts
@@ -65,5 +65,9 @@ test.describe.serial('App setup', () => {
     });
     await accountSetupPage.goto();
     await accountSetupPage.isConfigured('storage', true);
+    await accountSetupPage.resetConfig({
+      key: 'storage',
+      plugin: 'S3',
+    });
   });
 });