chore: Update mixpanel masking classname

app/client/cypress/locators/QueryEditor.json

@@ -9,7 +9,7 @@
   "addDatasource": ".t--add-datasource",
   "editDatasourceButton": ".t--edit-datasource",
   "switch": ".t--form-control-SWITCH input",
-  "queryResponse": "(//div[@class='table']//div[@class='tr'])[2]//div[@class='td mp-mask']",
+  "queryResponse": "(//div[@class='table']//div[@class='tr'])[2]//div[@class='td as-mask']",
   "querySelect": "//div[contains(@class, 't--template-menu')]//div[text()='Select']",
   "queryCreate": "//div[contains(@class, 't--template-menu')]//div[text()='Create']",
   "queryUpdate": "//div[contains(@class, 't--template-menu')]//div[text()='Update']",

app/client/cypress/support/Pages/DataSources.ts

@@ -147,7 +147,7 @@ export class DataSources {
     option +
     "']";
   _queryTableResponse =
-    "//div[@data-guided-tour-id='query-table-response']//div[@class='tbody']//div[@class ='td mp-mask']";
+    "//div[@data-guided-tour-id='query-table-response']//div[@class='tbody']//div[@class ='td as-mask']";
   _queryResponseHeader = (header: string) =>
     "//div[@data-guided-tour-id='query-table-response']//div[@class='table']//div[@role ='columnheader']//span[text()='" +
     header +

app/client/cypress/support/commands.js

@@ -816,7 +816,7 @@ Cypress.Commands.add("ValidatePaginateResponseUrlData", (runTestCss) => {
   cy.wait(2000);
   cy.get(runTestCss).click();
   cy.wait(2000);
-  cy.xpath("//div[@class='tr'][1]//div[@class='td mp-mask'][6]//span")
+  cy.xpath("//div[@class='tr'][1]//div[@class='td as-mask'][6]//span")
     .invoke("text")
     .then((valueToTest) => {
       // eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -841,7 +841,7 @@ Cypress.Commands.add("ValidatePaginateResponseUrlDataV2", (runTestCss) => {
   cy.wait(2000);
   cy.get(runTestCss).click();
   cy.wait(2000);
-  cy.xpath("//div[@class='tr'][1]//div[@class='td mp-mask'][6]//span")
+  cy.xpath("//div[@class='tr'][1]//div[@class='td as-mask'][6]//span")
     .invoke("text")
     .then((valueToTest) => {
       // eslint-disable-next-line cypress/no-unnecessary-waiting

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx

@@ -44,56 +44,68 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>`
   justify-content: space-between;
   flex-direction: column;
   overflow: auto;
+
   .tableWrap {
     height: 100%;
     display: block;
     overflow-x: auto;
     overflow-y: hidden;
   }
+
   .table {
     border-spacing: 0;
     color: var(--ads-v2-color-fg);
     position: relative;
     display: table;
     width: 100%;
     height: auto;
+
     .thead,
     .tbody {
       overflow: hidden;
     }
+
     .tbody {
       height: calc(100% - ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px);
+
       .tr {
         width: 100%;
       }
     }
+
     .tr {
       overflow: hidden;
       border-bottom: 1px solid var(--ads-v2-color-black-75);
+
       &.selected-row {
         background: var(--ads-v2-color-bg-subtle);
+
         &:hover {
           background: var(--ads-v2-color-bg-subtle);
         }
       }
+
       &:hover {
         background: var(--ads-v2-color-gray-50);
       }
     }
+
     .th,
     .td {
       margin: 0;
       padding: 9px 10px;
       position: relative;
       font-size: ${TABLE_SIZES.ROW_FONT_SIZE}px;
       line-height: ${TABLE_SIZES.ROW_FONT_SIZE}px;
+
       ${(props) =>
         `${
           props.minColumnWidth ? `min-width: ${props.minColumnWidth}px;` : ""
         }`}
       :last-child {
         border-right: 0;
       }
+
       .resizer {
         display: inline-block;
         width: 10px;
@@ -104,24 +116,28 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>`
         transform: translateX(50%);
         z-index: 1;
         ${"" /* prevents from scrolling while dragging on touch devices */}
-        touch-action:none;
+        touch-action: none;
+
         &.isResizing {
           cursor: n-resize;
         }
       }
     }
+
     .th {
       padding: 0 10px 0 0;
       height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px;
       line-height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px;
       background: var(--ads-v2-color-gray-50);
     }
+
     .td {
       height: auto;
       line-height: ${TABLE_SIZES.ROW_HEIGHT}px;
       padding: 0 10px;
     }
   }
+
   .draggable-header,
   .hidden-header {
     width: 100%;
@@ -132,30 +148,38 @@ export const TableWrapper = styled.div<{ minColumnWidth?: number }>`
     color: var(--ads-v2-color-fg);
     font-weight: 500;
     padding-left: 10px;
+
     &.sorted {
       padding-left: 5px;
     }
   }
+
   .draggable-header {
     cursor: pointer;
+
     &.reorder-line {
       width: 1px;
       height: 100%;
     }
   }
+
   .hidden-header {
     opacity: 0.6;
   }
+
   .column-menu {
     height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px;
     line-height: ${TABLE_SIZES.COLUMN_HEADER_HEIGHT}px;
   }
+
   .th {
     display: flex;
     justify-content: space-between;
+
     &.highlight-left {
       border-left: 2px solid var(--ads-v2-color-border-success);
     }
+
     &.highlight-right {
       border-right: 2px solid var(--ads-v2-color-border-success);
     }
@@ -313,7 +337,7 @@ function Table(props: TableProps) {
             return (
               <div
                 {...cell.getCellProps()}
-                className="td mp-mask"
+                className="td as-mask"
                 key={cellIndex}
               >
                 <CellWrapper>{cell.render("Cell")}</CellWrapper>
@@ -348,7 +372,7 @@ function Table(props: TableProps) {
               {headerGroups.map((headerGroup: any, index: number) => (
                 <div
                   {...headerGroup.getHeaderGroupProps()}
-                  className="tr mp-mask"
+                  className="tr as-mask"
                   key={index}
                 >
                   {headerGroup.headers.map(

app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx

@@ -157,7 +157,7 @@ export function PeekOverlayPopUpContent(
       >
         {(dataType === "object" || dataType === "array") && jsData !== null && (
           <JsonWrapper
-            className="mp-mask"
+            className="as-mask"
             onClick={objectCollapseAnalytics}
             style={{
               minHeight: "20px",

app/client/src/components/editorComponents/Debugger/LogItem/LogItem.tsx

@@ -311,7 +311,7 @@ export function LogItem(props: LogItemProps) {
           })}
           {props.state && (
             <JsonWrapper
-              className="t--debugger-log-state mp-mask"
+              className="t--debugger-log-state as-mask"
               onClick={(e) => e.stopPropagation()}
             >
               <ReactJson src={props.state} {...reactJsonProps} />
@@ -325,7 +325,7 @@ export function LogItem(props: LogItemProps) {
               if (typeof logDatum === "object") {
                 return (
                   <JsonWrapper
-                    className="t--debugger-console-log-data mp-mask"
+                    className="t--debugger-console-log-data as-mask"
                     key={Math.random()}
                     onClick={(e) => e.stopPropagation()}
                   >
@@ -334,7 +334,7 @@ export function LogItem(props: LogItemProps) {
                 );
               } else {
                 return (
-                  <span className="debugger-label mp-mask" key={Math.random()}>
+                  <span className="debugger-label as-mask" key={Math.random()}>
                     {`${logDatum} `}
                   </span>
                 );

app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx

@@ -66,7 +66,7 @@ export const StateInspector = () => {
       </Flex>
       {selectedItem ? (
         <Flex
-          className="mp-mask"
+          className="as-mask"
           data-testid="t--selected-entity-details"
           flex="1"
           flexDirection="column"

app/client/src/components/editorComponents/ReadOnlyEditor.tsx

@@ -40,7 +40,7 @@ function ReadOnlyEditor(props: Props) {
     isReadOnly: true,
     isRawView: props.isRawView,
     border: CodeEditorBorder.NONE,
-    className: "mp-mask",
+    className: "as-mask",
   };
 
   return <LazyCodeEditor {...editorProps} />;

app/client/src/pages/AppViewer/AppPage/AppPage.tsx

@@ -54,7 +54,7 @@ export function AppPage(props: AppPageProps) {
       sidebarWidth={sidebarWidth}
     >
       <PageView
-        className="mp-mask"
+        className="as-mask"
         data-testid="t--app-viewer-page"
         width={width}
       >

app/client/src/pages/Editor/Canvas.tsx

@@ -92,7 +92,7 @@ const Canvas = (props: CanvasProps) => {
         <Wrapper
           $enableMainCanvasResizer={!!props.enableMainCanvasResizer}
           background={isAnvilLayout ? "" : backgroundForCanvas}
-          className={`relative t--canvas-artboard mp-mask ${paddingBottomClass} ${marginHorizontalClass} ${getViewportClassName(
+          className={`relative t--canvas-artboard as-mask ${paddingBottomClass} ${marginHorizontalClass} ${getViewportClassName(
             canvasWidth,
           )}`}
           data-testid={"t--canvas-artboard"}

app/client/src/utils/Analytics/mixpanel.ts

@@ -46,7 +46,7 @@ class MixpanelSingleton {
         this.mixpanel.init(mixpanel.apiKey, {
           record_sessions_percent: 100,
           record_block_selector: mask ? ".mp-block" : "",
-          record_mask_text_selector: mask ? ".mp-mask" : "",
+          record_mask_text_selector: mask ? ".as-mask" : "",
         });
 
         await this.addSegmentMiddleware();