FI-1727 fix: render JSX to SafeHtml

Author: uid11

src/types/report.ts

@@ -96,7 +96,6 @@ export type ReportClientState = {
   readonly e2edRightColumnContainer: HTMLElement;
   readonly fullTestRuns: readonly FullTestRun[];
   readonly internalDirectoryName: string;
-  readonly jsxRuntime: JSX.Runtime;
   lengthOfReadedJsonReportDataParts: number;
   readonly locator: LocatorFunction<SafeHtml>;
   readonly pathToScreenshotsDirectoryForReport: string | null;

src/types/utils.ts

@@ -4,7 +4,7 @@ import type {IsIncludeUndefined} from './undefined';
 /**
  * Entry pair that `Object.entries<Type>` returns.
  */
-type EntryPair<Type> = [key: keyof Type, value: Values<Type> | undefined];
+type EntryPair<Type> = [key: keyof Type, value: Values<Type>];
 
 /**
  * Alias for type any (to suppress the @typescript-eslint/no-explicit-any rule).

src/utils/index.ts

@@ -40,7 +40,7 @@ export {getKeysCounter} from './getKeysCounter';
 export {getEquivalentHeadersNames, getHeadersFromHeaderEntries, getHeaderValue} from './headers';
 export {getContentJsonHeaders} from './http';
 export {log} from './log';
-export {deepMerge, getKeys, setReadonlyProperty} from './object';
+export {deepMerge, getEntries, getKeys, setReadonlyProperty} from './object';
 export {parseMaybeEmptyValueAsJson, parseValueAsJsonIfNeeded} from './parse';
 export {
   addTimeoutToPromise,

src/utils/object/getEntries.ts

@@ -0,0 +1,8 @@
+import type {ObjectEntries} from '../../types/internal';
+
+/**
+ * Get typed array of key-value pairs  (like `Object.entries`, but typed).
+ */
+export const getEntries = <Value extends {}>(
+  value: Value,
+): readonly ObjectEntries<Value>[number][] => Object.entries(value) as ObjectEntries<Value>;

src/utils/object/index.ts

@@ -1,3 +1,4 @@
 export {deepMerge} from './deepMerge';
+export {getEntries} from './getEntries';
 export {getKeys} from './getKeys';
 export {setReadonlyProperty} from './setReadonlyProperty';

src/utils/report/client/createJsxRuntime.ts

@@ -1,11 +1,66 @@
+import {
+  createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize,
+  isSafeHtml as clientIsSafeHtml,
+  sanitizeHtml as clientSanitizeHtml,
+} from './sanitizeHtml';
+
+import type {SafeHtml} from '../../../types/internal';
+
+const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
+const isSafeHtml: typeof clientIsSafeHtml = clientIsSafeHtml;
+const sanitizeHtml = clientSanitizeHtml;
+
 /**
  * Creates JSX runtime (functions `createElement` and `Fragment`).
  * This client function should not use scope variables (except global functions).
  * @internal
  */
 export function createJsxRuntime(): JSX.Runtime {
-  const createElement: JSX.CreateElement = (type, properties, ...children) => '';
-  const Fragment: JSX.Fragment = ({children}) => '';
+  const maxDepth = 8;
+
+  const createElement: JSX.CreateElement = (type, properties, ...children) => {
+    const flatChildren = children.flat(maxDepth);
+
+    if (typeof type === 'function') {
+      const propertiesWithChildren =
+        flatChildren.length === 0 ? properties : {...properties, children: flatChildren};
+
+      return type(propertiesWithChildren ?? undefined);
+    }
+
+    const childrenParts: readonly SafeHtml[] = flatChildren.map((child) =>
+      isSafeHtml(child) ? child : sanitizeHtml`${child}`,
+    );
+    const childrenHtml = createSafeHtmlWithoutSanitize`${childrenParts.join('')}`;
+
+    if (properties == null) {
+      return sanitizeHtml`<${type}>${childrenHtml}</${type}>`;
+    }
+
+    const attributesParts: readonly SafeHtml[] = Object.entries(properties).map(
+      ([key, value]) => sanitizeHtml`${key}="${value}"`,
+    );
+    const attributesHtml = createSafeHtmlWithoutSanitize`${attributesParts.join('')}`;
+
+    return sanitizeHtml`<${type} ${attributesHtml}>${childrenHtml}</${type}>`;
+  };
+
+  const Fragment: JSX.Fragment = (properties) => {
+    if (properties?.children == null) {
+      return createSafeHtmlWithoutSanitize``;
+    }
+
+    if (!Array.isArray(properties.children)) {
+      return sanitizeHtml`${properties.children}`;
+    }
+
+    const flatChildren: unknown[] = properties.children.flat(maxDepth);
+    const childrenParts: readonly SafeHtml[] = flatChildren.map((child) =>
+      isSafeHtml(child) ? child : sanitizeHtml`${child}`,
+    );
+
+    return createSafeHtmlWithoutSanitize`${childrenParts.join('')}`;
+  };
 
-  return {createElement, Fragment};
+  return {Fragment, createElement};
 }

src/utils/report/client/index.ts

@@ -41,6 +41,12 @@ export {
   renderTestRunError,
 } from './render';
 /** @internal */
-export {createSafeHtmlWithoutSanitize, sanitizeHtml, sanitizeJson} from './sanitizeHtml';
+export {
+  createSafeHtmlWithoutSanitize,
+  isSafeHtml,
+  sanitizeHtml,
+  sanitizeJson,
+  sanitizeValue,
+} from './sanitizeHtml';
 /** @internal */
 export {setReadJsonReportDataObservers} from './setReadJsonReportDataObservers';

src/utils/report/client/initialScript.ts

@@ -16,6 +16,8 @@ import {setReadJsonReportDataObservers as clientSetReadJsonReportDataObservers}
 
 import type {ReportClientState, SafeHtml} from '../../../types/internal';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+declare let jsx: JSX.Runtime;
 declare const reportClientState: ReportClientState;
 
 const addDomContentLoadedHandler = clientAddDomContentLoadedHandler;
@@ -36,7 +38,8 @@ const setReadJsonReportDataObservers = clientSetReadJsonReportDataObservers;
  * @internal
  */
 export function initialScript(): void {
-  const jsxRuntime = createJsxRuntime();
+  jsx = createJsxRuntime();
+
   const e2edRightColumnContainer = document.getElementById('e2edRightColumnContainer') ?? undefined;
 
   assertValueIsDefined(e2edRightColumnContainer);
@@ -47,7 +50,6 @@ export function initialScript(): void {
 
   Object.assign<ReportClientState, Partial<ReportClientState>>(reportClientState, {
     e2edRightColumnContainer,
-    jsxRuntime,
     locator,
   });
 

src/utils/report/client/render/renderApiStatistics.ts

@@ -2,7 +2,12 @@ import {createSafeHtmlWithoutSanitize as clientCreateSafeHtmlWithoutSanitize} fr
 
 import {renderApiStatisticsItem as clientRenderApiStatisticsItem} from './renderApiStatisticsItem';
 
-import type {ApiStatistics, ApiStatisticsReportHash, SafeHtml} from '../../../../types/internal';
+import type {
+  ApiStatistics,
+  ApiStatisticsReportHash,
+  ObjectEntries,
+  SafeHtml,
+} from '../../../../types/internal';
 
 const createSafeHtmlWithoutSanitize = clientCreateSafeHtmlWithoutSanitize;
 const renderApiStatisticsItem = clientRenderApiStatisticsItem;
@@ -62,15 +67,17 @@ export function renderApiStatistics({apiStatistics, hash}: Options): SafeHtml {
   } else {
     header = 'Resources';
 
-    for (const [url, byStatusCode] of Object.entries(apiStatistics.resources)) {
+    for (const [url, byStatusCode] of Object.entries(apiStatistics.resources) as ObjectEntries<
+      typeof apiStatistics.resources
+    >) {
       for (const [statusCode, {count, duration, size}] of Object.entries(byStatusCode)) {
         items.push(
           renderApiStatisticsItem({
             count,
             duration,
-            isUrl: true,
             name: `${url} ${statusCode}`,
             size,
+            url,
           }),
         );
       }

src/utils/report/client/render/renderApiStatisticsItem.tsx

@@ -1,18 +1,18 @@
 import {renderDuration as clientRenderDuration} from './renderDuration';
 
-import type {ReportClientState, SafeHtml} from '../../../../types/internal';
+import type {SafeHtml, Url} from '../../../../types/internal';
 
 const renderDuration = clientRenderDuration;
 
-declare const reportClientState: ReportClientState;
+declare const jsx: JSX.Runtime;
 
 type Options = Readonly<{
   count: number;
   duration: number;
   isHeader?: boolean;
-  isUrl?: boolean;
   name: string;
   size?: number;
+  url?: Url;
 }>;
 
 /**
@@ -24,23 +24,22 @@ export function renderApiStatisticsItem({
   count,
   duration,
   isHeader,
-  isUrl,
   name,
   size,
+  url,
 }: Options): SafeHtml {
   const bytesInKiB = 1_024;
   const durationHtml = renderDuration(duration / count);
   const countHtml = `${count}x`;
   const sizeHtml = size === undefined ? '' : `${(size / count / bytesInKiB).toFixed(2)} KiB / `;
-  const {createElement, Fragment} = reportClientState.jsxRuntime;
 
   let nameHtml: SafeHtml;
 
   if (isHeader) {
     nameHtml = <b>{name}</b>;
-  } else if (isUrl) {
+  } else if (url !== undefined) {
     nameHtml = (
-      <a href={name} rel="noreferrer" target="_blank">
+      <a href={url} rel="noreferrer" target="_blank">
         {name}
       </a>
     );