Deal with non-printable characters when rendering raw results (#1203)

Author: charisk

extensions/ql-vscode/src/remote-queries/view/RawResultsTable.tsx

@@ -3,6 +3,7 @@ import { Box, Link } from '@primer/react';
 import { CellValue, RawResultSet, ResultSetSchema } from '../../pure/bqrs-cli-types';
 import { useState } from 'react';
 import TextButton from './TextButton';
+import { convertNonPrintableChars } from '../../text-utils';
 
 const numOfResultsInContractedMode = 5;
 
@@ -34,11 +35,11 @@ const Cell = ({
     case 'string':
     case 'number':
     case 'boolean':
-      return <span>{value.toString()}</span>;
+      return <span>{convertNonPrintableChars(value.toString())}</span>;
     case 'object':
       // TODO: This will be converted to a proper link once there
       // is support for populating link URLs.
-      return <Link>{value.label}</Link>;
+      return <Link>{convertNonPrintableChars(value.label)}</Link>;
   }
 };
 

extensions/ql-vscode/src/text-utils.ts

@@ -0,0 +1,31 @@
+const CONTROL_CODE = '\u001F'.codePointAt(0)!;
+const CONTROL_LABEL = '\u2400'.codePointAt(0)!;
+
+/**
+ * Converts the given text so that any non-printable characters are replaced.
+ * @param label The text to convert.
+ * @returns The converted text.
+ */
+export function convertNonPrintableChars(label: string | undefined) {
+  // If the label was empty, use a placeholder instead, so the link is still clickable.
+  if (!label) {
+    return '[empty string]';
+  } else if (label.match(/^\s+$/)) {
+    return `[whitespace: "${label}"]`;
+  } else {
+    /**
+     * If the label contains certain non-printable characters, loop through each
+     * character and replace it with the cooresponding unicode control label.
+    */
+    const convertedLabelArray: any[] = [];
+    for (let i = 0; i < label.length; i++) {
+      const labelCheck = label.codePointAt(i)!;
+      if (labelCheck <= CONTROL_CODE) {
+        convertedLabelArray[i] = String.fromCodePoint(labelCheck + CONTROL_LABEL);
+      } else {
+        convertedLabelArray[i] = label.charAt(i);
+      }
+    }
+    return convertedLabelArray.join('');
+  }
+}

extensions/ql-vscode/src/view/result-table-utils.tsx

@@ -5,6 +5,7 @@ import { RawResultsSortState, QueryMetadata, SortDirection } from '../pure/inter
 import { assertNever } from '../pure/helpers-pure';
 import { ResultSet } from '../pure/interface-types';
 import { vscode } from './vscode-api';
+import { convertNonPrintableChars } from '../text-utils';
 
 export interface ResultTableProps {
   resultSet: ResultSet;
@@ -37,9 +38,6 @@ export const oddRowClassName = 'vscode-codeql__result-table-row--odd';
 export const pathRowClassName = 'vscode-codeql__result-table-row--path';
 export const selectedRowClassName = 'vscode-codeql__result-table-row--selected';
 
-const CONTROL_CODE = '\u001F'.codePointAt(0)!;
-const CONTROL_LABEL = '\u2400'.codePointAt(0)!;
-
 export function jumpToLocationHandler(
   loc: ResolvableLocationValue,
   databaseUri: string,
@@ -70,30 +68,6 @@ export function openFile(filePath: string): void {
   });
 }
 
-function convertedNonprintableChars(label: string) {
-  // If the label was empty, use a placeholder instead, so the link is still clickable.
-  if (!label) {
-    return '[empty string]';
-  } else if (label.match(/^\s+$/)) {
-    return `[whitespace: "${label}"]`;
-  } else {
-    /**
-     * If the label contains certain non-printable characters, loop through each
-     * character and replace it with the cooresponding unicode control label.
-    */
-    const convertedLabelArray: any[] = [];
-    for (let i = 0; i < label.length; i++) {
-      const labelCheck = label.codePointAt(i)!;
-      if (labelCheck <= CONTROL_CODE) {
-        convertedLabelArray[i] = String.fromCodePoint(labelCheck + CONTROL_LABEL);
-      } else {
-        convertedLabelArray[i] = label.charAt(i);
-      }
-    }
-    return convertedLabelArray.join('');
-  }
-}
-
 /**
  * Render a location as a link which when clicked displays the original location.
  */
@@ -105,7 +79,7 @@ export function renderLocation(
   callback?: () => void
 ): JSX.Element {
 
-  const displayLabel = convertedNonprintableChars(label!);
+  const displayLabel = convertNonPrintableChars(label!);
 
   if (loc === undefined) {
     return <span>{displayLabel}</span>;