From d09dd8ddc6735a232a4365a0ac507e33dcc5545b Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 8 Dec 2018 13:29:53 +0200
Subject: [PATCH] Highlight edited fields

---
 .../src/components/PreferenceTable.js         | 34 +++++++++++--------
 .../src/pages/dashboard/BaseMainView.js       |  2 +-
 .../frontend/src/pages/dashboard/Client.js    | 30 +++++++++-------
 .../frontend/src/pages/dashboard/Instance.js  |  9 +++--
 .../frontend/src/pages/dashboard/index.js     | 12 ++++---
 .../src/style/lib/preferencetable.sass        |  5 +++
 6 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/maubot/management/frontend/src/components/PreferenceTable.js b/maubot/management/frontend/src/components/PreferenceTable.js
index 92dc3ce..ee10726 100644
--- a/maubot/management/frontend/src/components/PreferenceTable.js
+++ b/maubot/management/frontend/src/components/PreferenceTable.js
@@ -34,28 +34,32 @@ export const PrefTable = ({ children, wrapperClass }) => {
     )
 }
 
-export const PrefRow = ({ name, fullWidth = false, labelFor = undefined, children }) => (
-    <div className={`entry ${fullWidth ? "full-width" : ""}`}>
-        <label htmlFor={labelFor}>{name}</label>
-        <div className="value">{children}</div>
-    </div>
-)
+export const PrefRow =
+    ({ name, fullWidth = false, labelFor = undefined, changed = false, children }) => (
+        <div className={`entry ${fullWidth ? "full-width" : ""} ${changed ? "changed" : ""}`}>
+            <label htmlFor={labelFor}>{name}</label>
+            <div className="value">{children}</div>
+        </div>
+    )
 
-export const PrefInput = ({ rowName, fullWidth = false, ...args }) => (
-    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}>
-        <input {...args} id={rowName}/>
+export const PrefInput = ({ rowName, value, origValue, fullWidth = false, ...args }) => (
+    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}
+             changed={origValue !== undefined && value !== origValue}>
+        <input {...args} value={value} id={rowName}/>
     </PrefRow>
 )
 
-export const PrefSwitch = ({ rowName, fullWidth = false, ...args }) => (
-    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}>
-        <Switch {...args} id={rowName}/>
+export const PrefSwitch = ({ rowName, active, origActive, fullWidth = false, ...args }) => (
+    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}
+             changed={origActive !== undefined && active !== origActive}>
+        <Switch {...args} active={active} id={rowName}/>
     </PrefRow>
 )
 
-export const PrefSelect = ({ rowName, fullWidth = false, ...args }) => (
-    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}>
-        <Select className="select" {...args} id={rowName}/>
+export const PrefSelect = ({ rowName, value, origValue, fullWidth = false, ...args }) => (
+    <PrefRow name={rowName} fullWidth={fullWidth} labelFor={rowName}
+             changed={origValue !== undefined && value.id !== origValue}>
+        <Select className="select" {...args} id={rowName} value={value}/>
     </PrefRow>
 )
 
diff --git a/maubot/management/frontend/src/pages/dashboard/BaseMainView.js b/maubot/management/frontend/src/pages/dashboard/BaseMainView.js
index 2ad72b1..7a8ba47 100644
--- a/maubot/management/frontend/src/pages/dashboard/BaseMainView.js
+++ b/maubot/management/frontend/src/pages/dashboard/BaseMainView.js
@@ -34,7 +34,7 @@ class BaseMainView extends Component {
     }
 
     get isNew() {
-        return !this.props.entry
+        return !this.props.entry.id
     }
 
     inputChange = event => {
diff --git a/maubot/management/frontend/src/pages/dashboard/Client.js b/maubot/management/frontend/src/pages/dashboard/Client.js
index c4ed60d..5d965d4 100644
--- a/maubot/management/frontend/src/pages/dashboard/Client.js
+++ b/maubot/management/frontend/src/pages/dashboard/Client.js
@@ -157,25 +157,31 @@ class Client extends BaseMainView {
     renderPreferences = () => (
         <PrefTable>
             <PrefInput rowName="User ID" type="text" disabled={!this.isNew} fullWidth={true}
-                       name={this.isNew ? "id" : ""} value={this.state.id} className="id"
+                       name={this.isNew ? "id" : ""} className="id"
+                       value={this.state.id} origValue={this.props.entry.id}
                        placeholder="@fancybot:example.com" onChange={this.inputChange}/>
             <PrefInput rowName="Homeserver" type="text" name="homeserver"
-                       value={this.state.homeserver} placeholder="https://example.com"
-                       onChange={this.inputChange}/>
+                       value={this.state.homeserver} origValue={this.props.entry.homeserver}
+                       placeholder="https://example.com" onChange={this.inputChange}/>
             <PrefInput rowName="Access token" type="text" name="access_token"
-                       value={this.state.access_token} onChange={this.inputChange}
-                       placeholder="MDAxYWxvY2F0aW9uIG1hdHJpeC5sb2NhbAowMDEzaWRlbnRpZmllc"/>
-            <PrefInput rowName="Display name" type="text" name="displayname"
-                       value={this.state.displayname} placeholder="My fancy bot"
+                       value={this.state.access_token} origValue={this.props.entry.access_token}
+                       placeholder="MDAxYWxvY2F0aW9uIG1hdHJpeC5sb2NhbAowMDEzaWRlbnRpZmllc"
                        onChange={this.inputChange}/>
+            <PrefInput rowName="Display name" type="text" name="displayname"
+                       value={this.state.displayname} origValue={this.props.entry.displayname}
+                       placeholder="My fancy bot" onChange={this.inputChange}/>
             <PrefInput rowName="Avatar URL" type="text" name="avatar_url"
-                       value={this.state.avatar_url} onChange={this.inputChange}
-                       placeholder="mxc://example.com/mbmwyoTvPhEQPiCskcUsppko"/>
-            <PrefSwitch rowName="Sync" active={this.state.sync}
+                       value={this.state.avatar_url} origValue={this.props.entry.avatar_url}
+                       placeholder="mxc://example.com/mbmwyoTvPhEQPiCskcUsppko"
+                       onChange={this.inputChange}/>
+            <PrefSwitch rowName="Sync"
+                        active={this.state.sync} origActive={this.props.entry.sync}
                         onToggle={sync => this.setState({ sync })}/>
-            <PrefSwitch rowName="Autojoin" active={this.state.autojoin}
+            <PrefSwitch rowName="Autojoin"
+                        active={this.state.autojoin} origActive={this.props.entry.autojoin}
                         onToggle={autojoin => this.setState({ autojoin })}/>
-            <PrefSwitch rowName="Enabled" active={this.state.enabled}
+            <PrefSwitch rowName="Enabled"
+                        active={this.state.enabled} origActive={this.props.entry.enabled}
                         onToggle={enabled => this.setState({
                             enabled,
                             started: enabled && this.state.started,
diff --git a/maubot/management/frontend/src/pages/dashboard/Instance.js b/maubot/management/frontend/src/pages/dashboard/Instance.js
index d89cda0..83ceed5 100644
--- a/maubot/management/frontend/src/pages/dashboard/Instance.js
+++ b/maubot/management/frontend/src/pages/dashboard/Instance.js
@@ -138,15 +138,18 @@ class Instance extends BaseMainView {
                 <PrefInput rowName="ID" type="text" name="id" value={this.state.id}
                            placeholder="fancybotinstance" onChange={this.inputChange}
                            disabled={!this.isNew} fullWidth={true} className="id"/>
-                <PrefSwitch rowName="Enabled" active={this.state.enabled}
+                <PrefSwitch rowName="Enabled"
+                            active={this.state.enabled} origActive={this.props.entry.enabled}
                             onToggle={enabled => this.setState({ enabled })}/>
-                <PrefSwitch rowName="Running" active={this.state.started}
+                <PrefSwitch rowName="Running"
+                            active={this.state.started} origActive={this.props.entry.started}
                             onToggle={started => this.setState({ started })}/>
                 <PrefSelect rowName="Primary user" options={this.clientOptions}
                             isSearchable={false} value={this.selectedClientEntry}
+                            origValue={this.props.entry.primary_user}
                             onChange={({ id }) => this.setState({ primary_user: id })}/>
                 <PrefSelect rowName="Type" options={this.typeOptions} isSearchable={false}
-                            value={this.selectedPluginEntry}
+                            value={this.selectedPluginEntry} origValue={this.props.entry.type}
                             onChange={({ id }) => this.setState({ type: id })}/>
             </PrefTable>
             {!this.isNew &&
diff --git a/maubot/management/frontend/src/pages/dashboard/index.js b/maubot/management/frontend/src/pages/dashboard/index.js
index c593bd0..4aabe92 100644
--- a/maubot/management/frontend/src/pages/dashboard/index.js
+++ b/maubot/management/frontend/src/pages/dashboard/index.js
@@ -191,11 +191,13 @@ class Dashboard extends Component {
                     <Route path="/" exact render={() => <Home openLog={this.openLog}/>}/>
                     <Route path="/new/instance" render={() =>
                         <Instance onChange={newEntry => this.add("instances", newEntry)}
-                                  ctx={this.state}/>}/>
-                    <Route path="/new/client" render={() => <Client
-                        onChange={newEntry => this.add("clients", newEntry)}/>}/>
-                    <Route path="/new/plugin" render={() => <Plugin
-                        onChange={newEntry => this.add("plugins", newEntry)}/>}/>
+                                  entry={{}} ctx={this.state}/>}/>
+                    <Route path="/new/client" render={() =>
+                        <Client entry={{}} onChange={newEntry =>
+                            this.add("clients", newEntry)}/>}/>
+                    <Route path="/new/plugin" render={() =>
+                        <Plugin entry={{}} onChange={newEntry =>
+                            this.add("plugins", newEntry)}/>}/>
                     <Route path="/instance/:id" render={({ match }) =>
                         this.renderView("instances", Instance, match.params.id)}/>
                     <Route path="/client/:id" render={({ match }) =>
diff --git a/maubot/management/frontend/src/style/lib/preferencetable.sass b/maubot/management/frontend/src/style/lib/preferencetable.sass
index c72dff1..35b3ab5 100644
--- a/maubot/management/frontend/src/style/lib/preferencetable.sass
+++ b/maubot/management/frontend/src/style/lib/preferencetable.sass
@@ -32,6 +32,11 @@
         &.full-width
             width: 100%
 
+        &.changed > label
+            font-weight: bold
+            &:after
+                content: "*"
+
         > label, > .value
             display: block
             width: 100%