mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 09:26:57 +00:00
refactor: hide unavailable integrations
This commit is contained in:
Pranav C
@@ -1,8 +1,9 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VNodeRef } from '@vue/runtime-core'
|
||||
import { IntegrationCategoryType } from 'nocodb-sdk'
|
||||
import NcModal from '~/components/nc/Modal.vue'
|
||||
/* eslint-disable @typescript-eslint/consistent-type-imports */
|
||||
import { IntegrationCategoryType, type IntegrationItemType, SyncDataType } from '#imports'
|
||||
import { type IntegrationItemType, SyncDataType } from '#imports'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -18,6 +19,8 @@ const props = withDefaults(
|
||||
showFilter: false,
|
||||
},
|
||||
)
|
||||
const easterEggCount = ref(0)
|
||||
const easterEggToggle = computed(() => easterEggCount.value > 2)
|
||||
|
||||
const { isModal, filterCategory, filterIntegration } = props
|
||||
|
||||
@@ -144,6 +147,7 @@ const integrationsMapByCategory = computed(() => {
|
||||
list: getIntegrationsByCategory(curr.value, searchQuery.value),
|
||||
isAvailable: curr.isAvailable,
|
||||
teleEventName: curr.teleEventName,
|
||||
value: curr.value,
|
||||
}
|
||||
|
||||
return acc
|
||||
@@ -243,7 +247,7 @@ watch(activeViewTab, (value) => {
|
||||
<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-1 text-base font-weight-700" @dblclick="easterEggCount++">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" />
|
||||
@@ -265,7 +269,7 @@ watch(activeViewTab, (value) => {
|
||||
}"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-normal text-gray-600 mb-2">
|
||||
<div class="text-sm font-normal text-gray-600 mb-2" @dblclick="easterEggCount++">
|
||||
<div>
|
||||
Connect integrations with NocoDB.
|
||||
<a href="https://docs.nocodb.com/category/integrations" target="_blank" rel="noopener noreferrer"
|
||||
@@ -275,6 +279,7 @@ watch(activeViewTab, (value) => {
|
||||
</div>
|
||||
<div class="flex items-center gap-2 !max-w-[400px]">
|
||||
<a-input
|
||||
v-if="easterEggToggle"
|
||||
v-model:value="searchQuery"
|
||||
type="text"
|
||||
class="flex-1 nc-input-border-on-value nc-search-integration-input !min-w-[300px] nc-input-sm flex-none"
|
||||
@@ -285,7 +290,7 @@ watch(activeViewTab, (value) => {
|
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500" />
|
||||
</template>
|
||||
</a-input>
|
||||
<NcDropdown v-if="showFilter" v-model:visible="isOpenFilter">
|
||||
<NcDropdown v-if="easterEggToggle && showFilter" v-model:visible="isOpenFilter">
|
||||
<NcButton size="small" type="secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<GeneralIcon icon="filter" />
|
||||
@@ -328,7 +333,13 @@ watch(activeViewTab, (value) => {
|
||||
</NcDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<NcButton type="ghost" size="small" class="!text-primary" @click="requestIntegration.isOpen = true">
|
||||
<NcButton
|
||||
v-if="easterEggToggle"
|
||||
type="ghost"
|
||||
size="small"
|
||||
class="!text-primary"
|
||||
@click="requestIntegration.isOpen = true"
|
||||
>
|
||||
Request Integration
|
||||
</NcButton>
|
||||
</div>
|
||||
@@ -352,7 +363,11 @@ watch(activeViewTab, (value) => {
|
||||
}"
|
||||
>
|
||||
<template v-for="(category, key) in integrationsMapByCategory">
|
||||
<div v-if="category.list.length" :key="key" class="integration-type-wrapper">
|
||||
<div
|
||||
v-if="(easterEggToggle || category.value === IntegrationCategoryType.DATABASE) && category.list.length"
|
||||
:key="key"
|
||||
class="integration-type-wrapper"
|
||||
>
|
||||
<div class="category-type-title flex gap-2">
|
||||
{{ $t(category.title) }}
|
||||
<NcBadge
|
||||
@@ -363,46 +378,47 @@ watch(activeViewTab, (value) => {
|
||||
>
|
||||
</div>
|
||||
<div v-if="category.list.length" class="integration-type-list">
|
||||
<NcTooltip
|
||||
v-for="integration of category.list"
|
||||
:key="integration.subType"
|
||||
:disabled="integration?.isAvailable"
|
||||
placement="bottom"
|
||||
>
|
||||
<template #title>{{ $t('tooltip.comingSoonIntegration') }}</template>
|
||||
|
||||
<div
|
||||
:tabindex="0"
|
||||
class="source-card focus-visible:outline-none outline-none h-full"
|
||||
:class="{
|
||||
'is-available': integration?.isAvailable,
|
||||
}"
|
||||
@click="handleAddIntegration(key, integration)"
|
||||
<template v-for="integration of category.list" :key="integration.subType">
|
||||
<NcTooltip
|
||||
v-if="easterEggToggle || integration.isAvailable"
|
||||
:disabled="integration?.isAvailable"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="integration-icon-wrapper">
|
||||
<component :is="integration.icon" class="integration-icon" :style="integration.iconStyle" />
|
||||
<template #title>{{ $t('tooltip.comingSoonIntegration') }}</template>
|
||||
|
||||
<div
|
||||
:tabindex="0"
|
||||
class="source-card focus-visible:outline-none outline-none h-full"
|
||||
: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="flex-1">
|
||||
<div class="name">{{ $t(integration.title) }}</div>
|
||||
<div v-if="integration.subtitle" class="subtitle flex-1">{{ $t(integration.subtitle) }}</div>
|
||||
</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.subType),
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<GeneralIcon icon="ncArrowUp" />
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="name">{{ $t(integration.title) }}</div>
|
||||
<div v-if="integration.subtitle" class="subtitle flex-1">{{ $t(integration.subtitle) }}</div>
|
||||
</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.subType),
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<GeneralIcon icon="ncArrowUp" />
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcTooltip>
|
||||
</NcTooltip>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -569,8 +585,7 @@ watch(activeViewTab, (value) => {
|
||||
@apply text-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-available) {
|
||||
z &:not(.is-available) {
|
||||
&:not(:hover) {
|
||||
.integration-icon-wrapper {
|
||||
// @apply bg-gray-50;
|
||||
|
||||
Reference in New Issue
Block a user