Visualize diff function in video

app/src/components/CodeDiff.tsx

@@ -35,8 +35,7 @@ class CodeDiff extends React.Component<Props, {}> {
         return <div key={key}>{lines}</div>
       }
 
-      return change.value
-        .slice(0, -1) // Remove trailing newline
+      return this.trimNewlineRight(change.value)
         .split('\n')
         .map((line, idx) => {
           return <div key={`${key}-${idx}`} className={this.props.classes.line}><span className={this.cssClassForChange(change)}>{line}</span></div>
@@ -50,6 +49,14 @@ class CodeDiff extends React.Component<Props, {}> {
     )
   }
 
+  private trimNewlineRight(str: string) {
+    if (str.slice(-1) === '\n') {
+      return str.slice(0, -1)
+    }
+
+    return str
+  }
+
   private cssClassForChange(change: diff.Change) {
     if (change.added === true) {
       return this.props.classes.addition

app/src/components/Sidebar/Publish/Publish.tsx

@@ -169,7 +169,7 @@ class Publish extends React.Component<Props, State> {
 
     return (
       <Tooltip title="Format JSON">
-        <Fab style={{ width: '32px', height: '32px', marginLeft: '8px' }} onClick={this.formatJson}>
+        <Fab style={{ width: '32px', height: '32px', marginLeft: '8px' }} onClick={this.formatJson} id="sidebar-publish-format-json">
           <FormatAlignLeft style={{ fontSize: '20px' }} />
         </Fab>
       </Tooltip>

app/src/components/Sidebar/Sidebar.tsx

@@ -147,13 +147,13 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <ToggleButtonGroup value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
-        <ToggleButton value="diff">
+      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
           <Tooltip title="Show difference between the current and the last message">
             <Code />
           </Tooltip>
         </ToggleButton>
-        <ToggleButton value="raw">
+        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
           <Tooltip title="Raw value">
             <Reorder />
           </Tooltip>