budibase/packages/builder/src/components/deploy/DeleteModal.svelte

<script>
  import { Input, notifications } from "@budibase/bbui"
  import { goto } from "@roxi/routify"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { apps } from "stores/portal"
  import { API } from "api"

  export let appId
  export let appName
  export let onDeleteSuccess = () => {
    $goto("/builder")
  }

  let deleting = false

  export const show = () => {
    deletionModal.show()
  }

  export const hide = () => {
    deletionModal.hide()
  }

  let deletionModal
  let deletionConfirmationAppName

  const copyName = () => {
    deletionConfirmationAppName = appName
  }

  const deleteApp = async () => {
    if (!appId) {
      console.log("No app id provided")
      return
    }
    deleting = true
    try {
      await API.deleteApp(appId)
      apps.load()
      notifications.success("App deleted successfully")
      onDeleteSuccess()
    } catch (err) {
      notifications.error("Error deleting app")
      deleting = false
    }
  }
</script>

<ConfirmDialog
  bind:this={deletionModal}
  title="Delete app"
  okText="Delete"
  onOk={deleteApp}
  onCancel={() => (deletionConfirmationAppName = null)}
  disabled={deletionConfirmationAppName !== appName || deleting}
>
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  Are you sure you want to delete
  <b class="app-name" on:click={copyName}>{appName}</b>?
  <br />
  Please enter the app name below to confirm.
  <br /><br />
  <Input bind:value={deletionConfirmationAppName} placeholder={appName} />
</ConfirmDialog>

<style>
  .app-name {
    cursor: pointer;
  }
</style>