mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 04:16:49 +00:00
feat: data reflection preps (#10227)
* feat: integration hooks * feat: data reflection * feat: improved UX for data reflection * chore: lint * fix(nc-gui): update nocodb integration ui * fix(nocodb): type error * fix(nc-gui): nocodb integration icon and modal gap issue * fix: defer integration hooks * fix: check proper state * refactor(nc-gui): integration modal * refactor(nc-gui): integration modal ui changes * refactor: change default port * fix(nc-gui): add base id copy input * fix(nc-gui): schema dropdown placement and item height issue * fix(nc-gui): nocodb connection bg color issue * fix(nc-gui): update nocodb integration count and user logo * fix: rspack keep class * feat: get connection menu item * chore: rebase issue * fix: hide nc from sources * feat: move data reflection to model level * fix: remove deprecated fn & fix type errors * feat: reflection settings * feat: feature flag for data reflection * refactor: avoid save on feature flags * fix: properly show host * fix: PR requested changes * fix: use named parameters for queries --------- Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
This commit is contained in:
Mert E.
@@ -0,0 +1,102 @@
|
||||
<script lang="ts" setup>
|
||||
import { type IntegrationCategoryType, SyncDataType, clientTypes as _clientTypes } from '#imports'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
integrationType: IntegrationCategoryType
|
||||
integrationSubType: SyncDataType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:open'])
|
||||
|
||||
const vOpen = useVModel(props, 'open', emit)
|
||||
|
||||
const { isFromIntegrationPage, pageMode, IntegrationsPageMode, activeIntegration, activeIntegrationItem } = useIntegrationStore()
|
||||
|
||||
const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="activeIntegration" class="h-full">
|
||||
<div class="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-gray-200">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<NcButton
|
||||
v-if="!isEditMode && !isFromIntegrationPage"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="pageMode = IntegrationsPageMode.LIST"
|
||||
>
|
||||
<GeneralIcon icon="arrowLeft" />
|
||||
</NcButton>
|
||||
<div
|
||||
v-if="activeIntegrationItem?.sub_type"
|
||||
class="bg-nc-bg-gray-light rounded-md h-8 w-8 flex-none flex items-center justify-center children:flex-none"
|
||||
>
|
||||
<GeneralIntegrationIcon
|
||||
:type="activeIntegrationItem.sub_type"
|
||||
:size="activeIntegrationItem.sub_type === SyncDataType.NOCODB ? 'lg' : 'sm'"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 text-base font-weight-700">{{ activeIntegration?.title }}</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<slot name="headerRightExtra"> </slot>
|
||||
<slot name="headerRight"> </slot>
|
||||
<NcButton size="small" type="text" @click="vOpen = false">
|
||||
<GeneralIcon icon="close" class="text-gray-600" />
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-[calc(100%_-_66px)] flex">
|
||||
<div class="nc-edit-or-add-integration-left-panel nc-scrollbar-thin relative">
|
||||
<div class="w-full gap-4 max-w-[784px]">
|
||||
<slot name="leftPanel" class="nc-edit-or-add-integration relative flex flex-col justify-center gap-2 w-full"> </slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="rightPanel" class="nc-edit-or-add-integration-right-panel">
|
||||
<div v-if="!$slots.rightPanel" class="nc-edit-or-add-integration-right-panel">
|
||||
<WorkspaceIntegrationsSupportedDocs />
|
||||
<NcDivider />
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nc-form-item {
|
||||
padding-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-collapse-header) {
|
||||
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
|
||||
}
|
||||
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
|
||||
@apply !right-0;
|
||||
}
|
||||
|
||||
:deep(.ant-collapse-content-box) {
|
||||
@apply !px-0 !pb-0 !pt-3;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-explain-error) {
|
||||
@apply !text-xs;
|
||||
}
|
||||
|
||||
:deep(.ant-divider) {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-with-help .ant-form-item-explain) {
|
||||
@apply !min-h-0;
|
||||
}
|
||||
|
||||
:deep(.ant-select .ant-select-selector .ant-select-selection-item) {
|
||||
@apply font-weight-400;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -0,0 +1,144 @@
|
||||
<script lang="ts" setup>
|
||||
import { type IntegrationCategoryType, SyncDataType, clientTypes as _clientTypes } from '#imports'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
integrationType: IntegrationCategoryType
|
||||
integrationSubType: SyncDataType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:open'])
|
||||
|
||||
const vOpen = useVModel(props, 'open', emit)
|
||||
|
||||
const { pageMode, IntegrationsPageMode, activeIntegration, activeIntegrationItem, saveIntegration, updateIntegration } =
|
||||
useIntegrationStore()
|
||||
|
||||
const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
|
||||
|
||||
const initState = ref({
|
||||
type: props.integrationType,
|
||||
sub_type: props.integrationSubType,
|
||||
})
|
||||
|
||||
const { form, formState, isLoading, initialState, submit } = useProvideFormBuilderHelper({
|
||||
formSchema: activeIntegrationItem.value?.form,
|
||||
initialState: initState,
|
||||
onSubmit: async () => {
|
||||
// if it is edit mode and activeIntegration id is not present then return
|
||||
if (isEditMode.value && !activeIntegration.value?.id) return
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
if (pageMode.value === IntegrationsPageMode.ADD) {
|
||||
await saveIntegration(formState.value)
|
||||
} else {
|
||||
await updateIntegration({
|
||||
id: activeIntegration.value?.id,
|
||||
...formState.value,
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// select and focus title field on load
|
||||
onMounted(async () => {
|
||||
isLoading.value = true
|
||||
|
||||
if (pageMode.value === IntegrationsPageMode.ADD) {
|
||||
formState.value.title = activeIntegration.value?.title || ''
|
||||
} else {
|
||||
if (!activeIntegration.value) return
|
||||
|
||||
formState.value = {
|
||||
title: activeIntegration.value.title || '',
|
||||
config: activeIntegration.value.config,
|
||||
is_private: !!activeIntegration.value?.is_private,
|
||||
...initState.value,
|
||||
}
|
||||
initialState.value = JSON.parse(JSON.stringify(formState.value))
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
// todo: replace setTimeout and follow better approach
|
||||
setTimeout(() => {
|
||||
const input = form.value?.$el?.querySelector('input[type=text]')
|
||||
input?.setSelectionRange(0, formState.value.title.length)
|
||||
input?.focus()
|
||||
}, 500)
|
||||
})
|
||||
|
||||
isLoading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WorkspaceIntegrationsFormsEditOrAddCommonWrapper
|
||||
v-if="activeIntegration && activeIntegrationItem?.dynamic"
|
||||
v-bind="props"
|
||||
@update:open="vOpen = $event"
|
||||
>
|
||||
<template #headerRight>
|
||||
<NcButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
class="nc-extdb-btn-submit"
|
||||
@click="submit"
|
||||
>
|
||||
{{ pageMode === IntegrationsPageMode.ADD ? 'Create integration' : 'Update integration' }}
|
||||
</NcButton>
|
||||
</template>
|
||||
<template #leftPanel="{ class: leftPanelClass }">
|
||||
<div :class="leftPanelClass">
|
||||
<NcFormBuilder class="px-2" />
|
||||
<div class="mt-10"></div>
|
||||
</div>
|
||||
</template>
|
||||
</WorkspaceIntegrationsFormsEditOrAddCommonWrapper>
|
||||
<WorkspaceIntegrationsConnect v-if="activeIntegration" v-bind="props" @update:open="vOpen = $event" />
|
||||
<div v-else></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nc-form-item {
|
||||
padding-right: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-collapse-header) {
|
||||
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
|
||||
}
|
||||
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
|
||||
@apply !right-0;
|
||||
}
|
||||
|
||||
:deep(.ant-collapse-content-box) {
|
||||
@apply !px-0 !pb-0 !pt-3;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-explain-error) {
|
||||
@apply !text-xs;
|
||||
}
|
||||
|
||||
:deep(.ant-divider) {
|
||||
@apply m-0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-with-help .ant-form-item-explain) {
|
||||
@apply !min-h-0;
|
||||
}
|
||||
|
||||
:deep(.ant-select .ant-select-selector .ant-select-selection-item) {
|
||||
@apply font-weight-400;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss"></style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
// Define your props here
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
// Set default prop values here
|
||||
})
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user