Merge pull request supabase#17216 from supabase/chore/better-no-org-state

Add better empty state if no org

Author: saltcod

studio/components/interfaces/Home/ProjectList/ProjectList.tsx

@@ -24,7 +24,7 @@ export interface ProjectListProps {
 }
 
 const ProjectList = ({ rewriteHref }: ProjectListProps) => {
- const { data: organizations } = useOrganizationsQuery()
+ const { data: organizations, isSuccess } = useOrganizationsQuery()
  const {
  data: allProjects,
  isLoading: isLoadingProjects,
@@ -40,7 +40,7 @@ const ProjectList = ({ rewriteHref }: ProjectListProps) => {
  const projectsByOrg = groupBy(allProjects, 'organization_id')
  const isLoadingPermissions = IS_PLATFORM ? _isLoadingPermissions : false
 
- return (
+ return isSuccess && organizations && organizations?.length > 0 ? (
  <>
  {organizations?.map((organization) => {
  return (
@@ -62,6 +62,8 @@ const ProjectList = ({ rewriteHref }: ProjectListProps) => {
  )
  })}
  </>
+ ) : (
+ <NoProjectsState slug={''} />
  )
 }
 
@@ -132,19 +134,7 @@ const OrganizationProjects = ({
  />
  </div>
  ) : isEmpty ? (
- <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
- <div className="space-y-1">
- <p>No projects</p>
- <p className="text-sm text-scale-1100">Get started by creating a new project.</p>
- </div>
- <div>
- <Link href={`/new/${slug}`}>
- <a>
- <Button icon={<IconPlus />}>New Project</Button>
- </a>
- </Link>
- </div>
- </div>
+ <NoProjectsState slug={slug} />
  ) : (
  projects?.map((project) => (
  <ProjectCard
@@ -159,3 +149,21 @@ const OrganizationProjects = ({
  </div>
  )
 }
+
+const NoProjectsState = ({ slug }: { slug: string }) => {
+ return (
+ <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
+ <div className="space-y-1">
+ <p>No projects</p>
+ <p className="text-sm text-scale-1100">Get started by creating a new project.</p>
+ </div>
+ <div>
+ <Link href={`/new/${slug}`}>
+ <a>
+ <Button icon={<IconPlus />}>New Project</Button>
+ </a>
+ </Link>
+ </div>
+ </div>
+ )
+}

studio/pages/projects.tsx

@@ -58,7 +58,7 @@ const ProjectsPage: NextPageWithLayout = () => {
 
  {!navLayoutV2 && isSuccess && (
  <div className="py-4 px-5">
- {IS_PLATFORM && (
+ {IS_PLATFORM && organizations.length !== 0 && (
  <div className="my-2">
  <div className="flex">
  <div className="">