diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
index 81a508929eb..852ba2367c6 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
@@ -1,6 +1,7 @@
import { useRouter } from 'next/router'
+import { toJS } from 'mobx'
import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, Divider, IconPlus } from 'ui'
+import { Button, Dropdown, IconPlus } from 'ui'
import { useStore } from 'hooks'
import { IS_PLATFORM } from 'lib/constants'
@@ -20,11 +21,35 @@ const OrgDropdown = () => {
<>
{sortedOrganizations
.sort((a, b) => a.name.localeCompare(b.name))
- .map((x) => (
- router.push(`/org/${x.slug}/settings`)}>
- {x.name}
-
- ))}
+ .map((x) => {
+ const slug = toJS(x.slug)
+
+ return (
+ {
+ if (!slug) {
+ // The user should not see this error as the page should
+ // be rerendered with the value of slug before they can click.
+ // It is just here in case they are the flash.
+ return ui.setNotification({
+ category: 'error',
+ message:
+ 'Could not navigate to organization settings, please try again or contact support',
+ })
+ }
+
+ router.push({
+ pathname: `/org/[slug]/settings`,
+ query: { slug },
+ hash: router.asPath.split('#')[1]?.toLowerCase(),
+ })
+ }}
+ >
+ {x.name}
+
+ )
+ })}
} onClick={() => router.push(`/new`)}>
New organization
diff --git a/studio/pages/org/[slug]/settings.tsx b/studio/pages/org/[slug]/settings.tsx
index ed262d5e605..9cdbe267eed 100644
--- a/studio/pages/org/[slug]/settings.tsx
+++ b/studio/pages/org/[slug]/settings.tsx
@@ -130,13 +130,14 @@ const OrganizationSettings: NextPageWithLayout = () => {
// It is just here in case they are the flash.
return ui.setNotification({
category: 'error',
- message: 'Please try again',
+ message: 'Could not navigate to organization settings, please try again or contact support',
})
}
setSelectedTab(id)
router.push({
- pathname: `/org/${slug}/settings`,
+ pathname: `/org/[slug]/settings`,
+ query: { slug },
hash: id.toLowerCase(),
})
}