Browse Source

refactor: review comments

pull/9314/head
Pranav C 3 months ago
parent
commit
5e90661a08
  1. 14
      packages/nc-gui/components/account/Setup.vue
  2. 12
      packages/nc-gui/components/account/setup/Config.vue
  3. 14
      packages/nc-gui/components/account/setup/List.vue
  4. 3
      packages/nc-gui/composables/useAccountSetupStore.ts

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

@ -15,7 +15,7 @@ const configs = computed(() => [
key: 'email', key: 'email',
description: description:
'Configure your preferred email service to manage how your application sends alerts, notifications and other essential emails.', 'Configure your preferred email service to manage how your application sends alerts, notifications and other essential emails.',
docsLink: 'https://docs.nocodb.com', docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-email',
buttonClick: () => { buttonClick: () => {
navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`) navigateTo(`/account/setup/email${emailConfigured.value ? `/${emailConfigured.value.title}` : ''}`)
}, },
@ -28,7 +28,7 @@ const configs = computed(() => [
title: t('labels.configLabel', { label: t('labels.storage') }), title: t('labels.configLabel', { label: t('labels.storage') }),
key: 'storage', key: 'storage',
description: 'Set up and manage your preferred storage solution for securely handling and storing your application’s data.', description: 'Set up and manage your preferred storage solution for securely handling and storing your application’s data.',
docsLink: 'https://docs.nocodb.com', docsLink: 'https://docs.nocodb.com/account-settings/oss-specific-details#configure-storage',
buttonClick: () => { buttonClick: () => {
navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`) navigateTo(`/account/setup/storage${storageConfigured.value ? `/${storageConfigured.value.title}` : ''}`)
}, },
@ -98,7 +98,15 @@ onMounted(async () => {
<div class="text-gray-600 text-sm">{{ config.description }}</div> <div class="text-gray-600 text-sm">{{ config.description }}</div>
<div class="flex justify-between mt-4"> <div class="flex justify-between mt-4">
<NcButton size="small" type="text"> <NcButton
size="small"
type="text"
:href="config.docsLink"
target="_blank"
class="!flex items-center !no-underline"
rel="noopener noreferer"
@click.stop
>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
Go to docs Go to docs
<GeneralIcon icon="ncExternalLink" /> <GeneralIcon icon="ncExternalLink" />

12
packages/nc-gui/components/account/setup/Config.vue

@ -86,7 +86,7 @@ const docLinks = computed(() => {
return [ return [
{ {
title: 'Application Setup', title: 'Application Setup',
url: `https://docs.nocodb.com/account-settings/oss-specific-details#configure-${plugin.value?.categor?.toLowerCase()}`, url: `https://docs.nocodb.com/account-settings/oss-specific-details#configure-${plugin.value?.category?.toLowerCase()}`,
}, },
...(plugin.value?.formDetails?.docs || []), ...(plugin.value?.formDetails?.docs || []),
] ]
@ -140,16 +140,6 @@ const docLinks = computed(() => {
<div class="nc-config-right-panel"> <div class="nc-config-right-panel">
<div class="flex-grow flex flex-col gap-3"> <div class="flex-grow flex flex-col gap-3">
<div class="text-gray-500 text-capitalize">{{ $t('labels.documentation') }}</div> <div class="text-gray-500 text-capitalize">{{ $t('labels.documentation') }}</div>
<!-- <a -->
<!-- :href="defDocLink" -->
<!-- rel="noopener noreferrer" -->
<!-- target="_blank" -->
<!-- class="!no-underline !text-current flex gap-2 items-center" -->
<!-- > -->
<!-- <GeneralIcon icon="bookOpen" class="text-gray-500" /> -->
<!-- Application Setup -->
<!-- </a> -->
<a <a
v-for="doc of docLinks" v-for="doc of docLinks"
:key="doc.title" :key="doc.title"

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

@ -6,6 +6,8 @@ const props = defineProps<{
const { categorizeApps, resetPlugin: _resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow() const { categorizeApps, resetPlugin: _resetPlugin, showPluginUninstallModal, activePlugin } = useAccountSetupStoreOrThrow()
const apps = computed(() => categorizeApps.value?.[props.category?.toLowerCase()] || []) const apps = computed(() => categorizeApps.value?.[props.category?.toLowerCase()] || [])
const configuredApp = computed(() => apps.value.find((app: any) => app.active))
const showResetActiveAppMsg = ref(false) const showResetActiveAppMsg = ref(false)
const switchingTo = ref(null) const switchingTo = ref(null)
@ -71,10 +73,18 @@ const closeResetModal = () => {
icon="delete" 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"
/> />
<GeneralIcon v-if="app.active" icon="circleCheckSolid" class="text-success min-w-5 h-5 bg-white-500 nc-configured" /> <GeneralIcon
v-if="app === configuredApp"
icon="circleCheckSolid"
class="text-success min-w-5 h-5 bg-white-500 nc-configured"
/>
<NcDropdown :trigger="['click']" overlay-class-name="!rounded-md" @click.stop> <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 nc-setup-plugin-menu" /> <GeneralIcon
v-if="app.active"
icon="threeDotVertical"
class="min-w-5 h-5 bg-white-500 text-gray-500 hover:text-current nc-setup-plugin-menu"
/>
<template #overlay> <template #overlay>
<NcMenu class="min-w-20"> <NcMenu class="min-w-20">

3
packages/nc-gui/composables/useAccountSetupStore.ts

@ -4,6 +4,7 @@ export enum Action {
Save = 'save', Save = 'save',
Test = 'test', Test = 'test',
} }
const [useProvideAccountSetupStore, useAccountSetupStore] = createInjectionState(() => { const [useProvideAccountSetupStore, useAccountSetupStore] = createInjectionState(() => {
const apps = ref<(PluginType & { parsedInput?: Record<string, any>; tags?: string[] })[]>([]) const apps = ref<(PluginType & { parsedInput?: Record<string, any>; tags?: string[] })[]>([])
@ -62,6 +63,8 @@ const [useProvideAccountSetupStore, useAccountSetupStore] = createInjectionState
// Plugin settings saved successfully // Plugin settings saved successfully
message.success(activePlugin.value?.formDetails.msgOnInstall || t('msg.success.pluginSettingsSaved')) message.success(activePlugin.value?.formDetails.msgOnInstall || t('msg.success.pluginSettingsSaved'))
// load all apps again to update the pending status
loadSetupApps().catch(console.error)
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} finally { } finally {

Loading…
Cancel
Save