nocodb/packages/nc-gui/components/dashboard/settings/base/index.vue

<script setup lang="ts">
import { BaseVersion } from 'nocodb-sdk'

const { isUIAllowed } = useRoles()

const { isFeatureEnabled } = useBetaFeatureToggle()

const { showEEFeatures } = useEeConfig()

const baseStore = useBase()
const { base } = storeToRefs(baseStore)

const hasPermissionForBaseAccess = computed(() => isEeUI && isUIAllowed('manageBaseType') && showEEFeatures.value)

const hasPermissionForMigrate = computed(() => isUIAllowed('baseMiscSettings') && isUIAllowed('migrateBase'))

const hasPermissionForVisibility = computed(() => isUIAllowed('baseMiscSettings'))

const hasPermissionForMigrateToV3 = computed(
  () => isFeatureEnabled(FEATURE_FLAG.BASES_V3) && base.value?.version === BaseVersion.V2 && isUIAllowed('baseMiscSettings'),
)

const router = useRouter()

const allTabs = ['baseType', 'snapshots', 'visibility', 'migrateToV3', 'migrate']

const getDefaultTab = () => {
  if (hasPermissionForBaseAccess.value) return 'baseType'
  if (hasPermissionForVisibility.value) return 'visibility'
  if (hasPermissionForMigrateToV3.value) return 'migrateToV3'
  if (hasPermissionForMigrate.value) return 'migrate'
  return 'baseType'
}

const activeMenu = ref('')

const selectMenu = (option: string, updateQuery = true) => {
  if (!hasPermissionForBaseAccess.value && option === 'baseType') {
    return
  }

  if (!hasPermissionForMigrate.value && option === 'migrate') {
    return
  }

  if (!hasPermissionForVisibility.value && option === 'visibility') {
    return
  }

  if (!hasPermissionForMigrateToV3.value && option === 'migrateToV3') {
    return
  }

  if (updateQuery) {
    router.push({
      query: {
        ...router.currentRoute.value.query,
        tab: option,
      },
    })
  }
  activeMenu.value = option
}

onMounted(() => {
  const query = router.currentRoute.value.query
  const defaultTab = getDefaultTab()

  if (query && query.tab && allTabs.includes(query.tab as string)) {
    selectMenu(query.tab as string)
  } else {
    selectMenu(defaultTab, true)
  }
})

watch(
  () => router.currentRoute.value.query.tab,
  (tab) => {
    if (tab && allTabs.includes(tab as string) && tab !== activeMenu.value) {
      selectMenu(tab as string, false)
    }
  },
)
</script>

<template>
  <div class="w-full flex p-6 nc-base-settings overflow-auto nc-scrollbar-thin gap-8">
    <!-- Left Pane -->
    <div class="flex flex-col">
      <div class="h-full flex flex-col gap-1 w-60">
        <div
          v-if="hasPermissionForBaseAccess"
          data-testid="base-access-tab"
          :class="{
            'active-menu': activeMenu === 'baseType',
          }"
          class="gap-3 hover:bg-nc-bg-gray-light transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3"
          @click="selectMenu('baseType')"
        >
          <GeneralIcon icon="ncUsers" />

          <span>
            {{ $t('general.baseType') }}
          </span>
        </div>

        <div
          v-if="isUIAllowed('baseMiscSettings')"
          :class="{
            'active-menu': activeMenu === 'visibility',
          }"
          class="gap-3 hover:bg-nc-bg-gray-light transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3"
          data-testid="visibility-tab"
          @click="selectMenu('visibility')"
        >
          <GeneralIcon icon="ncEye" />
          <span>
            {{ $t('labels.visibilityAndDataHandling') }}
          </span>
        </div>
        <div
          v-if="hasPermissionForMigrateToV3"
          :class="{
            'active-menu': activeMenu === 'migrateToV3',
          }"
          class="gap-3 hover:bg-nc-bg-gray-light transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3"
          data-testid="migrate-to-v3-tab"
          @click="selectMenu('migrateToV3')"
        >
          <GeneralIcon icon="ncArrowUp" />
          <span>
            {{ $t('labels.migrateToV3') }}
          </span>
        </div>
        <div
          v-if="hasPermissionForMigrate"
          :class="{
            'active-menu': activeMenu === 'migrate',
          }"
          class="gap-3 hover:bg-nc-bg-gray-light transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3"
          data-testid="migrate-tab"
          @click="selectMenu('migrate')"
        >
          <GeneralIcon icon="move" />
          <span> Migrate </span>
        </div>
      </div>
    </div>
    <!-- Data Pane -->

    <div class="flex flex-col flex-1 max-w-[760px]">
      <DashboardSettingsBaseAccess v-if="activeMenu === 'baseType'" />
      <DashboardSettingsBaseVisibility v-if="activeMenu === 'visibility'" />
      <DashboardSettingsBaseMigrateToV3 v-if="activeMenu === 'migrateToV3'" />
      <DashboardSettingsBaseMigrate v-if="activeMenu === 'migrate'" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.active-menu {
  @apply !bg-nc-bg-brand dark:!bg-nc-bg-gray-medium font-semibold !text-nc-content-brand-disabled;
}
</style>