Add a save button to the template data input for safety

Signed-off-by: Axel Boberg <[email protected]>

app/bridge.css

@@ -121,6 +121,10 @@ button {
   justify-content: center;
 }
 
+.Button:disabled {
+  opacity: 0.6;
+}
+
 /* Headings */
 
 h1, .u-heading--1 {

app/components/Frame/index.jsx

@@ -32,6 +32,7 @@ const COPY_THEME_VARIABLES = [
   '--base-color--accent2',
   '--base-color--accent3',
   '--base-color--accent4',
+  '--base-color--accent5',
   '--base-color--grey1',
   '--base-color--grey2',
   '--base-color--grey3',

app/components/FrameComponent/index.jsx

@@ -36,6 +36,7 @@ const COPY_THEME_VARIABLES = [
   '--base-color--accent2',
   '--base-color--accent3',
   '--base-color--accent4',
+  '--base-color--accent5',
   '--base-color--grey1',
   '--base-color--grey2',
   '--base-color--grey3',

app/theme.css

@@ -6,6 +6,8 @@
   --base-color--accent2: #465055;
   --base-color--accent3: #fafafa;
   --base-color--accent4: #b9b9b9;
+  --base-color--accent5: #0F418C;
+
   --base-color--grey1: #101012;
   --base-color--grey2: #404144;
   --base-color--grey3: #232427;
@@ -35,6 +37,8 @@
   --base-color--accent2: #7D9196;
   --base-color--accent3: #fafafa;
   --base-color--accent4: #b9b9b9;
+  --base-color--accent5: #0F418C;
+
   --base-color--grey1: #ebebeb;
   --base-color--grey2: #dedede;
   --base-color--grey3: #cccccc;
@@ -62,6 +66,8 @@
   --base-color--accent2: #641E78;
   --base-color--accent3: #fafafa;
   --base-color--accent4: #641E78;
+  --base-color--accent5: #0F418C;
+
   --base-color--grey1: #101012;
   --base-color--grey2: #404144;
   --base-color--grey3: #232427;

plugins/caspar/app/components/TemplateDataHeader/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import './style.css'
+
+export const TemplateDataHeader = ({ hasUnsavedChanges, onSave = () => {} }) => {
+  if (!hasUnsavedChanges) {
+    return <></>
+  }
+
+  return (
+    <header className='TemplateDataHeader'>
+      <div className='TemplateDataHeader-section'>
+        Save changes
+      </div>
+      <div className='TemplateDataHeader-section'>
+        <button className='Button Button--ghost' disabled={!hasUnsavedChanges} onClick={() => onSave()}>Save</button>
+      </div>
+    </header>
+  )
+}

plugins/caspar/app/components/TemplateDataHeader/style.css

@@ -0,0 +1,17 @@
+.TemplateDataHeader {
+  display: flex;
+
+  width: 100%;
+  padding: 5px 5px 5px 10px;
+
+  border-radius: 6px;
+  background: var(--base-color--accent5);
+
+  align-items: center;
+  justify-content: space-between;
+}
+
+.TemplateDataHeader-section {
+  display: flex;
+  align-items: center;
+}

plugins/caspar/app/style.css

@@ -24,4 +24,8 @@ html, body, .View--flex {
 
 .u-width--100pct {
   width: 100%;
+}
+
+.u-marginBottom--5px {
+  margin-bottom: 5px;
 }

plugins/caspar/app/views/InspectorTemplate.jsx

@@ -4,6 +4,9 @@ import bridge from 'bridge'
 import { SharedContext } from '../sharedContext'
 
 import { Monaco } from '../components/Monaco'
+import { TemplateDataHeader } from '../components/TemplateDataHeader'
+
+const DEFAULT_VALUE = ['{', '', '}'].join('\n')
 
 export const InspectorTemplate = () => {
   const [state] = React.useContext(SharedContext)
@@ -12,6 +15,8 @@ export const InspectorTemplate = () => {
   const [id, setId] = React.useState()
   const [value, setValue] = React.useState()
 
+  const [unsavedValue, setUnsavedValue] = React.useState()
+
   const selectionRef = React.useRef([])
 
   React.useEffect(() => {
@@ -32,6 +37,7 @@ export const InspectorTemplate = () => {
       const item = await bridge.items.getItem(selection[0])
       setId(item?.id)
       setValue(item?.data?.caspar?.templateDataString)
+      setUnsavedValue(undefined)
     }
 
     loadSelection()
@@ -43,7 +49,7 @@ export const InspectorTemplate = () => {
     }
   }
 
-  function handleChange(newValue) {
+  function handleSave (newValue) {
     try {
       const parsed = JSON.parse(newValue)
       handleNewValue({
@@ -54,21 +60,33 @@ export const InspectorTemplate = () => {
           }
         }
       })
+
+      setValue(newValue)
+      setUnsavedValue(undefined)
     } catch (_) {
       /*
       Invalid JSON data was passed from Monaco
       */
     }
   }
 
+  function handleChange (newValue) {
+    setUnsavedValue(newValue)
+  }
+
   return (
-    <div className='View--spread'>
-      <Monaco
-        reset={id}
-        value={value ?? ['{', '', '}'].join('\n')}
-        defaultValue={['{', '', '}'].join('\n')}
-        onChange={newValue => handleChange(newValue)}
-      />
-    </div>
+    <>
+      <div className='View--spread u-marginBottom--5px'>
+        <TemplateDataHeader hasUnsavedChanges={unsavedValue && unsavedValue !== value} onSave={() => handleSave(unsavedValue)} />
+      </div>
+      <div className='View--spread'>
+        <Monaco
+          reset={id}
+          value={value ?? DEFAULT_VALUE}
+          defaultValue={DEFAULT_VALUE}
+          onChange={newValue => handleChange(newValue)}
+        />
+      </div>
+    </>
   )
 }