refactor: main page and modal changes

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

@@ -15,11 +15,14 @@ const configs = computed(() => [
     key: 'email',
     description: 'Configure an email account to send system notifications to your organisation’s users.',
     docsLink: '',
-    onClick: () => {
+    buttonClick: () => {
       // listModalDlg.value = true
       // openedCategory.value = 'Email'
       navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`)
     },
+    itemClick: () =>{
+      navigateTo(`/account/setup/email`)
+    },
     configured: emailConfigured.value,
   },
   {
@@ -27,12 +30,15 @@ const configs = computed(() => [
     key: 'storage',
     description: 'Configure a storage service to store your organisation’s data.',
     docsLink: '',
-    onClick: () => {
+    buttonClick: () => {
       // listModalDlg.value = true
       // openedCategory.value = 'Storage'
 
       navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`)
     },
+    itemClick: () =>{
+      navigateTo(`/account/setup/storage`)
+    },
     configured: storageConfigured.value,
   },
   {
@@ -40,7 +46,7 @@ const configs = computed(() => [
     key: 'switchToProd',
     description: 'Configure a production-ready app database to port from the existing built-in application database.',
     docsLink: '',
-    onClick: () => {
+    buttonClick: () => {
       //  TODO: Implement the logic to switch to production
     },
     isPending: !(appInfo.value as any)?.prodReady,
@@ -71,52 +77,38 @@ onMounted(async () => {
       class="nc-content-max-w flex-1 max-h-[calc(100vh_-_100px)] overflow-y-auto nc-scrollbar-thin flex flex-col items-center gap-6 p-6"
     >
       <div class="flex flex-col gap-6 w-150">
-        <div v-for="config of configs" class="flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-y-2">
-          <div class="flex flex justify-between" data-rec="true">
-            <span class="font-bold text-base"> {{ config.title }}</span>
-
+        <div v-for="config of configs" class="flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-2" :class="{
+          'cursor-pointer': config.itemClick
+        }" @click="config.itemClick">
+          <div class="flex gap-3 items-center" data-rec="true">
             <NcTooltip v-if="!config.configured || config.isPending">
               <template #title>
                 <span>
                   {{ $t('activity.pending') }}
                 </span>
               </template>
-              <GeneralIcon icon="warning" class="text-orange-500" />
+              <GeneralIcon icon="warning" class="text-orange-500 -mt-1 w-6 h-6" />
             </NcTooltip>
+            <GeneralIcon v-else icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500" />
+
+            <span class="font-bold text-base"> {{ config.title }}</span>
           </div>
           <div class="text-gray-600 text-sm">{{ config.description }}</div>
 
-          <div v-if="config.configured" class="flex justify-between mt-4 cursor-pointer" @click="config.onClick">
-            <div class="flex gap-4 items-center border-1 w-full p-4 rounded-2xl">
-              <GeneralIcon icon="circleCheckSolid" class="text-success w-6 h-6 bg-white-500" />
-              <img
-                v-if="config.configured.title !== 'SMTP'"
-                class="max-h-6 max-w-6"
-                :alt="config.configured.title"
-                :style="{
-                  backgroundColor: config.configured.title === 'SES' ? '#242f3e' : '',
-                }"
-                :src="config.configured.logo"
-              />
-              <GeneralIcon v-else icon="mail" />
-              <span class="font-weight-bold text-base">{{ config.configured.title }}</span>
-              <div class="flex-grow" />
-              <NcButton type="text">
-                <div class="flex gap-2 items-center">
-                  <GeneralIcon icon="ncEdit3" />
-                  Edit
-                </div>
-              </NcButton>
-            </div>
-          </div>
-          <div v-else class="flex justify-between mt-4">
+          <div class="flex justify-between mt-4">
             <NcButton size="small" type="text">
               <div class="flex gap-2 items-center">
                 Go to docs
                 <GeneralIcon icon="ncExternalLink" />
               </div>
             </NcButton>
-            <NcButton size="small" @click="config.onClick">Configure</NcButton>
+            <NcButton v-if="config.configured" size="small" type="text" @click.stop="config.buttonClick">
+              <div class="flex gap-2 items-center">
+                <GeneralIcon icon="ncEdit3" />
+                Edit
+              </div>
+            </NcButton>
+            <NcButton v-else size="small" @click.stop="config.buttonClick">Configure</NcButton>
           </div>
         </div>
       </div>

packages/nc-gui/components/account/setup/List.vue

@@ -73,9 +73,20 @@ const closeResetModal = () => {
               v-if="app.active"
               icon="delete"
               class="text-error min-w-6 h-6 bg-white-500 !hidden !group-hover:!inline cursor-pointer"
-              @click.stop="showResetPluginModal(app)"
             />
-            <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-primary min-w-6 h-6 bg-white-500" />
+            <GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-primary min-w-5 h-5 bg-white-500" />
+
+            <NcDropdown :trigger="['click']" overlay-class-name="!rounded-md" @click.stop>
+              <GeneralIcon v-if="app.active" icon="threeDotVertical" class="min-w-5 h-5 bg-white-500" />
+
+              <template #overlay>
+                <NcMenu class="min-w-20">
+                  <NcMenuItem data-test-id="nc-config-reset" @click.stop="showResetPluginModal(app)">
+                    <span> {{ $t('general.reset') }} </span>
+                  </NcMenuItem>
+                </NcMenu>
+              </template>
+            </NcDropdown>
           </div>
         </div>
       </div>
@@ -84,22 +95,28 @@ const closeResetModal = () => {
     <a-modal
       v-model:visible="showPluginUninstallModal"
       :closable="false"
-      width="24rem"
+      width="448px"
       centered
       :footer="null"
       wrap-class-name="nc-modal-plugin-uninstall"
     >
       <div class="flex flex-col h-full">
-        <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
+        <div v-if="showResetActiveAppMsg" class="text-base font-weight-bold">
+          Switch to {{ switchingTo && switchingTo.title }}
+        </div>
+        <div v-else class="text-base font-weight-bold">Reset {{ activePlugin && activePlugin.title }} Configuration</div>
+        <div class="flex flex-row mt-2 w-full">
           <template v-if="showResetActiveAppMsg">
-            Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }}
-            settings. Continue?
+            Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }} settings.
+            Continue?
           </template>
-          <template v-else>{{ `Click on confirm to reset ${activePlugin && activePlugin.title}` }}</template>
+          <template v-else>Resetting will erase your current configuration. </template>
         </div>
-        <div class="flex mt-6 justify-center space-x-2">
-          <NcButton type="secondary" @click="closeResetModal"> {{ $t('general.cancel') }}</NcButton>
-          <NcButton type="danger" @click="resetPlugin"> {{ $t('general.confirm') }}</NcButton>
+        <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">
+            {{ showResetActiveAppMsg ? `${$t('general.reset')} & ${$t('general.switch')}` : $t('general.reset') }}
+          </NcButton>
         </div>
       </div>
     </a-modal>
@@ -111,7 +128,7 @@ const closeResetModal = () => {
   @apply p-4 w-950px gap-5 mx-auto my-2 grid grid-cols-3;
 
   .item {
-    @apply text-base w-296px max-w-296px flex gap-6 border-1 border-gray-200 py-3 px-6 rounded-xl items-center cursor-pointer hover:(shadow bg-gray-50);
+    @apply text-base w-296px max-w-296px flex gap-3 border-1 border-gray-200 py-3 px-6 rounded-xl items-center cursor-pointer hover:(shadow bg-gray-50);
 
     .icon {
       @apply max-w-32px max-h-32px;

packages/nc-gui/lang/en.json

@@ -93,6 +93,7 @@
     "none": "None"
   },
   "general": {
+    "switch": "Switch",
     "on": "On",
     "onMultiple": "On Multiple",
     "manual": "Manual",