Merge pull request #10194 from supabase/fix/org-slug-interpolation

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) => (
-              <Dropdown.Item key={x.slug} onClick={() => router.push(`/org/${x.slug}/settings`)}>
-                {x.name}
-              </Dropdown.Item>
-            ))}
+            .map((x) => {
+              const slug = toJS(x.slug)
+
+              return (
+                <Dropdown.Item
+                  key={slug}
+                  onClick={() => {
+                    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}
+                </Dropdown.Item>
+              )
+            })}
           <Dropdown.Separator />
           <Dropdown.Item icon={<IconPlus size="tiny" />} onClick={() => router.push(`/new`)}>
             New organization

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