From 4dbbba2ee3e0c2b116c68cff6be292213a41d5fe Mon Sep 17 00:00:00 2001
From: Oskar Damkjaer <oskar.damkjaer@gmail.com>
Date: Wed, 16 Jun 2021 16:56:52 +0200
Subject: [PATCH] Fix bug where whitespace was not preserved in result

---
 src/browser/components/ClickableUrls.tsx      |  2 +-
 .../relatable-view.test.tsx.snap              |  4 +-
 .../CypherFrame/relatable-view.styled.ts      |  4 ++
 .../Stream/CypherFrame/relatable-view.tsx     | 15 ++--
 .../__snapshots__/SchemaFrame.test.tsx.snap   | 72 +++++++++----------
 5 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/src/browser/components/ClickableUrls.tsx b/src/browser/components/ClickableUrls.tsx
index ed1685250db..92d1766a75b 100644
--- a/src/browser/components/ClickableUrls.tsx
+++ b/src/browser/components/ClickableUrls.tsx
@@ -22,7 +22,7 @@ const URL_REGEX = /(?:https?|s?ftp|bolt):\/\/(?:(?:[^\s()<>]+|\((?:[^\s()<>]+|(?
 
 interface ClickableUrlsProps {
   text?: string | null
-  WrappingTag?: keyof JSX.IntrinsicElements
+  WrappingTag?: keyof JSX.IntrinsicElements | React.ElementType
 }
 
 export default function ClickableUrls({
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/relatable-view.test.tsx.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/relatable-view.test.tsx.snap
index 3b9638fcf56..6e92c1c7193 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/relatable-view.test.tsx.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/relatable-view.test.tsx.snap
@@ -72,7 +72,9 @@ exports[`RelatableViews RelatableView does not display bodyMessage if rows, and
               class="relatable__table-cell relatable__table-body-cell"
               role="cell"
             >
-              <span>
+              <span
+                class="sc-hEsumM cPMQJb"
+              >
                 "String with HTML &lt;strong&gt;in&lt;/strong&gt; it"
               </span>
             </td>
diff --git a/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts b/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
index 1517fa907ca..41b0a573ca3 100644
--- a/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
+++ b/src/browser/modules/Stream/CypherFrame/relatable-view.styled.ts
@@ -50,3 +50,7 @@ export const StyledJsonPre = styled.pre`
   max-width: 500px;
   white-space: pre-wrap;
 `
+
+export const StyledPreSpan = styled.span`
+  white-space: pre;
+`
diff --git a/src/browser/modules/Stream/CypherFrame/relatable-view.tsx b/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
index 42051557244..7a9e814ed19 100644
--- a/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
+++ b/src/browser/modules/Stream/CypherFrame/relatable-view.tsx
@@ -35,7 +35,11 @@ import { stringModifier } from 'services/bolt/cypherTypesFormatting'
 import ClickableUrls from '../../../components/ClickableUrls'
 import { StyledStatsBar, StyledTruncatedMessage } from '../styled'
 import Ellipsis from '../../../components/Ellipsis'
-import { RelatableStyleWrapper, StyledJsonPre } from './relatable-view.styled'
+import {
+  RelatableStyleWrapper,
+  StyledJsonPre,
+  StyledPreSpan
+} from './relatable-view.styled'
 import { stringifyMod, unescapeDoubleQuotesForDisplay } from 'services/utils'
 import { GlobalState } from 'shared/globalState'
 
@@ -93,12 +97,12 @@ function CypherCell({ cell }: any) {
 const renderCell = (entry: any) => {
   if (Array.isArray(entry)) {
     const children = entry.map((item, index) => (
-      <span key={index}>
+      <StyledPreSpan key={index}>
         {renderCell(item)}
         {index === entry.length - 1 ? null : ', '}
-      </span>
+      </StyledPreSpan>
     ))
-    return <span>[{children}]</span>
+    return <StyledPreSpan>[{children}]</StyledPreSpan>
   } else if (typeof entry === 'object') {
     return renderObject(entry)
   } else {
@@ -107,6 +111,7 @@ const renderCell = (entry: any) => {
         text={unescapeDoubleQuotesForDisplay(
           stringifyMod(entry, stringModifier, true)
         )}
+        WrappingTag={StyledPreSpan}
       />
     )
   }
@@ -119,7 +124,7 @@ const renderObject = (entry: any) => {
       text={unescapeDoubleQuotesForDisplay(
         stringifyMod(entry, stringModifier, true)
       )}
-      WrappingTag={StyledJsonPre as any}
+      WrappingTag={StyledJsonPre}
     />
   )
 }
diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
index 3a3137b88c5..0ff0f36e068 100644
--- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
+++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
@@ -10,13 +10,13 @@ exports[`SchemaFrame renders empty 1`] = `
         class="sc-eXEjpC gPTqCq"
       >
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Indexes
               </th>
@@ -24,10 +24,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                 None
               </td>
@@ -35,13 +35,13 @@ exports[`SchemaFrame renders empty 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Constraints
               </th>
@@ -49,10 +49,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                 None
               </td>
@@ -92,43 +92,43 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
         class="sc-eXEjpC gPTqCq"
       >
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Index Name
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Type
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Uniqueness
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 EntityType
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 LabelsOrTypes
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Properties
               </th>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 State
               </th>
@@ -136,42 +136,42 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                 None
               </td>
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               />
             </tr>
           </tbody>
         </table>
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Constraints
               </th>
@@ -179,10 +179,10 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                 None
               </td>
@@ -222,13 +222,13 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
         class="sc-eXEjpC gPTqCq"
       >
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Indexes
               </th>
@@ -236,10 +236,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                  ON :Movie(released) ONLINE 
               </td>
@@ -247,13 +247,13 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-ecaExY pzTAf"
+          class="sc-gbzWSY eHhwcy"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-jqIZGH dcsmCY table-header"
+                class="sc-jMMfwr cZHnqC table-header"
               >
                 Constraints
               </th>
@@ -261,10 +261,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-gbzWSY gkTicA table-row"
+              class="sc-jqIZGH cbOGkC table-row"
             >
               <td
-                class="sc-jMMfwr igisOH table-properties"
+                class="sc-jGxEUC hTSKjw table-properties"
               >
                  ON ( book:Book ) ASSERT book.isbn IS UNIQUE
               </td>