From 5c532e1543afaea754aa0dfaa31422e1c4310f4e Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 26 Jun 2020 11:04:50 +0200
Subject: [PATCH] sets up frontend side of updating users

---
 .../src/components/settings/UserRow.svelte        |  4 +++-
 .../src/components/settings/tabs/Users.svelte     | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/settings/UserRow.svelte b/packages/builder/src/components/settings/UserRow.svelte
index 8e70df0bbf..560b72c125 100644
--- a/packages/builder/src/components/settings/UserRow.svelte
+++ b/packages/builder/src/components/settings/UserRow.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
   import { Input, Select, Button } from "@budibase/bbui"
   export let user
 </script>
@@ -9,7 +11,7 @@
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>
-  <Button on:click>Edit</Button>
+  <Button on:click={() => dispatch('save', user)}>Edit</Button>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
index 3be9a38cd7..3e54df6597 100644
--- a/packages/builder/src/components/settings/tabs/Users.svelte
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -25,6 +25,17 @@
     }
   }
 
+  // Update user!
+  async function updateUser(event) {
+    const response = await api.put(`/api/users`, event.detail)
+    const users = await response.json()
+    backendUiStore.update(state => {
+      state.users = users
+      return state
+    })
+    fetchUsersPromise = fetchUsers()
+  }
+
   // Get users
   async function fetchUsers() {
     const response = await api.get(`/api/users`)
@@ -67,7 +78,7 @@
       <ul>
         {#each users as user}
           <li>
-            <UserRow {user} />
+            <UserRow {user} on:save={updateUser} />
           </li>
         {:else}
           <li>No Users found</li>
@@ -89,7 +100,7 @@
     display: grid;
     grid-gap: 12px;
     border-radius: 5px;
-    background-color: var(--light-grey);
+    background-color: var(--grey-2);
     padding: 12px 12px 18px 12px;
   }
   .background.create {