refactor: review comments

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

@@ -75,18 +75,19 @@ onMounted(async () => {
           <div class="flex flex justify-between" data-rec="true">
             <span class="font-bold text-base"> {{ config.title }}</span>
 
-            <div
+            <NcTooltip v-if="!config.configured || config.isPending">
-              v-if="!config.configured || config.isPending"
+              <template #title>
-              class="flex items-center gap-1 text-orange-500 bg-orange-50 border-1 border-orange-500 px-1 rounded"
+                <span>
-            >
+                  {{ $t('activity.pending') }}
+                </span>
+              </template>
               <GeneralIcon icon="warning" class="text-orange-500" />
-              {{ $t('activity.pending') }}
+            </NcTooltip>
-            </div>
           </div>
           <div class="text-gray-600 text-sm">{{ config.description }}</div>
 
-          <div v-if="config.configured" class="flex justify-between mt-4">
+          <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">
+            <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'"
@@ -100,7 +101,7 @@ onMounted(async () => {
               <GeneralIcon v-else icon="mail" />
               <span class="font-weight-bold text-base">{{ config.configured.title }}</span>
               <div class="flex-grow" />
-              <NcButton type="text" @click="config.onClick">
+              <NcButton type="text">
                 <div class="flex gap-2 items-center">
                   <GeneralIcon icon="ncEdit3" />
                   Edit

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

@@ -3,14 +3,16 @@ const props = defineProps<{
   category: string
 }>()
 
-const { categorizeApps, resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow()
+const { categorizeApps, resetPlugin: _resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow()
 
 const apps = computed(() => categorizeApps.value?.[props.category?.toLowerCase()] || [])
 const showResetActiveAppMsg = ref(false)
+const switchingTo = ref(null)
 
 const selectApp = (app: any) => {
   const activeApp = !app.active && apps.value.find((a: any) => a.active)
   if (activeApp) {
+    switchingTo.value = app
     return showResetPluginModal(activeApp, true)
   }
 
@@ -22,6 +24,22 @@ const showResetPluginModal = async (app: any, resetActiveAppMsg = false) => {
   showPluginUninstallModal.value = true
   activePlugin.value = app
 }
+
+const resetPlugin = async () => {
+  await _resetPlugin(activePlugin.value)
+  if (showResetActiveAppMsg.value) {
+    await selectApp(switchingTo.value)
+    switchingTo.value = null
+    showResetActiveAppMsg.value = false
+  }
+}
+
+const closeResetModal = () => {
+  activePlugin.value = null
+  switchingTo.value = null
+  showResetActiveAppMsg.value = false
+  showPluginUninstallModal.value = false
+}
 </script>
 
 <template>
@@ -54,7 +72,7 @@ const showResetPluginModal = async (app: any, resetActiveAppMsg = false) => {
             <GeneralIcon
               v-if="app.active"
               icon="delete"
-              class="text-error min-w-6 h-6 bg-white-500 !hidden group-hover:!inline cursor-pointer"
+              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" />
@@ -73,14 +91,15 @@ const showResetPluginModal = async (app: any, resetActiveAppMsg = false) => {
     >
       <div class="flex flex-col h-full">
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
-          <template v-if="resetActivePlugin">{{ `Click on confirm to reset ${activePlugin && activePlugin.title}` }}</template>
+          <template v-if="showResetActiveAppMsg">
-          <template v-else>
+            Switching to {{ switchingTo && switchingTo.title }} will reset your {{ activePlugin && activePlugin.title }}
-            {{ `Before switching confirm to reset ${activePlugin && activePlugin.title}` }}
+            settings. Continue?
           </template>
+          <template v-else>{{ `Click on confirm to reset ${activePlugin && activePlugin.title}` }}</template>
         </div>
         <div class="flex mt-6 justify-center space-x-2">
-          <NcButton type="secondary" @click="showPluginUninstallModal = false"> {{ $t('general.cancel') }} </NcButton>
+          <NcButton type="secondary" @click="closeResetModal"> {{ $t('general.cancel') }}</NcButton>
-          <NcButton type="danger" @click="resetPlugin"> {{ $t('general.confirm') }} </NcButton>
+          <NcButton type="danger" @click="resetPlugin"> {{ $t('general.confirm') }}</NcButton>
         </div>
       </div>
     </a-modal>
@@ -92,7 +111,7 @@ const showResetPluginModal = async (app: any, resetActiveAppMsg = false) => {
   @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-100 py-3 px-6 rounded items-center cursor-pointer hover:(shadow bg-gray-50);
+    @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);
 
     .icon {
       @apply max-w-32px max-h-32px;

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -15,6 +15,8 @@ const isLoggingOut = ref(false)
 
 const { isMobileMode } = useGlobal()
 
+const { isUIAllowed } = useRoles()
+
 const logout = async () => {
   isLoggingOut.value = true
   try {
@@ -51,6 +53,10 @@ const isMounted = ref(false)
 onMounted(() => {
   isMounted.value = true
 })
+
+const accountUrl = computed(() => {
+  return isUIAllowed('superAdminSetup') && !isEeUI ? '/account/setup' : '/account/profile'
+})
 </script>
 
 <template>
@@ -180,7 +186,7 @@ onMounted(() => {
 
               <DashboardSidebarEEMenuOption v-if="isEeUI" />
 
-              <nuxt-link v-e="['c:user:settings']" class="!no-underline" to="/account/profile">
+              <nuxt-link v-e="['c:user:settings']" class="!no-underline" :to="accountUrl">
                 <NcMenuItem> <GeneralIcon icon="ncSettings" class="menu-icon" /> {{ $t('title.accountSettings') }} </NcMenuItem>
               </nuxt-link>
             </template>

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

@@ -63,6 +63,7 @@ const logout = async () => {
               <NcMenuItem
                 key="profile"
                 class="item"
+                v-if="isUIAllowed('superAdminSetup') && !isEeUI"
                 :class="{
                   active: $route.path?.startsWith('/account/setup'),
                 }"