mirror of https://github.com/nocodb/nocodb
Browse Source
* fix(nc-gui): always show edit connection tab on clicking data source * fix(nc-gui): show deleted workspace user info in connection list * fix(nc-gui): show tooltip on hover deleted user details * fix(nc-gui): some review changes * fix(nc-gui): sync modal cleanup * fix: supported docs label * fix(nc-gui): pg icon issue in data source list * fix(nc-gui): new integration page ui changes * fix(nc-gui): handle upvote * fix(nc-gui): add integration category icons * fix(nc-gui): add request new integration in other category * fix(nc-gui): focus request integration input on open * fix(nc-gui): integration tab left spacing issue * fix(nc-gui): integration tab list center aligned * misc: minor changes * fix(nc-gui): user should able to upvote on cliking tiles * fix(nc-gui): add remaining integrations * fix(nc-gui): add missing integration icons * fix(nc-gui): trigger test connection on adding new connection from create source * fix(nc-gui): integration list modal ui changes * fix(nc-gui): remove integration type badge border * fix(nc-gui): show colored integration icon on hover * fix(nc-gui): integration upvote btn shadow issue * fix(nc-gui): some pr review changes * fix(nc-gui): move logic part in script * chore(nc-gui): lint --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>pull/9170/head
Ramesh Mane
5 months ago
committed by
GitHub
43 changed files with 2346 additions and 165 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 742 B |
|
After Width: | Height: | Size: 516 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 895 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 413 B |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 702 B |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 619 B |
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,839 @@
|
||||
<script lang="ts" setup> |
||||
import type { IntegrationType, UserType, WorkspaceUserType } from 'nocodb-sdk' |
||||
import dayjs from 'dayjs' |
||||
|
||||
type SortFields = 'title' | 'sub_type' | 'created_at' | 'created_by' | 'source_count' |
||||
|
||||
const { |
||||
integrations, |
||||
isLoadingIntegrations, |
||||
deleteConfirmText, |
||||
integrationPaginationData, |
||||
successConfirmModal, |
||||
searchQuery, |
||||
loadIntegrations, |
||||
deleteIntegration, |
||||
editIntegration, |
||||
duplicateIntegration, |
||||
getIntegration, |
||||
} = useIntegrationStore() |
||||
|
||||
const { $api, $e } = useNuxtApp() |
||||
|
||||
const { allCollaborators } = storeToRefs(useWorkspace()) |
||||
|
||||
const isDeleteIntegrationModalOpen = ref(false) |
||||
const toBeDeletedIntegration = ref< |
||||
| (IntegrationType & { |
||||
sources?: { |
||||
id: string |
||||
alias: string |
||||
project_title: string |
||||
base_id: string |
||||
}[] |
||||
}) |
||||
| null |
||||
>(null) |
||||
|
||||
const isLoadingGetLinkedSources = ref(false) |
||||
|
||||
const tableWrapper = ref<HTMLDivElement>() |
||||
|
||||
const titleHeaderCellRef = ref<HTMLDivElement>() |
||||
|
||||
const orderBy = ref<Partial<Record<SortFields, 'asc' | 'desc' | undefined>>>({}) |
||||
|
||||
const localCollaborators = ref<User[] | UserType[]>([]) |
||||
|
||||
const { width } = useElementBounding(titleHeaderCellRef) |
||||
|
||||
const collaboratorsMap = computed<Map<string, (WorkspaceUserType & { id: string }) | User | UserType>>(() => { |
||||
const map = new Map() |
||||
|
||||
;(isEeUI ? allCollaborators.value : localCollaborators.value)?.forEach((coll) => { |
||||
if (coll?.id) { |
||||
map.set(coll.id, coll) |
||||
} |
||||
}) |
||||
return map |
||||
}) |
||||
|
||||
const filteredIntegrations = computed(() => |
||||
(integrations.value || []).sort((a, b) => { |
||||
if (orderBy.value.title) { |
||||
if (a.title && b.title) { |
||||
return orderBy.value.title === 'asc' ? (a.title < b.title ? -1 : 1) : a.title > b.title ? -1 : 1 |
||||
} |
||||
} else if (orderBy.value.sub_type) { |
||||
if (a.sub_type && b.sub_type) { |
||||
return orderBy.value.sub_type === 'asc' ? (a.sub_type < b.sub_type ? -1 : 1) : a.sub_type > b.sub_type ? -1 : 1 |
||||
} |
||||
} else if (orderBy.value.created_at) { |
||||
if (a?.created_at && b?.created_at) { |
||||
return orderBy.value.created_at === 'asc' |
||||
? dayjs(a.created_at).local().isBefore(dayjs(b.created_at).local()) |
||||
? -1 |
||||
: 1 |
||||
: dayjs(a.created_at).local().isAfter(dayjs(b.created_at).local()) |
||||
? -1 |
||||
: 1 |
||||
} |
||||
} else if (orderBy.value.created_by) { |
||||
if (a.created_by && b.created_by && collaboratorsMap.value.get(a.created_by) && collaboratorsMap.value.get(b.created_by)) { |
||||
return orderBy.value.created_by === 'asc' |
||||
? collaboratorsMap.value.get(a.created_by)?.email < collaboratorsMap.value.get(b.created_by)?.email |
||||
? -1 |
||||
: 1 |
||||
: collaboratorsMap.value.get(a.created_by)?.email > collaboratorsMap.value.get(b.created_by)?.email |
||||
? -1 |
||||
: 1 |
||||
} |
||||
} else if (orderBy.value.source_count) { |
||||
if (a.source_count !== undefined && b.source_count !== undefined) { |
||||
return orderBy.value.source_count === 'asc' ? a.source_count - b.source_count : b.source_count - a.source_count |
||||
} |
||||
} |
||||
return 0 |
||||
}), |
||||
) |
||||
|
||||
async function loadConnections( |
||||
page = integrationPaginationData.value.page, |
||||
limit = integrationPaginationData.value.pageSize, |
||||
updateCurrentPage = true, |
||||
) { |
||||
try { |
||||
if (updateCurrentPage) { |
||||
integrationPaginationData.value.page = 1 |
||||
} |
||||
|
||||
await loadIntegrations(undefined, undefined, updateCurrentPage ? 1 : page, limit) |
||||
} catch {} |
||||
} |
||||
|
||||
const handleChangePage = async (page: number) => { |
||||
integrationPaginationData.value.page = page |
||||
await loadConnections(undefined, undefined, false) |
||||
} |
||||
|
||||
const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({ |
||||
paginationDataRef: integrationPaginationData, |
||||
changePage: handleChangePage, |
||||
isViewDataLoading: isLoadingIntegrations, |
||||
}) |
||||
|
||||
const openDeleteIntegration = async (source: IntegrationType) => { |
||||
isLoadingGetLinkedSources.value = true |
||||
|
||||
$e('c:integration:delete') |
||||
deleteConfirmText.value = null |
||||
isDeleteIntegrationModalOpen.value = true |
||||
toBeDeletedIntegration.value = source |
||||
|
||||
const connectionDetails = await getIntegration(source, { |
||||
includeSources: true, |
||||
}) |
||||
toBeDeletedIntegration.value.sources = connectionDetails?.sources || [] |
||||
|
||||
isLoadingGetLinkedSources.value = false |
||||
} |
||||
|
||||
const onDeleteConfirm = async () => { |
||||
await deleteIntegration(toBeDeletedIntegration.value, true) |
||||
} |
||||
|
||||
const loadOrgUsers = async () => { |
||||
try { |
||||
const response: any = await $api.orgUsers.list() |
||||
|
||||
if (!response?.list) return |
||||
|
||||
localCollaborators.value = response.list as UserType[] |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const updateOrderBy = (field: SortFields) => { |
||||
if (!integrations.value?.length) return |
||||
|
||||
// Only single field sort supported, other old field sort config will reset |
||||
if (orderBy.value?.[field] === 'asc') { |
||||
orderBy.value = { |
||||
[field]: 'desc', |
||||
} |
||||
} else if (orderBy.value?.[field] === 'desc') { |
||||
orderBy.value = { |
||||
[field]: undefined, |
||||
} |
||||
} else { |
||||
orderBy.value = { |
||||
[field]: 'asc', |
||||
} |
||||
} |
||||
} |
||||
|
||||
const handleSearchConnection = useDebounceFn(() => { |
||||
loadConnections() |
||||
}, 250) |
||||
|
||||
const renderAltOrOptlKey = () => { |
||||
return isMac() ? '⌥' : 'ALT' |
||||
} |
||||
|
||||
const isUserDeleted = (userId?: string) => { |
||||
if (!userId) return false |
||||
|
||||
if (isEeUI) { |
||||
return !!collaboratorsMap.value.get(userId)?.deleted |
||||
} else { |
||||
return !collaboratorsMap.value.get(userId)?.email |
||||
} |
||||
} |
||||
|
||||
const getUserNameByCreatedBy = (createdBy: string) => { |
||||
return ( |
||||
collaboratorsMap.value.get(createdBy)?.display_name || |
||||
collaboratorsMap.value.get(createdBy)?.email?.slice(0, collaboratorsMap.value.get(createdBy)?.email?.indexOf('@')) |
||||
) |
||||
} |
||||
|
||||
useEventListener(tableWrapper, 'scroll', () => { |
||||
const stickyHeaderCell = tableWrapper.value?.querySelector('th.cell-title') |
||||
const nonStickyHeaderFirstCell = tableWrapper.value?.querySelector('th.cell-type') |
||||
|
||||
if (!stickyHeaderCell?.getBoundingClientRect().right || !nonStickyHeaderFirstCell?.getBoundingClientRect().left) { |
||||
return |
||||
} |
||||
|
||||
if (nonStickyHeaderFirstCell?.getBoundingClientRect().left < stickyHeaderCell?.getBoundingClientRect().right) { |
||||
tableWrapper.value?.classList.add('sticky-shadow') |
||||
} else { |
||||
tableWrapper.value?.classList.remove('sticky-shadow') |
||||
} |
||||
}) |
||||
|
||||
onMounted(async () => { |
||||
if (!isEeUI) { |
||||
await Promise.allSettled([!integrations.value.length && loadIntegrations(), loadOrgUsers()]) |
||||
} else if (!integrations.value.length) { |
||||
await loadIntegrations() |
||||
} |
||||
}) |
||||
// Keyboard shortcuts for pagination |
||||
onKeyStroke('ArrowLeft', onLeft) |
||||
onKeyStroke('ArrowRight', onRight) |
||||
onKeyStroke('ArrowUp', onUp) |
||||
onKeyStroke('ArrowDown', onDown) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="h-full flex flex-col gap-6 nc-workspace-connections"> |
||||
<div class="flex justify-between gap-12"> |
||||
<div class="text-sm font-normal text-gray-600"> |
||||
<div> |
||||
Manage connections for your integrations. |
||||
<a target="_blank" rel="noopener noreferrer"> Learn more </a> |
||||
</div> |
||||
</div> |
||||
<div class="flex items-center justify-end gap-3 mx-1"> |
||||
<a-input |
||||
v-model:value="searchQuery" |
||||
type="text" |
||||
class="nc-search-integration-input !min-w-[300px] nc-input-sm flex-none" |
||||
:placeholder="`${$t('general.search')} ${$t('general.connections').toLowerCase()}`" |
||||
allow-clear |
||||
@input="handleSearchConnection" |
||||
> |
||||
<template #prefix> |
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500" /> |
||||
</template> |
||||
</a-input> |
||||
</div> |
||||
</div> |
||||
<div class="table-container relative flex-1"> |
||||
<div |
||||
ref="tableWrapper" |
||||
class="nc-workspace-integration-table relative nc-scrollbar-thin !overflow-auto max-h-[calc(100%_-_40px)]" |
||||
:class="{ |
||||
'h-full': filteredIntegrations?.length, |
||||
}" |
||||
> |
||||
<table class="!sticky top-0 z-5 w-full"> |
||||
<thead> |
||||
<tr> |
||||
<th |
||||
class="cell-title !hover:bg-gray-100 select-none cursor-pointer" |
||||
:class="{ |
||||
'cursor-not-allowed': !filteredIntegrations?.length, |
||||
'!text-gray-700': orderBy.title, |
||||
}" |
||||
@click="updateOrderBy('title')" |
||||
> |
||||
<div ref="titleHeaderCellRef" class="flex items-center gap-3"> |
||||
<div>Name</div> |
||||
<GeneralIcon |
||||
v-if="orderBy.title" |
||||
icon="chevronDown" |
||||
class="flex-none" |
||||
:class="{ |
||||
'transform rotate-180': orderBy?.title === 'asc', |
||||
}" |
||||
/> |
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" /> |
||||
</div> |
||||
</th> |
||||
<th |
||||
class="cell-type !hover:bg-gray-100 select-none cursor-pointer" |
||||
:class="{ |
||||
'cursor-not-allowed': !filteredIntegrations?.length, |
||||
'!text-gray-700': orderBy.sub_type, |
||||
}" |
||||
@click="updateOrderBy('sub_type')" |
||||
> |
||||
<div class="flex items-center gap-3"> |
||||
<div>Type</div> |
||||
<GeneralIcon |
||||
v-if="orderBy.sub_type" |
||||
icon="chevronDown" |
||||
class="flex-none" |
||||
:class="{ |
||||
'transform rotate-180': orderBy.sub_type === 'asc', |
||||
}" |
||||
/> |
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" /> |
||||
</div> |
||||
</th> |
||||
|
||||
<th |
||||
class="cell-created-date !hover:bg-gray-100 select-none cursor-pointer" |
||||
:class="{ |
||||
'cursor-not-allowed': !filteredIntegrations?.length, |
||||
'!text-gray-700': orderBy.created_at, |
||||
}" |
||||
@click="updateOrderBy('created_at')" |
||||
> |
||||
<div class="flex items-center gap-3"> |
||||
<div>Date added</div> |
||||
<GeneralIcon |
||||
v-if="orderBy.created_at" |
||||
icon="chevronDown" |
||||
class="flex-none" |
||||
:class="{ |
||||
'transform rotate-180': orderBy.created_at === 'asc', |
||||
}" |
||||
/> |
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" /> |
||||
</div> |
||||
</th> |
||||
<th |
||||
class="cell-added-by !hover:bg-gray-100 select-none cursor-pointer" |
||||
:class="{ |
||||
'cursor-not-allowed': !filteredIntegrations?.length, |
||||
'!text-gray-700': orderBy.created_by, |
||||
}" |
||||
@click="updateOrderBy('created_by')" |
||||
> |
||||
<div class="flex items-center gap-3"> |
||||
<div>Added by</div> |
||||
<GeneralIcon |
||||
v-if="orderBy.created_by" |
||||
icon="chevronDown" |
||||
class="flex-none" |
||||
:class="{ |
||||
'transform rotate-180': orderBy.created_by === 'asc', |
||||
}" |
||||
/> |
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" /> |
||||
</div> |
||||
</th> |
||||
<th |
||||
class="cell-usage !hover:bg-gray-100 select-none cursor-pointer" |
||||
:class="{ |
||||
'cursor-not-allowed': !filteredIntegrations?.length, |
||||
}" |
||||
@click="updateOrderBy('source_count')" |
||||
> |
||||
<div class="flex items-center gap-3"> |
||||
<div>Usage</div> |
||||
<GeneralIcon |
||||
v-if="orderBy?.source_count" |
||||
icon="chevronDown" |
||||
class="flex-none" |
||||
:class="{ |
||||
'transform rotate-180': orderBy?.source_count === 'asc', |
||||
}" |
||||
/> |
||||
<GeneralIcon v-else icon="chevronUpDown" class="flex-none" /> |
||||
</div> |
||||
</th> |
||||
<th class="cell-actions"> |
||||
<div>Actions</div> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
</table> |
||||
<template v-if="filteredIntegrations?.length"> |
||||
<table class="h-full max-h-[calc(100%_-_55px)] w-full"> |
||||
<tbody> |
||||
<tr v-for="integration of filteredIntegrations" :key="integration.id" @click="editIntegration(integration)"> |
||||
<td class="cell-title"> |
||||
<div |
||||
class="gap-3" |
||||
:style="{ |
||||
maxWidth: `${width}px`, |
||||
}" |
||||
> |
||||
<NcTooltip placement="bottom" class="truncate" show-on-truncate-only> |
||||
<template #title> {{ integration.title }}</template> |
||||
{{ integration.title }} |
||||
</NcTooltip> |
||||
<span v-if="integration.is_private"> |
||||
<NcBadge :border="false" class="text-primary !h-4.5 bg-brand-50 text-xs">{{ |
||||
$t('general.private') |
||||
}}</NcBadge> |
||||
</span> |
||||
</div> |
||||
</td> |
||||
<td class="cell-type"> |
||||
<div> |
||||
<NcBadge rounded="lg" class="flex items-center gap-2 px-2 py-1 !h-7 truncate !border-transparent"> |
||||
<WorkspaceIntegrationsIcon |
||||
v-if="integration.sub_type" |
||||
:integration-type="integration.sub_type" |
||||
size="xs" |
||||
class="!p-0 !bg-transparent" |
||||
/> |
||||
<NcTooltip placement="bottom" show-on-truncate-only class="text-sm truncate"> |
||||
<template #title> {{ clientTypesMap[integration?.sub_type]?.text || integration?.sub_type }}</template> |
||||
|
||||
{{ |
||||
integration.sub_type && clientTypesMap[integration.sub_type] |
||||
? clientTypesMap[integration.sub_type]?.text |
||||
: integration.sub_type |
||||
}} |
||||
</NcTooltip> |
||||
</NcBadge> |
||||
</div> |
||||
</td> |
||||
<td class="cell-created-date"> |
||||
<div> |
||||
<NcTooltip placement="bottom" show-on-truncate-only> |
||||
<template #title> {{ dayjs(integration.created_at).local().format('DD MMM YYYY') }}</template> |
||||
|
||||
{{ dayjs(integration.created_at).local().format('DD MMM YYYY') }} |
||||
</NcTooltip> |
||||
</div> |
||||
</td> |
||||
<td class="cell-added-by"> |
||||
<div> |
||||
<NcTooltip :disabled="!isUserDeleted(integration.created_by)" class="w-full"> |
||||
<template #title> |
||||
{{ `User not part of this ${isEeUI ? 'workspace' : 'organisation'} anymore` }} |
||||
</template> |
||||
<div |
||||
v-if="integration.created_by && collaboratorsMap.get(integration.created_by)?.email" |
||||
class="w-full flex gap-3 items-center" |
||||
> |
||||
<GeneralUserIcon |
||||
:email="collaboratorsMap.get(integration.created_by)?.email" |
||||
size="base" |
||||
class="flex-none" |
||||
:class="{ |
||||
'!grayscale': isUserDeleted(integration.created_by), |
||||
}" |
||||
:style=" |
||||
isUserDeleted(integration.created_by) |
||||
? { |
||||
filter: 'grayscale(100%) brightness(115%)', |
||||
} |
||||
: {} |
||||
" |
||||
/> |
||||
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]"> |
||||
<div class="w-full flex gap-3"> |
||||
<NcTooltip |
||||
class="text-sm !leading-5 capitalize font-semibold truncate" |
||||
:class="{ |
||||
'text-gray-800': !isUserDeleted(integration.created_by), |
||||
'text-gray-500': isUserDeleted(integration.created_by), |
||||
}" |
||||
:disabled="isUserDeleted(integration.created_by)" |
||||
show-on-truncate-only |
||||
placement="bottom" |
||||
> |
||||
<template #title> |
||||
{{ getUserNameByCreatedBy(integration.created_by) }} |
||||
</template> |
||||
{{ getUserNameByCreatedBy(integration.created_by) }} |
||||
</NcTooltip> |
||||
</div> |
||||
<NcTooltip |
||||
class="text-xs !leading-4 truncate" |
||||
:class="{ |
||||
'text-gray-600': !isUserDeleted(integration.created_by), |
||||
'text-gray-500': isUserDeleted(integration.created_by), |
||||
}" |
||||
:disabled="isUserDeleted(integration.created_by)" |
||||
show-on-truncate-only |
||||
placement="bottom" |
||||
> |
||||
<template #title> |
||||
{{ collaboratorsMap.get(integration.created_by)?.email }} |
||||
</template> |
||||
{{ collaboratorsMap.get(integration.created_by)?.email }} |
||||
</NcTooltip> |
||||
</div> |
||||
</div> |
||||
<div v-else class="w-full truncate text-gray-500">{{ integration.created_by }}</div> |
||||
</NcTooltip> |
||||
</div> |
||||
</td> |
||||
<td class="cell-usage"> |
||||
<div>{{ integration?.source_count ?? 0 }}</div> |
||||
</td> |
||||
<td class="cell-actions" @click.stop> |
||||
<div class="justify-end"> |
||||
<NcDropdown placement="bottomRight"> |
||||
<NcButton size="small" type="secondary"> |
||||
<GeneralIcon icon="threeDotVertical" /> |
||||
</NcButton> |
||||
<template #overlay> |
||||
<NcMenu> |
||||
<NcMenuItem @click="editIntegration(integration)"> |
||||
<GeneralIcon class="text-gray-800" icon="edit" /> |
||||
<span>{{ $t('general.edit') }}</span> |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="duplicateIntegration(integration)"> |
||||
<GeneralIcon class="text-gray-800" icon="duplicate" /> |
||||
<span>{{ $t('general.duplicate') }}</span> |
||||
</NcMenuItem> |
||||
<NcDivider /> |
||||
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteIntegration(integration)"> |
||||
<GeneralIcon icon="delete" /> |
||||
{{ $t('general.delete') }} |
||||
</NcMenuItem> |
||||
</NcMenu> |
||||
</template> |
||||
</NcDropdown> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</template> |
||||
</div> |
||||
|
||||
<div |
||||
v-show="isLoadingIntegrations" |
||||
class="flex items-center justify-center absolute left-0 top-0 w-full h-full z-10 pb-10 pointer-events-none" |
||||
> |
||||
<div class="flex flex-col justify-center items-center gap-2"> |
||||
<GeneralLoader size="xlarge" /> |
||||
<span class="text-center">{{ $t('general.loading') }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div |
||||
v-if="!isLoadingIntegrations && (!integrations?.length || !filteredIntegrations.length)" |
||||
class="flex-none integration-table-empty flex items-center justify-center py-8 px-6 h-full max-h-[calc(100%_-_94px)]" |
||||
> |
||||
<div |
||||
v-if="integrations?.length && !filteredIntegrations.length" |
||||
class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6 text-center" |
||||
> |
||||
<img |
||||
src="~assets/img/placeholder/no-search-result-found.png" |
||||
class="!w-[164px] flex-none" |
||||
alt="No search results found" |
||||
/> |
||||
|
||||
{{ $t('title.noResultsMatchedYourSearch') }} |
||||
</div> |
||||
|
||||
<div v-else class="flex-none text-center flex flex-col items-center gap-3"> |
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" /> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-if="integrationPaginationData.totalRows" |
||||
class="flex flex-row justify-center items-center bg-gray-50 min-h-10" |
||||
:class="{ |
||||
'pointer-events-none': isLoadingIntegrations, |
||||
}" |
||||
> |
||||
<div class="flex justify-between items-center w-full px-6"> |
||||
<div> </div> |
||||
<NcPagination |
||||
v-model:current="integrationPaginationData.page" |
||||
v-model:page-size="integrationPaginationData.pageSize" |
||||
:total="+integrationPaginationData.totalRows" |
||||
show-size-changer |
||||
:use-stored-page-size="false" |
||||
:prev-page-tooltip="`${renderAltOrOptlKey()}+←`" |
||||
:next-page-tooltip="`${renderAltOrOptlKey()}+→`" |
||||
:first-page-tooltip="`${renderAltOrOptlKey()}+↓`" |
||||
:last-page-tooltip="`${renderAltOrOptlKey()}+↑`" |
||||
@update:current="loadConnections(undefined, undefined, false)" |
||||
@update:page-size="loadConnections(integrationPaginationData.page, $event, false)" |
||||
/> |
||||
<div class="text-gray-500 text-xs"> |
||||
{{ integrationPaginationData.totalRows }} {{ integrationPaginationData.totalRows === 1 ? 'record' : 'records' }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<GeneralDeleteModal |
||||
v-model:visible="isDeleteIntegrationModalOpen" |
||||
:entity-name="$t('general.connection')" |
||||
:on-delete="onDeleteConfirm" |
||||
:delete-label="$t('general.delete')" |
||||
:show-default-delete-msg="!isLoadingGetLinkedSources && !toBeDeletedIntegration?.sources?.length" |
||||
> |
||||
<template #entity-preview> |
||||
<template v-if="isLoadingGetLinkedSources"> |
||||
<div class="rounded-lg overflow-hidden"> |
||||
<a-skeleton-input active class="h-9 !rounded-md !w-full"></a-skeleton-input> |
||||
</div> |
||||
<div class="rounded-lg overflow-hidden mt-2"> |
||||
<a-skeleton-input active class="h-9 !rounded-md !w-full"></a-skeleton-input> |
||||
</div> |
||||
</template> |
||||
<div v-else-if="toBeDeletedIntegration" class="w-full flex flex-col text-gray-800"> |
||||
<div class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4"> |
||||
<WorkspaceIntegrationsIcon |
||||
:integration-type="toBeDeletedIntegration.sub_type" |
||||
size="xs" |
||||
class="!p-0 !bg-transparent" |
||||
/> |
||||
<div |
||||
class="text-ellipsis overflow-hidden select-none w-full pl-3" |
||||
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
||||
> |
||||
{{ toBeDeletedIntegration.title }} |
||||
</div> |
||||
</div> |
||||
<div v-if="toBeDeletedIntegration?.sources?.length" class="flex flex-col pb-2 text-small leading-[18px] text-gray-500"> |
||||
<div class="mb-1">Following external data sources using this connection will also be removed</div> |
||||
<ul class="!list-disc ml-6 mb-0"> |
||||
<li |
||||
v-for="(source, idx) of toBeDeletedIntegration.sources" |
||||
:key="idx" |
||||
class="marker:text-gray-500 !marker:(flex items-center !-mt-1)" |
||||
> |
||||
<div class="flex items-center gap-1"> |
||||
<div class="flex items-center"> |
||||
|
||||
<GeneralProjectIcon |
||||
type="database" |
||||
class="!grayscale min-w-4 flex-none -ml-1" |
||||
:style="{ |
||||
filter: 'grayscale(100%) brightness(115%)', |
||||
}" |
||||
/> |
||||
</div> |
||||
|
||||
<NcTooltip class="!truncate !max-w-[45%] flex-none" show-on-truncate-only> |
||||
<template #title> |
||||
{{ source.project_title }} |
||||
</template> |
||||
|
||||
{{ source.project_title }} |
||||
</NcTooltip> |
||||
> |
||||
<GeneralBaseLogo |
||||
class="!grayscale min-w-4 flex-none" |
||||
:style="{ |
||||
filter: 'grayscale(100%) brightness(115%)', |
||||
}" |
||||
/> |
||||
|
||||
<NcTooltip class="truncate !max-w-[45%] capitalize" show-on-truncate-only> |
||||
<template #title> |
||||
{{ source.alias }} |
||||
</template> |
||||
|
||||
{{ source.alias }} |
||||
</NcTooltip> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="mt-2">Do you want to proceed anyway?</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</GeneralDeleteModal> |
||||
|
||||
<NcModal v-model:visible="successConfirmModal.isOpen" centered size="small" @keydown.esc="successConfirmModal.isOpen = false"> |
||||
<div class="flex gap-4"> |
||||
<div> |
||||
<GeneralIcon icon="circleCheckSolid" class="flex-none !text-green-700 mt-0.5 !h-6 !w-6" /> |
||||
</div> |
||||
|
||||
<div class="flex flex-col gap-3"> |
||||
<div class="flex"> |
||||
<h3 class="!m-0 text-base font-weight-700 flex-1"> |
||||
{{ successConfirmModal.title }} |
||||
</h3> |
||||
<NcButton size="xsmall" type="text" @click="successConfirmModal.isOpen = false"> |
||||
<GeneralIcon icon="close" class="text-gray-600" /> |
||||
</NcButton> |
||||
</div> |
||||
<div class="text-sm text-gray-700"> |
||||
{{ successConfirmModal.description }} |
||||
</div> |
||||
|
||||
<!-- Todo: add link --> |
||||
<a target="_blank" rel="noopener noreferrer"> Learn more </a> |
||||
</div> |
||||
</div> |
||||
</NcModal> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.source-card-link { |
||||
@apply !text-black !no-underline; |
||||
|
||||
.nc-new-integration-type-title { |
||||
@apply text-sm font-weight-600 text-gray-600; |
||||
} |
||||
} |
||||
|
||||
.source-card { |
||||
@apply flex items-center border-1 rounded-lg p-3 cursor-pointer hover:bg-gray-50; |
||||
width: 288px; |
||||
|
||||
.name { |
||||
@apply ml-4 text-md font-semibold; |
||||
} |
||||
} |
||||
|
||||
:deep(.ant-input-affix-wrapper.nc-search-integration-input) { |
||||
&:not(:has(.ant-input-clear-icon-hidden)):has(.ant-input-clear-icon) { |
||||
@apply border-[var(--ant-primary-5)]; |
||||
} |
||||
} |
||||
|
||||
.nc-new-integration-type-wrapper { |
||||
@apply flex flex-col gap-3; |
||||
} |
||||
|
||||
.table-container { |
||||
@apply border-1 border-gray-200 rounded-lg overflow-hidden w-full; |
||||
|
||||
.nc-workspace-integration-table { |
||||
&.sticky-shadow { |
||||
th, |
||||
td { |
||||
&.cell-title { |
||||
@apply border-r-1 border-gray-200; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:not(.sticky-shadow) { |
||||
th, |
||||
td { |
||||
&.cell-title { |
||||
@apply border-r-1 border-transparent; |
||||
} |
||||
} |
||||
} |
||||
|
||||
thead { |
||||
@apply w-full; |
||||
th { |
||||
@apply bg-gray-50 text-sm text-gray-500 font-weight-500; |
||||
|
||||
&.cell-title { |
||||
@apply sticky left-0 z-4 bg-gray-50; |
||||
} |
||||
} |
||||
} |
||||
|
||||
tbody { |
||||
@apply w-full; |
||||
tr { |
||||
@apply cursor-pointer; |
||||
|
||||
td { |
||||
@apply text-sm text-gray-600; |
||||
|
||||
&.cell-title { |
||||
@apply sticky left-0 z-4 bg-white !text-gray-800 font-semibold; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
tr { |
||||
@apply h-[54px] flex border-b-1 border-gray-200 w-full; |
||||
|
||||
&:hover td { |
||||
@apply !bg-gray-50; |
||||
} |
||||
|
||||
&.selected td { |
||||
@apply !bg-gray-50; |
||||
} |
||||
|
||||
th, |
||||
td { |
||||
@apply h-full; |
||||
|
||||
& > div { |
||||
@apply px-6 h-full flex-1 flex items-center; |
||||
} |
||||
|
||||
&.cell-title { |
||||
@apply flex-1 sticky left-0 z-5; |
||||
& > div { |
||||
@apply min-w-[250px]; |
||||
} |
||||
} |
||||
|
||||
&.cell-added-by { |
||||
@apply basis-[20%]; |
||||
& > div { |
||||
@apply min-w-[250px]; |
||||
} |
||||
} |
||||
|
||||
&.cell-type { |
||||
@apply basis-[20%]; |
||||
& > div { |
||||
@apply min-w-[178px]; |
||||
} |
||||
} |
||||
|
||||
&.cell-created-date { |
||||
@apply basis-[20%]; |
||||
& > div { |
||||
@apply min-w-[158px]; |
||||
} |
||||
} |
||||
|
||||
&.cell-usage { |
||||
@apply w-[120px]; |
||||
& > div { |
||||
@apply min-w-[118px]; |
||||
} |
||||
} |
||||
|
||||
&.cell-actions { |
||||
@apply w-[100px]; |
||||
& > div { |
||||
@apply min-w-[98px]; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.cell-header { |
||||
@apply text-xs font-semibold text-gray-500; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,533 @@
|
||||
<script lang="ts" setup> |
||||
import NcModal from '~/components/nc/Modal.vue' |
||||
/* eslint-disable @typescript-eslint/consistent-type-imports */ |
||||
import { IntegrationCategoryType, type IntegrationItemType, SyncDataType } from '#imports' |
||||
|
||||
const props = withDefaults( |
||||
defineProps<{ |
||||
isModal?: boolean |
||||
filterCategory?: (c: IntegrationCategoryItemType) => boolean |
||||
filterIntegration?: (i: IntegrationItemType) => boolean |
||||
}>(), |
||||
{ |
||||
isModal: false, |
||||
filterCategory: () => true, |
||||
filterIntegration: () => true, |
||||
}, |
||||
) |
||||
|
||||
const { isModal, filterCategory, filterIntegration } = props |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { syncDataUpvotes, updateSyncDataUpvotes } = useGlobal() |
||||
|
||||
const { pageMode, IntegrationsPageMode, requestIntegration, addIntegration, saveIntegraitonRequest } = useIntegrationStore() |
||||
|
||||
const activeCategory = ref<IntegrationCategoryItemType | null>(null) |
||||
|
||||
const searchQuery = ref<string>('') |
||||
|
||||
const requestNewIntegrationRef = ref<HTMLDivElement>() |
||||
|
||||
const integrationListRef = ref<HTMLDivElement>() |
||||
|
||||
const { width: integrationListContainerWidth } = useElementSize(integrationListRef) |
||||
|
||||
const listWrapperMaxWidth = computed(() => { |
||||
if (integrationListContainerWidth.value <= 328 || integrationListContainerWidth.value < 624) { |
||||
return '328px' |
||||
} |
||||
|
||||
if (integrationListContainerWidth.value < 920) { |
||||
return '576px' |
||||
} |
||||
|
||||
if (integrationListContainerWidth.value < 1216) { |
||||
return '872px' |
||||
} |
||||
|
||||
return '1168px' |
||||
}) |
||||
|
||||
const upvotesData = computed(() => { |
||||
return new Set(syncDataUpvotes.value) |
||||
}) |
||||
|
||||
const getIntegrationsByCategory = (category: IntegrationCategoryType, query: string) => { |
||||
return allIntegrations.filter((i) => { |
||||
return ( |
||||
filterIntegration(i) && i.categories.includes(category) && t(i.title).toLowerCase().includes(query.trim().toLowerCase()) |
||||
) |
||||
}) |
||||
} |
||||
|
||||
const integrationsMapByCategory = computed(() => { |
||||
return integrationCategories |
||||
.filter(filterCategory) |
||||
.filter((c) => (activeCategory.value ? c.value === activeCategory.value.value : true)) |
||||
.reduce( |
||||
(acc, curr) => { |
||||
acc[curr.value] = { |
||||
title: curr.title, |
||||
list: getIntegrationsByCategory(curr.value, searchQuery.value), |
||||
} |
||||
|
||||
return acc |
||||
}, |
||||
{} as Record< |
||||
string, |
||||
{ |
||||
title: string |
||||
list: IntegrationItemType[] |
||||
} |
||||
>, |
||||
) |
||||
}) |
||||
|
||||
const isAddNewIntegrationModalOpen = computed({ |
||||
get: () => { |
||||
return pageMode.value === IntegrationsPageMode.LIST |
||||
}, |
||||
set: (value: boolean) => { |
||||
if (value) { |
||||
pageMode.value = IntegrationsPageMode.LIST |
||||
} else { |
||||
pageMode.value = null |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
const handleUpvote = (syncDataType: SyncDataType) => { |
||||
if (upvotesData.value.has(syncDataType)) return |
||||
|
||||
$e(`a:integration-request:${syncDataType}`) |
||||
|
||||
updateSyncDataUpvotes([...syncDataUpvotes.value, syncDataType]) |
||||
} |
||||
|
||||
const handleAddIntegration = (category: IntegrationCategoryType, integration: IntegrationItemType) => { |
||||
if (!integration.isAvailable) { |
||||
handleUpvote(integration.value) |
||||
return |
||||
} |
||||
|
||||
// currently we only support database integration category type |
||||
if (category !== IntegrationCategoryType.DATABASE) { |
||||
return |
||||
} |
||||
|
||||
addIntegration(integration.value) |
||||
} |
||||
|
||||
const handleSetRequestIntegrationRef = (node) => { |
||||
requestNewIntegrationRef.value = node as HTMLDivElement |
||||
|
||||
return node |
||||
} |
||||
|
||||
const handleOpenRequestIntegration = () => { |
||||
requestIntegration.value.isOpen = true |
||||
|
||||
nextTick(() => { |
||||
requestNewIntegrationRef.value?.scrollIntoView?.({ behavior: 'smooth' }) |
||||
|
||||
requestNewIntegrationRef.value?.querySelector('textarea')?.focus?.() |
||||
requestNewIntegrationRef.value?.querySelector('textarea')?.select?.() |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<component |
||||
:is="isModal ? NcModal : 'div'" |
||||
v-model:visible="isAddNewIntegrationModalOpen" |
||||
centered |
||||
size="large" |
||||
:class="{ |
||||
'h-full': !isModal, |
||||
}" |
||||
wrap-class-name="nc-modal-available-integrations-list" |
||||
@keydown.esc="isAddNewIntegrationModalOpen = false" |
||||
> |
||||
<a-layout> |
||||
<!-- <a-layout-sider class="nc-integration-layout-sidebar"> --> |
||||
<!-- <div class="h-full flex flex-col gap-3"> --> |
||||
<!-- <div class="px-5 pt-3 text-sm text-gray-500 font-bold"> --> |
||||
<!-- {{ $t('title.categories') }} --> |
||||
<!-- </div> --> |
||||
<!-- <div class="px-3 pb-3 flex-1 flex flex-col gap-1 overflow-y-auto nc-scrollbar-thin"> --> |
||||
<!-- <div --> |
||||
<!-- class="nc-integration-category-item" --> |
||||
<!-- :class="{ --> |
||||
<!-- active: activeCategory === null, --> |
||||
<!-- }" --> |
||||
<!-- data-testid="all-integrations" --> |
||||
<!-- @click="activeCategory = null" --> |
||||
<!-- > --> |
||||
<!-- <div class="nc-integration-category-item-icon-wrapper bg-gray-200"> --> |
||||
<!-- <GeneralIcon icon="globe" class="stroke-transparent !text-gray-700" /> --> |
||||
<!-- </div> --> |
||||
<!-- <div class="nc-integration-category-item-content-wrapper"> --> |
||||
<!-- <div class="nc-integration-category-item-title">All Integrations</div> --> |
||||
<!-- <!– <div class="nc-integration-category-item-subtitle">Content needed</div>–> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- <div --> |
||||
<!-- v-for="category of integrationCategories" --> |
||||
<!-- :key="category.value" --> |
||||
<!-- class="nc-integration-category-item" --> |
||||
<!-- :class="{ --> |
||||
<!-- active: activeCategory === category, --> |
||||
<!-- }" --> |
||||
<!-- :data-testid="category.value" --> |
||||
<!-- @click="activeCategory = category" --> |
||||
<!-- > --> |
||||
<!-- <div --> |
||||
<!-- class="nc-integration-category-item-icon-wrapper" --> |
||||
<!-- :style="{ --> |
||||
<!-- backgroundColor: category.iconBgColor, --> |
||||
<!-- }" --> |
||||
<!-- > --> |
||||
<!-- <component :is="category.icon" class="nc-integration-category-item-icon" :style="category.iconStyle" /> --> |
||||
<!-- </div> --> |
||||
<!-- <div class="nc-integration-category-item-content-wrapper"> --> |
||||
<!-- <div class="nc-integration-category-item-title">{{ $t(category.title) }}</div> --> |
||||
<!-- <!– <div class="nc-integration-category-item-subtitle">{{ $t(category.subtitle) }}</div>–> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </div> --> |
||||
<!-- </a-layout-sider> --> |
||||
<a-layout-content class="nc-integration-layout-content"> |
||||
<div v-if="isModal" class="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-gray-200"> |
||||
<NcButton type="text" size="small" @click="isAddNewIntegrationModalOpen = false"> |
||||
<GeneralIcon icon="arrowLeft" /> |
||||
</NcButton> |
||||
<GeneralIcon icon="gitCommit" class="flex-none h-5 w-5" /> |
||||
<div class="flex-1 text-base font-weight-700">New Connection</div> |
||||
<div class="flex items-center gap-3"> |
||||
<NcButton size="small" type="text" @click="isAddNewIntegrationModalOpen = false"> |
||||
<GeneralIcon icon="close" class="text-gray-600" /> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="w-full flex flex-col gap-6" |
||||
:class="{ |
||||
'h-[calc(100%_-_66px)]': isModal, |
||||
'h-full': !isModal, |
||||
}" |
||||
> |
||||
<div class="px-6 pt-6"> |
||||
<div |
||||
class="flex items-center justify-between flex-wrap gap-3 m-auto" |
||||
:style="{ |
||||
maxWidth: listWrapperMaxWidth, |
||||
}" |
||||
> |
||||
<div class="text-sm font-normal text-gray-600"> |
||||
<div>Connect integrations with NocoDB. <a target="_blank" rel="noopener noreferrer"> Learn more </a></div> |
||||
</div> |
||||
<a-input |
||||
v-model:value="searchQuery" |
||||
type="text" |
||||
class="nc-input-border-on-value nc-search-integration-input !min-w-[300px] !max-w-[400px] nc-input-sm flex-none" |
||||
placeholder="Search integration..." |
||||
allow-clear |
||||
> |
||||
<template #prefix> |
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500" /> |
||||
</template> |
||||
</a-input> |
||||
</div> |
||||
</div> |
||||
|
||||
<div |
||||
ref="integrationListRef" |
||||
class="flex-1 px-6 pb-6 flex flex-col nc-workspace-settings-integrations-list overflow-y-auto nc-scrollbar-thin" |
||||
> |
||||
<div class="w-full flex justify-center"> |
||||
<div |
||||
class="flex flex-col space-y-6 w-full" |
||||
:style="{ |
||||
maxWidth: listWrapperMaxWidth, |
||||
}" |
||||
> |
||||
<template v-for="(category, key) in integrationsMapByCategory"> |
||||
<div |
||||
v-if="category.list.length || key === IntegrationCategoryType.OTHERS" |
||||
:key="key" |
||||
class="integration-type-wrapper" |
||||
> |
||||
<div class="category-type-title">{{ $t(category.title) }}</div> |
||||
<div v-if="category.list.length" class="integration-type-list"> |
||||
<NcTooltip |
||||
v-for="integration of category.list" |
||||
:key="integration.value" |
||||
:disabled="integration?.isAvailable" |
||||
placement="bottom" |
||||
> |
||||
<template #title>{{ $t('tooltip.comingSoonIntegration') }}</template> |
||||
|
||||
<div |
||||
class="source-card" |
||||
:class="{ |
||||
'is-available': integration?.isAvailable, |
||||
}" |
||||
@click="handleAddIntegration(key, integration)" |
||||
> |
||||
<div class="integration-icon-wrapper"> |
||||
<component :is="integration.icon" class="integration-icon" :style="integration.iconStyle" /> |
||||
</div> |
||||
<div class="name flex-1">{{ $t(integration.title) }}</div> |
||||
<div v-if="integration?.isAvailable" class="action-btn">+</div> |
||||
<div v-else class=""> |
||||
<NcButton |
||||
type="secondary" |
||||
size="xs" |
||||
class="integration-upvote-btn !rounded-lg !px-1 !py-0" |
||||
:class="{ |
||||
selected: upvotesData.has(integration.value), |
||||
}" |
||||
> |
||||
<div class="flex items-center gap-2"> |
||||
<GeneralIcon icon="ncArrowUp" /> |
||||
</div> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</NcTooltip> |
||||
</div> |
||||
</div> |
||||
<div |
||||
v-if="key === IntegrationCategoryType.OTHERS" |
||||
:key="`${key}-request-integration`" |
||||
:ref="handleSetRequestIntegrationRef" |
||||
class="integration-type-wrapper !mt-4" |
||||
> |
||||
<div> |
||||
<div |
||||
class="source-card-request-integration" |
||||
:class="{ |
||||
active: requestIntegration.isOpen, |
||||
}" |
||||
> |
||||
<div |
||||
v-if="!requestIntegration.isOpen" |
||||
class="source-card-item border-none" |
||||
@click="handleOpenRequestIntegration" |
||||
> |
||||
<div class="flex items-center justify-center rounded-lg w-[44px] h-[44px]"> |
||||
<GeneralIcon icon="plusSquare" class="flex-none w-8 h-8 !text-brand-500" /> |
||||
</div> |
||||
<div class="name">Request New Integration</div> |
||||
</div> |
||||
<div v-show="requestIntegration.isOpen" class="flex flex-col gap-4"> |
||||
<div class="flex items-center justify-between gap-4"> |
||||
<div class="text-base font-bold text-gray-800">Request Integration</div> |
||||
<NcButton size="xsmall" type="text" @click="requestIntegration.isOpen = false"> |
||||
<GeneralIcon icon="close" class="text-gray-600" /> |
||||
</NcButton> |
||||
</div> |
||||
<div class="flex flex-col gap-2"> |
||||
<a-textarea |
||||
v-model:value="requestIntegration.msg" |
||||
class="!rounded-md !text-sm !min-h-[120px] max-h-[500px] nc-scrollbar-thin" |
||||
size="large" |
||||
hide-details |
||||
placeholder="Provide integration name and your use-case." |
||||
/> |
||||
</div> |
||||
<div class="flex items-center justify-end gap-3"> |
||||
<NcButton size="small" type="secondary" @click="requestIntegration.isOpen = false"> |
||||
{{ $t('general.cancel') }} |
||||
</NcButton> |
||||
<NcButton |
||||
:disabled="!requestIntegration.msg?.trim()" |
||||
:loading="requestIntegration.isLoading" |
||||
size="small" |
||||
@click="saveIntegraitonRequest(requestIntegration.msg)" |
||||
> |
||||
{{ $t('general.submit') }} |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-layout-content> |
||||
</a-layout> |
||||
</component> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-integration-layout-sidebar { |
||||
@apply !bg-white border-r-1 border-gray-200 !min-w-[260px] !max-w-[260px]; |
||||
|
||||
flex: 1 1 260px !important; |
||||
|
||||
.nc-integration-category-item { |
||||
@apply flex gap-2 p-2 rounded-lg hover:bg-gray-100 cursor-pointer transition-all; |
||||
|
||||
&.active { |
||||
@apply bg-gray-100; |
||||
} |
||||
|
||||
.nc-integration-category-item-icon-wrapper { |
||||
@apply flex-none w-5 h-5 flex items-center justify-center rounded; |
||||
|
||||
.nc-integration-category-item-icon { |
||||
@apply flex-none w-4 h-4; |
||||
} |
||||
} |
||||
|
||||
.nc-integration-category-item-content-wrapper { |
||||
@apply flex-1 flex flex-col gap-1; |
||||
|
||||
.nc-integration-category-item-title { |
||||
@apply text-sm text-gray-800 font-weight-500; |
||||
} |
||||
|
||||
.nc-integration-category-item-subtitle { |
||||
@apply text-xs text-gray-500 font-weight-500; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.nc-integration-layout-content { |
||||
@apply !bg-white; |
||||
} |
||||
.source-card-request-integration { |
||||
@apply flex flex-col gap-4 border-1 rounded-xl p-3 w-[280px] overflow-hidden transition-all duration-300 max-w-[576px]; |
||||
|
||||
&.active { |
||||
@apply w-full; |
||||
} |
||||
&:not(.active) { |
||||
@apply cursor-pointer hover:bg-gray-50; |
||||
|
||||
&:hover { |
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
} |
||||
} |
||||
|
||||
.source-card-item { |
||||
@apply flex items-center gap-4; |
||||
|
||||
.name { |
||||
@apply text-base font-semibold text-gray-800; |
||||
} |
||||
} |
||||
} |
||||
.source-card-link { |
||||
@apply !text-black !no-underline; |
||||
.nc-new-integration-type-title { |
||||
@apply text-sm font-weight-600 text-gray-600; |
||||
} |
||||
} |
||||
|
||||
.nc-workspace-settings-integrations-list { |
||||
.integration-type-wrapper { |
||||
@apply flex flex-col gap-3; |
||||
|
||||
.integration-type-list { |
||||
@apply flex gap-4 flex-wrap; |
||||
|
||||
.source-card { |
||||
@apply flex items-center gap-4 border-1 border-gray-200 rounded-xl p-3 w-[280px] cursor-pointer; |
||||
|
||||
.integration-icon-wrapper { |
||||
@apply flex-none h-[44px] w-[44px] rounded-lg flex items-center justify-center; |
||||
|
||||
.integration-icon { |
||||
@apply flex-none stroke-transparent; |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
@apply text-base font-bold; |
||||
} |
||||
|
||||
.action-btn { |
||||
@apply hidden text-2xl text-gray-500 w-7 h-7 text-center; |
||||
} |
||||
|
||||
&.is-available { |
||||
&:hover { |
||||
@apply bg-gray-50; |
||||
|
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
|
||||
.action-btn { |
||||
@apply block; |
||||
} |
||||
} |
||||
|
||||
// .integration-icon-wrapper { |
||||
// @apply bg-gray-100; |
||||
// } |
||||
.name { |
||||
@apply text-gray-800; |
||||
} |
||||
} |
||||
|
||||
&:not(.is-available) { |
||||
&:not(:hover) { |
||||
.integration-icon-wrapper { |
||||
// @apply bg-gray-50; |
||||
|
||||
.integration-icon { |
||||
@apply !grayscale; |
||||
|
||||
filter: grayscale(100%) brightness(115%); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
@apply text-gray-500; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.name { |
||||
@apply text-gray-800; |
||||
} |
||||
} |
||||
|
||||
.integration-upvote-btn { |
||||
&.selected { |
||||
@apply shadow-selected !text-brand-500 !border-brand-500 !cursor-not-allowed pointer-events-none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.category-type-title { |
||||
@apply text-sm text-gray-700 font-weight-700; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss"> |
||||
.nc-modal-available-integrations-list { |
||||
.nc-modal { |
||||
@apply !p-0; |
||||
height: min(calc(100vh - 100px), 1024px); |
||||
max-height: min(calc(100vh - 100px), 1024px) !important; |
||||
} |
||||
.ant-modal-content { |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,38 +1,461 @@
|
||||
import type { FunctionalComponent, SVGAttributes } from 'nuxt/dist/app/compat/capi' |
||||
import { SyncDataType } from '~/lib/enums' |
||||
|
||||
export const syncDataTypes = [ |
||||
// { title: 'objects.syncData.appleNumbers', value: SyncDataType.APPLE_NUMBERS, icon: iconMap.appleSolid },
|
||||
{ title: 'objects.syncData.asana', value: SyncDataType.ASANA, icon: iconMap.asana }, |
||||
{ title: 'objects.syncData.box', value: SyncDataType.BOX, icon: iconMap.box }, |
||||
{ title: 'objects.syncData.github', value: SyncDataType.GITHUB, icon: iconMap.githubSolid }, |
||||
{ title: 'objects.syncData.gitlab', value: SyncDataType.GITLAB, icon: iconMap.gitlab }, |
||||
{ title: 'objects.syncData.googleCalendar', value: SyncDataType.GOOGLE_CALENDAR, icon: iconMap.googleCalendar }, |
||||
{ title: 'objects.syncData.googleDrive', value: SyncDataType.GOOGLE_DRIVE, icon: iconMap.googleDrive }, |
||||
{ title: 'objects.syncData.googleSheets', value: SyncDataType.GOOGLE_SHEETS, icon: iconMap.googleSheet }, |
||||
{ title: 'objects.syncData.hubspot', value: SyncDataType.HUBSPOT, icon: iconMap.hubspot }, |
||||
{ title: 'objects.syncData.jira', value: SyncDataType.JIRA, icon: iconMap.jira }, |
||||
{ title: 'objects.syncData.mailchimp', value: SyncDataType.MAILCHIMP, icon: iconMap.mailchimp }, |
||||
{ title: 'objects.syncData.microsoftAccess', value: SyncDataType.MICROSOFT_ACCESS, icon: iconMap.microsoftAccess }, |
||||
{ title: 'objects.syncData.microsoftExcel', value: SyncDataType.MICROSOFT_EXCEL, icon: iconMap.microsoftExcel }, |
||||
{ title: 'objects.syncData.microsoftOutlook', value: SyncDataType.MICROSOFT_OUTLOOK, icon: iconMap.microsoftOutlook }, |
||||
{ title: 'objects.syncData.miro', value: SyncDataType.MIRO, icon: iconMap.miro }, |
||||
{ title: 'objects.syncData.salesforce', value: SyncDataType.SALESFORCE, icon: iconMap.salesforce }, |
||||
{ title: 'objects.syncData.snowflake', value: SyncDataType.SNOWFLAKE, icon: iconMap.snowflake }, |
||||
{ title: 'objects.syncData.stripe', value: SyncDataType.STRIPE, icon: iconMap.stripe }, |
||||
{ title: 'objects.syncData.surveyMonkey', value: SyncDataType.SURVEYMONKEY, icon: iconMap.surveyMonkey }, |
||||
{ title: 'objects.syncData.tableau', value: SyncDataType.TABLEAU, icon: iconMap.tableau }, |
||||
{ title: 'objects.syncData.trello', value: SyncDataType.TRELLO, icon: iconMap.trello }, |
||||
{ title: 'objects.syncData.typeform', value: SyncDataType.TYPEFORM, icon: iconMap.typeform }, |
||||
{ title: 'objects.syncData.workday', value: SyncDataType.WORKDAY, icon: iconMap.workday }, |
||||
{ title: 'objects.syncData.zendesk', value: SyncDataType.ZENDESK, icon: iconMap.zendesk }, |
||||
] as { |
||||
import type { CSSProperties, FunctionalComponent, SVGAttributes } from 'nuxt/dist/app/compat/capi' |
||||
import { ClientType, IntegrationCategoryType, SyncDataType } from '~/lib/enums' |
||||
|
||||
export interface IntegrationItemType { |
||||
title: string |
||||
icon: FunctionalComponent<SVGAttributes, {}, any, {}> |
||||
value: SyncDataType | ClientType |
||||
categories: IntegrationCategoryType[] |
||||
isAvailable?: boolean |
||||
iconStyle?: CSSProperties |
||||
} |
||||
|
||||
export interface IntegrationCategoryItemType { |
||||
title: string |
||||
subtitle: string |
||||
value: IntegrationCategoryType |
||||
icon: FunctionalComponent<SVGAttributes, {}, any, {}> |
||||
iconBgColor?: string |
||||
iconStyle?: CSSProperties |
||||
} |
||||
|
||||
export const integrationCategories: IntegrationCategoryItemType[] = [ |
||||
{ |
||||
title: 'labels.database', |
||||
subtitle: 'objects.integrationCategories.databaseSubtitle', |
||||
value: IntegrationCategoryType.DATABASE, |
||||
icon: iconMap.database, |
||||
iconBgColor: '#D4F7E0', |
||||
iconStyle: { |
||||
color: '#17803D', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.communication', |
||||
subtitle: 'objects.integrationCategories.communicationSubtitle', |
||||
value: IntegrationCategoryType.COMMUNICATION, |
||||
icon: iconMap.messageCircle, |
||||
iconBgColor: '#FFF0F7', |
||||
iconStyle: { |
||||
color: '#801044', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.projectManagement', |
||||
subtitle: 'objects.integrationCategories.projectManagementSubtitle', |
||||
value: IntegrationCategoryType.PROJECT_MANAGEMENT, |
||||
icon: iconMap.viewGannt, |
||||
iconBgColor: '#FFF0D1', |
||||
iconStyle: { |
||||
color: '#977223', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.crm', |
||||
subtitle: 'objects.integrationCategories.crmSubtitle', |
||||
value: IntegrationCategoryType.CRM, |
||||
icon: iconMap.users, |
||||
iconBgColor: '#D7F2FF', |
||||
iconStyle: { |
||||
color: '#207399', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.marketing', |
||||
subtitle: 'objects.integrationCategories.marketingSubtitle', |
||||
value: IntegrationCategoryType.MARKETING, |
||||
icon: iconMap.heart, |
||||
iconBgColor: '#FED8F4', |
||||
iconStyle: { |
||||
color: '#972377', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.ats', |
||||
subtitle: 'objects.integrationCategories.atsSubtitle', |
||||
value: IntegrationCategoryType.ATS, |
||||
icon: iconMap.multiFile, |
||||
iconBgColor: '#FEE6D6', |
||||
iconStyle: { |
||||
color: '#C86827', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.development', |
||||
subtitle: 'objects.integrationCategories.developmentSubtitle', |
||||
value: IntegrationCategoryType.DEVELOPMENT, |
||||
icon: iconMap.code, |
||||
iconBgColor: '#E5D4F5', |
||||
iconStyle: { |
||||
color: '#4B177B', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.finance', |
||||
subtitle: 'objects.integrationCategories.financeSubtitle', |
||||
value: IntegrationCategoryType.FINANCE, |
||||
icon: iconMap.dollerSign, |
||||
iconBgColor: '#D4F7E0', |
||||
iconStyle: { |
||||
color: '#17803D', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.ticketing', |
||||
subtitle: 'objects.integrationCategories.ticketingSubtitle', |
||||
value: IntegrationCategoryType.TICKETING, |
||||
icon: iconMap.globe, |
||||
iconBgColor: '#FFF0D1', |
||||
iconStyle: { |
||||
color: '#977223', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'labels.storage', |
||||
subtitle: 'objects.integrationCategories.storageSubtitle', |
||||
value: IntegrationCategoryType.STORAGE, |
||||
icon: iconMap.ncSave, |
||||
iconBgColor: '#E7E7E9', |
||||
iconStyle: { |
||||
color: '#374151', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.integrationCategories.others', |
||||
subtitle: 'objects.integrationCategories.othersSubtitle', |
||||
value: IntegrationCategoryType.OTHERS, |
||||
icon: iconMap.plusSquare, |
||||
iconBgColor: 'white', |
||||
iconStyle: { |
||||
color: '#374151', |
||||
}, |
||||
}, |
||||
] |
||||
|
||||
export const allIntegrations: IntegrationItemType[] = [ |
||||
// Database
|
||||
{ |
||||
title: 'objects.syncData.mysql', |
||||
value: ClientType.MYSQL, |
||||
icon: iconMap.mysql, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
isAvailable: true, |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.postgreSQL', |
||||
value: ClientType.PG, |
||||
icon: iconMap.postgreSql, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
isAvailable: true, |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.snowflake', |
||||
value: ClientType.SNOWFLAKE, |
||||
icon: iconMap.snowflake, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.dataBricks', |
||||
value: ClientType.DATABRICKS, |
||||
icon: iconMap.dataBricks, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.microsoftAccess', |
||||
value: SyncDataType.MICROSOFT_ACCESS, |
||||
icon: iconMap.microsoftAccess, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.mssqlServer', |
||||
value: ClientType.MSSQL, |
||||
icon: iconMap.mssqlServer, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.oracle', |
||||
value: SyncDataType.ORACLE, |
||||
icon: iconMap.oracle, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.tableau', |
||||
value: SyncDataType.TABLEAU, |
||||
icon: iconMap.tableau, |
||||
categories: [IntegrationCategoryType.DATABASE], |
||||
}, |
||||
|
||||
// Communication
|
||||
{ |
||||
title: 'general.slack', |
||||
value: SyncDataType.SLACK, |
||||
icon: iconMap.slack, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'general.discord', |
||||
value: SyncDataType.DISCORD, |
||||
icon: iconMap.ncDiscord, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'general.twilio', |
||||
value: SyncDataType.TWILLO, |
||||
icon: iconMap.twilio, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
|
||||
{ |
||||
title: 'objects.syncData.microsoftOutlook', |
||||
value: SyncDataType.MICROSOFT_OUTLOOK, |
||||
icon: iconMap.microsoftOutlook, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
}, |
||||
{ |
||||
title: 'general.microsoftTeams', |
||||
value: SyncDataType.MICROSOFT_TEAMS, |
||||
icon: iconMap.microsoftTeams, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.gmail', |
||||
value: SyncDataType.GMAIL, |
||||
icon: iconMap.gmail, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.telegram', |
||||
value: SyncDataType.TELEGRAM, |
||||
icon: iconMap.telegram, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.whatsapp', |
||||
value: SyncDataType.WHATSAPP, |
||||
icon: iconMap.whatsapp, |
||||
categories: [IntegrationCategoryType.COMMUNICATION], |
||||
iconStyle: { |
||||
width: '32px', |
||||
height: '32px', |
||||
}, |
||||
}, |
||||
|
||||
// Project Management
|
||||
{ |
||||
title: 'objects.syncData.asana', |
||||
value: SyncDataType.ASANA, |
||||
icon: iconMap.asana, |
||||
categories: [IntegrationCategoryType.PROJECT_MANAGEMENT], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.jira', |
||||
value: SyncDataType.JIRA, |
||||
icon: iconMap.jira, |
||||
categories: [IntegrationCategoryType.PROJECT_MANAGEMENT, IntegrationCategoryType.TICKETING], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.miro', |
||||
value: SyncDataType.MIRO, |
||||
icon: iconMap.miro, |
||||
categories: [IntegrationCategoryType.PROJECT_MANAGEMENT], |
||||
}, |
||||
|
||||
{ |
||||
title: 'objects.syncData.trello', |
||||
value: SyncDataType.TRELLO, |
||||
icon: iconMap.trello, |
||||
categories: [IntegrationCategoryType.PROJECT_MANAGEMENT], |
||||
}, |
||||
|
||||
// CRM
|
||||
{ |
||||
title: 'objects.syncData.microsoftDynamics365', |
||||
value: SyncDataType.MICROSOFT_DYNAMICS_365, |
||||
icon: iconMap.microsoftDynamics365, |
||||
categories: [IntegrationCategoryType.CRM], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.pipedrive', |
||||
value: SyncDataType.PIPEDRIVE, |
||||
icon: iconMap.pipedrive, |
||||
categories: [IntegrationCategoryType.CRM], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.salesforce', |
||||
value: SyncDataType.SALESFORCE, |
||||
icon: iconMap.salesforce, |
||||
categories: [IntegrationCategoryType.CRM], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.zohoCrm', |
||||
value: SyncDataType.ZOHO_CRM, |
||||
icon: iconMap.zohoCrm, |
||||
categories: [IntegrationCategoryType.CRM], |
||||
}, |
||||
|
||||
// Marketing
|
||||
{ |
||||
title: 'objects.syncData.hubspot', |
||||
value: SyncDataType.HUBSPOT, |
||||
icon: iconMap.hubspot, |
||||
categories: [IntegrationCategoryType.MARKETING], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.mailchimp', |
||||
value: SyncDataType.MAILCHIMP, |
||||
icon: iconMap.mailchimp, |
||||
categories: [IntegrationCategoryType.MARKETING], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.surveyMonkey', |
||||
value: SyncDataType.SURVEYMONKEY, |
||||
icon: iconMap.surveyMonkey, |
||||
categories: [IntegrationCategoryType.MARKETING], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.typeform', |
||||
value: SyncDataType.TYPEFORM, |
||||
icon: iconMap.typeform, |
||||
categories: [IntegrationCategoryType.MARKETING], |
||||
}, |
||||
|
||||
// ATS
|
||||
{ |
||||
title: 'objects.syncData.workday', |
||||
value: SyncDataType.WORKDAY, |
||||
icon: iconMap.workday, |
||||
categories: [IntegrationCategoryType.ATS], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.greenhouse', |
||||
value: SyncDataType.GREENHOUSE, |
||||
icon: iconMap.greenhouse, |
||||
categories: [IntegrationCategoryType.ATS], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.lever', |
||||
value: SyncDataType.LEVER, |
||||
icon: iconMap.lever, |
||||
categories: [IntegrationCategoryType.ATS], |
||||
}, |
||||
|
||||
// Development
|
||||
{ |
||||
title: 'objects.syncData.bitbucket', |
||||
value: SyncDataType.BITBUCKET, |
||||
icon: iconMap.bitBucket, |
||||
categories: [IntegrationCategoryType.DEVELOPMENT], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.github', |
||||
value: SyncDataType.GITHUB, |
||||
icon: iconMap.githubSolid, |
||||
categories: [IntegrationCategoryType.DEVELOPMENT], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.gitlab', |
||||
value: SyncDataType.GITLAB, |
||||
icon: iconMap.gitlab, |
||||
categories: [IntegrationCategoryType.DEVELOPMENT], |
||||
}, |
||||
|
||||
// Finance
|
||||
{ |
||||
title: 'objects.syncData.stripe', |
||||
value: SyncDataType.STRIPE, |
||||
icon: iconMap.stripe, |
||||
categories: [IntegrationCategoryType.FINANCE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.quickbooks', |
||||
value: SyncDataType.QUICKBOOKS, |
||||
icon: iconMap.quickbooks, |
||||
categories: [IntegrationCategoryType.FINANCE], |
||||
}, |
||||
|
||||
// Ticketing
|
||||
{ |
||||
title: 'objects.syncData.intercom', |
||||
value: SyncDataType.INTERCOM, |
||||
icon: iconMap.intercom, |
||||
categories: [IntegrationCategoryType.TICKETING], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.zendesk', |
||||
value: SyncDataType.ZENDESK, |
||||
icon: iconMap.zendesk, |
||||
categories: [IntegrationCategoryType.TICKETING], |
||||
}, |
||||
|
||||
// Storage
|
||||
{ title: 'objects.syncData.box', value: SyncDataType.BOX, icon: iconMap.box, categories: [IntegrationCategoryType.STORAGE] }, |
||||
{ |
||||
title: 'objects.syncData.dropbox', |
||||
value: SyncDataType.DROPBOX, |
||||
icon: iconMap.dropbox, |
||||
categories: [IntegrationCategoryType.STORAGE], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.googleDrive', |
||||
value: SyncDataType.GOOGLE_DRIVE, |
||||
icon: iconMap.googleDrive, |
||||
categories: [IntegrationCategoryType.STORAGE], |
||||
}, |
||||
|
||||
// Others
|
||||
{ |
||||
title: 'objects.syncData.appleNumbers', |
||||
value: SyncDataType.APPLE_NUMBERS, |
||||
icon: iconMap.appleSolid, |
||||
categories: [IntegrationCategoryType.OTHERS], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.googleCalendar', |
||||
value: SyncDataType.GOOGLE_CALENDAR, |
||||
icon: iconMap.googleCalendar, |
||||
categories: [IntegrationCategoryType.OTHERS], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.microsoftExcel', |
||||
value: SyncDataType.MICROSOFT_EXCEL, |
||||
icon: iconMap.microsoftExcel, |
||||
categories: [IntegrationCategoryType.OTHERS], |
||||
}, |
||||
{ |
||||
title: 'objects.syncData.googleSheets', |
||||
value: SyncDataType.GOOGLE_SHEETS, |
||||
icon: iconMap.googleSheet, |
||||
categories: [IntegrationCategoryType.OTHERS], |
||||
}, |
||||
] |
||||
|
||||
export const syncDataTypes = [] as { |
||||
title: string |
||||
icon: FunctionalComponent<SVGAttributes, {}, any, {}> |
||||
value: SyncDataType |
||||
}[] |
||||
|
||||
export const syncDataTypesMap = syncDataTypes.reduce((acc, curr) => { |
||||
export const syncDataTypesMap = allIntegrations.reduce((acc, curr) => { |
||||
acc[curr.value] = curr |
||||
return acc |
||||
}, {}) |
||||
}, {} as Record<string, IntegrationItemType>) |
||||
|
||||
Loading…
Reference in new issue