Chore/add settings panels to cmdk (#17784)

* Fix searchable item command, add settings panel ids

* Update

* Add support for hash urls to no-project-selected page (_).

* Fix some of the labels.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

packages/ui/src/components/Command/SearchOnlyItem.tsx

@@ -1,5 +1,29 @@
 import { CommandItem } from './Command.utils'
+import { useRouter } from 'next/router'
+import { useCommandMenu } from './CommandMenuProvider'
 
-export default function SearchOnlyItem({ children, isSubItem, ...props }: any) {
-  return <CommandItem {...props}>{children}</CommandItem>
+interface SearchOnlyItemProps {
+  children: React.ReactNode
+  url: string
+}
+
+export default function SearchOnlyItem({ children, url }: SearchOnlyItemProps) {
+  const { project, setIsOpen, setSearch } = useCommandMenu()
+  const router = useRouter()
+
+  const baseURL = process.env.NEXT_PUBLIC_SITE_URL
+  function handleRouteChange(url: string) {
+    const localizedURL = project?.ref
+      ? `${baseURL}${url.replace('/_/', `/${project?.ref}/`)}`
+      : `${baseURL}${url}`
+
+    router.push(localizedURL)
+    setIsOpen(false)
+    setSearch('')
+  }
+  return (
+    <CommandItem type="link" onSelect={() => handleRouteChange(url)}>
+      {children}
+    </CommandItem>
+  )
 }

packages/ui/src/components/Command/SearchableStudioItems.tsx

@@ -1,23 +1,16 @@
 import { CommandGroup } from './Command.utils'
 import SearchOnlyItem from './SearchOnlyItem'
-import { useRouter } from 'next/router'
 
 import sharedItems from './utils/shared-nav-items.json'
 
 export default function SearchableStudioItems() {
-  const router = useRouter()
-
   return (
     <CommandGroup heading="Find">
       {sharedItems.tools
         .filter((item) => item.subItems) // filter items with subItems
         .flatMap((item) =>
           item.subItems?.map((subItem) => (
-            <SearchOnlyItem
-              key={subItem.url}
-              isSubItem={true}
-              onSelect={() => router.push(subItem.url)}
-            >
+            <SearchOnlyItem key={subItem.url + subItem.label} url={subItem.url}>
               {subItem.label}
             </SearchOnlyItem>
           ))

packages/ui/src/components/Command/utils/shared-nav-items.json

@@ -2,171 +2,211 @@
   "tools": [
     {
       "label": "Table Editor",
-      "url": "https://supabase.com/dashboard/project/_/editor"
+      "url": "/project/_/editor"
     },
     {
       "label": "SQL Editor",
-      "url": "https://supabase.com/dashboard/project/_/sql"
+      "url": "/project/_/sql"
     },
     {
       "label": "Database",
-      "url": "https://supabase.com/dashboard/project/_/database/tables",
+      "url": "/project/_/database/tables",
       "subItems": [
         {
           "label": "Tables",
-          "url": "https://supabase.com/dashboard/project/_/database/tables"
+          "url": "/project/_/database/tables"
         },
         {
           "label": "Triggers",
-          "url": "https://supabase.com/dashboard/project/_/database/triggers"
+          "url": "/project/_/database/triggers"
         },
         {
           "label": "Functions",
-          "url": "https://supabase.com/dashboard/project/_/database/functions"
+          "url": "/project/_/database/functions"
         },
         {
           "label": "Extensions",
-          "url": "https://supabase.com/dashboard/project/_/database/extensions"
+          "url": "/project/_/database/extensions"
         },
         {
           "label": "Roles",
-          "url": "https://supabase.com/dashboard/project/_/database/roles"
+          "url": "/project/_/database/roles"
         },
         {
           "label": "Replication",
-          "url": "https://supabase.com/dashboard/project/_/database/replication"
+          "url": "/project/_/database/replication"
         },
         {
           "label": "Webhooks",
-          "url": "https://supabase.com/dashboard/project/_/database/webhooks"
+          "url": "/project/_/database/hooks"
         },
         {
           "label": "Backups",
-          "url": "https://supabase.com/dashboard/project/_/database/backups/scheduled"
+          "url": "/project/_/database/backups/scheduled"
         }
       ]
     },
     {
       "label": "Auth",
-      "url": "https://supabase.com/dashboard/project/_/auth/users",
+      "url": "/project/_/auth/users",
       "subItems": [
         {
           "label": "Users",
-          "url": "https://supabase.com/dashboard/project/_/auth/users"
+          "url": "/project/_/auth/users"
         },
         {
           "label": "Policies",
-          "url": "https://supabase.com/dashboard/project/_/auth/policies"
+          "url": "/project/_/auth/policies"
         },
         {
           "label": "Providers",
-          "url": "https://supabase.com/dashboard/project/_/auth/providers"
+          "url": "/project/_/auth/providers"
         },
         {
           "label": "Email Templates",
-          "url": "https://supabase.com/dashboard/project/_/auth/templates"
+          "url": "/project/_/auth/templates"
         },
         {
           "label": "URL Configuration",
-          "url": "https://supabase.com/dashboard/project/_/auth/url-configuration"
+          "url": "/project/_/auth/url-configuration"
         }
       ]
     },
     {
       "label": "Storage",
-      "url": "https://supabase.com/dashboard/project/_/storage"
+      "url": "/project/_/storage"
     },
     {
       "label": "Edge Functions",
-      "url": "https://supabase.com/dashboard/project/_/functions"
+      "url": "/project/_/functions"
     },
     {
       "label": "Logs",
-      "url": "https://supabase.com/dashboard/project/_/logs/explorer",
+      "url": "/project/_/logs/explorer",
       "subItems": [
         {
           "label": "Postgres logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/postgres-logs"
+          "url": "/project/_/logs/postgres-logs"
         },
         {
           "label": "PostgREST logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/postgrest-logs"
+          "url": "/project/_/logs/postgrest-logs"
         },
         {
           "label": "Pooler logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/pooler-logs"
+          "url": "/project/_/logs/pooler-logs"
         },
         {
-          "label": "Auth logs logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/auth-logs"
+          "label": "Auth logs",
+          "url": "/project/_/logs/auth-logs"
         },
         {
           "label": "Storage logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/storage-logs"
+          "url": "/project/_/logs/storage-logs"
         },
         {
-          "label": "realtime logs",
-          "url": "https://supabase.com/dashboard/project/_/logs/realtime-logs"
+          "label": "Realtime logs",
+          "url": "/project/_/logs/realtime-logs"
         }
       ]
     },
     {
       "label": "API Docs",
-      "url": "https://supabase.com/dashboard/project/_/api",
+      "url": "/project/_/api",
       "subItems": [
         {
           "label": "Auth docs",
-          "url": "https://supabase.com/dashboard/project/_/api?page=auth"
+          "url": "/project/_/api?page=auth"
         },
         {
           "label": "User management docs",
-          "url": "https://supabase.com/dashboard/project/_/api?page=users"
+          "url": "/project/_/api?page=users"
         },
         {
-          "label": "Graphql",
-          "url": "https://supabase.com/dashboard/project/_/api/graphiql"
+          "label": "GraphQL",
+          "url": "/project/_/api/graphiql"
         }
       ]
     },
     {
       "label": "Project Settings",
-      "url": "https://supabase.com/dashboard/project/_/settings/general",
+      "url": "/project/_/settings/general",
       "subItems": [
         {
           "label": "General settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/general"
+          "url": "/project/_/settings/general"
         },
         {
           "label": "Database settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/database"
+          "url": "/project/_/settings/database"
         },
         {
           "label": "API settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/api"
+          "url": "/project/_/settings/api"
         },
         {
           "label": "Auth settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/auth"
+          "url": "/project/_/settings/auth"
         },
         {
           "label": "Storage settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/storage"
+          "url": "/project/_/settings/storage"
         },
         {
           "label": "Subscription settings",
-          "url": "https://supabase.com/dashboard/project/_/settings/billing/subscription"
+          "url": "/project/_/settings/billing/subscription"
         },
         {
           "label": "Project Usage",
-          "url": "https://supabase.com/dashboard/project/_/settings/billing/usage"
+          "url": "/project/_/settings/billing/usage"
         },
         {
           "label": "Project Invoices",
-          "url": "https://supabase.com/dashboard/project/_/settings/billing/invoices"
+          "url": "/project/_/settings/billing/invoices"
         },
         {
-          "label": "Project Invoices",
-          "url": "https://supabase.com/dashboard/project/_/settings/billing/invoices"
+          "label": "Custom Domains",
+          "url": "/project/_/settings/general#custom-domains"
+        },
+        {
+          "label": "Restart project",
+          "url": "/project/_/settings/general#restart-project"
+        },
+        {
+          "label": "Pause project",
+          "url": "/project/_/settings/general#pause-project"
+        },
+        {
+          "label": "Transfer project",
+          "url": "/project/_/settings/general#transfer-project"
+        },
+        {
+          "label": "Delete project",
+          "url": "/project/_/settings/general#delete-project"
+        },
+        {
+          "label": "Database password",
+          "url": "/project/_/settings/database#database-password"
+        },
+        {
+          "label": "Connection string",
+          "url": "/project/_/settings/database#connection-string"
+        },
+        {
+          "label": "Connection pooling",
+          "url": "/project/_/settings/database#connection-pooling"
+        },
+        {
+          "label": "SSL Configuration",
+          "url": "/project/_/settings/database#ssl-configuration"
+        },
+        {
+          "label": "Network Restrictions",
+          "url": "/project/_/settings/database#network-restrictions"
+        },
+        {
+          "label": "Banned IPs",
+          "url": "/project/_/settings/database#banned-ips"
         }
       ]
     }
@@ -174,11 +214,11 @@
   "projectTools": [
     {
       "label": "Your Projects",
-      "url": "https://supabase.com/dashboard/projects"
+      "url": "/projects"
     },
     {
       "label": "Project API Keys",
-      "url": "https://supabase.com/dashboard/project/_/settings/api"
+      "url": "/project/_/settings/api"
     }
   ],
   "support": [

studio/components/interfaces/Settings/Database/BannedIPs.tsx

@@ -61,7 +61,7 @@ const BannedIPs = () => {
   }
 
   return (
-    <div>
+    <div id="banned-ips">
       <div className="flex items-center justify-between">
         <FormHeader
           title="Banned IPs"

studio/components/interfaces/Settings/Database/ConnectionPooling.tsx

@@ -200,7 +200,7 @@ export const PgbouncerConfig = ({ projectRef, bouncerInfo, connectionInfo }: Con
   }
 
   return (
-    <div>
+    <div id="connection-pooling">
       <SchemaFormPanel
         title="Connection Pooling Custom Configuration"
         schema={formSchema}

studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx

@@ -55,7 +55,7 @@ const DatabaseSettings = () => {
         <section className="space-y-6">
           <Panel
             title={
-              <h5 key="panel-title" className="mb-0">
+              <h5 key="panel-title" className="mb-0" id="connection-string">
                 Connection string
               </h5>
             }

studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx

@@ -100,7 +100,10 @@ const ResetDbPassword = ({ disabled = false }) => {
     <>
       <Panel className="!m-0">
         <Panel.Content>
-          <div className="grid grid-cols-1 items-center lg:grid-cols-3">
+          <div
+            className="grid grid-cols-1 items-center lg:grid-cols-3 scroll-mt-6"
+            id="database-password"
+          >
             <div className="col-span-2 space-y-1">
               <p className="block">Database password</p>
               <p className="text-sm opacity-50">

studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx

@@ -103,7 +103,7 @@ const NetworkRestrictions = ({}) => {
 
   return (
     <>
-      <section>
+      <section id="network-restrictions">
         <div className="flex items-center justify-between">
           <FormHeader
             title="Network Restrictions"

studio/components/interfaces/Settings/Database/SSLConfiguration.tsx

@@ -80,7 +80,7 @@ const SSLConfiguration = () => {
   }
 
   return (
-    <div>
+    <div id="ssl-configuration">
       <div className="flex items-center justify-between">
         <FormHeader title="SSL Configuration" description="" />
         <div className="flex items-center space-x-2 mb-6">

studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx

@@ -34,7 +34,7 @@ const CustomDomainConfig = () => {
   const isLoading = isSettingsLoading || isCustomDomainsLoading
 
   return (
-    <section>
+    <section id="custom-domains">
       <FormHeader title="Custom Domains" description="Present a branded experience to your users" />
       {isLoading ? (
         <Panel>

studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx

@@ -10,7 +10,7 @@ const DeleteProjectPanel = () => {
   if (project === undefined) return null
 
   return (
-    <section>
+    <section id="delete-project">
       <FormHeader title="Delete Project" description="" />
       <Panel>
         <Panel.Content>

studio/components/interfaces/Settings/General/General.tsx

@@ -118,7 +118,7 @@ const General = () => {
       )}
       {!isBranch && isOrgBilling && (
         <>
-          <div className="mt-6">
+          <div className="mt-6" id="restart-project">
             <FormPanel>
               <div className="flex w-full items-center justify-between px-8 py-4">
                 <div>
@@ -131,7 +131,10 @@ const General = () => {
                 </div>
                 <RestartServerButton />
               </div>
-              <div className="flex w-full items-center justify-between px-8 py-4">
+              <div
+                className="flex w-full items-center justify-between px-8 py-4"
+                id="pause-project"
+              >
                 <div>
                   <p className="text-sm">Pause project</p>
                   <div className="max-w-[420px]">

studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx

@@ -11,7 +11,7 @@ const TransferProjectPanel = () => {
   if (project === undefined) return <></>
 
   return (
-    <section>
+    <section id="transfer-project">
       <FormHeader
         title="Transfer Project"
         description="Transfer your project to a different organization with no downtime."

studio/pages/project/_/[[...routeSlug]].tsx

@@ -40,12 +40,22 @@ const GenericProjectPage: NextPage = () => {
 
   const urlRewriterFactory = (slug: string | string[] | undefined) => {
     return (projectRef: string) => {
+      const hash = location.hash
+
       if (!Array.isArray(slug)) {
-        return `/project/${projectRef}?${queryString}`
+        return [`/project/${projectRef}`, queryString ?? `?${queryString}`, hash ?? `#${hash}`]
+          .filter(Boolean)
+          .join('')
       }
 
-      const slugPath = slug.reduce((a: string, b: string) => `${a}/${b}`, '').slice(1)
-      return `/project/${projectRef}/${slugPath}?${queryString}`
+      const slugPath = slug.reduce((a, b) => `${a}/${b}`, '').slice(1)
+      return [
+        `/project/${projectRef}/${slugPath}`,
+        queryString ?? `?${queryString}`,
+        hash ?? `#${hash}`,
+      ]
+        .filter(Boolean)
+        .join('')
     }
   }