mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-03 09:17:12 +00:00
Nc feat/integrations (#8903)
* feat: integrations backend (WIP) * feat: migration - source table * feat: updated migration * feat: integration APIs - WIP * feat: integration - crud, acl, api tests * feat: integration - crud, acl, api tests * feat: integration - GUI integration * feat: private integration config * feat: integration GUI * feat: delete api and source creation * feat: add hint for input fields * fix: source creation bugs * refactor: placeholder text correction * refactor: include context * feat: integration delete with transaction * refactor: permission scope correction and move ee logic * refactor: migration correction and improvements * feat: confirm dialog * refactor: review comments * refactor: meta service changes * feat: add oss support - WIP * feat: add oss support * refactor: coderabbt suggestions * refactor: exclude config from api response * refactor: coderabbit review comments * refactor: rename migration names * fix: method name correction * fix(nc-gui): integration ui changes * fix(nc-gui): add edit integration ui changes * fix(nc-gui): add shared badge in integrations list * feat(nc-gui): duplicate integration * fix(nocodb): add copy from id integration support in create integration api * fix(nc-gui): update useIntegration store * fix(nc-gui): test connection btn style update * fix(nc-gui): update new integration modal * feat(nc-gui): add sort integration list support * fix(nc-gui): integration table to be center aligned * fix(nc-gui): move form item required mark to right side * fix: remove divider * fix(nc-gui): add input shadow * fix(nc-gui): base name validator error message * fix(nc-gui): add border if search connection input has some value * fix(nc-gui): add close btn in integration modal * chore(nc-gui): lint * fix(nc-gui): pr review changes * chore(nc-gui): cleanup unused code * chore(nc-gui): lint * fix(nc-gui): integrationsType not found issue * fix(nc-gui): update data source table * fix(nc-gui): populate integration name only on input value change * fix(nc-gui): create data source form update * fix: type correction * fix: label correction * fix: font corrections * fix: remove help text * fix: grammar in help text * fix(nc-gui): edit source ui changes * fix(nc-gui): base settings modal changes & datasource search feat * fix(nc-gui): update data source table * fix(nc-gui): move integrations outside team & settings * fix(nc-gui): make connections table full width * fix(nc-gui): modal height issue in small screen * fix(nc-gui): disable editing selected connection in edit data source * fix(nc-gui): add data sources in base settings tab * fix(nc-gui): ant design multiple warnings issue * fix(nc-gui): create source page scrollbar issue * feat(nc-gui): create connection from create source page * chore(nc-gui): lint * fix(nc-gui): update project members tab content margin * chore: label text change * fix: font changes * chore: font corrections * chore: integration => connection * fix(nc-gui): disable auto editing database name on changing connection name * fix(nc-gui): table header overflow issue * fix(nc-gui): show connection crud operation messages in toast * feat(nc-gui): request new integration ui * fix(nc-gui): text area height adjust issue * fix(nc-gui): add connection from source create issue * fix(nc-gui): show data source details in modal * fix(nc-gui): hide private connection option * fix(nc-gui): user should able to edit & save connection without test connection if only title updated * fix(nc-gui): add integration page in oss * fix(nc-gui): typo currection * fix(nc-gui): oss create base ui changes * misc: minor formatting changes * misc: formatting corrections * fix(nc-gui): overlay close btn issue * fix(nc-gui): some review changes * fix(nc-gui): remove link beetween connection name & database name * fix(nc-gui): update edit base/source modal oss * fix(nc-gui): add db type icon in select connection * chore(nc-gui): lint * fix: integration list - allow access based on base level role * fix(nc-gui): load integrations on creating integration from source create issue * fix(nc-gui): add connection count in tab * fix: correction in soft delete logic * fix(nc-gui): reset use ssl on panel collapse * fix(nc-gui): reduce select input font weight * fix(nc-gui): update connection edit access control * fix: integration read api correction * fix(nc-gui): some review changes * fix(nc-gui): labels update * fix(nc-gui): udpate text in delete modal integration -> connection * fix: remove permission from wrong scope * refactor: swagger description correction * fix(nc-gui): remove connection between source name & database name * fix(nc-gui): test connection is not needed form source name. inflection field changes * refactor: include integration title with source * feat: integration pagination * fix: remove unused prop * fix(nc-gui): update all tables tab btns tooltip * feat: new integration request * refactor: replace delete statement and use assigning undefined for better performance * feat(nc-gui): sync data support in project page * fix(nc-gui): all sync data type list * fix(nc-gui): close sync data modal issue * fix(nc-gui): add bg gray color on db icon of tooltip * fix(nc-gui): make connection as required field * fix(nc-gui): show connection name if not found and reload page * fix(nc-gui): show connection name in ds list * fix(nc-gui): ssl related changes * fix: oss permission * fix(nc-gui): active tab issue on clicking source * feat: include source count and sources in api response * fix(nc-gui): add getIntegration fun in useIntegrationStore * fix(nc-gui): source list udpate issue on updating source details * fix(nc-gui): fix external source icon alignment * feat: include base name and source count * fix: query correction * fix(nc-gui): show liked sources list in delete connection modal * fix(nc-gui): display connection usage information in list * fix(nc-gui): add sync data types icons * fix(nc-gui): add pagination support in connection list * fix(nc-gui): connection pagination issue * fix(nc-gui): connection tab count update issue * test(nc-gui): some of test cases updated * fix(nc-gui): some minor review changes * fix(nc-gui): minor ui changes * fix(nc-gui): Cannot read properties of undefined (reading 'sub_type') * fix(nc-gui): udpate all tables btn text * fix(nc-gui): ui changes * fix(nc-gui): overflow issue * fix(nc-gui): add connection icon & back btn in modal * fix(nc-gui): some minor ui changes * test(nc-gui): update source restriction test cases * chore(test): remove only from test * fix(nc-gui): update style of delete connection modal * test(nc-gui): update acl pw test cases * fix(test): ws collaboration role accss test fail issue * fix(nc-gui): add connection successfully added modal * fix(nc-gui): update connection added modal * fix(nc-gui): trigger sync request event on upvote * chore(nc-gui): lint * fix(nc-gui): add learn more btn in connection successfull modal * fix(nc-gui): add integration docs link support * fix(nc-gui): integration table name field text truncate issue * fix: misc corrections * misc: button width change * fix(nc-gui): update icons * fix(nc-gui): update test connection btn icons * fix(nc-gui): all tables btn gap issue * feat(nc-gui): search option in sync data modal * feat(nc-gui): search connection through api * fix(nc-gui): add base and source icon in delete connection modal * fix: update sync request event * fix(nc-gui): rebase conflict issue * fix: connections text length * fix(nc-gui): enable integration/create source supported docs option * fix(nc-gui): update advanced option header style --------- Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
This commit is contained in:
Pranav C
153
packages/nc-gui/components/project/SyncDataModal.vue
Normal file
153
packages/nc-gui/components/project/SyncDataModal.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<script lang="ts" setup>
|
||||
import type { SyncDataType } from '../../lib/enums'
|
||||
|
||||
const props = defineProps<{ open: boolean }>()
|
||||
const emit = defineEmits(['update:open'])
|
||||
const vOpen = useVModel(props, 'open', emit)
|
||||
|
||||
const { syncDataUpvotes, updateSyncDataUpvotes } = useGlobal()
|
||||
|
||||
const { $e } = useNuxtApp()
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredSyncDataTypes = computed(() =>
|
||||
syncDataTypes.filter((s) => s.title.toLowerCase().includes(searchQuery.value.toLowerCase())),
|
||||
)
|
||||
|
||||
const upvotesData = computed(() => {
|
||||
return new Set(syncDataUpvotes.value)
|
||||
})
|
||||
|
||||
const handleUpvote = (syncDataType: SyncDataType) => {
|
||||
if (upvotesData.value.has(syncDataType)) return
|
||||
|
||||
$e(`a:sync-request:${syncDataType}`)
|
||||
|
||||
updateSyncDataUpvotes([...syncDataUpvotes.value, syncDataType])
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NcModal
|
||||
v-model:visible="vOpen"
|
||||
centered
|
||||
size="large"
|
||||
wrap-class-name="nc-project-sync-data-modal-wrapper"
|
||||
nc-modal-class-name="!p-0 h-80vh max-h-[864px]"
|
||||
@keydown.esc="vOpen = false"
|
||||
>
|
||||
<div class="h-full flex flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between gap-4 p-4 border-b-1 border-gray-200">
|
||||
<GeneralIcon icon="refresh" class="flex-none h-5 w-5 !text-blue-700" />
|
||||
<div class="flex-1">
|
||||
<div class="flex-1 flex items-center gap-3">
|
||||
<h3 class="my-0 capitalize text-base font-weight-700">
|
||||
{{ $t('labels.syncData') }}
|
||||
</h3>
|
||||
|
||||
<NcBadge :border="false" class="text-brand-500 !h-5.5 bg-brand-50 text-sm px-2">{{
|
||||
$t('msg.toast.futureRelease')
|
||||
}}</NcBadge>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">{{ $t('labels.syncDataModalSubtitle') }}</div>
|
||||
</div>
|
||||
<NcButton type="text" size="xs" class="!px-0" @click="vOpen = false">
|
||||
<GeneralIcon icon="close" />
|
||||
</NcButton>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-end gap-3 max-w-[918px] mx-auto">
|
||||
<a-input
|
||||
v-model:value="searchQuery"
|
||||
type="text"
|
||||
class="nc-search-sync-data-input !min-w-[300px] !max-w-[300px] nc-input-sm flex-none"
|
||||
placeholder="Search service"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 px-6 flex overflow-auto nc-scrollbar-thin">
|
||||
<div
|
||||
class="flex flex-col gap-6 w-full max-w-[918px] mx-auto"
|
||||
:class="{
|
||||
'flex-1': !filteredSyncDataTypes.length,
|
||||
}"
|
||||
>
|
||||
<div v-if="filteredSyncDataTypes.length" class="flex items-start gap-3 flex-wrap pb-6">
|
||||
<div v-for="syncData of filteredSyncDataTypes" :key="syncData.value" class="nc-sync-data-card">
|
||||
<div class="card-icon-wrapper">
|
||||
<component :is="syncData.icon" class="flex-none stroke-transparent" />
|
||||
</div>
|
||||
<div class="card-title flex-1">
|
||||
{{ $t(syncData.title) }}
|
||||
</div>
|
||||
<div>
|
||||
<NcButton
|
||||
type="secondary"
|
||||
size="xsmall"
|
||||
class="nc-sync-data-upvote-btn !rounded-lg !px-2"
|
||||
:class="{
|
||||
selected: upvotesData.has(syncData.value),
|
||||
}"
|
||||
@click="handleUpvote(syncData.value)"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<GeneralIcon icon="thumbsUpOutline" />
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="pt-8 flex-1 flex items-center justify-center">
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.nc-project-sync-data-modal-wrapper {
|
||||
.nc-modal {
|
||||
@apply !p-0;
|
||||
height: min(90vh, 1024px);
|
||||
max-height: min(90vh, 1024px) !important;
|
||||
}
|
||||
|
||||
.nc-sync-data-title {
|
||||
@apply text-xl font-semibold;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper.nc-search-sync-data-input {
|
||||
&:not(:has(.ant-input-clear-icon-hidden)):has(.ant-input-clear-icon) {
|
||||
@apply border-[var(--ant-primary-5)];
|
||||
}
|
||||
}
|
||||
.nc-sync-data-card {
|
||||
@apply p-3 flex items-center gap-4 rounded-xl border-1 border-gray-200 w-[298px] h-[76px];
|
||||
|
||||
.card-icon-wrapper {
|
||||
@apply w-[52px] h-[52px] p-1 flex items-center justify-center bg-gray-100 rounded-lg;
|
||||
|
||||
.card-icon {
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-base font-weight-700 text-gray-800;
|
||||
}
|
||||
|
||||
.nc-sync-data-upvote-btn {
|
||||
&.selected {
|
||||
@apply shadow-selected !text-brand-500 !border-brand-500 !cursor-not-allowed pointer-events-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user