Feedback and some fixes. Fix for app list getting squashed when the app metadata was updated.

packages/builder/src/components/common/UpdateAppForm.svelte

@@ -17,44 +17,49 @@
 
   let updating = false
   let edited = false
+  let initialised = false
 
   $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId)
   $: app = filteredApps.length ? filteredApps[0] : {}
   $: appDeployed = app?.status === AppStatus.DEPLOYED
 
-  $: appIdParts = app.appId ? app.appId?.split("_") : []
-  $: appId = appIdParts.slice(-1)[0]
+  $: appName = $appStore.name
+  $: appURL = $appStore.url
+  $: appIconName = $appStore.icon?.name
+  $: appIconColor = $appStore.icon?.color
 
   $: appMeta = {
-    name: $appStore.name,
-    url: $appStore.url,
-    iconName: $appStore.icon?.name,
-    iconColor: $appStore.icon?.color,
+    name: appName,
+    url: appURL,
+    iconName: appIconName,
+    iconColor: appIconColor,
   }
 
-  // On app update, reset the state.
-  $: if (appMeta) {
+  const initForm = appMeta => {
     edited = false
-    const { name, url, iconName, iconColor } = appMeta
     values.set({
-      name,
-      url,
-      iconName,
-      iconColor,
+      ...appMeta,
     })
 
-    setupValidation()
+    if (!initialised) {
+      setupValidation()
+      initialised = true
+    }
   }
 
-  $: if (values && $values) {
-    const { url } = $values || {}
+  const validate = (vals, appMeta) => {
+    const { url } = vals || {}
     validation.check({
-      ...$values,
+      ...vals,
       url: url?.[0] === "/" ? url.substring(1, url.length) : url,
     })
-    edited = !isEqual($values, appMeta)
+    edited = !isEqual(vals, appMeta)
   }
 
+  // On app/apps update, reset the state.
+  $: initForm(appMeta)
+  $: validate($values, appMeta)
+
   const resolveAppUrl = (template, name) => {
     let parsedName
     const resolvedName = resolveAppName(null, name)
@@ -89,26 +94,13 @@
   }
 
   const setupValidation = async () => {
-    const applications = $appsStore.apps
     appValidation.name(validation, {
-      apps: applications,
-      currentApp: {
-        ...app,
-        appId,
-      },
+      apps: $appsStore.apps,
+      currentApp: app,
     })
     appValidation.url(validation, {
-      apps: applications,
-      currentApp: {
-        ...app,
-        appId,
-      },
-    })
-    // init validation
-    const { url } = $values
-    validation.check({
-      ...$values,
-      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+      apps: $appsStore.apps,
+      currentApp: app,
     })
   }
 
@@ -182,8 +174,10 @@
             await updateApp()
             updating = false
           }}
-          disabled={appDeployed || updating || !edited}>Save</Button
+          disabled={appDeployed || updating || !edited || !$validation.valid}
         >
+          Save
+        </Button>
       {:else}
         <div class="edit-info">
           <Icon size="S" name="Info" /> Unpublish your app to edit name and URL

packages/builder/src/components/common/UpdateAppTopNav.svelte

@@ -40,7 +40,6 @@
   customZindex={998}
   bind:this={formPopover}
   align="center"
-  disabled={!isPublished}
   anchor={formPopoverAnchor}
   offset={20}
   on:close={() => {

packages/builder/src/helpers/validation/yup/app.js

@@ -19,11 +19,10 @@ export const name = (validation, { apps, currentApp } = { apps: [] }) => {
             // exit early, above validator will fail
             return true
           }
-          if (currentApp) {
-            // filter out the current app if present
-            apps = apps.filter(app => app.appId !== currentApp.appId)
-          }
           return !apps
+            .filter(app => {
+              return app.appId !== currentApp?.appId
+            })
             .map(app => app.name)
             .some(appName => appName.toLowerCase() === value.toLowerCase())
         }

packages/builder/src/stores/portal/apps.js

@@ -131,7 +131,7 @@ export class AppsStore extends BudiStore {
       if (updatedAppIndex !== -1) {
         let updatedApp = state.apps[updatedAppIndex]
         updatedApp = { ...updatedApp, ...value }
-        state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp)
+        state.apps.splice(updatedAppIndex, 1, updatedApp)
       }
       return state
     })