From df607e78eb947645227e5c73173f124ce9958659 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 10 May 2021 11:53:32 +0100
Subject: [PATCH] Add non-gallery option to dropzeon and update create app
 modal

---
 packages/bbui/src/Form/Core/Dropzone.svelte   |  97 +++---
 packages/bbui/src/Form/Core/TextField.svelte  |   1 +
 packages/bbui/src/Form/Dropzone.svelte        |   2 +
 packages/bbui/src/Form/Input.svelte           |   1 +
 packages/bbui/src/Layout/Page.svelte          |   3 +-
 .../components/start/CreateAppModal.svelte    | 289 ++++++++----------
 .../pages/builder/portal/apps/index.svelte    |  10 +-
 7 files changed, 202 insertions(+), 201 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 9dd2cbbc73..5b5c72b809 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -15,6 +15,8 @@
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
   export let handleFileTooLarge = null
+  export let gallery = true
+  export let error = null
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -52,6 +54,8 @@
       const newValue = [...value, ...processedFiles]
       dispatch("change", newValue)
       selectedImageIdx = newValue.length - 1
+    } else {
+      dispatch("change", fileList)
     }
   }
 
@@ -94,47 +98,68 @@
 
 <div class="container">
   {#if selectedImage}
-    <div class="gallery">
-      <div class="title">
-        <div class="filename">{selectedImage.name}</div>
-        <div class="filesize">
-          {#if selectedImage.size <= BYTES_IN_MB}
-            {`${selectedImage.size / BYTES_IN_KB} KB`}
-          {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+    {#if gallery}
+      <div class="gallery">
+        <div class="title">
+          <div class="filename">{selectedImage.name}</div>
+          <div class="filesize">
+            {#if selectedImage.size <= BYTES_IN_MB}
+              {`${selectedImage.size / BYTES_IN_KB} KB`}
+            {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+          </div>
+          {#if !disabled}
+            <div class="delete-button" on:click={removeFile}>
+              <Icon name="Close" />
+            </div>
+          {/if}
         </div>
-        {#if !disabled}
-          <div class="delete-button" on:click={removeFile}>
-            <Icon name="Close" />
+        {#if isImage}
+          <img alt="preview" src={selectedImage.url} />
+        {:else}
+          <div class="placeholder">
+            <div class="extension">{selectedImage.extension}</div>
+            <div>Preview not supported</div>
           </div>
         {/if}
-      </div>
-      {#if isImage}
-        <img alt="preview" src={selectedImage.url} />
-      {:else}
-        <div class="placeholder">
-          <div class="extension">{selectedImage.extension}</div>
-          <div>Preview not supported</div>
+        <div
+          class="nav left"
+          class:visible={selectedImageIdx > 0}
+          on:click={navigateLeft}
+        >
+          <Icon name="ChevronLeft" />
         </div>
-      {/if}
-      <div
-        class="nav left"
-        class:visible={selectedImageIdx > 0}
-        on:click={navigateLeft}
-      >
-        <Icon name="ChevronLeft" />
+        <div
+          class="nav right"
+          class:visible={selectedImageIdx < fileCount - 1}
+          on:click={navigateRight}
+        >
+          <Icon name="ChevronRight" />
+        </div>
+        <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
       </div>
-      <div
-        class="nav right"
-        class:visible={selectedImageIdx < fileCount - 1}
-        on:click={navigateRight}
-      >
-        <Icon name="ChevronRight" />
-      </div>
-      <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
-    </div>
+    {:else if value?.length}
+      {#each value as file}
+        <div class="gallery">
+          <div class="title">
+            <div class="filename">{file.name}</div>
+            <div class="filesize">
+              {#if file.size <= BYTES_IN_MB}
+                {`${file.size / BYTES_IN_KB} KB`}
+              {:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
+            </div>
+            {#if !disabled}
+              <div class="delete-button" on:click={removeFile}>
+                <Icon name="Close" />
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    {/if}
   {/if}
   <div
     class="spectrum-Dropzone"
+    class:is-invalid={!!error}
     class:disabled
     role="region"
     tabindex="0"
@@ -245,6 +270,9 @@
   .spectrum-Dropzone {
     user-select: none;
   }
+  .spectrum-Dropzone.is-invalid {
+    border-color: var(--spectrum-global-color-red-400);
+  }
   input[type="file"] {
     display: none;
   }
@@ -276,7 +304,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: stretch;
+    align-items: center;
   }
   .filename {
     flex: 1 1 auto;
@@ -331,6 +359,7 @@
   .delete-button {
     transition: all 0.3s;
     margin-left: 10px;
+    display: flex;
   }
   .delete-button i {
     font-size: 2em;
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 18b9a6fe8a..1cf37f3468 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -37,6 +37,7 @@
     }
     focus = false
     updateValue(event.target.value)
+    dispatch("blur")
   }
 
   const updateValueOnEnter = event => {
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index c8400ecc6a..76bcfd9db3 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -11,6 +11,7 @@
   export let fileSizeLimit = undefined
   export let processFiles = undefined
   export let handleFileTooLarge = undefined
+  export let gallery = true
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,6 +28,7 @@
     {fileSizeLimit}
     {processFiles}
     {handleFileTooLarge}
+    {gallery}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index a768f16681..327fefa32c 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -30,5 +30,6 @@
     on:change={onChange}
     on:click
     on:input
+    on:blur
   />
 </Field>
diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
index d8c8cbfce4..f820364d0e 100644
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -18,6 +18,7 @@
   .wide {
     max-width: none;
     margin: 0;
-    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2)
+      calc(var(--spacing-xl) * 2) calc(var(--spacing-xl) * 2);
   }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 32774ff33c..97f63c77b2 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,58 +1,50 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Heading, Button } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Dropzone,
+    Body,
+    Checkbox,
+  } from "@budibase/bbui"
   import { store, automationStore, hostingStore } from "builderStore"
-  import { string, object } from "yup"
+  import { string, mixed, object } from "yup"
   import api, { get } from "builderStore/api"
-  import Spinner from "components/common/Spinner.svelte"
-  import { Info, User } from "./Steps"
-  import Indicator from "./Indicator.svelte"
-  import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
   import analytics from "analytics"
   import { onMount } from "svelte"
-  import Logo from "/assets/bb-logo.svg"
   import { capitalise } from "../../helpers"
   import { goto } from "@roxi/routify"
 
   export let template
 
-  const currentStep = writable(0)
-  const values = writable({ roleId: "ADMIN" })
+  const values = writable({ name: null })
   const errors = writable({})
   const touched = writable({})
-  const steps = [Info, User]
-  let validators = [
-    {
-      applicationName: string().required("Your application must have a name"),
-    },
-    {
-      roleId: string()
-        .nullable()
-        .required("You need to select a role for this app"),
-    },
-  ]
+  const validator = {
+    name: string().required("Your application must have a name"),
+    file: mixed().required("Please choose a file to import"),
+  }
 
   let submitting = false
   let valid = false
-  $: checkValidity($values, validators[$currentStep])
+  $: checkValidity($values, validator)
 
   onMount(async () => {
-    const hostingInfo = await hostingStore.actions.fetch()
-    if (hostingInfo.type === "self") {
-      await hostingStore.actions.fetchDeployedApps()
-      const existingAppNames = svelteGet(hostingStore).deployedAppNames
-      validators[0].applicationName = string()
-        .required("Your application must have a name.")
-        .test(
-          "non-existing-app-name",
-          "App with same name already exists. Please try another app name.",
-          value =>
-            !existingAppNames.some(
-              appName => appName.toLowerCase() === value.toLowerCase()
-            )
-        )
-    }
+    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 => appName.toLowerCase() === value.toLowerCase()
+          )
+        }
+      )
   })
 
   const checkValidity = async (values, validator) => {
@@ -70,15 +62,24 @@
 
   async function createNewApp() {
     submitting = true
+
+    // Check a template exists if we are important
+    if (template && !$values.file) {
+      $errors.file = "Please choose a file to import"
+      valid = false
+      submitting = false
+      return false
+    }
+
     try {
       // Create form data to create app
       let data = new FormData()
-      data.append("name", $values.applicationName)
+      data.append("name", $values.name)
       data.append("useTemplate", template != null)
       if (template) {
         data.append("templateName", template.name)
         data.append("templateKey", template.key)
-        data.append("templateFile", template.file)
+        data.append("templateFile", $values.file)
       }
 
       // Create App
@@ -89,7 +90,7 @@
       }
 
       analytics.captureEvent("App Created", {
-        name: $values.applicationName,
+        name: $values.name,
         appId: appJson._id,
         template,
       })
@@ -121,129 +122,91 @@
   }
 </script>
 
-<div class="container">
-  <div class="sidebar">
-    <img src={Logo} alt="budibase icon" />
-    <div class="steps">
-      {#each steps as component, i}
-        <Indicator
-          active={$currentStep === i}
-          done={i < $currentStep}
-          step={i + 1}
-        />
-      {/each}
-    </div>
-  </div>
-  <div class="body">
-    <div class="heading">
-      <Heading size="L">Get started with Budibase</Heading>
-    </div>
-    <div class="step">
-      {#each steps as component, i (i)}
-        <div class:hidden={$currentStep !== i}>
-          <svelte:component
-            this={component}
-            {template}
-            {values}
-            {errors}
-            {touched}
-          />
-        </div>
-      {/each}
-    </div>
-    <div class="footer">
-      {#if $currentStep > 0}
-        <Button medium secondary on:click={() => $currentStep--}>Back</Button>
-      {/if}
-      {#if $currentStep < steps.length - 1}
-        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>
-          Next
-        </Button>
-      {/if}
-      {#if $currentStep === steps.length - 1}
-        <Button
-          medium
-          cta
-          on:click={createNewApp}
-          disabled={!valid || submitting}
-        >
-          {submitting ? "Loading..." : "Submit"}
-        </Button>
-      {/if}
-    </div>
-  </div>
-  {#if submitting}
-    <div in:fade class="spinner-container">
-      <Spinner />
-      <span class="spinner-text">Creating your app...</span>
-    </div>
+<ModalContent
+  title={template ? "Import app" : "Create new app"}
+  confirmText={template ? "Import app" : "Create app"}
+  onConfirm={createNewApp}
+  disabled={!valid}
+>
+  {#if template}
+    <Dropzone
+      error={$touched.file && $errors.file}
+      gallery={false}
+      label="File to import"
+      value={[$values.file]}
+      on:change={e => {
+        $values.file = e.detail?.[0]
+        $touched.file = true
+      }}
+    />
   {/if}
-</div>
+  <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)}
+    label="Name"
+  />
+  <Checkbox label="Group access" disabled value={true} text="All users" />
+</ModalContent>
 
-<style>
-  .container {
-    min-height: 600px;
-    display: grid;
-    grid-template-columns: 80px 1fr;
-    position: relative;
-  }
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    padding: 40px 0;
-    background: var(--grey-1);
-  }
-  .steps {
-    flex: 1 1 auto;
-    display: grid;
-    border-bottom-left-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
-    grid-gap: 30px;
-    align-content: center;
-  }
-  .heading {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  .body {
-    padding: 40px 60px 40px 60px;
-    display: grid;
-    align-items: center;
-    grid-template-rows: auto 1fr auto;
-  }
-  .footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 15px;
-  }
-  .spinner-container {
-    background: var(--background);
-    position: absolute;
-    border-radius: 5px;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: grid;
-    justify-items: center;
-    align-content: center;
-    grid-gap: 50px;
-  }
-  .spinner-text {
-    font-size: 2em;
-  }
-
-  .hidden {
-    display: none;
-  }
-  img {
-    height: 40px;
-    margin-bottom: 20px;
-  }
-</style>
+<!--<div class="container">-->
+<!--  <div class="sidebar">-->
+<!--    <img src={Logo} alt="budibase icon" />-->
+<!--    <div class="steps">-->
+<!--      {#each steps as component, i}-->
+<!--        <Indicator-->
+<!--          active={$currentStep === i}-->
+<!--          done={i < $currentStep}-->
+<!--          step={i + 1}-->
+<!--        />-->
+<!--      {/each}-->
+<!--    </div>-->
+<!--  </div>-->
+<!--  <div class="body">-->
+<!--    <div class="heading">-->
+<!--      <Heading size="L">Get started with Budibase</Heading>-->
+<!--    </div>-->
+<!--    <div class="step">-->
+<!--      {#each steps as component, i (i)}-->
+<!--        <div class:hidden={$currentStep !== i}>-->
+<!--          <svelte:component-->
+<!--            this={component}-->
+<!--            {template}-->
+<!--            {values}-->
+<!--            {errors}-->
+<!--            {touched}-->
+<!--          />-->
+<!--        </div>-->
+<!--      {/each}-->
+<!--    </div>-->
+<!--    <div class="footer">-->
+<!--      {#if $currentStep > 0}-->
+<!--        <Button medium secondary on:click={() => $currentStep&#45;&#45;}>Back</Button>-->
+<!--      {/if}-->
+<!--      {#if $currentStep < steps.length - 1}-->
+<!--        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>-->
+<!--          Next-->
+<!--        </Button>-->
+<!--      {/if}-->
+<!--      {#if $currentStep === steps.length - 1}-->
+<!--        <Button-->
+<!--          medium-->
+<!--          cta-->
+<!--          on:click={createNewApp}-->
+<!--          disabled={!valid || submitting}-->
+<!--        >-->
+<!--          {submitting ? "Loading..." : "Submit"}-->
+<!--        </Button>-->
+<!--      {/if}-->
+<!--    </div>-->
+<!--  </div>-->
+<!--  {#if submitting}-->
+<!--    <div in:fade class="spinner-container">-->
+<!--      <Spinner />-->
+<!--      <span class="spinner-text">Creating your app...</span>-->
+<!--    </div>-->
+<!--  {/if}-->
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index b95e8bf5d2..ee9e4b6c22 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -85,10 +85,14 @@
         />
       </ActionGroup>
     </div>
-    {#if layout === "grid"}
-      <AppGridView {exportApp} />
+    {#if $apps.length}
+      {#if layout === "grid"}
+        <AppGridView {exportApp} />
+      {:else}
+        <AppTableView {exportApp} />
+      {/if}
     {:else}
-      <AppTableView {exportApp} />
+      <div>No apps.</div>
     {/if}
   </Layout>
 </Page>