chore: add functions edit n test tracking (#34480)

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx

@@ -10,6 +10,8 @@ import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { constructHeaders } from 'data/fetchers'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
 import { prettifyJSON } from 'lib/helpers'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
@@ -75,6 +77,8 @@ type FormValues = z.infer<typeof FormSchema>
 
 export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTesterSheetProps) => {
   const { ref: projectRef, functionSlug } = useParams()
+  const { mutate: sendEvent } = useSendEventMutation()
+  const org = useSelectedOrganization()
   const [response, setResponse] = useState<ResponseData | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -430,7 +434,24 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
             <SheetFooter className="px-5 py-3 border-t">
               <div className="flex items-center gap-2">
                 <RoleImpersonationPopover />
-                <Button type="primary" htmlType="submit" loading={isLoading} disabled={isLoading}>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  loading={isLoading}
+                  disabled={isLoading}
+                  onClick={() =>
+                    sendEvent({
+                      action: 'edge_function_test_send_button_clicked',
+                      properties: {
+                        httpMethod: method,
+                      },
+                      groups: {
+                        project: projectRef ?? 'Unknown',
+                        organization: org?.slug ?? 'Unknown',
+                      },
+                    })
+                  }
+                >
                   Send Request
                 </Button>
               </div>

apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx

@@ -12,7 +12,9 @@ import APIDocsButton from 'components/ui/APIDocsButton'
 import { DocsButton } from 'components/ui/DocsButton'
 import NoPermission from 'components/ui/NoPermission'
 import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { withAuth } from 'hooks/misc/withAuth'
 import { useFlag } from 'hooks/ui/useFlag'
 import { Button } from 'ui'
@@ -29,6 +31,8 @@ const EdgeFunctionDetailsLayout = ({
 }: PropsWithChildren<EdgeFunctionDetailsLayoutProps>) => {
   const router = useRouter()
   const { functionSlug, ref } = useParams()
+  const org = useSelectedOrganization()
+  const { mutate: sendEvent } = useSendEventMutation()
 
   const edgeFunctionCreate = useFlag('edgeFunctionCreate')
   const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
@@ -123,7 +127,20 @@ const EdgeFunctionDetailsLayout = ({
             )}
             <DocsButton href="https://supabase.com/docs/guides/functions" />
             {edgeFunctionCreate && !!functionSlug && (
-              <Button type="default" icon={<Send />} onClick={() => setIsOpen(true)}>
+              <Button
+                type="default"
+                icon={<Send />}
+                onClick={() => {
+                  setIsOpen(true)
+                  sendEvent({
+                    action: 'edge_function_test_side_panel_opened',
+                    groups: {
+                      project: ref ?? 'Unknown',
+                      organization: org?.slug ?? 'Unknown',
+                    },
+                  })
+                }}
+              >
                 Test
               </Button>
             )}

apps/studio/pages/project/[ref]/functions/[functionSlug]/code.tsx

@@ -11,7 +11,9 @@ import FileExplorerAndEditor from 'components/ui/FileExplorerAndEditor/FileExplo
 import { useEdgeFunctionBodyQuery } from 'data/edge-functions/edge-function-body-query'
 import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
 import { useEdgeFunctionDeployMutation } from 'data/edge-functions/edge-functions-deploy-mutation'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useOrgOptedIntoAi } from 'hooks/misc/useOrgOptedIntoAi'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { useFlag } from 'hooks/ui/useFlag'
 import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
@@ -24,6 +26,8 @@ const CodePage = () => {
   const isOptedInToAI = useOrgOptedIntoAi()
   const includeSchemaMetadata = isOptedInToAI || !IS_PLATFORM
   const edgeFunctionCreate = useFlag('edgeFunctionCreate')
+  const { mutate: sendEvent } = useSendEventMutation()
+  const org = useSelectedOrganization()
 
   const { data: selectedFunction } = useEdgeFunctionQuery({ projectRef: ref, slug: functionSlug })
   const {
@@ -143,7 +147,13 @@ const CodePage = () => {
             loading={isDeploying}
             size="medium"
             disabled={files.length === 0 || isLoadingFiles}
-            onClick={onUpdate}
+            onClick={() => {
+              onUpdate()
+              sendEvent({
+                action: 'edge_function_deploy_updates_button_clicked',
+                groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
+              })
+            }}
             iconRight={
               isDeploying ? (
                 <Loader2 className="animate-spin" size={10} strokeWidth={1.5} />

packages/common/telemetry-constants.ts

@@ -1157,6 +1157,57 @@ export interface EdgeFunctionViaCliButtonClickedEvent {
   }
 }
 
+/**
+ * User clicked the deploy updates button for an edge function.
+ *
+ * @group Events
+ * @source studio
+ * @page /dashboard/project/{ref}/functions/{id}/code
+ */
+export interface EdgeFunctionDeployUpdatesButtonClickedEvent {
+  action: 'edge_function_deploy_updates_button_clicked'
+  groups: {
+    project: string
+    organization: string
+  }
+}
+
+/**
+ * User clicked the Send Request button for testing an Edge Function.
+ *
+ * @group Events
+ * @source studio
+ * @page /dashboard/project/{ref}/functions/{id}
+ */
+export interface EdgeFunctionTestSendButtonClickedEvent {
+  action: 'edge_function_test_send_button_clicked'
+  properties: {
+    /**
+     * The HTTP method used for the test request, e.g., GET, POST.
+     */
+    httpMethod: string
+  }
+  groups: {
+    project: string
+    organization: string
+  }
+}
+
+/**
+ * User opened the side panel for testing an edge function.
+ *
+ * @group Events
+ * @source studio
+ * @page /dashboard/project/{ref}/functions/{id}
+ */
+export interface EdgeFunctionTestSidePanelOpenedEvent {
+  action: 'edge_function_test_side_panel_opened'
+  groups: {
+    project: string
+    organization: string
+  }
+}
+
 /**
  * @hidden
  */
@@ -1227,3 +1278,6 @@ export type TelemetryEvent =
   | EdgeFunctionViaEditorButtonClickedEvent
   | EdgeFunctionTemplateClickedEvent
   | EdgeFunctionViaCliButtonClickedEvent
+  | EdgeFunctionDeployUpdatesButtonClickedEvent
+  | EdgeFunctionTestSendButtonClickedEvent
+  | EdgeFunctionTestSidePanelOpenedEvent