refactor: ws page

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>