fix: some review changes

This commit is contained in:
Ramesh Mane
2026-03-28 07:09:11 +00:00
parent 438d13e4c5
commit 704cce9987
9 changed files with 67 additions and 68 deletions

View File

@@ -296,44 +296,47 @@ if (!props.isNewWsPage) {
{{ $t('general.integrations') }}
</div>
</template>
<div class="nc-integrations-tabs-wrapper h-full flex flex-col">
<NcTabs v-model:active-key="integrationsSubTab" class="nc-nested-tabs flex-1 min-h-0">
<template #leftExtra>
<div class="w-3"></div>
</template>
<a-tab-pane key="integrations" class="w-full">
<template #tab>
<div class="tab-title">
<GeneralIcon icon="integration" />
{{ $t('general.integrations') }}
</div>
</template>
<div class="h-full overflow-auto nc-scrollbar-thin">
<WorkspaceIntegrationsTab show-filter />
<div class="nc-integrations-layout h-full flex">
<!-- Left: vertical nav -->
<div class="nc-integrations-sidebar flex flex-col gap-1 pl-6 pr-2 pt-6 w-48 flex-shrink-0">
<div
class="nc-integrations-nav-item"
:class="{ active: integrationsSubTab === 'integrations' }"
@click="integrationsSubTab = 'integrations'"
>
<GeneralIcon icon="integration" class="h-4 w-4 flex-none" />
<span>{{ $t('general.integrations') }}</span>
</div>
<div
class="nc-integrations-nav-item"
:class="{ active: integrationsSubTab === 'connections' }"
@click="integrationsSubTab = 'connections'"
>
<GeneralIcon icon="gitCommit" class="h-4 w-4 flex-none" />
<span>{{ $t('general.connections') }}</span>
<div
v-if="integrationPaginationData?.totalRows"
class="tab-info flex-none ml-auto"
:class="{
'bg-primary-selected': integrationsSubTab === 'connections',
'bg-nc-bg-gray-extralight': integrationsSubTab !== 'connections',
}"
>
{{ integrationPaginationData.totalRows }}
</div>
</a-tab-pane>
<a-tab-pane key="connections" class="w-full">
<template #tab>
<div class="tab-title">
<GeneralIcon icon="gitCommit" />
{{ $t('general.connections') }}
<div
v-if="integrationPaginationData?.totalRows"
class="tab-info flex-none"
:class="{
'bg-primary-selected': integrationsSubTab === 'connections',
'bg-nc-bg-gray-extralight': integrationsSubTab !== 'connections',
}"
>
{{ integrationPaginationData.totalRows }}
</div>
</div>
</template>
<div class="p-6 h-full overflow-auto nc-scrollbar-thin">
<WorkspaceIntegrationsConnectionsTab />
</div>
</a-tab-pane>
</NcTabs>
</div>
</div>
<!-- Right: content -->
<div class="flex-1 min-w-0 flex flex-col">
<div v-if="integrationsSubTab === 'integrations'" class="h-full overflow-auto nc-scrollbar-thin">
<WorkspaceIntegrationsTab show-filter />
</div>
<div v-else-if="integrationsSubTab === 'connections'" class="p-6 h-full overflow-auto nc-scrollbar-thin">
<WorkspaceIntegrationsConnectionsTab />
</div>
</div>
<WorkspaceIntegrationsEditOrAdd />
</div>
</a-tab-pane>
@@ -430,22 +433,17 @@ if (!props.isNewWsPage) {
@apply flex flex-row items-center gap-x-2 py-[1px];
}
// Integrations sub-tabs: propagate height through Ant tabs internal DOM
.nc-integrations-tabs-wrapper {
:deep(.ant-tabs) {
@apply flex flex-col;
.nc-integrations-nav-item {
@apply flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer
text-bodyDefaultSm text-nc-content-gray-subtle
transition-colors;
&:hover {
@apply bg-nc-bg-gray-medium;
}
:deep(.ant-tabs-content-holder) {
@apply flex-1 min-h-0;
}
:deep(.ant-tabs-content) {
@apply h-[calc(100vh-var(--topbar-height)-41px-44px)];
}
:deep(.ant-tabs-tabpane) {
@apply h-[calc(100vh-var(--topbar-height)-41px-44px)];
&.active {
@apply bg-nc-bg-gray-medium text-nc-content-brand font-medium;
}
}