From 854950581c5247921e0050850aa0527f830a306f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 29 Jun 2023 09:53:13 +0100
Subject: [PATCH] App metadata screen fixes, copy code button casing and delete
 app button hidden on publish

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../src/components/deploy/AppActions.svelte   |  9 +++++--
 .../components/start/UpdateAppModal.svelte    |  2 +-
 .../app/[application]/settings/_layout.svelte | 24 ++++++++++++-------
 .../app/[application]/settings/embed.svelte   |  2 +-
 .../settings/name-and-url.svelte              | 18 ++++++++------
 .../builder/src/stores/portal/overview.js     | 21 ----------------
 7 files changed, 37 insertions(+), 40 deletions(-)
 delete mode 100644 packages/builder/src/stores/portal/overview.js

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9dfd11a537..5ed1c6b24a 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -155,6 +155,7 @@ export const getFrontendStore = () => {
           ...INITIAL_FRONTEND_STATE.features,
           ...application.features,
         },
+        icon: application.icon || {},
         initialised: true,
       }))
       screenHistoryStore.reset()
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index 0c478b9992..6f12cc2890 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -275,7 +275,7 @@
                     }
                   }}
                 >
-                  {selectedApp ? `${selectedApp?.url}` : ""}
+                  {$store.url}
                   {#if isPublished}
                     <Icon size="S" name="LinkOut" />
                   {:else}
@@ -344,7 +344,12 @@
 
   <Modal bind:this={updateAppModal} padding={false} width="600px">
     <UpdateAppModal
-      app={selectedApp}
+      app={{
+        name: $store.name,
+        url: $store.url,
+        icon: $store.icon,
+        devId: $store.appId,
+      }}
       onUpdateComplete={async () => {
         await initialiseApp()
       }}
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 3d825003a1..83cd0ad950 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -47,7 +47,7 @@
 
   async function updateApp() {
     try {
-      await apps.update(app.instance._id, {
+      await apps.update(app.devId, {
         name: $values.name?.trim(),
         url: $values.url?.trim(),
         icon: {
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index 225e3977c3..a05e6e0014 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -3,8 +3,14 @@
   import { Page, Layout } from "@budibase/bbui"
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "components/deploy/DeleteModal.svelte"
+  import { apps } from "stores/portal"
+  import { store } from "builderStore"
 
   let deleteModal
+
+  $: filteredApps = $apps.filter(app => app.devId === $store.appId)
+  $: selectedApp = filteredApps?.length ? filteredApps[0] : null
+  $: isPublished = selectedApp?.status === "published"
 </script>
 
 <!-- routify:options index=4 -->
@@ -43,14 +49,16 @@
             url={$url("./version")}
             active={$isActive("./version")}
           />
-          <div class="delete-action">
-            <SideNavItem
-              text="Delete app"
-              on:click={() => {
-                deleteModal.show()
-              }}
-            />
-          </div>
+          {#if !isPublished}
+            <div class="delete-action">
+              <SideNavItem
+                text="Delete app"
+                on:click={() => {
+                  deleteModal.show()
+                }}
+              />
+            </div>
+          {/if}
         </SideNav>
         <slot />
       </Content>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
index 1a9cb57dcf..40450793d7 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/embed.svelte
@@ -39,7 +39,7 @@
             notifications.success("Copied")
           }}
         >
-          Copy Code
+          Copy code
         </Button>
       </div>
     {:else}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
index 56a10553dc..0ff86d2e4d 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte
@@ -19,11 +19,10 @@
 
   $: filteredApps = $apps.filter(app => app.devId == $store.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
-  $: appUrl = `${window.origin}/app${app?.url}`
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
   const initialiseApp = async () => {
-    const applicationPkg = await API.fetchAppPackage(app.devId)
+    const applicationPkg = await API.fetchAppPackage($store.appId)
     await store.actions.initialise(applicationPkg)
   }
 </script>
@@ -37,7 +36,7 @@
 
   <Layout noPadding gap="XXS">
     <Label size="L">Name</Label>
-    <Body>{app?.name}</Body>
+    <Body>{$store?.name}</Body>
   </Layout>
 
   <Layout noPadding gap="XS">
@@ -45,15 +44,15 @@
     <div class="icon">
       <Icon
         size="L"
-        name={app?.icon?.name || "Apps"}
-        color={app?.icon?.color}
+        name={$store?.icon?.name || "Apps"}
+        color={$store?.icon?.color}
       />
     </div>
   </Layout>
 
   <Layout noPadding gap="XXS">
     <Label size="L">URL</Label>
-    <Body>{appUrl}</Body>
+    <Body>{$store.url}</Body>
   </Layout>
 
   <div>
@@ -75,7 +74,12 @@
 
 <Modal bind:this={updatingModal} padding={false} width="600px">
   <UpdateAppModal
-    {app}
+    app={{
+      name: $store.name,
+      url: $store.url,
+      icon: $store.icon,
+      devId: $store.appId,
+    }}
     onUpdateComplete={async () => {
       await initialiseApp()
     }}
diff --git a/packages/builder/src/stores/portal/overview.js b/packages/builder/src/stores/portal/overview.js
deleted file mode 100644
index aa5dc4cac4..0000000000
--- a/packages/builder/src/stores/portal/overview.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { writable, derived } from "svelte/store"
-import { apps } from "./apps"
-
-const createOverviewStore = () => {
-  const store = writable({
-    selectedAppId: null,
-  })
-  const derivedStore = derived([store, apps], ([$store, $apps]) => {
-    return {
-      ...$store,
-      selectedApp: $apps?.find(app => app.devId === $store.selectedAppId),
-    }
-  })
-
-  return {
-    update: store.update,
-    subscribe: derivedStore.subscribe,
-  }
-}
-
-export const overview = createOverviewStore()