From 93230b7207fc6de385ad584fe6c957052a9d0ce9 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 14 Dec 2021 15:30:20 +0000
Subject: [PATCH] update handling of app updates

---
 .../src/components/start/AppRow.svelte        | 14 ++-------
 .../components/start/ChooseIconModal.svelte   | 12 ++++---
 .../components/start/CreateAppModal.svelte    |  5 ++-
 .../components/start/UpdateAppModal.svelte    |  2 +-
 .../pages/builder/portal/apps/index.svelte    |  3 +-
 packages/builder/src/stores/portal/apps.js    | 31 +++----------------
 6 files changed, 21 insertions(+), 46 deletions(-)

diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 50faf48d55..7466d3717d 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -7,7 +7,6 @@
     MenuItem,
     StatusLight,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
 
   export let app
@@ -19,19 +18,12 @@
   export let unpublishApp
   export let releaseLock
   export let editIcon
-
-  $: color =
-    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon
-      ?.color || ""
-  $: name =
-    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon?.name ||
-    "Apps"
 </script>
 
 <div class="title">
   <div style="display: flex;">
-    <div style="color: {color}">
-      <Icon size="XL" {name} />
+    <div style="color: {app.icon?.color || ''}">
+      <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
     <div class="name" on:click={() => editApp(app)}>
       <Heading size="XS">
@@ -99,7 +91,7 @@
       <MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
       <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
     {/if}
-    <MenuItem on:click={() => editIcon(app)} icon="Edit">Edit Icon</MenuItem>
+    <MenuItem on:click={() => editIcon(app)} icon="Brush">Edit Icon</MenuItem>
   </ActionMenu>
 </div>
 
diff --git a/packages/builder/src/components/start/ChooseIconModal.svelte b/packages/builder/src/components/start/ChooseIconModal.svelte
index 3ab3e5b35b..c3050f8b6c 100644
--- a/packages/builder/src/components/start/ChooseIconModal.svelte
+++ b/packages/builder/src/components/start/ChooseIconModal.svelte
@@ -51,9 +51,11 @@
   }
 
   const save = async () => {
-    await apps.updateIcon(app.instance._id, {
-      name: selectedIcon,
-      color: selectedColor,
+    await apps.update(app.instance._id, {
+      icon: {
+        name: selectedIcon,
+        color: selectedColor,
+      },
     })
   }
 </script>
@@ -66,7 +68,7 @@
   >
     <div class="scrollable-icons">
       <div class="title-spacing">
-        <Label>Select an Icon:</Label>
+        <Label>Select an Icon</Label>
       </div>
       <div class="grid">
         {#each iconsList as item}
@@ -82,7 +84,7 @@
     </div>
     <div class="color-selection">
       <div>
-        <Label>Select a Color:</Label>
+        <Label>Select a Color</Label>
       </div>
       <div class="color-selection-item">
         <ColorPicker
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index a785f9933b..178588f608 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -15,6 +15,7 @@
 
   export let template
   export let inline
+
   const values = writable({ name: null })
   const errors = writable({})
   const touched = writable({})
@@ -195,7 +196,9 @@
       error={$touched.name && $errors.name}
       on:blur={() => ($touched.name = true)}
       label="Name"
-      placeholder={`${$auth.user.firstName}'s first app`}
+      placeholder={$auth.user.firstName
+        ? `${$auth.user.firstName}'s app`
+        : "My app"}
     />
   </ModalContent>
 {/if}
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 83b5710db8..432b13c7c3 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -77,7 +77,7 @@
   async function updateApp() {
     try {
       // Update App
-      await apps.update(app.instance._id, $values.name.trim())
+      await apps.update(app.instance._id, { name: $values.name.trim() })
       hide()
     } catch (error) {
       console.error(error)
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 93dd68c70a..d7c9e91aed 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -366,8 +366,7 @@
       </div>
       <div class="appTable">
         {#each filteredApps as app (app.appId)}
-          <svelte:component
-            this={AppRow}
+          <AppRow
             {releaseLock}
             {editIcon}
             {app}
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index 5f29a39656..de944c057d 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -65,37 +65,17 @@ export function createAppStore() {
     }
   }
 
-  async function updateIcon(appId, icon) {
-    const response = await api.put(`/api/applications/${appId}`, { icon })
-    if (response.status === 200) {
-      store.update(state => {
-        const updatedAppIndex = state.findIndex(
-          app => app.instance._id === appId
-        )
-
-        if (updatedAppIndex !== -1) {
-          const updatedApp = state[updatedAppIndex]
-          updatedApp.icon = icon
-          state.apps = state.splice(updatedAppIndex, 1, updatedApp)
-        }
-
-        return state
-      })
-    } else {
-      throw new Error("Error updating icon")
-    }
-  }
-
-  async function update(appId, name) {
-    const response = await api.put(`/api/applications/${appId}`, { name })
+  async function update(appId, value) {
+    console.log({ value })
+    const response = await api.put(`/api/applications/${appId}`, { ...value })
     if (response.status === 200) {
       store.update(state => {
         const updatedAppIndex = state.findIndex(
           app => app.instance._id === appId
         )
         if (updatedAppIndex !== -1) {
-          const updatedApp = state[updatedAppIndex]
-          updatedApp.name = name
+          let updatedApp = state[updatedAppIndex]
+          updatedApp = { ...updatedApp, ...value }
           state.apps = state.splice(updatedAppIndex, 1, updatedApp)
         }
         return state
@@ -109,7 +89,6 @@ export function createAppStore() {
     subscribe: store.subscribe,
     load,
     update,
-    updateIcon,
   }
 }