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(), }) }