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

<script lang="ts" setup>
import { useTitle } from '@vueuse/core'
import { PlanFeatureTypes, PlanTitles } from 'nocodb-sdk'

const props = defineProps<{
  workspaceId?: string
}>()

const router = useRouter()
const route = router.currentRoute

const { t } = useI18n()

const { hideSidebar, isLeftSidebarOpen } = storeToRefs(useSidebarStore())

const { isUIAllowed, isBaseRolesLoaded, loadRoles } = useRoles()

const { appInfo, isMobileMode } = useGlobal()

const workspaceStore = useWorkspace()

const { activeWorkspace: _activeWorkspace, workspaces, deletingWorkspace, isTeamsEnabled } = storeToRefs(workspaceStore)
const { loadCollaborators, loadWorkspace } = workspaceStore

const orgStore = useOrg()
const { orgId, org } = storeToRefs(orgStore)

const { isWsAuditEnabled, handleUpgradePlan, isPaymentEnabled, getFeature, blockTeamsManagement, showUpgradeToUseTeams } =
  useEeConfig()

const hasTeamsEditPermission = computed(() => {
  return isEeUI && isTeamsEnabled.value && isUIAllowed('teamCreate')
})

const currentWorkspace = computedAsync(async () => {
  if (deletingWorkspace.value) return
  let ws
  if (props.workspaceId) {
    ws = workspaces.value.get(props.workspaceId)
    if (!ws) {
      await loadWorkspace(props.workspaceId)
      ws = workspaces.value.get(props.workspaceId)
    }
  } else {
    ws = _activeWorkspace.value
  }
  await loadRoles(undefined, {}, ws?.id)
  return ws
})

const tab = computed({
  get() {
    return route.value.query?.tab ?? 'collaborators'
  },
  set(tab: string) {
    if (!isWsAuditEnabled.value && tab === 'audits') {
      return handleUpgradePlan({
        title: t('upgrade.upgradeToAccessWsAudit'),
        content: t('upgrade.upgradeToAccessWsAuditSubtitle', {
          plan: PlanTitles.ENTERPRISE,
        }),
        limitOrFeature: PlanFeatureTypes.FEATURE_AUDIT_WORKSPACE,
      })
    }

    if (isEeUI && tab === 'teams' && hasTeamsEditPermission.value && showUpgradeToUseTeams()) return

    if (['collaborators', 'teams'].includes(tab) && isUIAllowed('workspaceCollaborators')) {
      loadCollaborators({} as any, props.workspaceId)
    }

    router.push({ query: { ...route.value.query, tab } })
  },
})

const isWorkspaceSsoAvail = computed(() => {
  if (isEeUI && appInfo.value?.isCloud && getFeature(PlanFeatureTypes.FEATURE_SSO)) {
    return true
  }
  return false
})

watch(
  () => currentWorkspace.value?.title,
  (title) => {
    if (!title) return

    const capitalizedTitle = title.charAt(0).toUpperCase() + title.slice(1)

    useTitle(capitalizedTitle)
  },
  {
    immediate: true,
  },
)

onMounted(() => {
  until(() => currentWorkspace.value?.id && isBaseRolesLoaded.value)
    .toMatch((v) => !!v)
    .then(async () => {
      if (isUIAllowed('workspaceCollaborators')) {
        await loadCollaborators({} as any, currentWorkspace.value!.id)
      }
    })
})

watch(
  () => route.value.query?.tab,
  async (newTab) => {
    await until(() => isBaseRolesLoaded.value).toBeTruthy()

    if (!isUIAllowed('workspaceCollaborators')) {
      tab.value = 'settings'
    } else if (
      (!isWsAuditEnabled.value && newTab === 'audits') ||
      ((!isEeUI || !hasTeamsEditPermission.value || blockTeamsManagement.value) && newTab === 'teams')
    ) {
      tab.value = 'collaborators'
    }
  },
  {
    immediate: true,
  },
)

onMounted(() => {
  hideSidebar.value = true
})

onBeforeUnmount(() => {
  hideSidebar.value = false
})
</script>

<template>
  <div v-if="currentWorkspace" class="flex w-full flex-col nc-workspace-settings">
    <div
      v-if="!props.workspaceId"
      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" />
      <div
        class="flex-1 nc-breadcrumb nc-no-negative-margin pl-1 nc-workspace-title"
        :class="{
          'max-w-[calc(100%_-_52px)]': isMobileMode,
        }"
      >
        <div class="nc-breadcrumb-item capitalize truncate">
          {{ currentWorkspace?.title }}
        </div>
        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />

        <h1 class="nc-breadcrumb-item active truncate">
          {{ $t('title.teamAndSettings') }}
        </h1>
      </div>
      <GeneralHideLeftSidebarBtn v-if="isMobileMode && isLeftSidebarOpen" />
    </div>
    <template v-else>
      <div class="nc-breadcrumb px-2">
        <div class="nc-breadcrumb-item">
          {{ org.title }}
        </div>
        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />

        <NuxtLink
          :href="`/admin/${orgId}/workspaces`"
          class="!hover:(text-nc-content-gray underline-nc-border-gray-underline) flex items-center !text-nc-content-gray-subtle !underline-transparent max-w-1/4"
        >
          <div class="nc-breadcrumb-item">
            {{ $t('labels.workspaces') }}
          </div>
        </NuxtLink>
        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />

        <div class="nc-breadcrumb-item active truncate capitalize">
          {{ currentWorkspace?.title }}
        </div>
      </div>
      <NcPageHeader>
        <template #icon>
          <div class="flex justify-center items-center h-6 w-6">
            <GeneralWorkspaceIcon :workspace="currentWorkspace" size="medium" />
          </div>
        </template>
        <template #title>
          <span data-rec="true" class="capitalize">
            {{ currentWorkspace?.title }}
          </span>
        </template>
      </NcPageHeader>
    </template>

    <NcTabs v-model:active-key="tab">
      <template #leftExtra>
        <div class="w-3"></div>
      </template>
      <template v-if="isUIAllowed('workspaceCollaborators')">
        <a-tab-pane key="collaborators" class="w-full h-full">
          <template #tab>
            <div class="tab-title">
              <GeneralIcon icon="users" class="h-4 w-4" />
              {{ $t('labels.members') }}
            </div>
          </template>

          <WorkspaceCollaboratorsList :workspace-id="currentWorkspace.id" :is-active="tab === 'collaborators'" />
        </a-tab-pane>

        <a-tab-pane v-if="isEeUI && hasTeamsEditPermission" key="teams" class="w-full h-full">
          <template #tab>
            <div class="tab-title">
              <GeneralIcon icon="ncBuilding" class="h-4 w-4" />
              {{ $t('general.teams') }}
            </div>
          </template>

          <WorkspaceTeams :workspace-id="currentWorkspace.id" :is-active="tab === 'teams'" />
        </a-tab-pane>
      </template>
      <template v-if="!isMobileMode">
        <template
          v-if="
            isEeUI && !props.workspaceId && !currentWorkspace?.fk_org_id && isPaymentEnabled && isUIAllowed('workspaceBilling')
          "
        >
          <a-tab-pane key="billing" class="w-full">
            <template #tab>
              <div class="tab-title" data-testid="nc-workspace-settings-tab-billing">
                <GeneralIcon icon="ncDollarSign" class="flex-none h-4 w-4" />
                {{ $t('general.billing') }}
              </div>
            </template>

            <PaymentBillingPage />
          </a-tab-pane>
        </template>

        <template v-if="isEeUI && !props.workspaceId && isWsAuditEnabled && isUIAllowed('workspaceAuditList')">
          <a-tab-pane key="audits" class="w-full">
            <template #tab>
              <div class="tab-title" data-testid="nc-workspace-settings-tab-audits">
                <GeneralIcon icon="audit" class="h-4 w-4" />
                {{ $t('title.audits') }}
              </div>
            </template>
            <WorkspaceAudits v-if="isWsAuditEnabled" />
            <div v-else>&nbsp;</div>
          </a-tab-pane>
        </template>

        <template v-if="isWorkspaceSsoAvail && !currentWorkspace?.fk_org_id && isUIAllowed('workspaceSSO')">
          <a-tab-pane key="sso" class="w-full">
            <template #tab>
              <div class="tab-title" data-testid="nc-workspace-settings-tab-billing">
                <GeneralIcon icon="sso" class="flex-none h-4 w-4" />
                {{ $t('title.sso') }}
              </div>
            </template>

            <WorkspaceSso class="!h-[calc(100vh_-_92px)]" />
          </a-tab-pane>
        </template>
      </template>

      <a-tab-pane key="settings" class="w-full">
        <template #tab>
          <div class="tab-title" data-testid="nc-workspace-settings-tab-settings">
            <GeneralIcon icon="ncSettings" class="h-4 w-4" />
            {{ $t('labels.settings') }}
          </div>
        </template>

        <WorkspaceSettings :workspace-id="currentWorkspace.id" />
      </a-tab-pane>
    </NcTabs>
  </div>
</template>

<style lang="scss" scoped>
.tab {
  @apply flex flex-row items-center gap-x-2;
}

:deep(.ant-tabs-nav) {
  @apply !pl-0;
}

:deep(.ant-tabs-tab) {
  @apply pt-2 pb-3;
}

.ant-tabs-content-top {
  @apply !h-full;
}

.tab-info {
  @apply flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs;
}

.tab-title {
  @apply flex flex-row items-center gap-x-2 py-[1px];
}
</style>