refactor: ws page

packages/nc-gui/components/workspace/BaseList/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <NcSpanHidden />
+</template>

packages/nc-gui/components/workspace/View.vue

@@ -4,6 +4,7 @@ import { PlanFeatureTypes, PlanTitles } from 'nocodb-sdk'
 
 const props = defineProps<{
   workspaceId?: string
+  isNewWsPage?: boolean
 }>()
 
 const router = useRouter()
@@ -35,6 +36,13 @@ const {
   isEEFeatureBlocked,
 } = useEeConfig()
 
+const { isFromIntegrationPage, integrationPaginationData, loadIntegrations } = useProvideIntegrationViewStore()
+
+// Local ref for inner integrations sub-tabs in settings sidebar mode.
+// Cannot use activeViewTab (which writes to route.query.tab) because the outer NcTabs
+// also reads route.query.tab — changing it to 'connections' makes the outer pane blank.
+const integrationsSubTab = ref<string>('integrations')
+
 const hasTeamsEditPermission = computed(() => {
   return isEeUI && isTeamsEnabled.value && isUIAllowed('teamCreate')
 })
@@ -55,9 +63,25 @@ const currentWorkspace = computedAsync(async () => {
   return ws
 })
 
+const routeNameToWsTab: Record<string, string> = {
+  'index-typeOrId-index': 'bases',
+  'index-typeOrId': 'bases',
+  'index-typeOrId-members': 'collaborators',
+  'index-typeOrId-teams': 'teams',
+  'index-typeOrId-integrations': 'integrations',
+  'index-typeOrId-audits': 'audits',
+  'index-typeOrId-billing': 'billing',
+  'index-typeOrId-sso': 'sso',
+  'index-typeOrId-settings': 'settings',
+}
+
+const wsTabToRouteName: Record<string, string> = Object.fromEntries(Object.entries(routeNameToWsTab).map(([k, v]) => [v, k]))
+
 const tab = computed({
   get() {
-    return route.value.query?.tab ?? 'collaborators'
+    return props.isNewWsPage
+      ? routeNameToWsTab[route.value.name as string] || 'collaborators'
+      : route.value.query?.tab ?? 'collaborators'
   },
   set(tab: string) {
     if (!isWsAuditEnabled.value && tab === 'audits') {
@@ -76,7 +100,11 @@ const tab = computed({
       loadCollaborators({} as any, props.workspaceId)
     }
 
-    router.push({ query: { ...route.value.query, tab } })
+    if (props.isNewWsPage) {
+      router.push({ name: wsTabToRouteName[tab] || 'index-typeOrId' })
+    } else {
+      router.push({ query: { ...route.value.query, tab } })
+    }
   },
 })
 
@@ -113,7 +141,12 @@ onMounted(() => {
 
 watch(
   () => route.value.query?.tab,
-  async (newTab) => {
+  async (newTab, oldTab) => {
+    if (oldTab === 'integrations') {
+      isFromIntegrationPage.value = false
+      integrationsSubTab.value = 'integrations'
+    }
+
     await until(() => isBaseRolesLoaded.value).toBeTruthy()
 
     if (!isUIAllowed('workspaceCollaborators') && !isEEFeatureBlocked.value) {
@@ -130,19 +163,21 @@ watch(
   },
 )
 
-onMounted(() => {
-  hideSidebar.value = true
-})
+if (!props.isNewWsPage) {
+  onMounted(() => {
+    hideSidebar.value = true
+  })
 
-onBeforeUnmount(() => {
-  hideSidebar.value = false
-})
+  onBeforeUnmount(() => {
+    hideSidebar.value = false
+  })
+}
 </script>
 
 <template>
   <div v-if="currentWorkspace" class="flex w-full flex-col nc-workspace-settings h-full overflow-hidden">
     <div
-      v-if="!props.workspaceId"
+      v-if="!props.workspaceId && !isNewWsPage"
       class="min-w-0 p-2 h-[var(--topbar-height)] border-b-1 border-nc-border-gray-medium flex items-center gap-2"
     >
       <GeneralOpenLeftSidebarBtn v-if="isMobileMode && !isLeftSidebarOpen" />
@@ -152,19 +187,26 @@ onBeforeUnmount(() => {
           'max-w-[calc(100%_-_52px)]': isMobileMode,
         }"
       >
-        <div class="nc-breadcrumb-item capitalize truncate">
+        <div
+          class="nc-breadcrumb-item capitalize truncate"
+          :class="{
+            '!text-bodyLgBold': isNewWsPage,
+          }"
+        >
           {{ currentWorkspace?.title }}
         </div>
-        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
+        <template v-if="!isNewWsPage">
+          <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
 
-        <h1 class="nc-breadcrumb-item active truncate">
-          {{ $t('title.teamAndSettings') }}
-        </h1>
+          <h1 class="nc-breadcrumb-item active truncate">
+            {{ $t('title.teamAndSettings') }}
+          </h1>
+        </template>
       </div>
 
       <GeneralHideLeftSidebarBtn v-if="isMobileMode && isLeftSidebarOpen" />
     </div>
-    <template v-else>
+    <template v-else-if="!isNewWsPage">
       <div class="nc-breadcrumb px-2">
         <div class="nc-breadcrumb-item">
           {{ org.title }}
@@ -199,10 +241,21 @@ onBeforeUnmount(() => {
       </NcPageHeader>
     </template>
 
-    <NcTabs v-model:active-key="tab" class="flex-1 min-h-0">
+    <NcTabs v-model:active-key="tab" class="flex-1 min-h-0" :class="{ 'hide-tabs': isNewWsPage }">
       <template #leftExtra>
         <div class="w-3"></div>
       </template>
+      <a-tab-pane v-if="isNewWsPage" key="bases" class="w-full h-full">
+        <template #tab>
+          <div class="tab-title">
+            <GeneralIcon icon="ncDatabase" class="h-4 w-4" />
+            {{ $t('objects.projects') }}
+          </div>
+        </template>
+
+        <div>bases</div>
+      </a-tab-pane>
+
       <template v-if="isUIAllowed('workspaceCollaborators')">
         <a-tab-pane key="collaborators" class="w-full h-full">
           <template #tab>
@@ -232,6 +285,59 @@ onBeforeUnmount(() => {
         </a-tab-pane>
       </template>
       <template v-if="!isMobileMode">
+        <a-tab-pane
+          v-if="isNewWsPage && isUIAllowed('workspaceIntegrations') && !isMobileMode"
+          key="integrations"
+          class="w-full h-full"
+        >
+          <template #tab>
+            <div class="tab-title">
+              <GeneralIcon icon="integration" class="h-4 w-4" />
+              {{ $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>
+              </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>
+            <WorkspaceIntegrationsEditOrAdd />
+          </div>
+        </a-tab-pane>
+
         <template
           v-if="
             isEeUI && !props.workspaceId && !currentWorkspace?.fk_org_id && isPaymentEnabled && isUIAllowed('workspaceBilling')
@@ -308,6 +414,10 @@ onBeforeUnmount(() => {
   @apply pt-2 pb-3;
 }
 
+:deep(.ant-tabs-tab + .ant-tabs-tab) {
+  @apply !ml-3;
+}
+
 .ant-tabs-content-top {
   @apply !h-full;
 }
@@ -319,4 +429,17 @@ onBeforeUnmount(() => {
 .tab-title {
   @apply flex flex-row items-center gap-x-2 py-[1px];
 }
+
+.hide-tabs {
+  // Hide only the top-level tab nav (this element IS the .ant-tabs)
+  > :deep(.ant-tabs-nav) {
+    @apply !hidden;
+  }
+
+  :deep(.ant-tabs-content) {
+    > .ant-tabs-tabpane > div {
+      @apply nc-content-max-w mx-auto;
+    }
+  }
+}
 </style>

packages/nc-gui/components/workspace/ViewTabs.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import { PlanFeatureTypes, PlanTitles } from 'nocodb-sdk'
+
+const router = useRouter()
+const route = router.currentRoute
+
+const { t } = useI18n()
+
+const workspaceStore = useWorkspace()
+
+const { activeWorkspace, isTeamsEnabled } = storeToRefs(workspaceStore)
+const { loadCollaborators } = workspaceStore
+
+const { appInfo, isMobileMode } = useGlobal()
+
+const { isUIAllowed } = useRoles()
+
+const {
+  isWsAuditEnabled,
+  isPaymentEnabled,
+  isEEFeatureBlocked,
+  getFeature,
+  handleUpgradePlan,
+  showUpgradeToUseTeams,
+} = useEeConfig()
+
+const hasTeamsEditPermission = computed(() => {
+  return isEeUI && isTeamsEnabled.value && isUIAllowed('teamCreate')
+})
+
+const isWorkspaceSsoAvail = computed(() => {
+  if (isEeUI && appInfo.value?.isCloud && getFeature(PlanFeatureTypes.FEATURE_SSO)) {
+    return true
+  }
+  return false
+})
+
+const routeNameToWsTab: Record<string, string> = {
+  'index-typeOrId-index': 'bases',
+  'index-typeOrId': 'bases',
+  'index-typeOrId-members': 'collaborators',
+  'index-typeOrId-teams': 'teams',
+  'index-typeOrId-integrations': 'integrations',
+  'index-typeOrId-audits': 'audits',
+  'index-typeOrId-billing': 'billing',
+  'index-typeOrId-sso': 'sso',
+  'index-typeOrId-settings': 'settings',
+}
+
+const wsTabToRouteName: Record<string, string> = Object.fromEntries(
+  Object.entries(routeNameToWsTab).map(([k, v]) => [v, k]),
+)
+
+const activeTab = computed(() => {
+  return routeNameToWsTab[route.value.name as string] || 'bases'
+})
+
+const onTabChange = (tabKey: string) => {
+  if (!isWsAuditEnabled.value && tabKey === 'audits') {
+    handleUpgradePlan({
+      title: t('upgrade.upgradeToAccessWsAudit'),
+      content: t('upgrade.upgradeToAccessWsAuditSubtitle', { plan: PlanTitles.ENTERPRISE }),
+      limitOrFeature: PlanFeatureTypes.FEATURE_AUDIT_WORKSPACE,
+    })
+    return
+  }
+
+  if (isEeUI && tabKey === 'teams' && hasTeamsEditPermission.value && showUpgradeToUseTeams()) return
+
+  if (['collaborators', 'teams'].includes(tabKey) && isUIAllowed('workspaceCollaborators')) {
+    loadCollaborators({}, activeWorkspace.value?.id)
+  }
+
+  router.push({ name: wsTabToRouteName[tabKey] || 'index-typeOrId' })
+}
+
+// Tab definitions — built dynamically based on permissions
+interface TabItem {
+  key: string
+  icon: string
+  label: string
+  badge?: any
+}
+
+const tabItems = computed<TabItem[]>(() => {
+  const items: TabItem[] = [
+    { key: 'bases', icon: 'ncDatabase', label: t('objects.projects') },
+  ]
+
+  if (isUIAllowed('workspaceCollaborators')) {
+    items.push({ key: 'collaborators', icon: 'users', label: t('labels.members') })
+  }
+
+  if (isEeUI && hasTeamsEditPermission.value) {
+    items.push({ key: 'teams', icon: 'ncBuilding', label: t('general.teams') })
+  }
+
+  if (!isMobileMode.value) {
+    if (isUIAllowed('workspaceIntegrations')) {
+      items.push({ key: 'integrations', icon: 'integration', label: t('general.integrations') })
+    }
+
+    if (isEeUI && isPaymentEnabled.value && isUIAllowed('workspaceBilling')) {
+      items.push({ key: 'billing', icon: 'ncDollarSign', label: t('general.billing') })
+    }
+
+    if (isEeUI && isUIAllowed('workspaceAuditList')) {
+      items.push({ key: 'audits', icon: 'audit', label: t('title.audits') })
+    }
+
+    if (isWorkspaceSsoAvail.value && isUIAllowed('workspaceSSO')) {
+      items.push({ key: 'sso', icon: 'sso', label: t('title.sso') })
+    }
+  }
+
+  if (!isEEFeatureBlocked.value) {
+    items.push({ key: 'settings', icon: 'ncSettings', label: t('labels.settings') })
+  }
+
+  return items
+})
+</script>
+
+<template>
+  <div class="nc-ws-view-tabs flex items-center border-b-1 border-nc-border-gray-medium overflow-x-auto nc-scrollbar-thin">
+    <div class="w-3 flex-shrink-0" />
+    <div
+      v-for="item in tabItems"
+      :key="item.key"
+      class="tab-title"
+      :class="{ active: activeTab === item.key }"
+      @click="onTabChange(item.key)"
+    >
+      <GeneralIcon :icon="item.icon" class="h-4 w-4 flex-none" />
+      <span>{{ item.label }}</span>
+      <LazyPaymentUpgradeBadge
+        v-if="item.key === 'teams'"
+        :feature="PlanFeatureTypes.FEATURE_TEAM_MANAGEMENT"
+        :feature-enabled-callback="() => !isEEFeatureBlocked"
+        remove-click
+      />
+      <LazyPaymentUpgradeBadge
+        v-if="item.key === 'audits'"
+        :feature="PlanFeatureTypes.FEATURE_AUDIT_WORKSPACE"
+        :feature-enabled-callback="() => isWsAuditEnabled"
+        remove-click
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tab-title {
+  @apply flex items-center gap-2 px-3 py-2.5 cursor-pointer text-bodyDefaultSm font-medium
+    whitespace-nowrap border-b-2 border-transparent
+    text-nc-content-gray-muted transition-colors duration-150;
+
+  &:hover {
+    @apply text-nc-content-gray-subtle;
+  }
+
+  &.active {
+    @apply border-nc-border-brand !text-nc-content-brand font-semibold;
+  }
+}
+</style>

packages/nc-gui/components/workspace/ViewTopbar.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+const workspaceStore = useWorkspace()
+
+const { activeWorkspace } = storeToRefs(workspaceStore)
+
+const { isMobileMode } = useGlobal()
+
+const { activePlanTitle, isPaymentEnabled, handleUpgradePlan } = useEeConfig()
+
+const { setActiveCmdView } = useCommand()
+
+const isFreePlan = computed(() => activePlanTitle.value === 'Free')
+
+const openSearch = () => {
+  setActiveCmdView('cmd-k')
+}
+
+const showUpgrade = () => {
+  handleUpgradePlan({})
+}
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[1fr_auto] lg:grid-cols-3 items-center px-3 h-[var(--topbar-height)] flex-none border-b-1 border-nc-border-gray-medium"
+  >
+    <!-- Left -->
+    <div class="flex items-center gap-2 min-w-0">
+      <GeneralOpenLeftSidebarBtn />
+      <h1 class="text-bodyLgBold text-nc-content-gray capitalize truncate mb-0">
+        {{ activeWorkspace?.title }}
+      </h1>
+      <div
+        v-if="isEeUI"
+        class="hidden md:flex items-center justify-center gap-1.5 px-2 py-1 rounded-full text-[11px] font-medium leading-none bg-nc-bg-gray-light text-nc-content-gray-subtle flex-shrink-0"
+      >
+        <span class="uppercase">{{ activePlanTitle }} {{ $t('general.plan') }}</span>
+        <template v-if="isFreePlan && isPaymentEnabled">
+          <span class="text-nc-content-gray-muted">&middot;</span>
+          <span class="text-primary cursor-pointer hover:underline" @click="showUpgrade">{{ $t('general.upgrade') }}</span>
+        </template>
+      </div>
+    </div>
+
+    <!-- Center -->
+    <div class="hidden sm:flex justify-center min-w-0 pl-2 pr-0 lg:pr-2">
+      <div
+        class="flex items-center gap-2 px-3 py-1.5 rounded-lg border-1 border-nc-border-gray-medium bg-nc-bg-gray-light cursor-pointer hover:border-nc-border-gray-dark transition-colors w-full max-w-[400px]"
+        data-testid="nc-ws-home-search"
+        @click="openSearch"
+      >
+        <GeneralIcon icon="search" class="h-4 w-4 text-nc-content-gray-muted flex-none" />
+        <span class="text-[13px] text-nc-content-gray-muted flex-1 truncate">{{ $t('activity.searchWorkspaceBases') }}...</span>
+        <div class="flex items-center gap-0.5 flex-shrink-0">
+          <kbd class="nc-ws-topbar-kbd">{{ renderCmdOrCtrlKey() }}</kbd>
+          <kbd class="nc-ws-topbar-kbd">K</kbd>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right spacer (only on lg+ for 3-col centering) -->
+    <div class="hidden lg:block" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-ws-topbar-kbd {
+  @apply inline-flex items-center justify-center
+    min-w-5 h-5 px-1
+    text-[11px] font-medium leading-none
+    text-nc-content-gray-muted
+    bg-nc-bg-default
+    border-1 border-nc-border-gray-medium
+    rounded;
+}
+</style>