-
-
- setFilterStatus(['ACTIVE_HEALTHY', 'INACTIVE'])}
- viewMode={viewMode}
- />
+ // [Joshen] Very odd, but the h-px here is required for ProjectList to have a max
+ // height based on the remaining space that it can grow to
+
+
+
)}
diff --git a/apps/studio/pages/project/_/[[...routeSlug]].tsx b/apps/studio/pages/project/_/[[...routeSlug]].tsx
index 9da13856dd818..b4c1e96940a32 100644
--- a/apps/studio/pages/project/_/[[...routeSlug]].tsx
+++ b/apps/studio/pages/project/_/[[...routeSlug]].tsx
@@ -1,18 +1,28 @@
-import { partition } from 'lodash'
-import { AlertTriangleIcon, Boxes } from 'lucide-react'
+import { AlertTriangleIcon } from 'lucide-react'
import { NextPage } from 'next'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { Fragment, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'common'
import { ProjectList } from 'components/interfaces/Home/ProjectList/ProjectList'
import { HomePageActions } from 'components/interfaces/HomePageActions'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
import { withAuth } from 'hooks/misc/withAuth'
-import { BASE_PATH, PROJECT_STATUS } from 'lib/constants'
-import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Badge } from 'ui'
+import { BASE_PATH } from 'lib/constants'
+import {
+ Alert_Shadcn_,
+ AlertDescription_Shadcn_,
+ AlertTitle_Shadcn_,
+ Select_Shadcn_,
+ SelectContent_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+} from 'ui'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
const Header = () => {
@@ -32,6 +42,26 @@ const Header = () => {
)
}
+const OrganizationLoadingState = () => {
+ return (
+ <>
+
+
+
+
+ )
+}
+
+const OrganizationErrorState = () => {
+ return (
+
+
+ Failed to load your Supabase organizations
+ Try refreshing the page
+
+ )
+}
+
// [Joshen] I'd say we don't do route validation here, this page will act more
// like a proxy to the project specific pages, and we let those pages handle
// any route validation logic instead
@@ -40,24 +70,22 @@ const GenericProjectPage: NextPage = () => {
const router = useRouter()
const { routeSlug, ...queryParams } = router.query
- const [search, setSearch] = useState('')
- const [filterStatus, setFilterStatus] = useState([
- PROJECT_STATUS.ACTIVE_HEALTHY,
- PROJECT_STATUS.INACTIVE,
- ])
-
const [lastVisitedOrgSlug] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
''
)
+ const [selectedSlug, setSlug] = useState(lastVisitedOrgSlug)
+
const {
data: organizations = [],
+ isSuccess: isSuccessOrganizations,
isLoading: isLoadingOrganizations,
isError: isErrorOrganizations,
} = useOrganizationsQuery({
enabled: IS_PLATFORM,
})
+ const selectedOrganization = organizations.find((x) => x.slug === selectedSlug)
const query = Object.keys(queryParams).length
? `?${new URLSearchParams(queryParams as Record)}`
@@ -76,89 +104,55 @@ const GenericProjectPage: NextPage = () => {
}
}
- const [[lastVisitedOrganization], otherOrganizations] = useMemo(
- () => partition(organizations, (org) => org.slug === lastVisitedOrgSlug),
- [lastVisitedOrgSlug, organizations]
- )
+ useEffect(() => {
+ if (!!lastVisitedOrgSlug) {
+ setSlug(lastVisitedOrgSlug)
+ } else if (isSuccessOrganizations) {
+ setSlug(organizations[0].slug)
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [lastVisitedOrgSlug, isSuccessOrganizations])
return (
- <>
+