fix(ui) utx -> uxt for clarity

frontend/app/components/Session/WebPlayer.tsx

@@ -20,7 +20,7 @@ const TABS = {
   EVENTS: 'User Events',
   CLICKMAP: 'Click Map',
 };
-const UTXTABS = {
+const UXTTABS = {
   EVENTS: TABS.EVENTS
 }
 
@@ -143,7 +143,7 @@ function WebPlayer(props: any) {
         // @ts-ignore TODO?
         activeTab={activeTab}
         setActiveTab={setActiveTab}
-        tabs={uxtestingStore.isUxt() ? UTXTABS : TABS}
+        tabs={uxtestingStore.isUxt() ? UXTTABS : TABS}
         fullscreen={fullscreen}
       />
       {/* @ts-ignore  */}

frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js

@@ -1,4 +1,4 @@
-import UtxEvent from "Components/Session_/EventsBlock/UtxEvent";
+import UxtEvent from "Components/Session_/EventsBlock/UxtEvent";
 import React from 'react';
 import { durationFromMsFormatted } from "App/date";
 import { connect } from 'react-redux';
@@ -62,7 +62,7 @@ class EventGroupWrapper extends React.Component {
       filterOutNote,
     } = this.props;
     const isLocation = event.type === TYPES.LOCATION;
-    const isUtxEvent = event.type === TYPES.UTX_EVENT;
+    const isUxtEvent = event.type === TYPES.UXT_EVENT;
 
     const whiteBg =
       (isLastInGroup && event.type !== TYPES.LOCATION) ||
@@ -70,9 +70,9 @@ class EventGroupWrapper extends React.Component {
     const safeRef = String(event.referrer || '');
 
     const returnEvt = () => {
-      if (isUtxEvent) {
+      if (isUxtEvent) {
         return (
-          <UtxEvent event={event} />
+          <UxtEvent event={event} />
         )
       }
       if (isNote) {

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -25,7 +25,7 @@ interface IProps {
   notesWithEvents: Session['notesWithEvents'];
   filterOutNote: (id: string) => void;
   eventsIndex: number[];
-  utxVideo: string;
+  uxtVideo: string;
 }
 
 function EventsBlock(props: IProps) {
@@ -180,7 +180,7 @@ function EventsBlock(props: IProps) {
       <div className={cn(styles.header, 'p-4')}>
         {uxtestingStore.isUxt() ? (
           <div style={{ width: 240, height: 130 }} className={'relative'}>
-            <video className={'z-20 fixed'} muted autoPlay controls src={props.utxVideo} width={240} />
+            <video className={'z-20 fixed'} muted autoPlay controls src={props.uxtVideo} width={240} />
             <div style={{ top: '40%', left: '50%', transform: 'translate(-50%, -50%)' }} className={'absolute z-10'}>No video</div>
           </div>
         ) : null}
@@ -229,7 +229,7 @@ export default connect(
     session: state.getIn(['sessions', 'current']),
     notesWithEvents: state.getIn(['sessions', 'current']).notesWithEvents,
     events: state.getIn(['sessions', 'current']).events,
-    utxVideo: state.getIn(['sessions', 'current']).utxVideo,
+    uxtVideo: state.getIn(['sessions', 'current']).uxtVideo,
     filteredEvents: state.getIn(['sessions', 'filteredEvents']),
     query: state.getIn(['sessions', 'eventsQuery']),
     eventsIndex: state.getIn(['sessions', 'eventsIndex']),

frontend/app/components/Session_/EventsBlock/UxtEvent.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { durationFromMsFormatted } from "App/date";
 import { Tooltip } from 'antd'
 
-function UtxEvent({ event }: any) {
+function UxtEvent({ event }: any) {
   return (
     <div className={'flex flex-col'}>
       <div className={'border border-gray-light rounded bg-teal-light pt-2 pb-1 px-4 m-4 shadow'}>
@@ -27,4 +27,4 @@ function UtxEvent({ event }: any) {
   );
 }
 
-export default UtxEvent
+export default UxtEvent

frontend/app/components/Session_/Subheader.js

@@ -19,7 +19,7 @@ import cn from 'classnames';
 import { Switch } from 'antd';
 
 const localhostWarn = (project) => project + '_localhost_warn';
-const disableDevtools = 'or_devtools_utx_toggle';
+const disableDevtools = 'or_devtools_uxt_toggle';
 
 function SubHeader(props) {
   const localhostWarnKey = localhostWarn(props.siteId);

frontend/app/components/UsabilityTesting/TestOverview.tsx

@@ -193,7 +193,7 @@ function TestOverview() {
             <NoContent show={uxtestingStore.testSessions.list.length == 0} title='No data'>
               {uxtestingStore.testSessions.list.map((session) => (
                 // @ts-ignore
-                <SessionItem session={session} query={'?utx=true'} />
+                <SessionItem session={session} query={'?uxt=true'} />
               ))}
               <div className={'flex items-center justify-between'}>
                 <div>

frontend/app/mstore/uxtestingStore.ts

@@ -68,7 +68,7 @@ export default class UxtestingStore {
   taskStats: TaskStats[] = [];
   isLoading: boolean = false;
   responses: Record<number, { list: Response[]; total: number }> = {};
-  hideDevtools: boolean = localStorage.getItem('or_devtools_utx_toggle') === '1';
+  hideDevtools: boolean = localStorage.getItem('or_devtools_uxt_toggle') === '1';
 
   constructor() {
     makeAutoObservable(this);
@@ -76,7 +76,7 @@ export default class UxtestingStore {
 
   isUxt() {
     const queryParams = new URLSearchParams(document.location.search);
-    return queryParams.has('utx');
+    return queryParams.has('uxt');
   }
 
   setHideDevtools(hide: boolean) {

frontend/app/types/session/event.ts

@@ -6,11 +6,11 @@ const CUSTOM = 'CUSTOM';
 const CLICKRAGE = 'CLICKRAGE';
 const TAPRAGE = 'tap_rage'
 const IOS_VIEW = 'VIEW';
-const UTX_EVENT = 'UTX_EVENT';
+const UXT_EVENT = 'UXT_EVENT';
 const TOUCH = 'TAP';
 const SWIPE = 'SWIPE';
 
-export const TYPES = { CONSOLE, CLICK, INPUT, LOCATION, CUSTOM, CLICKRAGE, IOS_VIEW, TOUCH, SWIPE, TAPRAGE, UTX_EVENT };
+export const TYPES = { CONSOLE, CLICK, INPUT, LOCATION, CUSTOM, CLICKRAGE, IOS_VIEW, TOUCH, SWIPE, TAPRAGE, UXT_EVENT };
 
 export type EventType =
   | typeof CONSOLE
@@ -201,11 +201,11 @@ export class Location extends Event {
   }
 }
 
-export type InjectedEvent = Console | Click | Input | Location | Touch | Swipe | UtxEvent;
+export type InjectedEvent = Console | Click | Input | Location | Touch | Swipe | UxtEvent;
 
 export default function (event: EventData) {
   if ('allow_typing' in event) {
-    return new UtxEvent(event);
+    return new UxtEvent(event);
   }
   if (!event.type) {
     return console.error('Unknown event type: ', event)
@@ -230,9 +230,9 @@ export default function (event: EventData) {
   }
 }
 
-export class UtxEvent {
-  readonly name = 'UtxEvent'
-  readonly type = UTX_EVENT;
+export class UxtEvent {
+  readonly name = 'UxtEvent'
+  readonly type = UXT_EVENT;
   allowTyping: boolean;
   comment: string;
   description: string;
@@ -245,8 +245,8 @@ export class UtxEvent {
 
   constructor(event: Record<string, any>) {
     Object.assign(this, {
-      type: UTX_EVENT,
-      name: 'UtxEvent',
+      type: UXT_EVENT,
+      name: 'UxtEvent',
       allowTyping: event.allow_typing,
       comment: event.comment,
       description: event.description,

frontend/app/types/session/session.ts

@@ -82,7 +82,7 @@ export interface ISession {
   canvasURL: string[];
   domURL: string[];
   devtoolsURL: string[];
-  utxVideo: string[];
+  uxtVideo: string[];
   /**
    * @deprecated
    */
@@ -239,7 +239,7 @@ export default class Session {
       crashes = [],
       notes = [],
       canvasURL = [],
-      utxVideo = [],
+      uxtVideo = [],
       ...session
     } = sessionData;
     const duration = Duration.fromMillis(session.duration < 1000 ? 1000 : session.duration);
@@ -334,7 +334,7 @@ export default class Session {
       canvasURL,
       notesWithEvents: mixedEventsWithIssues,
       frustrations: frustrationList,
-      utxVideo: utxVideo[0],
+      uxtVideo: uxtVideo[0],
     });
   }
 
@@ -362,17 +362,17 @@ export default class Session {
     }
 
     const events: InjectedEvent[] = [];
-    const utxDoneEvents = userTestingEvents.filter(e => e.status === 'done' && e.title).map(e => ({ ...e, type: 'UTX_EVENT', key: e.signal_id }))
+    const uxtDoneEvents = userTestingEvents.filter(e => e.status === 'done' && e.title).map(e => ({ ...e, type: 'UXT_EVENT', key: e.signal_id }))
     const rawEvents: (EventData & { key: number })[] = [];
 
-    let utxIndexNum = 0;
+    let uxtIndexNum = 0;
     if (sessionEvents.length) {
-      const eventsWithUtx = mergeEventLists(sessionEvents, utxDoneEvents)
-      eventsWithUtx.forEach((event, k) => {
-        const isRawUtx = 'allow_typing' in event
-        if (isRawUtx) {
-          utxIndexNum += 1;
-          event.indexNum = utxIndexNum;
+      const eventsWithUxt = mergeEventLists(sessionEvents, uxtDoneEvents)
+      eventsWithUxt.forEach((event, k) => {
+        const isRawUxt = 'allow_typing' in event
+        if (isRawUxt) {
+          uxtIndexNum += 1;
+          event.indexNum = uxtIndexNum;
         }
         const time = event.timestamp - this.startedAt;
         if (event.type !== TYPES.CONSOLE && time <= this.durationSeconds) {