From f2b1125e0ba55425207f2d4280390c73aef86ef5 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <maurits.lourens@gmail.com>
Date: Tue, 27 Jul 2021 17:34:18 +0200
Subject: [PATCH] rename an app

---
 .../src/components/start/AppCard.svelte       |   4 +
 .../src/components/start/AppRow.svelte        |   2 +
 .../components/start/UpdateAppModal.svelte    | 111 ++++++++++++++++++
 .../pages/builder/portal/apps/index.svelte    |  14 +++
 packages/builder/src/stores/portal/apps.js    |  19 +++
 5 files changed, 150 insertions(+)
 create mode 100644 packages/builder/src/components/start/UpdateAppModal.svelte

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index e41ffc4469..3e19bfa022 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -15,6 +15,7 @@
   export let exportApp
   export let viewApp
   export let editApp
+  export let updateApp
   export let deleteApp
   export let unpublishApp
   export let releaseLock
@@ -53,6 +54,9 @@
           </MenuItem>
         {/if}
         {#if !app.deployed}
+          <MenuItem on:click={() => updateApp(app)} icon="Edit">
+            Update
+          </MenuItem>
           <MenuItem on:click={() => deleteApp(app)} icon="Delete">
             Delete
           </MenuItem>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 85bad84376..f8ecbf3320 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -14,6 +14,7 @@
   export let exportApp
   export let viewApp
   export let editApp
+  export let updateApp
   export let deleteApp
   export let unpublishApp
   export let releaseLock
@@ -82,6 +83,7 @@
       </MenuItem>
     {/if}
     {#if !app.deployed}
+      <MenuItem on:click={() => updateApp(app)} icon="Edit">Update</MenuItem>
       <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
     {/if}
   </ActionMenu>
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
new file mode 100644
index 0000000000..6977b42a32
--- /dev/null
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -0,0 +1,111 @@
+<script>
+  import { writable, get as svelteGet } from "svelte/store"
+  import {
+    notifications,
+    Input,
+    Modal,
+    ModalContent,
+    Body,
+  } from "@budibase/bbui"
+  import { hostingStore } from "builderStore"
+  import { apps } from "stores/portal"
+  import { string, object } from "yup"
+  import { onMount } from "svelte"
+  import { capitalise } from "helpers"
+
+  const values = writable({ name: null })
+  const errors = writable({})
+  const touched = writable({})
+  const validator = {
+    name: string().required("Your application must have a name"),
+  }
+
+  export let app;
+
+  let modal;
+  let valid = false
+  let dirty = false;
+  $: checkValidity($values, validator)
+  $: {
+    // prevent validation by setting name to undefined without an app
+    if (app) {
+      $values.name = app?.name
+    }
+  }
+
+  onMount(async () => {
+    await hostingStore.actions.fetchDeployedApps()
+    const existingAppNames = svelteGet(hostingStore).deployedAppNames
+    validator.name = string()
+      .required("Your application must have a name")
+      .test(
+        "non-existing-app-name",
+        "Another app with the same name already exists",
+        value => {
+          return !existingAppNames.some(
+            appName => dirty && appName.toLowerCase() === value.toLowerCase()
+          )
+        }
+      )
+  })
+
+  const checkValidity = async (values, validator) => {
+    const obj = object().shape(validator)
+    Object.keys(validator).forEach(key => ($errors[key] = null))
+    try {
+      await obj.validate(values, { abortEarly: false })
+    } catch (validationErrors) {
+      validationErrors.inner.forEach(error => {
+        $errors[error.path] = capitalise(error.message)
+      })
+    }
+    valid = await obj.isValid(values)
+  }
+
+  async function updateApp() {
+    try {
+      // Update App
+      await apps.update(app.instance._id, $values.name);
+      hide();
+    } catch (error) {
+      console.error(error)
+      notifications.error(error)
+    }
+  }
+
+  export const show = () => {
+    modal.show()
+  }
+  export const hide = () => {
+    modal.hide()
+  }
+
+  const onCancel = () => {
+    hide();
+  }
+
+  const onShow = () => {
+    dirty = false;
+  }
+
+</script>
+<Modal bind:this={modal} on:hide={onCancel} on:show={onShow}>
+  <ModalContent
+    title={"Update app"}
+    confirmText={"Update app"}
+    onConfirm={updateApp}
+    disabled={!(valid && dirty)}
+  >
+    <Body size="S">
+      Give your new app a name, and choose which groups have access (paid plans
+      only).
+    </Body>
+    <Input
+      bind:value={$values.name}
+      error={$touched.name && $errors.name}
+      on:blur={() => ($touched.name = true)}
+      on:change={() => dirty = true}
+      label="Name"
+    />
+  </ModalContent>
+</Modal>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 6c229c1980..02260e19ec 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -14,6 +14,7 @@
     Body,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
   import api, { del } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
@@ -30,6 +31,7 @@
   let template
   let selectedApp
   let creationModal
+  let updatingModal
   let deletionModal
   let unpublishModal
   let creatingApp = false
@@ -164,6 +166,11 @@
     selectedApp = null
   }
 
+  const updateApp = async app => {
+    selectedApp = app
+    updatingModal.show()
+  }
+
   const releaseLock = async app => {
     try {
       const response = await del(`/api/dev/${app.devId}/lock`)
@@ -236,6 +243,7 @@
             {editApp}
             {exportApp}
             {deleteApp}
+            {updateApp}
           />
         {/each}
       </div>
@@ -289,6 +297,12 @@
   Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>
 
+<UpdateAppModal
+  app={selectedApp}
+  bind:this={updatingModal}
+>
+</UpdateAppModal>
+
 <style>
   .title,
   .filter {
diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js
index f0cee6147c..c686e3d132 100644
--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@@ -1,6 +1,7 @@
 import { writable } from "svelte/store"
 import { get } from "builderStore/api"
 import { AppStatus } from "../../constants"
+import api from "../../builderStore/api";
 
 export function createAppStore() {
   const store = writable([])
@@ -53,9 +54,27 @@ export function createAppStore() {
     }
   }
 
+  async function update (appId, name) {
+    const response = await api.put(`/api/applications/${appId}`, { name })
+    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;
+          state.apps = state.splice(updatedAppIndex, 1, updatedApp);
+        }
+        return state
+      })
+    } else {
+      throw new Error("Error updating name")
+    }
+  }
+
   return {
     subscribe: store.subscribe,
     load,
+    update,
   }
 }