From 8bb84647b7862fde2adb4e84d40ca82d59d3e31d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20Lundg=C3=A5rd?= <studio@mariuslundgard.com>
Date: Tue, 12 Nov 2019 14:31:28 +0100
Subject: [PATCH] [test-studio] Improve DeveloperPreview appearance + small
 screen fixes

---
 packages/test-studio/src/deskStructure.js     | 30 +++++--------------
 .../previews/developer/DeveloperPreview.js    | 26 ++++++++++++++++
 .../developer/DeveloperPreview.module.css     | 12 ++++++++
 .../src/previews/developer/index.js           |  1 +
 4 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 packages/test-studio/src/previews/developer/DeveloperPreview.js
 create mode 100644 packages/test-studio/src/previews/developer/DeveloperPreview.module.css
 create mode 100644 packages/test-studio/src/previews/developer/index.js

diff --git a/packages/test-studio/src/deskStructure.js b/packages/test-studio/src/deskStructure.js
index e26bdd296be..b47f411ae72 100644
--- a/packages/test-studio/src/deskStructure.js
+++ b/packages/test-studio/src/deskStructure.js
@@ -1,34 +1,14 @@
-/* eslint-disable react/prop-types */
 import React from 'react'
 import RefreshIcon from 'part:@sanity/base/sync-icon'
 import EyeIcon from 'part:@sanity/base/eye-icon'
 import EditIcon from 'part:@sanity/base/edit-icon'
-import Spinner from 'part:@sanity/components/loading/spinner'
-import JSONPretty from 'react-json-pretty'
-import monikai from 'react-json-pretty/dist/monikai'
 import JsonDocumentDump from './components/JsonDocumentDump'
+import {DeveloperPreview} from './previews/developer'
 import S from '@sanity/desk-tool/structure-builder'
 
 // For testing. Bump the timeout to introduce som lag
 const delay = (val, ms = 10) => new Promise(resolve => setTimeout(resolve, ms, val))
 
-function Preview(props) {
-  const {history, draft, published} = props
-  const {snapshot: historical, isLoading} = history.document
-
-  if (!historical && isLoading) {
-    return <Spinner center message="Loading document" />
-  }
-
-  return (
-    <JSONPretty
-      data={historical || draft || published}
-      theme={monikai}
-      mainStyle="white-space: pre-wrap"
-    />
-  )
-}
-
 export default () =>
   S.list()
     .id('root')
@@ -143,7 +123,13 @@ export default () =>
               S.document()
                 .documentId(documentId)
                 .schemaType('author')
-                .views([S.view.form().icon(EditIcon), S.view.component(Preview).icon(EyeIcon)])
+                .views([
+                  S.view.form().icon(EditIcon),
+                  S.view
+                    .component(DeveloperPreview)
+                    .icon(EyeIcon)
+                    .title('Preview')
+                ])
             )
       }),
 
diff --git a/packages/test-studio/src/previews/developer/DeveloperPreview.js b/packages/test-studio/src/previews/developer/DeveloperPreview.js
new file mode 100644
index 00000000000..be2da12950b
--- /dev/null
+++ b/packages/test-studio/src/previews/developer/DeveloperPreview.js
@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react'
+import Spinner from 'part:@sanity/components/loading/spinner'
+import JSONPretty from 'react-json-pretty'
+import monikai from 'react-json-pretty/dist/monikai'
+import styles from './DeveloperPreview.module.css'
+
+function DeveloperPreview(props) {
+  const {history, draft, published} = props
+  const {snapshot: historical, isLoading: isLoadingHistorical} = history.document
+
+  return (
+    <div className={styles.root}>
+      {isLoadingHistorical && <Spinner center message="Loading revision" />}
+
+      <JSONPretty
+        data={historical || draft || published}
+        theme={monikai}
+        mainStyle="white-space: pre-wrap"
+      />
+    </div>
+  )
+}
+
+export default DeveloperPreview
diff --git a/packages/test-studio/src/previews/developer/DeveloperPreview.module.css b/packages/test-studio/src/previews/developer/DeveloperPreview.module.css
new file mode 100644
index 00000000000..d2ab569ab06
--- /dev/null
+++ b/packages/test-studio/src/previews/developer/DeveloperPreview.module.css
@@ -0,0 +1,12 @@
+.root {
+  background: #272822;
+  margin: 0;
+  padding: 1em;
+  min-height: 100%;
+  box-sizing: border-box;
+  word-break: break-word;
+
+  @nest & > div > pre {
+    margin: 0;
+  }
+}
diff --git a/packages/test-studio/src/previews/developer/index.js b/packages/test-studio/src/previews/developer/index.js
new file mode 100644
index 00000000000..01bb81b6a68
--- /dev/null
+++ b/packages/test-studio/src/previews/developer/index.js
@@ -0,0 +1 @@
+export {default as DeveloperPreview} from './DeveloperPreview'