feature: prioritize query performance in cmdk menu (#38962)

When the user's search term includes `query`, Query Performance Reports
should jump to the top of the list.

apps/studio/components/layouts/ReportsLayout/Reports.Commands.tsx

@@ -1,8 +1,12 @@
+import { useMemo } from 'react'
+
 import { useParams } from 'common'
 import { COMMAND_MENU_SECTIONS } from 'components/interfaces/App/CommandMenu/CommandMenu.utils'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import type { CommandOptions } from 'ui-patterns/CommandMenu'
-import { useRegisterCommands } from 'ui-patterns/CommandMenu'
+import type { CommandOptions, ICommand } from 'ui-patterns/CommandMenu'
+import { orderSectionFirst, useQuery, useRegisterCommands } from 'ui-patterns/CommandMenu'
+
+const QUERY_PERFORMANCE_COMMAND_ID = 'nav-reports-query-performance'
 
 export function useReportsGotoCommands(options?: CommandOptions) {
   let { ref } = useParams()
@@ -10,6 +14,25 @@ export function useReportsGotoCommands(options?: CommandOptions) {
 
   const { reportsAll } = useIsFeatureEnabled(['reports:all'])
 
+  const commandQuery = useQuery()?.toLowerCase() ?? ''
+  const prioritizeQueryPerformance = commandQuery.includes('query')
+
+  const orderQueryPerformanceCommand = useMemo(() => {
+    if (!prioritizeQueryPerformance) return undefined
+
+    return (existingCommands: ICommand[], incomingCommands: ICommand[]) => {
+      const filteredExisting = existingCommands.filter(
+        (command) => command.id !== QUERY_PERFORMANCE_COMMAND_ID
+      )
+
+      return [...incomingCommands, ...filteredExisting]
+    }
+  }, [prioritizeQueryPerformance])
+
+  const orderNavigateSection = useMemo<CommandOptions['orderSection'] | undefined>(() => {
+    return prioritizeQueryPerformance ? orderSectionFirst : options?.orderSection
+  }, [options?.orderSection, prioritizeQueryPerformance])
+
   useRegisterCommands(
     COMMAND_MENU_SECTIONS.NAVIGATE,
     reportsAll
@@ -38,14 +61,32 @@ export function useReportsGotoCommands(options?: CommandOptions) {
             route: `/project/${ref}/reports/database`,
             defaultHidden: true,
           },
+        ]
+      : [],
+    {
+      ...options,
+      orderSection: orderNavigateSection,
+      deps: [ref, orderNavigateSection, ...(options?.deps ?? [])],
+    }
+  )
+
+  useRegisterCommands(
+    COMMAND_MENU_SECTIONS.NAVIGATE,
+    reportsAll
+      ? [
           {
-            id: 'nav-reports-query-performance',
+            id: QUERY_PERFORMANCE_COMMAND_ID,
             name: 'Query Performance Reports',
             route: `/project/${ref}/advisors/query-performance`,
             defaultHidden: true,
           },
         ]
       : [],
-    { ...options, deps: [ref] }
+    {
+      ...options,
+      orderCommands: orderQueryPerformanceCommand ?? options?.orderCommands,
+      orderSection: orderNavigateSection,
+      deps: [ref, orderQueryPerformanceCommand, orderNavigateSection, ...(options?.deps ?? [])],
+    }
   )
 }