Finish creating check for non-printing characters

Author: marcnjaramillo

extensions/ql-vscode/src/view/RawTableValue.tsx

@@ -8,38 +8,14 @@ interface Props {
   databaseUri: string;
 }
 
-const codes: { [key: string]: any } = {
-  '\0': 'U+0000',
-  '\b': 'U+0008',
-  '\t': 'U+0009',
-  '\v': 'U+000B',
-  '\r': 'U+000D'
-};
-
-function onlyNewLine(element: string, index: number, array: string[]) {
-  return element === '\n';
-}
-
 export default function RawTableValue(props: Props): JSX.Element {
   const rawValue = props.value;
-
   if (
     typeof rawValue === 'string'
     || typeof rawValue === 'number'
     || typeof rawValue === 'boolean'
   ) {
-    const text = rawValue.toString();
-    const newVal = text.split('').filter((element: string) => element !== ' ');
-    if (newVal.every(onlyNewLine)) {
-      const cleanVal = '[' + newVal.join('') + ']';
-      return <span>{cleanVal}</span>;
-    } else {
-      for (let i = 0; i < newVal.length; i++) {
-        newVal[i] = codes[newVal[i]] || newVal[i];
-      }
-      const cleanVal = newVal.join('');
-      return <span>{cleanVal}</span>;
-    }
+    return <span>{renderLocation(undefined, rawValue.toString())}</span>;
   }
 
   return renderLocation(rawValue.url, rawValue.label, props.databaseUri);

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

@@ -37,6 +37,9 @@ 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,
@@ -67,24 +70,42 @@ 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.
  */
 export function renderLocation(
-  loc: UrlValue | undefined,
-  label: string | undefined,
-  databaseUri: string,
+  loc?: UrlValue,
+  label?: string,
+  databaseUri?: string,
   title?: string,
   callback?: () => void
 ): JSX.Element {
 
-  // If the label was empty, use a placeholder instead, so the link is still clickable.
-  let displayLabel = label;
-  if (!label) {
-    displayLabel = '[empty string]';
-  } else if (label.match(/^\s+$/)) {
-    displayLabel = `[whitespace: "${label}"]`;
-  }
+  const displayLabel = convertedNonprintableChars(label!);
 
   if (loc === undefined) {
     return <span>{displayLabel}</span>;
@@ -93,7 +114,7 @@ export function renderLocation(
   }
 
   const resolvableLoc = tryGetResolvableLocation(loc);
-  if (resolvableLoc !== undefined) {
+  if (databaseUri !== undefined && resolvableLoc !== undefined) {
     return (
       <a href="#"
         className="vscode-codeql__result-table-location-link"