chore: command events (supabase#39775)

* add CommandMenuTriggerInput in ui-patterns
* optimize search input responsiveness
* add event on commandMenu opened
* add event on debounced commandMenu input submission
* add event on commandMenu command selection
* add commandMenu telemetry to studio, www and docs

---------

Co-authored-by: Charis <[email protected]>

Author: fsansalvadore

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -9,7 +9,7 @@ import { memo, useState } from 'react'
 import { useIsLoggedIn, useIsUserLoading, useUser } from 'common'
 import { isFeatureEnabled } from 'common/enabled-features'
 import { Button, buttonVariants, cn } from 'ui'
-import { AuthenticatedDropdownMenu, CommandMenuTrigger } from 'ui-patterns'
+import { AuthenticatedDropdownMenu, CommandMenuTriggerInput } from 'ui-patterns'
 import { getCustomContent } from '../../../lib/custom-content/getCustomContent'
 import GlobalNavigationMenu from './GlobalNavigationMenu'
 import useDropdownMenu from './useDropdownMenu'
@@ -43,37 +43,14 @@ const TopNavBar: FC = () => {
             </div>
 
             <div className="flex gap-2 items-center">
-              <CommandMenuTrigger>
-                <button
-                  className={cn(
-                    'group',
-                    'flex-grow md:w-44 xl:w-56 h-[30px] rounded-md',
-                    'pl-1.5 md:pl-2 pr-1',
-                    'flex items-center justify-between',
-                    'bg-surface-100/75 text-foreground-lighter border',
-                    'hover:bg-opacity-100 hover:border-strong',
-                    'focus-visible:!outline-4 focus-visible:outline-offset-1 focus-visible:outline-brand-600',
-                    'transition'
-                  )}
-                >
-                  <div className="flex items-center space-x-2 text-foreground-muted">
-                    <Search size={18} strokeWidth={2} />
-                    <p className="flex text-sm pr-2">
-                      Search
-                      <span className="hidden xl:inline ml-1"> docs...</span>
-                    </p>
-                  </div>
-                  <div className="hidden md:flex items-center space-x-1">
-                    <div
-                      aria-hidden="true"
-                      className="md:flex items-center justify-center h-full px-1 border rounded bg-surface-300 gap-0.5"
-                    >
-                      <Command size={12} strokeWidth={1.5} />
-                      <span className="text-[12px]">K</span>
-                    </div>
-                  </div>
-                </button>
-              </CommandMenuTrigger>
+              <CommandMenuTriggerInput
+                placeholder={
+                  <>
+                    Search
+                    <span className="hidden xl:inline ml-1"> docs...</span>
+                  </>
+                }
+              />
               <button
                 title="Menu dropdown button"
                 className={cn(

apps/docs/features/app.providers.tsx

@@ -1,12 +1,11 @@
-import { type PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 import { FeatureFlagProvider, IS_PLATFORM, ThemeProvider } from 'common'
 import { SonnerToaster, TooltipProvider } from 'ui'
-import { CommandProvider } from 'ui-patterns/CommandMenu'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL } from '~/lib/constants'
 import { AuthContainer } from './auth/auth.client'
-import { DocsCommandMenu } from './command'
+import { DocsCommandMenu, DocsCommandProvider } from './command'
 import { QueryClientProvider } from './data/queryClient.client'
 import { PageTelemetry } from './telemetry/telemetry.client'
 import { ScrollRestoration } from './ui/helpers.scroll.client'
@@ -24,15 +23,15 @@ function GlobalProviders({ children }: PropsWithChildren) {
           <ScrollRestoration />
           <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
             <TooltipProvider delayDuration={0}>
-              <CommandProvider>
+              <DocsCommandProvider>
                 <div className="flex flex-col">
                   <SiteLayout>
                     {children}
                     <DocsCommandMenu />
                   </SiteLayout>
                   <ThemeSandbox />
                 </div>
-              </CommandProvider>
+              </DocsCommandProvider>
               <SonnerToaster position="top-right" />
             </TooltipProvider>
           </ThemeProvider>

apps/docs/features/command/DocsCommandProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+
+import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { useDocsCommandMenuTelemetry } from 'hooks/useDocsCommandMenuTelemetry'
+
+export function DocsCommandProvider({ children }: PropsWithChildren) {
+  const { onTelemetry } = useDocsCommandMenuTelemetry()
+
+  return (
+    <CommandProvider app="docs" onTelemetry={onTelemetry}>
+      {children}
+    </CommandProvider>
+  )
+}

apps/docs/features/command/index.tsx

@@ -3,6 +3,7 @@
 import dynamic from 'next/dynamic'
 
 import { useCommandMenuInitiated } from 'ui-patterns/CommandMenu'
+import { DocsCommandProvider } from './DocsCommandProvider'
 
 const LazyCommandMenu = dynamic(() => import('./CommandMenu'), { ssr: false })
 
@@ -11,4 +12,4 @@ const DocsCommandMenu = () => {
   return isInitiated && <LazyCommandMenu />
 }
 
-export { DocsCommandMenu }
+export { DocsCommandMenu, DocsCommandProvider }

apps/docs/hooks/useDocsCommandMenuTelemetry.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import { useCallback } from 'react'
+
+import type {
+  CommandMenuOpenedEvent,
+  CommandMenuCommandSelectedEvent,
+  CommandMenuSearchSubmittedEvent,
+} from 'common/telemetry-constants'
+import { useSendTelemetryEvent } from 'lib/telemetry'
+
+export function useDocsCommandMenuTelemetry() {
+  const sendTelemetryEvent = useSendTelemetryEvent()
+
+  const onTelemetry = useCallback(
+    (
+      event:
+        | CommandMenuOpenedEvent
+        | CommandMenuCommandSelectedEvent
+        | CommandMenuSearchSubmittedEvent
+    ) => {
+      sendTelemetryEvent(event)
+    },
+    [sendTelemetryEvent]
+  )
+
+  return { onTelemetry }
+}

apps/studio/components/interfaces/App/CommandMenu/StudioCommandProvider.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react'
+
+import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { useStudioCommandMenuTelemetry } from 'hooks/misc/useStudioCommandMenuTelemetry'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { LOCAL_STORAGE_KEYS } from 'common'
+
+export function StudioCommandProvider({ children }: PropsWithChildren) {
+  const { onTelemetry } = useStudioCommandMenuTelemetry()
+  const [commandMenuHotkeyEnabled] = useLocalStorageQuery<boolean>(
+    LOCAL_STORAGE_KEYS.HOTKEY_COMMAND_MENU,
+    true
+  )
+
+  return (
+    <CommandProvider
+      app="studio"
+      onTelemetry={onTelemetry}
+      openKey={commandMenuHotkeyEnabled ? 'k' : ''}
+    >
+      {children}
+    </CommandProvider>
+  )
+}

apps/studio/components/interfaces/UserDropdown.tsx

@@ -23,7 +23,7 @@ import {
   Theme,
   singleThemes,
 } from 'ui'
-import { useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
+import { useCommandMenuOpenedTelemetry, useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
 import { useFeaturePreviewModal } from './App/FeaturePreview/FeaturePreviewContext'
 
 export function UserDropdown() {
@@ -35,8 +35,14 @@ export function UserDropdown() {
 
   const signOut = useSignOut()
   const setCommandMenuOpen = useSetCommandMenuOpen()
+  const sendTelemetry = useCommandMenuOpenedTelemetry()
   const { openFeaturePreviewModal } = useFeaturePreviewModal()
 
+  const handleCommandMenuOpen = () => {
+    setCommandMenuOpen(true)
+    sendTelemetry()
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild className="border flex-shrink-0 px-3">
@@ -97,7 +103,7 @@ export function UserDropdown() {
                 <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                 Feature previews
               </DropdownMenuItem>
-              <DropdownMenuItem className="flex gap-2" onClick={() => setCommandMenuOpen(true)}>
+              <DropdownMenuItem className="flex gap-2" onClick={handleCommandMenuOpen}>
                 <Command size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                 Command menu
               </DropdownMenuItem>

apps/studio/hooks/misc/useStudioCommandMenuTelemetry.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react'
+
+import { useParams } from 'common'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import type {
+  CommandMenuOpenedEvent,
+  CommandMenuCommandSelectedEvent,
+  CommandMenuSearchSubmittedEvent,
+} from 'common/telemetry-constants'
+
+export function useStudioCommandMenuTelemetry() {
+  const { ref: projectRef } = useParams()
+  const { data: organization } = useSelectedOrganizationQuery()
+  const { mutate: sendEvent } = useSendEventMutation()
+
+  const onTelemetry = useCallback(
+    (
+      event:
+        | CommandMenuOpenedEvent
+        | CommandMenuCommandSelectedEvent
+        | CommandMenuSearchSubmittedEvent
+    ) => {
+      // Add studio-specific groups (project and organization)
+      const eventWithGroups = {
+        ...event,
+        groups: {
+          ...event.groups,
+          ...(projectRef && { project: projectRef }),
+          ...(organization?.slug && { organization: organization.slug }),
+        },
+      }
+
+      sendEvent(eventWithGroups)
+    },
+    [projectRef, organization?.slug, sendEvent]
+  )
+
+  return { onTelemetry }
+}

apps/studio/pages/_app.tsx

@@ -30,13 +30,12 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import Head from 'next/head'
 import { NuqsAdapter } from 'nuqs/adapters/next/pages'
-import { ErrorInfo, PropsWithChildren, useCallback } from 'react'
+import { ErrorInfo, useCallback } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import {
   FeatureFlagProvider,
   getFlags,
-  LOCAL_STORAGE_KEYS,
   TelemetryTagManager,
   ThemeProvider,
   useThemeSandbox,
@@ -52,14 +51,13 @@ import { GlobalErrorBoundaryState } from 'components/ui/ErrorBoundary/GlobalErro
 import { useRootQueryClient } from 'data/query-client'
 import { customFont, sourceCodePro } from 'fonts'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
-import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { AuthProvider } from 'lib/auth'
 import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from 'lib/constants'
 import { ProfileProvider } from 'lib/profile'
 import { Telemetry } from 'lib/telemetry'
 import { AppPropsWithLayout } from 'types'
 import { SonnerToaster, TooltipProvider } from 'ui'
-import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { StudioCommandProvider as CommandProvider } from 'components/interfaces/App/CommandMenu/StudioCommandProvider'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -80,15 +78,6 @@ loader.config({
   },
 })
 
-const CommandProviderWithPreferences = ({ children }: PropsWithChildren) => {
-  const [commandMenuHotkeyEnabled] = useLocalStorageQuery<boolean>(
-    LOCAL_STORAGE_KEYS.HOTKEY_COMMAND_MENU,
-    true
-  )
-
-  return <CommandProvider openKey={commandMenuHotkeyEnabled ? 'k' : ''}>{children}</CommandProvider>
-}
-
 // [Joshen TODO] Once we settle on the new nav layout - we'll need a lot of clean up in terms of our layout components
 // a lot of them are unnecessary and introduce way too many cluttered CSS especially with the height styles that make
 // debugging way too difficult. Ideal scenario is we just have one AppLayout to control the height and scroll areas of
@@ -161,15 +150,15 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                         disableTransitionOnChange
                       >
                         <AppBannerContextProvider>
-                          <CommandProviderWithPreferences>
+                          <CommandProvider>
                             <FeaturePreviewContextProvider>
                               {getLayout(<Component {...pageProps} />)}
                               <StudioCommandMenu />
                               <FeaturePreviewModal />
                             </FeaturePreviewContextProvider>
                             <SonnerToaster position="top-right" />
                             <MonacoThemeProvider />
-                          </CommandProviderWithPreferences>
+                          </CommandProvider>
                         </AppBannerContextProvider>
                       </ThemeProvider>
                     </RouteValidationWrapper>

apps/www/hooks/useWwwCommandMenuTelemetry.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+
+import type {
+  CommandMenuOpenedEvent,
+  CommandMenuCommandSelectedEvent,
+  CommandMenuSearchSubmittedEvent,
+} from 'common/telemetry-constants'
+import { useSendTelemetryEvent } from 'lib/telemetry'
+
+export function useWwwCommandMenuTelemetry() {
+  const sendTelemetryEvent = useSendTelemetryEvent()
+
+  const onTelemetry = useCallback(
+    (
+      event:
+        | CommandMenuOpenedEvent
+        | CommandMenuCommandSelectedEvent
+        | CommandMenuSearchSubmittedEvent
+    ) => {
+      sendTelemetryEvent(event)
+    },
+    [sendTelemetryEvent]
+  )
+
+  return { onTelemetry }
+}