Merge pull request #15 from zendesk/pingu/hooks

Improvement to Hooks: Add Process Trace
zendesk · Oct 2, 2024 · ebd75e0 · ebd75e0
2 parents 9820343 + 5dc5881
commit ebd75e0
Show file tree

Hide file tree

Showing 10 changed files with 353 additions and 306 deletions.
diff --git a/src/stories/mockComponents/App.tsx b/src/stories/mockComponents/App.tsx
@@ -17,18 +17,17 @@ import {
   NavItemText,
 } from '@zendeskgarden/react-chrome'
 import { PALETTE } from '@zendeskgarden/react-theming'
-
 import { ReactComponent as MenuTrayIcon } from '@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg'
 import { ReactComponent as PersonIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg'
+import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arrow-right-left.svg'
 import { ReactComponent as ProductIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg'
 import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/26/home-fill.svg'
-import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arrow-right-left.svg'
 import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/zendesk.svg'
-import { TicketList } from './TicketList'
-import { TicketView } from './TicketView'
+import type { Operation } from '../../v2/operation'
 import { mockTickets } from './mockTickets'
 import { operationManager } from './operationManager'
-import type { Operation } from '../../v2/operation'
+import { TicketList } from './TicketList'
+import { TicketView } from './TicketView'
 
 export const App: React.FC = () => {
   const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
@@ -45,15 +44,15 @@ export const App: React.FC = () => {
       operationName: `ticket-activation`,
       track: [
         {
-          match: { type: 'component-unmount', metadata: { ticketId: id } },
+          match: { type: 'component-unmount', attributes: { ticketId: id } },
           interruptWhenSeen: true,
         },
         {
-          match: { metadata: { ticketId: id } },
-          debounceEndWhenSeen: { debounceBy: 1000 },
+          match: { attributes: { ticketId: id } },
+          debounceEndWhenSeen: { debounceBy: 1_000 },
         },
         {
-          match: { metadata: { ticketId: id, visibleState: 'complete' } },
+          match: { attributes: { ticketId: id, visibleState: 'complete' } },
           requiredToEnd: true,
         },
       ],

diff --git a/src/stories/mockComponents/TicketView.tsx b/src/stories/mockComponents/TicketView.tsx
@@ -9,7 +9,7 @@ import { Paragraph, Span, XXL } from '@zendeskgarden/react-typography'
 import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg'
 import { VISIBLE_STATE } from '../../main'
 import { TimingComponent } from '../../v2/element'
-import { useCaptureRenderBeaconTask } from '../../v2/hooks'
+import { useCaptureRenderBeaconTask, useRenderProcessTrace } from '../../v2/hooks'
 import { mockTickets } from './mockTickets'
 import { operationManager } from './operationManager'
 
@@ -34,9 +34,19 @@ export const TicketView: React.FC<TicketViewProps> = ({
   cached = false,
   onLoaded,
 }) => {
+
+  useRenderProcessTrace({
+    operationManager, operationName: 'TicketView', onEnd: (trace) => {
+      console.log('TicketView trace', trace, "ticketId", ticketId)
+    }, track: [{ match: { attributes: { ticketId } } }, { //debounce on any event that has the same ticket id 
+      match: { attributes: { ticketId, visibleState: 'complete' } }, //required to end the operation, ticket fully loaded!
+      requiredToEnd: true,
+    }]
+  }, [ticketId])
+
   useCaptureRenderBeaconTask({
     componentName: 'TicketView',
-    metadata: { ticketId, loading: !cached },
+    attributes: { ticketId, loading: !cached },
     visibleState: cached ? VISIBLE_STATE.COMPLETE : VISIBLE_STATE.LOADING,
     operationManager,
   })