supabase/apps/studio/pages/organizations.tsx

import { Plus, Search } from 'lucide-react'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { Button, Skeleton } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'

import { NoOrganizationsState } from '@/components/interfaces/Home/ProjectList/EmptyStates'
import { OrganizationCard } from '@/components/interfaces/Organization/OrganizationCard'
import { AppLayout } from '@/components/layouts/AppLayout/AppLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
import { AlertError } from '@/components/ui/AlertError'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { withAuth } from '@/hooks/misc/withAuth'
import { buildStudioPageTitle } from '@/lib/page-title'
import type { NextPageWithLayout } from '@/types'

const OrganizationsPage: NextPageWithLayout = () => {
  const router = useRouter()
  const { appTitle } = useCustomContent(['app:title'])
  const [search, setSearch] = useState('')
  const pageTitle = buildStudioPageTitle({
    section: 'Organizations',
    brand: appTitle || 'Supabase',
  })

  const {
    data: organizations = [],
    error,
    isPending: isLoading,
    isError,
    isSuccess,
  } = useOrganizationsQuery()

  const organizationCreationEnabled = useIsFeatureEnabled('organizations:create')
  const filteredOrganizations =
    search.length === 0
      ? organizations
      : organizations?.filter(
          (x) => x.name.toLowerCase().includes(search) || x.slug.toLowerCase().includes(search)
        )

  useEffect(() => {
    // If there are no organizations, force the user to create one
    if (isSuccess && organizations.length <= 0) {
      router.push('/new')
    }
  }, [isSuccess, organizations])

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        <meta name="description" content="Supabase Studio" />
      </Head>
      <ScaffoldContainer>
        <ScaffoldSection isFullWidth className="flex flex-col gap-y-4">
          {organizations.length > 0 && (
            <div className="flex items-center justify-between gap-x-2 md:gap-x-3">
              <Input
                size="tiny"
                placeholder="Search for an organization"
                icon={<Search />}
                className="w-full flex-1 md:w-64"
                value={search}
                onChange={(event) => setSearch(event.target.value)}
              />

              {organizationCreationEnabled && (
                <Button asChild icon={<Plus />} variant="primary" className="w-min">
                  <Link href={`/new`}>New organization</Link>
                </Button>
              )}
            </div>
          )}

          {isSuccess && organizations.length === 0 && !isError && <NoOrganizationsState />}

          {search.length > 0 && filteredOrganizations.length === 0 && (
            <NoSearchResults searchString={search} />
          )}

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {isLoading && (
              <>
                <Skeleton className="h-[70px] rounded-md" />
                <Skeleton className="h-[70px] rounded-md" />
                <Skeleton className="h-[70px] rounded-md" />
              </>
            )}
            {isError && <AlertError error={error} subject="Failed to load organizations" />}
            {isSuccess &&
              filteredOrganizations.map((org) => (
                <OrganizationCard key={org.id} organization={org} />
              ))}
          </div>
        </ScaffoldSection>
      </ScaffoldContainer>
    </>
  )
}

OrganizationsPage.getLayout = (page) => (
  <AppLayout>
    <DefaultLayout hideMobileMenu headerTitle="Organizations">
      <PageLayout title="Your Organizations" className="max-w-[1200px] lg:px-6 mx-auto">
        {page}
      </PageLayout>
    </DefaultLayout>
  </AppLayout>
)

export default withAuth(OrganizationsPage)