ref(replay): Refactor some replay selector utils into their own files (#60638)

static/app/utils/replays/hooks/useDeadRageSelectors.tsx

@@ -1,7 +1,7 @@
 import {useApiQuery} from 'sentry/utils/queryClient';
+import hydratedSelectorData from 'sentry/utils/replays/hydrateSelectorData';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import {hydratedSelectorData} from 'sentry/views/replays/deadRageClick/selectorTable';
 import {
   DeadRageSelectorListResponse,
   DeadRageSelectorQueryParams,

static/app/utils/replays/hydrateSelectorData.tsx

@@ -0,0 +1,22 @@
+import constructSelector from 'sentry/views/replays/deadRageClick/constructSelector';
+import getAriaLabel from 'sentry/views/replays/deadRageClick/getAriaLabel';
+import {DeadRageSelectorItem} from 'sentry/views/replays/types';
+
+export default function hydratedSelectorData(data, clickType?): DeadRageSelectorItem[] {
+  return data.map(d => ({
+    ...(clickType
+      ? {[clickType]: d[clickType]}
+      : {
+          count_dead_clicks: d.count_dead_clicks,
+          count_rage_clicks: d.count_rage_clicks,
+        }),
+    dom_element: {
+      fullSelector: constructSelector(d.element).fullSelector,
+      selector: constructSelector(d.element).selector,
+      projectId: d.project_id,
+    },
+    element: d.dom_element.split(/[#.[]+/)[0],
+    aria_label: getAriaLabel(d.dom_element),
+    project_id: d.project_id,
+  }));
+}

static/app/views/replays/deadRageClick/constructSelector.spec.tsx

@@ -1,4 +1,4 @@
-import {constructSelector} from 'sentry/views/replays/detail/utils';
+import constructSelector from 'sentry/views/replays/deadRageClick/constructSelector';
 
 describe('constructSelector', () => {
   it.each([

static/app/views/replays/deadRageClick/constructSelector.tsx

@@ -0,0 +1,36 @@
+import {ReplayClickElement} from 'sentry/views/replays/types';
+
+function trimAttribute(elementAttribute, fullAlltribute) {
+  return elementAttribute === '' ? '' : fullAlltribute;
+}
+
+export default function constructSelector(element: ReplayClickElement) {
+  const fullAlt = '[alt="' + element.alt + '"]';
+  const alt = trimAttribute(element.alt, fullAlt);
+
+  const fullAriaLabel = '[aria="' + element.aria_label + '"]';
+  const ariaLabel = trimAttribute(element.aria_label, fullAriaLabel);
+
+  const trimClass = element.class.filter(e => e !== '');
+  const classWithPeriod = trimClass.join('.');
+  const classNoPeriod = classWithPeriod.replace('.', '');
+  const classes = trimAttribute(classNoPeriod, '.' + classWithPeriod);
+
+  const id = trimAttribute(element.id, '#' + element.id);
+
+  const fullRole = '[role="' + element.role + '"]';
+  const role = trimAttribute(element.role, fullRole);
+
+  const tag = element.tag;
+
+  const fullTestId = '[data-test-id="' + element.testid + '"]';
+  const testId = trimAttribute(element.testid, fullTestId);
+
+  const fullTitle = '[title="' + element.title + '"]';
+  const title = trimAttribute(element.title, fullTitle);
+
+  const fullSelector =
+    tag + id + classes + fullRole + fullAriaLabel + fullTestId + fullAlt + fullTitle;
+  const selector = tag + id + classes + role + ariaLabel + testId + alt + title;
+  return {fullSelector, selector};
+}

static/app/views/replays/deadRageClick/getAriaLabel.spec.tsx

@@ -1,4 +1,4 @@
-import {getAriaLabel} from 'sentry/views/replays/detail/utils';
+import getAriaLabel from './getAriaLabel';
 
 describe('getAriaLabel', () => {
   it.each([

static/app/views/replays/deadRageClick/getAriaLabel.tsx

@@ -0,0 +1,9 @@
+export default function getAriaLabel(str: string) {
+  const matches = str.match(/\[aria=(.*)\]/g);
+  if (!matches) {
+    return '';
+  }
+  const pre = matches[0];
+  const start = pre.indexOf('aria="') + 6;
+  return pre.substring(start, pre.indexOf('"]', start));
+}

static/app/views/replays/deadRageClick/selectorTable.tsx

@@ -18,7 +18,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import {constructSelector, getAriaLabel} from 'sentry/views/replays/detail/utils';
 import {DeadRageSelectorItem} from 'sentry/views/replays/types';
 import {WiderHovercard} from 'sentry/views/starfish/components/tableCells/spanDescriptionCell';
 
@@ -26,25 +25,6 @@ export interface UrlState {
   widths: string[];
 }
 
-export function hydratedSelectorData(data, clickType?): DeadRageSelectorItem[] {
-  return data.map(d => ({
-    ...(clickType
-      ? {[clickType]: d[clickType]}
-      : {
-          count_dead_clicks: d.count_dead_clicks,
-          count_rage_clicks: d.count_rage_clicks,
-        }),
-    dom_element: {
-      fullSelector: constructSelector(d.element).fullSelector,
-      selector: constructSelector(d.element).selector,
-      projectId: d.project_id,
-    },
-    element: d.dom_element.split(/[#.[]+/)[0],
-    aria_label: getAriaLabel(d.dom_element),
-    project_id: d.project_id,
-  }));
-}
-
 export function transformSelectorQuery(selector: string) {
   return selector
     .replaceAll('"', `\\"`)

static/app/views/replays/detail/utils.tsx

@@ -1,5 +1,3 @@
-import {ReplayClickElement} from 'sentry/views/replays/types';
-
 export function filterItems<I extends object, K extends string>({
   filterFns,
   filterVals,
@@ -26,48 +24,3 @@ export function filterItems<I extends object, K extends string>({
 export function operationName(op: string) {
   return op.split('.')?.[1] ?? op;
 }
-
-export function getAriaLabel(str: string) {
-  const matches = str.match(/\[aria=(.*)\]/g);
-  if (!matches) {
-    return '';
-  }
-  const pre = matches[0];
-  const start = pre.indexOf('aria="') + 6;
-  return pre.substring(start, pre.indexOf('"]', start));
-}
-
-function trimAttribute(elementAttribute, fullAlltribute) {
-  return elementAttribute === '' ? '' : fullAlltribute;
-}
-
-export function constructSelector(element: ReplayClickElement) {
-  const fullAlt = '[alt="' + element.alt + '"]';
-  const alt = trimAttribute(element.alt, fullAlt);
-
-  const fullAriaLabel = '[aria="' + element.aria_label + '"]';
-  const ariaLabel = trimAttribute(element.aria_label, fullAriaLabel);
-
-  const trimClass = element.class.filter(e => e !== '');
-  const classWithPeriod = trimClass.join('.');
-  const classNoPeriod = classWithPeriod.replace('.', '');
-  const classes = trimAttribute(classNoPeriod, '.' + classWithPeriod);
-
-  const id = trimAttribute(element.id, '#' + element.id);
-
-  const fullRole = '[role="' + element.role + '"]';
-  const role = trimAttribute(element.role, fullRole);
-
-  const tag = element.tag;
-
-  const fullTestId = '[data-test-id="' + element.testid + '"]';
-  const testId = trimAttribute(element.testid, fullTestId);
-
-  const fullTitle = '[title="' + element.title + '"]';
-  const title = trimAttribute(element.title, fullTitle);
-
-  const fullSelector =
-    tag + id + classes + fullRole + fullAriaLabel + fullTestId + fullAlt + fullTitle;
-  const selector = tag + id + classes + role + ariaLabel + testId + alt + title;
-  return {fullSelector, selector};
-}