From 3cd6079c24504455219f96e52e800e0bcd9005f4 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 21 Aug 2023 04:24:16 -0700
Subject: [PATCH] Change framework event seperator to .

Summary: Its easier this way since this is how they come out of android internally, also a bit nicer to display the full string this way

Reviewed By: lblasa

Differential Revision: D48346954

fbshipit-source-id: 997dd3922159683fcdf4b5f5f288702a5d998dc4
---
 .../components/shared/FrameworkEventsTreeSelect.tsx      | 9 ++++++---
 .../sidebar/inspector/FrameworkEventsInspector.tsx       | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx b/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
index b457ca338..f7031f2ed 100644
--- a/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
+++ b/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
@@ -78,6 +78,7 @@ function getAllLeaves(treeSelectNode: TreeSelectNode) {
   return result;
 }
 
+export const frameworkEventSeparator = '.';
 /**
  * transformed flat event type data structure into tree
  */
@@ -85,7 +86,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
   const root: TreeSelectNode = buildTreeSelectNode('root', 'root');
 
   eventTypes.forEach((eventType) => {
-    const eventSubtypes = eventType.split(':');
+    const eventSubtypes = eventType.split(frameworkEventSeparator);
     let currentNode = root;
 
     // Find the parent node for the current id
@@ -101,7 +102,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
       if (!foundChild) {
         const newNode: TreeSelectNode = buildTreeSelectNode(
           eventSubtypes[i],
-          eventSubtypes.slice(0, i + 1).join(':'),
+          eventSubtypes.slice(0, i + 1).join(frameworkEventSeparator),
         );
 
         currentNode.children.push(newNode);
@@ -112,7 +113,9 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
     currentNode.children.push(
       buildTreeSelectNode(
         eventSubtypes[eventSubtypes.length - 1],
-        eventSubtypes.slice(0, eventSubtypes.length).join(':'),
+        eventSubtypes
+          .slice(0, eventSubtypes.length)
+          .join(frameworkEventSeparator),
       ),
     );
   });
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
index 2305b3dea..7bc20c192 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
@@ -17,6 +17,7 @@ import {FrameworkEvent, ClientNode} from '../../../ClientTypes';
 import React, {ReactNode} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
 import {Descriptions, Tag} from 'antd';
+import {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect';
 
 type Props = {
   node: ClientNode;
@@ -131,7 +132,7 @@ function formatDuration(nanoseconds: number): string {
   }
 }
 function eventTypeToName(eventType: string) {
-  return eventType.slice(eventType.lastIndexOf('.') + 1);
+  return eventType.slice(eventType.lastIndexOf(frameworkEventSeparator) + 1);
 }
 
 function threadToColor(thread?: string) {