chore: sync

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/Wrapper.vue

@@ -11,17 +11,18 @@ const emit = defineEmits(['update:open'])
 
 const vOpen = useVModel(props, 'open', emit)
 
-const { isFromIntegrationPage, pageMode, IntegrationsPageMode, activeIntegration, activeIntegrationItem } = useIntegrationStore()
+const { isFromIntegrationPage, showBackButton, 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="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-nc-border-gray-medium">
       <div class="flex-1 flex items-center gap-3">
         <NcButton
-          v-if="!isEditMode && !isFromIntegrationPage"
+          v-if="!isEditMode && !isFromIntegrationPage && showBackButton"
           type="text"
           size="small"
           @click="pageMode = IntegrationsPageMode.LIST"
@@ -43,7 +44,7 @@ const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
         <slot name="headerRightExtra"> </slot>
         <slot name="headerRight"> </slot>
         <NcButton size="small" type="text" @click="vOpen = false">
-          <GeneralIcon icon="close" class="text-gray-600" />
+          <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
         </NcButton>
       </div>
     </div>
@@ -98,5 +99,3 @@ const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
   @apply font-weight-400;
 }
 </style>
-
-<style lang="scss"></style>

packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Common/index.vue

@@ -21,6 +21,10 @@ const {
   testConnection,
 } = useIntegrationStore()
 
+const { $api } = useNuxtApp()
+
+const { activeWorkspaceId } = storeToRefs(useWorkspace())
+
 const isEditMode = computed(() => pageMode.value === IntegrationsPageMode.EDIT)
 
 const testConnectionResult = ref<{ success: boolean; message?: string } | null>(null)
@@ -59,6 +63,19 @@ const { form, formState, isLoading, initialState, submit } = useProvideFormBuild
   onChange: () => {
     testConnectionResult.value = null
   },
+  fetchOptions: async (key) => {
+    const wsId = activeWorkspaceId?.value
+    if (!wsId) return []
+    return await $api.internal.postOperation(
+      wsId,
+      NO_SCOPE,
+      { operation: 'integrationFetchOptions' },
+      {
+        integration: formState.value,
+        key,
+      },
+    )
+  },
 })
 
 // select and focus title field on load
@@ -117,14 +134,10 @@ const onTestConnection = async () => {
         @click="onTestConnection"
       >
         <div class="flex items-center gap-2">
-          <GeneralIcon
-            v-if="testConnectionResult?.success === true"
-            icon="circleCheckSolid"
-            class="text-success w-4 h-4 bg-white-500"
-          />
+          <GeneralIcon v-if="testConnectionResult?.success === true" icon="circleCheckSolid" class="text-success w-4 h-4" />
           <NcTooltip v-if="testConnectionResult?.success === false" placement="top">
             <template #title>{{ testConnectionResult?.message }}</template>
-            <GeneralIcon icon="alertTriangleSolid" class="text-warning w-4 h-4 bg-white-500" />
+            <GeneralIcon icon="alertTriangleSolid" class="text-warning w-4 h-4" />
           </NcTooltip>
           Test connection
         </div>

packages/nc-gui/components/workspace/integrations/forms/EditOrAdd/Database/index.vue

@@ -58,6 +58,8 @@ const { $e } = useNuxtApp()
 
 const { t } = useI18n()
 
+const { appInfo } = useGlobal()
+
 const creatingSource = ref(false)
 
 const _getDefaultConnectionConfig = (client = ClientType.MYSQL) => {
@@ -576,7 +578,7 @@ watch(
 
 <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="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-nc-border-gray-medium">
       <div class="flex-1 flex items-center gap-3">
         <NcButton
           v-if="!isEditMode && !isFromIntegrationPage"
@@ -588,7 +590,7 @@ watch(
         </NcButton>
         <div
           v-if="activeIntegrationIcon"
-          class="h-8 w-8 flex items-center justify-center children:flex-none bg-gray-200 rounded-lg"
+          class="h-8 w-8 flex items-center justify-center children:flex-none bg-nc-bg-gray-medium rounded-lg"
         >
           <component :is="activeIntegrationIcon" class="!stroke-transparent w-4 h-4" />
         </div>
@@ -634,7 +636,7 @@ watch(
           {{ pageMode === IntegrationsPageMode.ADD ? 'Create connection' : 'Update connection' }}
         </NcButton>
         <NcButton size="small" type="text" @click="vOpen = false">
-          <GeneralIcon icon="close" class="text-gray-600" />
+          <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
         </NcButton>
       </div>
     </div>
@@ -642,7 +644,7 @@ watch(
     <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-8 max-w-[768px]">
-          <div class="nc-edit-or-add-connection bg-white relative flex flex-col justify-center gap-2 w-full">
+          <div class="nc-edit-or-add-connection bg-nc-bg-default relative flex flex-col justify-center gap-2 w-full">
             <a-form
               ref="form"
               :model="formState"
@@ -687,7 +689,7 @@ watch(
                     </NcButton>
                     <template #overlay>
                       <div class="p-4 w-[448px] flex flex-col gap-3">
-                        <div class="text-sm text-gray-700">
+                        <div class="text-sm text-nc-content-gray-subtle">
                           Auto populate connection configuration using database connection URL
                         </div>
 
@@ -1015,7 +1017,7 @@ watch(
                       </div>
                     </template>
 
-                    <div class="border-1 border-gray-200 rounded-lg p-3">
+                    <div class="border-1 border-nc-border-gray-medium rounded-lg p-3">
                       <a-row :gutter="24">
                         <a-col :span="12">
                           <a-form-item label="SSL mode">
@@ -1192,18 +1194,13 @@ watch(
 
                     <div class="flex flex-col gap-2">
                       <div>Edit Connection JSON</div>
-                      <div class="border-1 border-gray-200 !rounded-lg shadow-sm overflow-hidden">
+                      <div class="border-1 border-nc-border-gray-medium !rounded-lg shadow-sm overflow-hidden">
                         <Suspense>
                           <template #default>
                             <MonacoEditor v-model="customJsonFormState" class="nc-connection-json-editor h-[400px] w-full" />
                           </template>
                           <template #fallback>
-                            <div class="h-[400px] w-full flex items-center justify-center bg-gray-50 dark:bg-gray-900">
-                              <div class="text-center">
-                                <a-spin size="large" />
-                                <div class="mt-4 text-gray-600 dark:text-gray-400">Loading Monaco Editor...</div>
-                              </div>
-                            </div>
+                            <MonacoLoading class="h-[400px] w-full" />
                           </template>
                         </Suspense>
                       </div>
@@ -1217,13 +1214,13 @@ watch(
           </div>
         </div>
         <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
-          <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
+          <div class="flex items-center justify-center h-full w-full !bg-nc-bg-default !bg-opacity-85 z-1000">
             <a-spin size="large" />
           </div>
         </general-overlay>
       </div>
       <div class="nc-edit-or-add-integration-right-panel">
-        <template v-if="isEeUI">
+        <template v-if="appInfo.isCloud && !appInfo.isOnPrem">
           <DashboardSettingsDataSourcesInfo varient="new" />
           <NcDivider />
         </template>
@@ -1279,16 +1276,6 @@ watch(
     }
   }
 
-  .nc-form-section {
-    @apply flex flex-col gap-3;
-  }
-  .nc-form-section-title {
-    @apply text-sm font-bold text-gray-800;
-  }
-  .nc-form-section-body {
-    @apply flex flex-col gap-3;
-  }
-
   .nc-connection-json-editor {
     @apply min-h-[300px] max-h-[600px];
     resize: vertical;
@@ -1296,16 +1283,16 @@ watch(
   }
 
   :deep(.ant-form-item-label > label.ant-form-item-required:after) {
-    @apply content-['*'] inline-block text-inherit text-red-500 ml-1;
+    @apply content-['*'] inline-block text-inherit text-nc-content-red-medium ml-1;
   }
 
   .nc-form-extra-connectin-parameters {
     :deep(.ant-input) {
       &:not(:hover):not(:focus):not(:disabled) {
-        @apply !shadow-default !border-gray-200;
+        @apply !shadow-default !border-nc-border-gray-medium;
       }
       &:hover:not(:focus):not(:disabled) {
-        @apply !border-gray-200 !shadow-hover;
+        @apply !border-nc-border-gray-medium !shadow-hover;
       }
       &:focus {
         @apply !shadow-selected !ring-0;
@@ -1343,10 +1330,10 @@ watch(
     &:not(.ant-form-item-has-error) {
       &:not(:has(.ant-input-password)) .ant-input {
         &:not(:hover):not(:focus):not(:disabled) {
-          @apply shadow-default border-gray-200;
+          @apply shadow-default border-nc-border-gray-medium;
         }
         &:hover:not(:focus):not(:disabled) {
-          @apply border-gray-200 shadow-hover;
+          @apply border-nc-border-gray-medium shadow-hover;
         }
         &:focus {
           @apply shadow-selected ring-0;
@@ -1355,10 +1342,10 @@ watch(
       .ant-input-number,
       .ant-input-affix-wrapper.ant-input-password {
         &:not(:hover):not(:focus-within):not(:disabled) {
-          @apply shadow-default border-gray-200;
+          @apply shadow-default border-nc-border-gray-medium;
         }
         &:hover:not(:focus-within):not(:disabled) {
-          @apply border-gray-200 shadow-hover;
+          @apply border-nc-border-gray-medium shadow-hover;
         }
         &:focus-within {
           @apply shadow-selected ring-0;