Merge pull request #11070 from Budibase/fix/general-embed-fixes

General embed fixes
2024-07-04 05:50:57 +12:00 · 2023-06-30 11:32:20 +01:00 · 2023-06-30 11:32:20 +01:00 · 8aabbad269
parent 06ae66ac70 a5dae87fa9
commit 8aabbad269
7 changed files with 45 additions and 35 deletions
--- 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()
--- 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,
+        appId: $store.appId,
+      }}
      onUpdateComplete={async () => {
        await initialiseApp()
      }}
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@ -16,6 +16,9 @@
  export let app
  export let onUpdateComplete

+  $: appIdParts = app.appId ? app.appId?.split("_") : []
+  $: appId = appIdParts.slice(-1)[0]
+
  const values = writable({
    name: app.name,
    url: app.url,
@ -35,8 +38,20 @@

  const setupValidation = async () => {
    const applications = svelteGet(apps)
-    appValidation.name(validation, { apps: applications, currentApp: app })
-    appValidation.url(validation, { apps: applications, currentApp: app })
+    appValidation.name(validation, {
+      apps: applications,
+      currentApp: {
+        ...app,
+        appId,
+      },
+    })
+    appValidation.url(validation, {
+      apps: applications,
+      currentApp: {
+        ...app,
+        appId,
+      },
+    })
    // init validation
    const { url } = $values
    validation.check({
@ -47,7 +62,7 @@

  async function updateApp() {
    try {
-      await apps.update(app.instance._id, {
+      await apps.update(app.appId, {
        name: $values.name?.trim(),
        url: $values.url?.trim(),
        icon: {
--- a/packages/builder/src/helpers/validation/yup/app.js
+++ b/packages/builder/src/helpers/validation/yup/app.js
@ -52,7 +52,13 @@ export const url = (validation, { apps, currentApp } = { apps: [] }) => {
          }
          return !apps
            .map(app => app.url)
-            .some(appUrl => appUrl?.toLowerCase() === value.toLowerCase())
+            .some(appUrl => {
+              const url =
+                appUrl?.[0] === "/"
+                  ? appUrl.substring(1, appUrl.length)
+                  : appUrl
+              return url?.toLowerCase() === value.toLowerCase()
+            })
        }
      )
      .test("valid-url", "Not a valid URL", value => {
--- 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}
--- 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,
+      appId: $store.appId,
+    }}
    onUpdateComplete={async () => {
      await initialiseApp()
    }}
--- a/packages/builder/src/stores/portal/overview.js
+++ b/packages/builder/src/stores/portal/overview.js
@ -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()