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>
2026-05-02 02:28:40 +00:00 · 2025-01-14 14:59:45 +03:00
parent 51edd98b9e
commit c2f50efbb9
39 changed files with 1379 additions and 272 deletions
--- a/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/Wrapper.vue
+++ b/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/Wrapper.vue
@@ -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>
--- a/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/index.vue
+++ b/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { IntegrationCategoryType, SyncDataType } from '#imports'
-import { clientTypes as _clientTypes } from '#imports'
+import { type IntegrationCategoryType, SyncDataType, clientTypes as _clientTypes } from '#imports'

 const props = defineProps<{
  open: boolean
@@ -12,15 +11,8 @@ const emit = defineEmits(['update:open'])

 const vOpen = useVModel(props, 'open', emit)

-const {
-  isFromIntegrationPage,
-  pageMode,
-  IntegrationsPageMode,
-  activeIntegration,
-  activeIntegrationItem,
-  saveIntegration,
-  updateIntegration,
-} = useIntegrationStore()
+const { pageMode, IntegrationsPageMode, activeIntegration, activeIntegrationItem, saveIntegration, updateIntegration } =
+  useIntegrationStore()

 const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)

@@ -87,52 +79,32 @@ onMounted(async () => {
 </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>
-        <WorkspaceIntegrationsIcon :integration-item="activeIntegrationItem" size="xs" />
-        <div class="flex-1 text-base font-weight-700">{{ activeIntegration?.title }}</div>
+  <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>
-      <div class="flex items-center gap-3">
-        <NcButton
-          size="small"
-          type="primary"
-          :disabled="isLoading"
-          :loading="isLoading"
-          class="nc-extdb-btn-submit"
-          @click="submit"
-        >
-          {{ pageMode === IntegrationsPageMode.ADD ? 'Create integration' : 'Update integration' }}
-        </NcButton>
-        <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 !px-4">
-        <div class="w-full gap-4 max-w-[784px]">
-          <div class="nc-edit-or-add-integration bg-white relative flex flex-col justify-center gap-2 w-full">
-            <NcFormBuilder class="px-2" />
-            <div class="mt-10"></div>
-          </div>
-        </div>
-      </div>
-      <div class="nc-edit-or-add-integration-right-panel">
-        <WorkspaceIntegrationsSupportedDocs />
-        <NcDivider />
-      </div>
-    </div>
-  </div>
+    </template>
+  </WorkspaceIntegrationsFormsEditOrAddCommonWrapper>
+  <WorkspaceIntegrationsConnect v-if="activeIntegration" v-bind="props" @update:open="vOpen = $event" />
+  <div v-else></div>
 </template>

 <style lang="scss" scoped>
--- a/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/Wrapper.vue
+++ b/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/Wrapper.vue
@@ -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>
--- a/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/index.vue
+++ b/packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/index.vue