From 6c269bf091d12f65b6916850f45f398b05d099d3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 22 Mar 2022 11:38:17 +0000
Subject: [PATCH 1/8] Initial commit of home screen modifications and template
 browsing

---
 .../src/components/common/TemplateCard.svelte | 124 +++++++
 .../components/common/TemplateDisplay.svelte  | 147 ++++++++
 .../components/start/CreateAppModal.svelte    |  74 +++-
 .../pages/builder/portal/apps/create.svelte   | 141 +++++++
 .../pages/builder/portal/apps/index.svelte    | 348 +++++++-----------
 .../builder/portal/apps/templates.svelte      |  41 +++
 6 files changed, 649 insertions(+), 226 deletions(-)
 create mode 100644 packages/builder/src/components/common/TemplateCard.svelte
 create mode 100644 packages/builder/src/components/common/TemplateDisplay.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/apps/create.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/apps/templates.svelte

diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
new file mode 100644
index 0000000000..b016397400
--- /dev/null
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -0,0 +1,124 @@
+<script>
+  export let backgroundColour
+  export let imageSrc
+  export let name
+  export let icon
+  export let overlayEnabled = true
+
+  let imageError = false
+  let imageLoaded = false
+
+  const imageRenderError = () => {
+    imageError = true
+  }
+
+  const imageLoadSuccess = () => {
+    imageLoaded = true
+  }
+</script>
+
+<div class="template-card" style="background-color:{backgroundColour};">
+  <div class="template-thumbnail card-body">
+    <img
+      alt={name}
+      src={imageSrc}
+      on:error={imageRenderError}
+      on:load={imageLoadSuccess}
+      class={`${imageLoaded ? "loaded" : ""}`}
+    />
+    <div style={`display:${imageError ? "block" : "none"}`}>
+      <svg
+        width="26px"
+        height="26px"
+        class="spectrum-Icon"
+        style="color: white"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    </div>
+    <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
+      <slot />
+    </div>
+  </div>
+  <div class="template-thumbnail-text">
+    <div>{name}</div>
+  </div>
+</div>
+
+<style>
+  
+  .template-thumbnail {
+    position: relative;
+  }
+
+  .template-card:hover .template-thumbnail-action-overlay {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .template-thumbnail-action-overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 70%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+  }
+
+  .template-thumbnail-text {
+    position: absolute;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    height: 30%;
+    width: 100%;
+    color: var(
+      --spectrum-heading-xs-text-color,
+      var(--spectrum-alias-heading-text-color)
+    );
+    background-color: var(--spectrum-global-color-gray-50);
+  }
+
+  .template-thumbnail-text > div {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .template-card {
+    position: relative;
+    display: flex;
+    border-radius: var(--border-radius-s);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    overflow: hidden;
+    min-height: 200px;
+  }
+
+  .template-card > *{
+    width : 100%
+  }
+
+  .template-card img.loaded {
+    display: block;
+  }
+
+  .template-card img {
+    display: none;
+    max-width: 100%;
+    border-radius: var(--border-radius-s) 0px var(--border-radius-s) 0px;
+  }
+
+  .template-card:hover {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+
+  .card-body {
+    padding-left: 1rem;
+    padding-top: 1rem;
+  }
+</style>
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
new file mode 100644
index 0000000000..0cc3b1ea77
--- /dev/null
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -0,0 +1,147 @@
+<script>
+  import { Layout, Detail, Heading, Button, Modal } from "@budibase/bbui"
+  import TemplateCard from "components/common/TemplateCard.svelte"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
+
+  export let templates
+  
+  let selectedTemplateCategory
+  let creationModal
+  let template
+
+  const groupTemplatesByCategory = (templates, categoryFilter) => {
+    let grouped = templates.reduce((acc, template) => {
+      if (
+        typeof categoryFilter === "string" &&
+        [categoryFilter].indexOf(template.category) < 0
+      ) {
+        return acc
+      }
+
+      acc[template.category] = !acc[template.category]
+        ? []
+        : acc[template.category]
+      acc[template.category].push(template)
+
+      return acc
+    }, {})
+    return grouped
+  }
+
+  $: filteredTemplates = groupTemplatesByCategory(
+    templates,
+    selectedTemplateCategory
+  )
+
+  $: filteredTemplateCategories = filteredTemplates
+    ? Object.keys(filteredTemplates).sort()
+    : []
+
+  $: templateCategories = templates
+    ? Object.keys(groupTemplatesByCategory(templates)).sort()
+    : []
+
+  const stopAppCreation = () => {
+    template = null
+  }
+</script>
+
+<div class="template-category-filters">
+  <Layout noPadding gap="S">
+    <Heading size="S">Templates</Heading>
+
+    <div class="template-category-filters spectrum-ActionGroup">
+      <button
+        on:click={() => {
+          selectedTemplateCategory = null
+        }}
+        class="template-category-filter-all template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
+            spectrum-ActionGroup-item {!selectedTemplateCategory ||
+          'is-selected'}"
+      >
+        <span class="spectrum-ActionButton-label">All</span>
+      </button>
+
+      {#each templateCategories as templateCategoryKey}
+        <button
+          on:click={() => {
+            selectedTemplateCategory = templateCategoryKey
+          }}
+          class="template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
+            spectrum-ActionGroup-item {templateCategoryKey ==
+            selectedTemplateCategory || 'is-selected'}"
+        >
+          <span class="spectrum-ActionButton-label">{templateCategoryKey}</span>
+        </button>
+      {/each}
+    </div>
+  </Layout>
+</div>
+
+<div class="template-categories">
+  <Layout gap="XL" noPadding>
+    {#each filteredTemplateCategories as templateCategoryKey}
+      <div class="template-category">
+        <Detail size="M">{templateCategoryKey}</Detail>
+        <div class="template-grid">
+          {#each filteredTemplates[templateCategoryKey] as templateEntry}
+            <TemplateCard
+              name={templateEntry.name}
+              imageSrc={templateEntry.image}
+              backgroundColour={templateEntry.background}
+              icon={templateEntry.icon}
+            >
+              <Button
+                cta
+                on:click={() => {
+                  template = templateEntry
+                  creationModal.show()
+                }}
+              >
+                Use template
+              </Button>
+              <a
+                href={templateEntry.url}
+                target="_blank"
+                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
+                on:click|stopPropagation
+              >
+                Details
+              </a>
+            </TemplateCard>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </Layout>
+</div>
+
+<Modal
+  bind:this={creationModal}
+  padding={false}
+  width="600px"
+  on:hide={stopAppCreation}
+>
+  <CreateAppModal {template} />
+</Modal>
+
+<style>
+  .template-grid {
+    padding-top: 10px;
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+
+  a:hover.spectrum-Button.spectrum-Button--secondary.overlay-preview-link {
+    background-color: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #505050;
+  }
+
+  a.spectrum-Button--secondary.overlay-preview-link {
+    margin-top: 20px;
+    border-color: #c8c8c8;
+    color: #c8c8c8;
+  }
+</style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 91c4807dc8..6ed5bf8244 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -9,6 +9,7 @@
   import { goto } from "@roxi/routify"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
+  import TemplateCard from "components/common/TemplateCard.svelte"
 
   export let template
 
@@ -17,9 +18,30 @@
   $: validation.check($values)
 
   onMount(async () => {
+    $values.url = resolveAppUrl(template, $values.name, $values.url)
+    $values.name = resolveAppName(template, $values.name)
     await setupValidation()
   })
 
+  $: appUrl = `${window.location.origin}${
+    $values.url ? $values.url : `/${resolveAppUrl(template, $values.name)}`
+  }`
+
+  const resolveAppUrl = (template, name) => {
+    let parsedName
+    const resolvedName = resolveAppName(template, name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const resolveAppName = (template, name) => {
+    if (template && !name) {
+      return template.name
+    }
+    return name.trim()
+  }
+
   const setupValidation = async () => {
     const applications = svelteGet(apps)
     appValidation.name(validation, { apps: applications })
@@ -83,6 +105,15 @@
   onConfirm={createNewApp}
   disabled={!$validation.valid}
 >
+  {#if template && !template?.fromFile}
+    <TemplateCard
+      name={template.name}
+      imageSrc={template.image}
+      backgroundColour={template.background}
+      overlayEnabled={false}
+      icon={template.icon}
+    />
+  {/if}
   {#if template?.fromFile}
     <Dropzone
       error={$validation.touched.file && $validation.errors.file}
@@ -104,13 +135,38 @@
       ? `${$auth.user.firstName}s app`
       : "My app"}
   />
-  <Input
-    bind:value={$values.url}
-    error={$validation.touched.url && $validation.errors.url}
-    on:blur={() => ($validation.touched.url = true)}
-    label="URL"
-    placeholder={$values.name
-      ? "/" + encodeURIComponent($values.name).toLowerCase()
-      : "/"}
-  />
+  <span>
+    <Input
+      bind:value={$values.url}
+      error={$validation.touched.url && $validation.errors.url}
+      on:blur={() => ($validation.touched.url = true)}
+      label="URL"
+      placeholder={$values.url
+        ? $values.url
+        : `/${resolveAppUrl(template, $values.name)}`}
+    />
+    {#if $values.name}
+      <div class="app-server-wrap" title={appUrl}>
+        <span class="app-server-prefix">
+          {window.location.origin}
+        </span>
+        {$values.url
+          ? $values.url
+          : `/${resolveAppUrl(template, $values.name)}`}
+      </div>
+    {/if}
+  </span>
 </ModalContent>
+
+<style>
+  .app-server-prefix {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  .app-server-wrap {
+    margin-top: 10px;
+    width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
new file mode 100644
index 0000000000..bb5329978d
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -0,0 +1,141 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import {
+    Layout,
+    Page,
+    notifications,
+    Button,
+    Heading,
+    Body,
+    Modal,
+    Divider,
+  } from "@budibase/bbui"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
+  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
+  import { onMount } from "svelte"
+  import { templates } from "stores/portal"
+
+  let loaded = false
+  let template
+  let creationModal = false
+  let creatingApp = false
+
+  const welcomeBody =
+    "Start from scratch or get a head start with one of our templates"
+  const createAppTitle = "Create new app"
+  const createAppButtonText = "Start from scratch"
+
+  onMount(async () => {
+    try {
+      await templates.load()
+      if ($templates?.length === 0) {
+        notifications.error(
+          "There was a problem loading quick start templates."
+        )
+      }
+    } catch (error) {
+      notifications.error("Error loading apps and templates")
+    }
+    loaded = true
+  })
+
+  const initiateAppCreation = () => {
+    template = null
+    creationModal.show()
+    creatingApp = true
+  }
+
+  const stopAppCreation = () => {
+    template = null
+    creatingApp = false
+  }
+
+  const initiateAppImport = () => {
+    template = { fromFile: true }
+    creationModal.show()
+    creatingApp = true
+  }
+</script>
+
+<Page wide>
+  <Layout noPadding gap="XL">
+    <span>
+      <Button
+        primary
+        on:click={() => {
+          $goto("../")
+        }}
+      >
+        Back
+      </Button>
+    </span>
+
+    <div class="title">
+      <div class="welcome">
+        <Layout noPadding gap="XS">
+          <Heading size="M">{createAppTitle}</Heading>
+          <Body size="S">
+            {welcomeBody}
+          </Body>
+        </Layout>
+
+        <div class="buttons">
+          <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+            {createAppButtonText}
+          </Button>
+          <Button
+            icon="Import"
+            size="L"
+            quiet
+            secondary
+            on:click={initiateAppImport}
+          >
+            Import app
+          </Button>
+        </div>
+      </div>
+      <Divider size="S" />
+    </div>
+
+    {#if loaded && $templates?.length}
+      <TemplateDisplay templates={$templates} />
+    {/if}
+  </Layout>
+</Page>
+
+<Modal
+  bind:this={creationModal}
+  padding={false}
+  width="600px"
+  on:hide={stopAppCreation}
+>
+  <CreateAppModal {template} />
+</Modal>
+
+<style>
+  .title .welcome > .buttons {
+    padding-top: 30px;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+  @media (max-width: 640px) {
+    .buttons {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index b05aa1b659..eb303a0f38 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -11,8 +11,9 @@
     notifications,
     Body,
     Search,
-    Icon,
+    Divider,
   } from "@budibase/bbui"
+  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
@@ -45,6 +46,21 @@
   let appName = ""
   let creatingFromTemplate = false
 
+  const resolveWelcomeMessage = (auth, apps) => {
+    const userWelcome = auth?.user?.firstName
+      ? `Welcome ${auth?.user?.firstName}!`
+      : "Welcome back!"
+    return apps?.length ? userWelcome : "Let's create your first app!"
+  }
+  $: welcomeHeader = resolveWelcomeMessage($auth, $apps)
+  $: welcomeBody = $apps?.length
+    ? "Manage your apps and get a head start with templates"
+    : "Start from scratch or get a head start with one of our templates"
+
+  $: createAppButtonText = $apps?.length
+    ? "Create new app"
+    : "Start from scratch"
+
   $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
   $: filteredApps = enrichedApps.filter(app =>
     app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -79,9 +95,13 @@
   }
 
   const initiateAppCreation = () => {
-    template = null
-    creationModal.show()
-    creatingApp = true
+    if ($apps?.length) {
+      $goto("/builder/portal/apps/create")
+    } else {
+      template = null
+      creationModal.show()
+      creatingApp = true
+    }
   }
 
   const initiateAppsExport = () => {
@@ -268,148 +288,113 @@
 
 <Page wide>
   <Layout noPadding gap="XL">
-    <div class="title">
-      <Layout noPadding gap="XS">
-        <Heading size="M">Welcome to Budibase</Heading>
-        <Body size="S">
-          Manage your apps and get a head start with templates
-        </Body>
-      </Layout>
+    {#if loaded}
+      <div class="title">
+        <div class="welcome">
+          <Layout noPadding gap="XS">
+            <Heading size="M">{welcomeHeader}</Heading>
+            <Body size="S">
+              {welcomeBody}
+            </Body>
+          </Layout>
 
-      <div class="buttons">
-        {#if cloud}
-          <Button
-            size="L"
-            icon="Export"
-            quiet
-            secondary
-            on:click={initiateAppsExport}
-          >
-            Export apps
-          </Button>
-        {/if}
-        <Button
-          icon="Import"
-          size="L"
-          quiet
-          secondary
-          on:click={initiateAppImport}
-        >
-          Import app
-        </Button>
-        <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
-          Create app
-        </Button>
+          <div class="buttons">
+            <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+              {createAppButtonText}
+            </Button>
+            {#if $apps?.length > 0}
+              <Button
+                icon="Experience"
+                size="L"
+                quiet
+                secondary
+                on:click={$goto("/builder/portal/apps/templates")}
+              >
+                Templates
+              </Button>
+            {/if}
+            {#if !$apps?.length}
+              <Button
+                icon="Import"
+                size="L"
+                quiet
+                secondary
+                on:click={initiateAppImport}
+              >
+                Import app
+              </Button>
+            {/if}
+          </div>
+        </div>
+        <div>
+          <Layout gap="S" justifyItems="center">
+            <img class="img-logo img-size" alt="logo" src={Logo} />
+          </Layout>
+        </div>
+        <Divider size="S" />
       </div>
-    </div>
 
-    <Layout noPadding gap="S">
-      <Detail size="L">Quick start templates</Detail>
-      <div class="grid">
-        {#each $templates as item}
-          <div
-            on:click={() => {
-              template = item
-              creationModal.show()
-              creatingApp = true
-            }}
-            class="template-card"
-          >
-            <a
-              href={item.url}
-              target="_blank"
-              class="external-link"
-              on:click|stopPropagation
-            >
-              <Icon name="LinkOut" size="S" />
-            </a>
-            <div class="card-body">
-              <div style="color: {item.background}" class="iconAlign">
-                <svg
-                  width="26px"
-                  height="26px"
-                  class="spectrum-Icon"
-                  style="color:{item.background};"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-{item.icon}" />
-                </svg>
-              </div>
-              <div class="iconAlign">
-                <Body weight="900" size="S">{item.name}</Body>
-                <div style="font-size: 10px;">
-                  <Body size="S">{item.category.toUpperCase()}</Body>
+      {#if !$apps?.length && $templates?.length}
+        <TemplateDisplay templates={$templates} />
+      {/if}
+
+      {#if enrichedApps.length}
+        <Layout noPadding gap="S">
+          <div class="title">
+            <Detail size="L">My apps</Detail>
+            {#if enrichedApps.length > 1}
+              <div class="app-actions">
+                {#if cloud}
+                  <Button
+                      size="M"
+                      icon="Export"
+                      quiet
+                      secondary
+                      on:click={initiateAppsExport}
+                    >
+                      Export apps
+                  </Button>
+                {/if}
+                <div class="filter">
+                  <Select
+                    quiet
+                    autoWidth
+                    bind:value={sortBy}
+                    placeholder={null}
+                    options={[
+                      { label: "Sort by name", value: "name" },
+                      { label: "Sort by recently updated", value: "updated" },
+                      { label: "Sort by status", value: "status" },
+                    ]}
+                  />
+                  <Search placeholder="Search" bind:value={searchTerm} />
                 </div>
               </div>
-            </div>
+            {/if}
           </div>
-        {/each}
-      </div>
-    </Layout>
 
-    {#if loaded && enrichedApps.length}
-      <Layout noPadding gap="S">
-        <div class="title">
-          <Detail size="L">My apps</Detail>
-          <div class="filter">
-            <Select
-              quiet
-              autoWidth
-              bind:value={sortBy}
-              placeholder={null}
-              options={[
-                { label: "Sort by name", value: "name" },
-                { label: "Sort by recently updated", value: "updated" },
-                { label: "Sort by status", value: "status" },
-              ]}
-            />
-            <Search placeholder="Search" bind:value={searchTerm} />
+          <div class="appTable">
+            {#each filteredApps as app (app.appId)}
+              <AppRow
+                {releaseLock}
+                {editIcon}
+                {app}
+                {unpublishApp}
+                {viewApp}
+                {editApp}
+                {exportApp}
+                {deleteApp}
+                {updateApp}
+              />
+            {/each}
           </div>
-        </div>
-
-        <div class="appTable">
-          {#each filteredApps as app (app.appId)}
-            <AppRow
-              {releaseLock}
-              {editIcon}
-              {app}
-              {unpublishApp}
-              {viewApp}
-              {editApp}
-              {exportApp}
-              {deleteApp}
-              {updateApp}
-            />
-          {/each}
-        </div>
-      </Layout>
-    {/if}
-
-    {#if !enrichedApps.length && !creatingApp && loaded}
-      <div class="empty-wrapper">
-        <div class="centered">
-          <div class="main">
-            <Layout gap="S" justifyItems="center">
-              <img class="img-size" alt="logo" src={Logo} />
-              <div class="new-screen-text">
-                <Detail size="M">Create a business app in minutes!</Detail>
-              </div>
-              <Button on:click={() => initiateAppCreation()} size="M" cta>
-                <div class="new-screen-button">
-                  <div class="background-icon" style="color: white;">
-                    <Icon name="Add" />
-                  </div>
-                  Create App
-                </div></Button
-              >
-            </Layout>
-          </div>
-        </div>
-      </div>
+        </Layout>
+      {/if}
     {/if}
 
     {#if creatingFromTemplate}
       <div class="empty-wrapper">
+        <img class="img-logo img-size" alt="logo" src={Logo} />
         <p>Creating your Budibase app from your selected template...</p>
         <Spinner size="10" />
       </div>
@@ -459,6 +444,15 @@
 <ChooseIconModal app={selectedApp} bind:this={iconModal} />
 
 <style>
+  .app-actions {
+    display: flex;
+  }
+  .app-actions :global(> button) {
+    margin-right: 10px
+  }
+  .title .welcome > .buttons {
+    padding-top: 30px;
+  }
   .title {
     display: flex;
     flex-direction: row;
@@ -475,13 +469,11 @@
     gap: var(--spacing-xl);
     flex-wrap: wrap;
   }
-  @media (max-width: 640px) {
-    .buttons {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
+  @media (max-width: 1000px) {
+    .img-logo {
+      display: none;
     }
   }
-
   .filter {
     display: flex;
     flex-direction: row;
@@ -489,49 +481,6 @@
     align-items: center;
     gap: var(--spacing-xl);
   }
-
-  .grid {
-    height: 200px;
-    display: grid;
-    overflow: hidden;
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-    grid-template-rows: minmax(70px, 1fr) minmax(100px, 1fr) minmax(0px, 0);
-  }
-  .template-card {
-    height: 70px;
-    border-radius: var(--border-radius-s);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    cursor: pointer;
-    display: flex;
-    position: relative;
-  }
-
-  .template-card:hover {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-  .card-body {
-    display: flex;
-    align-items: center;
-    padding: 12px;
-  }
-
-  .external-link {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    color: var(--spectrum-global-color-gray-300);
-    z-index: 99;
-  }
-  .external-link:hover {
-    color: var(--spectrum-global-color-gray-500);
-  }
-
-  .iconAlign {
-    padding: 0 0 0 var(--spacing-m);
-    display: inline-block;
-  }
-
   .appTable {
     display: grid;
     grid-template-rows: auto;
@@ -557,7 +506,6 @@
       grid-template-columns: 1fr auto;
     }
   }
-
   .empty-wrapper {
     flex: 1 1 auto;
     height: 100%;
@@ -566,42 +514,8 @@
     justify-content: center;
     align-items: center;
   }
-
-  .centered {
-    width: calc(100% - 350px);
-    height: calc(100% - 100px);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
-
-  .new-screen-text {
-    width: 160px;
-    text-align: center;
-    color: #2c2c2c;
-    font-weight: 600;
-  }
-
-  .new-screen-button {
-    margin-left: 5px;
-    height: 20px;
-    width: 100px;
-    display: flex;
-    align-items: center;
-  }
-
   .img-size {
     width: 160px;
     height: 160px;
   }
-
-  .background-icon {
-    margin-top: 4px;
-    margin-right: 4px;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/apps/templates.svelte b/packages/builder/src/pages/builder/portal/apps/templates.svelte
new file mode 100644
index 0000000000..c77b869c6e
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import { Layout, Page, notifications, Button } from "@budibase/bbui"
+  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
+  import { onMount } from "svelte"
+  import { templates } from "stores/portal"
+
+  let loaded = false
+
+  onMount(async () => {
+    try {
+      await templates.load()
+      if ($templates?.length === 0) {
+        notifications.error(
+          "There was a problem loading quick start templates."
+        )
+      }
+    } catch (error) {
+      notifications.error("Error loading apps and templates")
+    }
+    loaded = true
+  })
+</script>
+
+<Page wide>
+  <Layout noPadding gap="XL">
+    <span>
+      <Button
+        primary
+        on:click={() => {
+          $goto("../")
+        }}
+      >
+        Back
+      </Button>
+    </span>
+    {#if loaded && $templates?.length}
+      <TemplateDisplay templates={$templates} />
+    {/if}
+  </Layout>
+</Page>

From f6cbe01b07002d0886cd489ea45891b63f04ec5d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 22 Mar 2022 11:40:45 +0000
Subject: [PATCH 2/8] Code formatting

---
 .../src/components/common/TemplateCard.svelte    |  5 ++---
 .../src/components/common/TemplateDisplay.svelte |  2 +-
 .../src/pages/builder/portal/apps/index.svelte   | 16 ++++++++--------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
index b016397400..dc8cdc9610 100644
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -47,7 +47,6 @@
 </div>
 
 <style>
-  
   .template-thumbnail {
     position: relative;
   }
@@ -99,8 +98,8 @@
     min-height: 200px;
   }
 
-  .template-card > *{
-    width : 100%
+  .template-card > * {
+    width: 100%;
   }
 
   .template-card img.loaded {
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
index 0cc3b1ea77..f7954788b6 100644
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -4,7 +4,7 @@
   import CreateAppModal from "components/start/CreateAppModal.svelte"
 
   export let templates
-  
+
   let selectedTemplateCategory
   let creationModal
   let template
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index eb303a0f38..58a86acc65 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -346,13 +346,13 @@
               <div class="app-actions">
                 {#if cloud}
                   <Button
-                      size="M"
-                      icon="Export"
-                      quiet
-                      secondary
-                      on:click={initiateAppsExport}
-                    >
-                      Export apps
+                    size="M"
+                    icon="Export"
+                    quiet
+                    secondary
+                    on:click={initiateAppsExport}
+                  >
+                    Export apps
                   </Button>
                 {/if}
                 <div class="filter">
@@ -448,7 +448,7 @@
     display: flex;
   }
   .app-actions :global(> button) {
-    margin-right: 10px
+    margin-right: 10px;
   }
   .title .welcome > .buttons {
     padding-top: 30px;

From cc0280ca0c3f696747abb81b8e0f01e7252ae051 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 23 Mar 2022 12:43:20 +0000
Subject: [PATCH 3/8] Minor UI updates for the create app modal. A spinner has
 been added to the modal confirmation UX. The app name is pre-populated using
 the app name. The app URL can no longer be null

---
 packages/bbui/src/Modal/ModalContent.svelte   | 30 +++++++----
 .../components/start/CreateAppModal.svelte    | 53 +++++++++++--------
 .../builder/src/helpers/validation/yup/app.js |  5 +-
 .../pages/builder/portal/apps/create.svelte   | 10 ++--
 .../builder/portal/apps/templates.svelte      | 11 ++--
 5 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index 9043fb748f..89c10bb625 100644
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@@ -5,6 +5,7 @@
   import Divider from "../Divider/Divider.svelte"
   import Icon from "../Icon/Icon.svelte"
   import Context from "../context"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
 
   export let title = undefined
   export let size = "S"
@@ -102,15 +103,22 @@
           <Button group secondary on:click={close}>{cancelText}</Button>
         {/if}
         {#if showConfirmButton}
-          <Button
-            group
-            cta
-            {...$$restProps}
-            disabled={confirmDisabled}
-            on:click={confirm}
-          >
-            {confirmText}
-          </Button>
+          <span class="confirm-wrap">
+            <Button
+              group
+              cta
+              {...$$restProps}
+              disabled={confirmDisabled}
+              on:click={confirm}
+            >
+              {#if loading}
+                <ProgressCircle overBackground={true} size="S" />
+              {/if}
+              {#if !loading}
+                {confirmText}
+              {/if}
+            </Button>
+          </span>
         {/if}
       </div>
     {/if}
@@ -169,4 +177,8 @@
   .spectrum-Dialog-buttonGroup {
     padding-left: 0;
   }
+
+  .confirm-wrap :global(.spectrum-Button-label) {
+    display: contents;
+  }
 </style>
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 6ed5bf8244..623e30e73b 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -13,18 +13,20 @@
 
   export let template
 
+  let creating = false
+
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
   $: validation.check($values)
 
   onMount(async () => {
-    $values.url = resolveAppUrl(template, $values.name, $values.url)
     $values.name = resolveAppName(template, $values.name)
+    nameToUrl($values.name)
     await setupValidation()
   })
 
   $: appUrl = `${window.location.origin}${
-    $values.url ? $values.url : `/${resolveAppUrl(template, $values.name)}`
+    $values.url ? $values.url : `${resolveAppUrl(template, $values.name)}`
   }`
 
   const resolveAppUrl = (template, name) => {
@@ -39,7 +41,19 @@
     if (template && !name) {
       return template.name
     }
-    return name.trim()
+    return name ? name.trim() : null
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(template, appName)
+    tidyUrl(resolvedUrl)
   }
 
   const setupValidation = async () => {
@@ -52,6 +66,8 @@
   }
 
   async function createNewApp() {
+    creating = true
+
     try {
       // Create form data to create app
       let data = new FormData()
@@ -86,17 +102,11 @@
       await auth.setInitInfo({})
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
+      creating = false
       console.error(error)
       notifications.error("Error creating app")
     }
   }
-
-  // auto add slash to url
-  $: {
-    if ($values.url && !$values.url.startsWith("/")) {
-      $values.url = `/${$values.url}`
-    }
-  }
 </script>
 
 <ModalContent
@@ -128,41 +138,38 @@
   {/if}
   <Input
     bind:value={$values.name}
+    disabled={creating}
     error={$validation.touched.name && $validation.errors.name}
     on:blur={() => ($validation.touched.name = true)}
+    on:change={nameToUrl($values.name)}
     label="Name"
-    placeholder={$auth.user.firstName
+    placeholder={$auth.user?.firstName
       ? `${$auth.user.firstName}s app`
       : "My app"}
   />
   <span>
     <Input
       bind:value={$values.url}
+      disabled={creating}
       error={$validation.touched.url && $validation.errors.url}
       on:blur={() => ($validation.touched.url = true)}
+      on:change={tidyUrl($values.url)}
       label="URL"
       placeholder={$values.url
         ? $values.url
         : `/${resolveAppUrl(template, $values.name)}`}
     />
-    {#if $values.name}
-      <div class="app-server-wrap" title={appUrl}>
-        <span class="app-server-prefix">
-          {window.location.origin}
-        </span>
-        {$values.url
-          ? $values.url
-          : `/${resolveAppUrl(template, $values.name)}`}
+    {#if $values.url && $values.url !== "" && !$validation.errors.url}
+      <div class="app-server" title={appUrl}>
+        {`${window.location.origin}${$values.url}`}
       </div>
     {/if}
   </span>
 </ModalContent>
 
 <style>
-  .app-server-prefix {
-    color: var(--spectrum-global-color-gray-500);
-  }
-  .app-server-wrap {
+  .app-server {
+    color: var(--spectrum-global-color-gray-600);
     margin-top: 10px;
     width: 320px;
     white-space: nowrap;
diff --git a/packages/builder/src/helpers/validation/yup/app.js b/packages/builder/src/helpers/validation/yup/app.js
index de0f86446c..4e41576d46 100644
--- a/packages/builder/src/helpers/validation/yup/app.js
+++ b/packages/builder/src/helpers/validation/yup/app.js
@@ -35,13 +35,14 @@ export const url = (validation, { apps, currentApp } = { apps: [] }) => {
   validation.addValidator(
     "url",
     string()
+      .trim()
       .nullable()
-      .matches(APP_URL_REGEX, "App URL must not contain spaces")
+      .required("Your application must have a url")
+      .matches(APP_URL_REGEX, "Please enter a valid url")
       .test(
         "non-existing-app-url",
         "Another app with the same URL already exists",
         value => {
-          // url is nullable
           if (!value) {
             return true
           }
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index bb5329978d..f866aae267 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -9,6 +9,7 @@
     Body,
     Modal,
     Divider,
+    Link,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
@@ -60,14 +61,15 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Button
-        primary
+      <Link
+        quiet
+        secondary
         on:click={() => {
           $goto("../")
         }}
       >
-        Back
-      </Button>
+        &lt;&nbsp;Back
+      </Link>
     </span>
 
     <div class="title">
diff --git a/packages/builder/src/pages/builder/portal/apps/templates.svelte b/packages/builder/src/pages/builder/portal/apps/templates.svelte
index c77b869c6e..cfcd2d6354 100644
--- a/packages/builder/src/pages/builder/portal/apps/templates.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, Button } from "@budibase/bbui"
+  import { Layout, Page, notifications, Link } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
@@ -25,14 +25,15 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Button
-        primary
+      <Link
+        quiet
+        secondary
         on:click={() => {
           $goto("../")
         }}
       >
-        Back
-      </Button>
+        &lt;&nbsp;Back
+      </Link>
     </span>
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />

From bd8b47318df9779d5d39f31b9fd64e2c21f859eb Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 25 Mar 2022 09:43:28 +0000
Subject: [PATCH 4/8] UI/UX code review changes

---
 packages/bbui/src/Button/Button.svelte        |  2 +
 .../src/components/common/TemplateCard.svelte | 14 ++++--
 .../components/common/TemplateDisplay.svelte  | 50 ++++++++++---------
 .../pages/builder/portal/apps/create.svelte   | 20 +++++---
 .../pages/builder/portal/apps/index.svelte    |  9 +++-
 .../builder/portal/apps/templates.svelte      |  9 ++--
 6 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index a3d2df069a..e8f6b4500e 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -13,6 +13,7 @@
   export let icon = undefined
   export let active = false
   export let tooltip = undefined
+  export let dataCy
 
   let showTooltip = false
 </script>
@@ -27,6 +28,7 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
+  data-cy={dataCy}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
index dc8cdc9610..ab2e874b55 100644
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -37,7 +37,11 @@
         <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
     </div>
-    <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
+    <div
+      class={overlayEnabled && imageLoaded
+        ? "template-thumbnail-action-overlay"
+        : ""}
+    >
       <slot />
     </div>
   </div>
@@ -52,8 +56,7 @@
   }
 
   .template-card:hover .template-thumbnail-action-overlay {
-    display: flex;
-    flex-direction: column;
+    opacity: 1;
   }
 
   .template-thumbnail-action-overlay {
@@ -62,10 +65,13 @@
     left: 0px;
     width: 100%;
     height: 70%;
-    display: none;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: opacity var(--spectrum-global-animation-duration-100) ease;
     border-top-right-radius: inherit;
     border-top-left-radius: inherit;
   }
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
index f7954788b6..facefd1cbc 100644
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -1,5 +1,13 @@
 <script>
-  import { Layout, Detail, Heading, Button, Modal } from "@budibase/bbui"
+  import {
+    Layout,
+    Detail,
+    Heading,
+    Button,
+    Modal,
+    ActionGroup,
+    ActionButton,
+  } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
 
@@ -46,34 +54,30 @@
   }
 </script>
 
-<div class="template-category-filters">
+<div class="template-header">
   <Layout noPadding gap="S">
     <Heading size="S">Templates</Heading>
-
     <div class="template-category-filters spectrum-ActionGroup">
-      <button
-        on:click={() => {
-          selectedTemplateCategory = null
-        }}
-        class="template-category-filter-all template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
-            spectrum-ActionGroup-item {!selectedTemplateCategory ||
-          'is-selected'}"
-      >
-        <span class="spectrum-ActionButton-label">All</span>
-      </button>
-
-      {#each templateCategories as templateCategoryKey}
-        <button
+      <ActionGroup>
+        <ActionButton
+          selected={!selectedTemplateCategory}
           on:click={() => {
-            selectedTemplateCategory = templateCategoryKey
+            selectedTemplateCategory = null
           }}
-          class="template-category-filter spectrum-ActionButton spectrum-ActionButton--sizeM 
-            spectrum-ActionGroup-item {templateCategoryKey ==
-            selectedTemplateCategory || 'is-selected'}"
         >
-          <span class="spectrum-ActionButton-label">{templateCategoryKey}</span>
-        </button>
-      {/each}
+          All
+        </ActionButton>
+        {#each templateCategories as templateCategoryKey}
+          <ActionButton
+            selected={templateCategoryKey == selectedTemplateCategory}
+            on:click={() => {
+              selectedTemplateCategory = templateCategoryKey
+            }}
+          >
+            {templateCategoryKey}
+          </ActionButton>
+        {/each}
+      </ActionGroup>
     </div>
   </Layout>
 </div>
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index f866aae267..697af7cb2b 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -9,7 +9,6 @@
     Body,
     Modal,
     Divider,
-    Link,
   } from "@budibase/bbui"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
@@ -61,15 +60,16 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Link
+      <Button
         quiet
         secondary
+        icon={"ChevronLeft"}
         on:click={() => {
           $goto("../")
         }}
       >
-        &lt;&nbsp;Back
-      </Link>
+        Back
+      </Button>
     </span>
 
     <div class="title">
@@ -82,10 +82,17 @@
         </Layout>
 
         <div class="buttons">
-          <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+          <Button
+            dataCy="create-app-btn"
+            size="L"
+            icon="Add"
+            cta
+            on:click={initiateAppCreation}
+          >
             {createAppButtonText}
           </Button>
           <Button
+            dataCy="import-app-btn"
             icon="Import"
             size="L"
             quiet
@@ -96,9 +103,10 @@
           </Button>
         </div>
       </div>
-      <Divider size="S" />
     </div>
 
+    <Divider size="S" />
+
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />
     {/if}
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 58a86acc65..b024afa1c7 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -299,7 +299,13 @@
           </Layout>
 
           <div class="buttons">
-            <Button size="L" icon="Add" cta on:click={initiateAppCreation}>
+            <Button
+              dataCy="create-app-btn"
+              size="L"
+              icon="Add"
+              cta
+              on:click={initiateAppCreation}
+            >
               {createAppButtonText}
             </Button>
             {#if $apps?.length > 0}
@@ -315,6 +321,7 @@
             {/if}
             {#if !$apps?.length}
               <Button
+                dataCy="import-app-btn"
                 icon="Import"
                 size="L"
                 quiet
diff --git a/packages/builder/src/pages/builder/portal/apps/templates.svelte b/packages/builder/src/pages/builder/portal/apps/templates.svelte
index cfcd2d6354..93b4a6d257 100644
--- a/packages/builder/src/pages/builder/portal/apps/templates.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, Link } from "@budibase/bbui"
+  import { Layout, Page, notifications, Button } from "@budibase/bbui"
   import TemplateDisplay from "components/common/TemplateDisplay.svelte"
   import { onMount } from "svelte"
   import { templates } from "stores/portal"
@@ -25,15 +25,16 @@
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Link
+      <Button
         quiet
         secondary
+        icon={"ChevronLeft"}
         on:click={() => {
           $goto("../")
         }}
       >
-        &lt;&nbsp;Back
-      </Link>
+        Back
+      </Button>
     </span>
     {#if loaded && $templates?.length}
       <TemplateDisplay templates={$templates} />

From 40f25a1463404d4f0ab74b69bcbe104c042b0736 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 25 Mar 2022 09:59:23 +0000
Subject: [PATCH 5/8] Removed image load flag from the template card overlay

---
 packages/builder/src/components/common/TemplateCard.svelte | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
index ab2e874b55..1271f6aa24 100644
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -37,11 +37,7 @@
         <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
     </div>
-    <div
-      class={overlayEnabled && imageLoaded
-        ? "template-thumbnail-action-overlay"
-        : ""}
-    >
+    <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
       <slot />
     </div>
   </div>

From f512441f11245a1a842545fdaf0c94b88dd1ef74 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 28 Mar 2022 23:21:38 +0100
Subject: [PATCH 6/8] Cypress test fixes and refactoring around the create app
 workflows

---
 .../changeAppIconAndColour.spec.js            |   6 +-
 .../cypress/integration/createApp.spec.js     | 143 +++++++++++-
 .../cypress/integration/createTable.spec.js   |   4 +
 .../integration/createUserAndRoles.spec.js    |  14 +-
 .../cypress/integration/createView.spec.js    |   2 +
 .../integration/datasources/rest.spec.js      |   3 +-
 .../queryLevelTransformers.spec.js            |   2 +-
 .../integration/renameAnApplication.spec.js   | 212 +++++++++---------
 packages/builder/cypress/support/commands.js  |  78 +++++--
 .../components/common/TemplateDisplay.svelte  |   3 +-
 .../src/components/start/AppRow.svelte        |   2 +-
 .../components/start/UpdateAppModal.svelte    |  36 ++-
 .../builder/portal/manage/users/index.svelte  |   2 +-
 13 files changed, 361 insertions(+), 146 deletions(-)

diff --git a/packages/builder/cypress/integration/changeAppIconAndColour.spec.js b/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
index 92d03a102d..bd532aa3fb 100644
--- a/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
+++ b/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
@@ -5,10 +5,14 @@ filterTests(['all'], () => {
       before(() => {
         cy.login()
       })
+
+      after(() => {
+        cy.deleteAllApps()
+      })
       
       it("should change the icon and colour for an application", () => {
           // Search for test application
-          cy.searchForApplication("Cypress Tests")
+          cy.applicationInAppTable("Cypress Tests")
           cy.get(".appTable")
             .within(() => {
               cy.get(".spectrum-Icon").eq(1).click()
diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js
index 273683aec8..9507f88be9 100644
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@@ -2,11 +2,146 @@ import filterTests from '../support/filterTests'
 
 filterTests(['smoke', 'all'], () => {
   context("Create an Application", () => {
-    it("should create a new application", () => {
+
+    beforeEach(() => {
       cy.login()
-      cy.createTestApp()
-      cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.contains("Cypress Tests").should("exist")
     })
+
+    it("should show the new user UI/UX", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(`[data-cy="create-app-btn"]`).contains('Start from scratch').should("exist")
+      cy.get(`[data-cy="import-app-btn"]`).should("exist")
+      
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+      
+      cy.get(".appTable").should("not.exist")
+    })
+
+    it("should provide filterable templates", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+      
+      cy.get(".template-category").its('length').should('be.gt', 1)
+      cy.get(".template-category-filters .spectrum-ActionButton").its('length').should('be.gt', 2)
+      
+      cy.get(".template-category-filters .spectrum-ActionButton").eq(1).click()
+      cy.get(".template-category").should('have.length', 1)
+
+      cy.get(".template-category-filters .spectrum-ActionButton").eq(0).click()
+      cy.get(".template-category").its('length').should('be.gt', 1)
+    })
+
+    it("should enforce a valid url before submission", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      const appName = "A New App"
+      
+      cy.get(`[data-cy="create-app-btn"]`).contains('Start from scratch').click({force: true})
+      cy.get(".spectrum-Modal").within(() => {
+
+        //Auto fill
+        cy.get("input").eq(0).type(appName).should("have.value", appName).blur()
+        cy.get("input").eq(1).should("have.value", "/a-new-app")
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('not.be.disabled')
+
+        //Empty the app url - disabled create
+        cy.get("input").eq(1).clear().blur()
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('be.disabled')
+
+        //Invalid url
+        cy.get("input").eq(1).type("/new app-url").blur()
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('be.disabled')
+
+        //Specifically alter the url
+        cy.get("input").eq(1).clear()
+        cy.get("input").eq(1).type("another-app-name").blur()
+        cy.get("input").eq(1).should("have.value", "/another-app-name")
+        cy.get("input").eq(0).should("have.value", appName)
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('not.be.disabled')
+
+      })
+    })
+
+    it("should create the first application from scratch", () => {
+      const appName = "Cypress Tests"
+      cy.deleteApp(appName)
+      cy.createApp(appName, "This app is used for Cypress testing.")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.applicationInAppTable(appName)
+      cy.deleteApp(appName)
+    })
+
+    it("should generate the first application from a template", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+
+      //### Select nth template and choose to create?
+      cy.get('.template-category').eq(0).within(() => {
+        const card = cy.get('.template-card').eq(0).should("exist");
+        const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
+        cardOverlay.invoke("show")
+        cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
+      })
+
+      //### CMD Create app from theme card
+      cy.get(".spectrum-Modal").should('be.visible')
+      
+      const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
+      templateName.invoke('text')
+      .then(templateNameText => {
+        const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
+        cy.get(".spectrum-Modal input").eq(0).should("have.value", templateNameText)
+        cy.get(".spectrum-Modal input").eq(1).should("have.value", templateNameParsed)
+
+        cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
+        cy.wait(5000)
+        
+        cy.visit(`${Cypress.config().baseUrl}/builder`)
+        cy.wait(1000)
+
+        cy.applicationInAppTable(templateNameText)
+        cy.deleteAllApps() 
+      });
+
+    })
+
+    it("should display a second application and app filtering", () => {
+      const appName = "Cypress Tests"
+      cy.deleteApp(appName)
+      cy.createApp(appName, "This app is used for Cypress testing.")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      const secondAppName = "Second App Demo"
+      cy.deleteApp(secondAppName)
+
+      cy.get(`[data-cy="create-app-btn"]`).contains('Create new app').click({force: true})
+      cy.wait(500)
+      cy.url().should('include', '/builder/portal/apps/create')
+
+      cy.createAppFromScratch(secondAppName)
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      //Both applications should exist and be searchable
+      cy.searchForApplication(appName)
+      cy.searchForApplication(secondAppName)
+
+      cy.deleteAllApps()
+    })
+
   })  
 })
diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js
index 81b7c2f045..df6ca5c7ca 100644
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@@ -7,6 +7,10 @@ filterTests(["smoke", "all"], () => {
       cy.createTestApp()
     })
 
+    after(() => {
+      cy.deleteAllApps()
+    })
+
     it("should create a new Table", () => {
       cy.createTable("dog")
       cy.wait(1000)
diff --git a/packages/builder/cypress/integration/createUserAndRoles.spec.js b/packages/builder/cypress/integration/createUserAndRoles.spec.js
index ce6d370187..7cb3bda93b 100644
--- a/packages/builder/cypress/integration/createUserAndRoles.spec.js
+++ b/packages/builder/cypress/integration/createUserAndRoles.spec.js
@@ -4,9 +4,14 @@ filterTests(["smoke", "all"], () => {
   context("Create a User and Assign Roles", () => {
     before(() => {
       cy.login()
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+      cy.createAppFromScratch("Initial App")
     })
 
     it("should create a user", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
       cy.createUser("bbuser@test.com")
       cy.get(".spectrum-Table").should("contain", "bbuser")
     })
@@ -30,7 +35,14 @@ filterTests(["smoke", "all"], () => {
             for (let i = 1; i < 3; i++) {
               const uuid = () => Cypress._.random(0, 1e6)
               const name = uuid()
-              cy.createApp(name)
+              if(i < 1){
+                cy.createApp(name)
+              } else {
+                cy.visit(`${Cypress.config().baseUrl}/builder`)
+                cy.wait(500)
+                cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
+                cy.createAppFromScratch(name)
+              }
             }
           }
         })
diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js
index 6b06cde0bc..ad21d6afa7 100644
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@@ -4,6 +4,8 @@ filterTests(['smoke', 'all'], () => {
   context("Create a View", () => {
     before(() => {
       cy.login()
+      cy.deleteAllApps()
+
       cy.createTestApp()
       cy.createTable("data")
       cy.addColumn("data", "group", "Text")
diff --git a/packages/builder/cypress/integration/datasources/rest.spec.js b/packages/builder/cypress/integration/datasources/rest.spec.js
index a15487c01b..f2b03a468b 100644
--- a/packages/builder/cypress/integration/datasources/rest.spec.js
+++ b/packages/builder/cypress/integration/datasources/rest.spec.js
@@ -4,6 +4,7 @@ filterTests(["smoke", "all"], () => {
   context("REST Datasource Testing", () => {
     before(() => {
       cy.login()
+      cy.deleteAllApps()
       cy.createTestApp()
     })
 
@@ -23,7 +24,7 @@ filterTests(["smoke", "all"], () => {
       cy.wait("@queryError")
       cy.get("@queryError")
         .its("response.body")
-        .should("have.property", "message", "Invalid URL: http://random text?")
+        .should("have.property", "message", "Invalid URL")
       cy.get("@queryError")
         .its("response.body")
         .should("have.property", "status", 400)
diff --git a/packages/builder/cypress/integration/queryLevelTransformers.spec.js b/packages/builder/cypress/integration/queryLevelTransformers.spec.js
index e96a6dba29..86aea8eafb 100644
--- a/packages/builder/cypress/integration/queryLevelTransformers.spec.js
+++ b/packages/builder/cypress/integration/queryLevelTransformers.spec.js
@@ -4,7 +4,7 @@ filterTests(["smoke", "all"], () => {
   context("Query Level Transformers", () => {
     before(() => {
       cy.login()
-      cy.deleteApp("Cypress Tests")
+      cy.deleteAllApps()
       cy.createApp("Cypress Tests")
     })
 
diff --git a/packages/builder/cypress/integration/renameAnApplication.spec.js b/packages/builder/cypress/integration/renameAnApplication.spec.js
index 48e829fa03..258479b628 100644
--- a/packages/builder/cypress/integration/renameAnApplication.spec.js
+++ b/packages/builder/cypress/integration/renameAnApplication.spec.js
@@ -1,133 +1,133 @@
 import filterTests from "../support/filterTests"
 
 filterTests(['all'], () => {
-    context("Rename an App", () => {
-        beforeEach(() => {
-        cy.login()
-        cy.createTestApp()
-        })
+  context("Rename an App", () => {
+    beforeEach(() => {
+      cy.login()
+      cy.createTestApp()
+    })
 
     it("should rename an unpublished application", () => {
-        const appName = "Cypress Tests"
-        const appRename = "Cypress Renamed"
-        // Rename app, Search for app, Confirm name was changed
-        cy.get(".home-logo").click()
-        renameApp(appName, appRename)
-        cy.reload()
-        cy.wait(1000)
-        cy.searchForApplication(appRename)
-        cy.get(".appTable").find(".title").should("have.length", 1)
-        // Set app name back to Cypress Tests
-        cy.reload()
-        cy.wait(1000)
-        renameApp(appRename, appName)
+      const appName = "Cypress Tests"
+      const appRename = "Cypress Renamed"
+      // Rename app, Search for app, Confirm name was changed
+      cy.get(".home-logo").click()
+      renameApp(appName, appRename)
+      cy.reload()
+      cy.wait(1000)
+      cy.get(".appTable").find(".title").should("have.length", 1)
+      cy.applicationInAppTable(appRename)
+      // Set app name back to Cypress Tests
+      cy.reload()
+      cy.wait(1000)
+      renameApp(appRename, appName)
     })
-        
+
     xit("Should rename a published application", () => {
-        // It is not possible to rename a published application
-        const appName = "Cypress Tests"
-        const appRename = "Cypress Renamed"
-        // Publish the app
-        cy.get(".toprightnav")
-        cy.get(".spectrum-Button").contains("Publish").click({force: true})
-        cy.get(".spectrum-Dialog-grid")
-            .within(() => {
-                // Click publish again within the modal
-                cy.get(".spectrum-Button").contains("Publish").click({force: true})
-            })
-        // Rename app, Search for app, Confirm name was changed
-        cy.get(".home-logo").click()
-        renameApp(appName, appRename, true)
-        cy.searchForApplication(appRename)
-        cy.get(".appTable").find(".wrapper").should("have.length", 1)
+      // It is not possible to rename a published application
+      const appName = "Cypress Tests"
+      const appRename = "Cypress Renamed"
+      // Publish the app
+      cy.get(".toprightnav")
+      cy.get(".spectrum-Button").contains("Publish").click({ force: true })
+      cy.get(".spectrum-Dialog-grid")
+        .within(() => {
+          // Click publish again within the modal
+          cy.get(".spectrum-Button").contains("Publish").click({ force: true })
+        })
+      // Rename app, Search for app, Confirm name was changed
+      cy.get(".home-logo").click()
+      renameApp(appName, appRename, true)
+      cy.get(".appTable").find(".wrapper").should("have.length", 1)
+      cy.applicationInAppTable(appRename)
     })
 
     it("Should try to rename an application to have no name", () => {
-        const appName = "Cypress Tests"
-        cy.get(".home-logo").click()
-        renameApp(appName, " ", false, true)
-        cy.wait(500)
-        // Close modal and confirm name has not been changed
-        cy.get(".spectrum-Dialog-grid").contains("Cancel").click()
-        cy.reload() 
-        cy.wait(1000)
-        cy.searchForApplication(appName)
-        cy.get(".appTable").find(".title").should("have.length", 1)
+      const appName = "Cypress Tests"
+      cy.get(".home-logo").click()
+      renameApp(appName, " ", false, true)
+      cy.wait(500)
+      // Close modal and confirm name has not been changed
+      cy.get(".spectrum-Dialog-grid").contains("Cancel").click()
+      cy.reload()
+      cy.wait(1000)
+      cy.applicationInAppTable(appName)
+      cy.get(".appTable").find(".title").should("have.length", 1)
 
     })
 
     xit("Should create two applications with the same name", () => {
-        // It is not possible to have applications with the same name
-        const appName = "Cypress Tests"
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.wait(500)
-        cy.get(".spectrum-Button").contains("Create app").click({force: true})
-        cy.contains(/Start from scratch/).click()
-        cy.get(".spectrum-Modal")
+      // It is not possible to have applications with the same name
+      const appName = "Cypress Tests"
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+      cy.get(".spectrum-Button").contains("Create app").click({ force: true })
+      cy.contains(/Start from scratch/).click()
+      cy.get(".spectrum-Modal")
         .within(() => {
-        cy.get("input").eq(0).type(appName)
-        cy.get(".spectrum-ButtonGroup").contains("Create app").click({force: true})
-        cy.get(".error").should("have.text", "Another app with the same name already exists")      
+          cy.get("input").eq(0).type(appName)
+          cy.get(".spectrum-ButtonGroup").contains("Create app").click({ force: true })
+          cy.get(".error").should("have.text", "Another app with the same name already exists")
         })
     })
 
     it("should validate application names", () => {
-        // App name must be letters, numbers and spaces only
-        // This test checks numbers and special characters specifically
-        const appName = "Cypress Tests"
-        const numberName = 12345
-        const specialCharName = "£$%^"
-        cy.get(".home-logo").click()
-        renameApp(appName, numberName)
-        cy.reload()
-        cy.wait(1000)
-        cy.searchForApplication(numberName)
-        cy.get(".appTable").find(".title").should("have.length", 1)
-        cy.reload()
-        cy.wait(1000)
-        renameApp(numberName, specialCharName)
-        cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only")
-        // Set app name back to Cypress Tests
-        cy.reload()
-        cy.wait(1000)
-        renameApp(numberName, appName)
+      // App name must be letters, numbers and spaces only
+      // This test checks numbers and special characters specifically
+      const appName = "Cypress Tests"
+      const numberName = 12345
+      const specialCharName = "£$%^"
+      cy.get(".home-logo").click()
+      renameApp(appName, numberName)
+      cy.reload()
+      cy.wait(1000)
+      cy.applicationInAppTable(numberName)
+      cy.get(".appTable").find(".title").should("have.length", 1)
+      cy.reload()
+      cy.wait(1000)
+      renameApp(numberName, specialCharName)
+      cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only")
+      // Set app name back to Cypress Tests
+      cy.reload()
+      cy.wait(1000)
+      renameApp(numberName, appName)
     })
-        
-        const renameApp = (originalName, changedName, published, noName) => {
-            cy.searchForApplication(originalName)
-            cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
+
+    const renameApp = (originalName, changedName, published, noName) => {
+      cy.applicationInAppTable(originalName)
+      cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
         .its("body")
         .then(val => {
-            if (val.length > 0) {
-                cy.get(".appTable")
-                .within(() => {
-                    cy.get(".spectrum-Icon").eq(1).click()
-                    })
-                // Check for when an app is published
-                if (published == true){
-                    // Should not have Edit as option, will unpublish app
-                    cy.should("not.have.value", "Edit")
-                    cy.get(".spectrum-Menu").contains("Unpublish").click()
-                    cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
-                    cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
+          if (val.length > 0) {
+            cy.get(".appTable")
+              .within(() => {
+                cy.get(".spectrum-Icon").eq(1).click()
+              })
+            // Check for when an app is published
+            if (published == true) {
+              // Should not have Edit as option, will unpublish app
+              cy.should("not.have.value", "Edit")
+              cy.get(".spectrum-Menu").contains("Unpublish").click()
+              cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
+              cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
+            }
+            cy.contains("Edit").click()
+            cy.get(".spectrum-Modal")
+              .within(() => {
+                if (noName == true) {
+                  cy.get("input").clear()
+                  cy.get(".spectrum-Dialog-grid").click()
+                    .contains("App name must be letters, numbers and spaces only")
+                  return cy
                 }
-                cy.contains("Edit").click()
-                cy.get(".spectrum-Modal")
-                .within(() => {
-                    if (noName == true){
-                        cy.get("input").clear()
-                        cy.get(".spectrum-Dialog-grid").click()
-                        .contains("App name must be letters, numbers and spaces only")
-                        return cy
-                    }
-                    cy.get("input").clear()
-                    cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
-                    cy.get(".spectrum-ButtonGroup").contains("Save").click({force: true})
-                    cy.wait(500)
-        })
-        }
+                cy.get("input").clear()
+                cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
+                cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true })
+                cy.wait(500)
+              })
+          }
         })
 
     }
-    })
+  })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 699cf1fbf0..c45978e026 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -35,7 +35,9 @@ Cypress.Commands.add("login", () => {
 Cypress.Commands.add("createApp", name => {
   cy.visit(`${Cypress.config().baseUrl}/builder`)
   cy.wait(500)
-  cy.get(".spectrum-Button").contains("Create app").click({ force: true })
+
+  cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
+
   cy.get(".spectrum-Modal").within(() => {
     cy.get("input").eq(0).type(name).should("have.value", name).blur()
     cy.get(".spectrum-ButtonGroup").contains("Create app").click()
@@ -51,10 +53,23 @@ Cypress.Commands.add("deleteApp", name => {
     .its("body")
     .then(val => {
       if (val.length > 0) {
-        cy.searchForApplication(name)
-        cy.get(".appTable").within(() => {
-          cy.get(".spectrum-Icon").eq(1).click()
+        const appId = val.reduce((acc, app) => {
+          if (name === app.name) {
+            acc = app.appId
+          }
+          return acc
+        }, "")
+
+        if (appId == "") {
+          return
+        }
+
+        const appIdParsed = appId.split("_").pop()
+        const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
+        cy.get(actionEleId).within(() => {
+          cy.get(".spectrum-Icon").eq(0).click()
         })
+
         cy.get(".spectrum-Menu").then($menu => {
           if ($menu.text().includes("Unpublish")) {
             cy.get(".spectrum-Menu").contains("Unpublish").click()
@@ -80,22 +95,18 @@ Cypress.Commands.add("deleteAllApps", () => {
     .its("body")
     .then(val => {
       for (let i = 0; i < val.length; i++) {
-        cy.get(".spectrum-Heading")
-          .eq(1)
-          .then(app => {
-            const name = app.text()
-            cy.get(".title")
-              .children()
-              .within(() => {
-                cy.get(".spectrum-Icon").eq(0).click()
-              })
-            cy.get(".spectrum-Menu").contains("Delete").click()
-            cy.get(".spectrum-Dialog-grid").within(() => {
-              cy.get("input").type(name)
-              cy.get(".spectrum-Button--warning").click()
-            })
-            cy.reload()
-          })
+        const appIdParsed = val[i].appId.split("_").pop()
+        const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
+        cy.get(actionEleId).within(() => {
+          cy.get(".spectrum-Icon").eq(0).click()
+        })
+
+        cy.get(".spectrum-Menu").contains("Delete").click()
+        cy.get(".spectrum-Dialog-grid").within(() => {
+          cy.get("input").type(val[i].name)
+          cy.get(".spectrum-Button--warning").click()
+        })
+        cy.reload()
       }
     })
 })
@@ -190,9 +201,11 @@ Cypress.Commands.add("addRowMultiValue", values => {
 Cypress.Commands.add("createUser", email => {
   // quick hacky recorded way to create a user
   cy.contains("Users").click()
-  cy.get(".spectrum-Button--primary").click()
+  cy.get(`[data-cy="add-user"]`).click()
   cy.get(".spectrum-Picker-label").click()
   cy.get(".spectrum-Menu-item:nth-child(2) > .spectrum-Menu-itemLabel").click()
+
+  //Onboarding type selector
   cy.get(
     ":nth-child(2) > .spectrum-Form-itemField > .spectrum-Textfield > .spectrum-Textfield-input"
   )
@@ -312,16 +325,37 @@ Cypress.Commands.add("addCustomSourceOptions", totalOptions => {
     })
 })
 
+//Filters visible with 1 or more
 Cypress.Commands.add("searchForApplication", appName => {
   cy.wait(1000)
   // Searches for the app
   cy.get(".filter").then(() => {
     cy.get(".spectrum-Textfield").within(() => {
+      cy.get("input").eq(0).clear()
       cy.get("input").eq(0).type(appName)
     })
   })
   // Confirms app exists after search
-  cy.get(".appTable").contains(appName)
+  cy.applicationInAppTable(appName)
+})
+
+//Assumes there are no others
+Cypress.Commands.add("applicationInAppTable", appName => {
+  cy.get(".appTable").within(() => {
+    cy.get(".title").contains(appName).should("exist")
+  })
+})
+
+Cypress.Commands.add("createAppFromScratch", appName => {
+  cy.get(`[data-cy="create-app-btn"]`)
+    .contains("Start from scratch")
+    .click({ force: true })
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").eq(0).type(appName).should("have.value", appName).blur()
+    cy.get(".spectrum-ButtonGroup").contains("Create app").click()
+    cy.wait(10000)
+  })
+  cy.createTable("Cypress Tests", true)
 })
 
 Cypress.Commands.add("selectExternalDatasource", datasourceName => {
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte
index facefd1cbc..c96bff8d5e 100644
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@@ -69,6 +69,7 @@
         </ActionButton>
         {#each templateCategories as templateCategoryKey}
           <ActionButton
+            dataCy={templateCategoryKey}
             selected={templateCategoryKey == selectedTemplateCategory}
             on:click={() => {
               selectedTemplateCategory = templateCategoryKey
@@ -85,7 +86,7 @@
 <div class="template-categories">
   <Layout gap="XL" noPadding>
     {#each filteredTemplateCategories as templateCategoryKey}
-      <div class="template-category">
+      <div class="template-category" data-cy={templateCategoryKey}>
         <Detail size="M">{templateCategoryKey}</Detail>
         <div class="template-grid">
           {#each filteredTemplates[templateCategoryKey] as templateEntry}
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index bda7356a88..d6dc4e1800 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -61,7 +61,7 @@
     {#if app.deployed}Published{:else}Unpublished{/if}
   </StatusLight>
 </div>
-<div>
+<div data-cy={`row_actions_${app.appId}`}>
   <Button
     size="S"
     disabled={app.lockedOther}
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index 1ce699b834..e6a40b23e8 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@@ -42,11 +42,31 @@
     }
   }
 
-  // auto add slash to url
-  $: {
-    if ($values.url && !$values.url.startsWith("/")) {
-      $values.url = `/${$values.url}`
+  const resolveAppUrl = (template, name) => {
+    let parsedName
+    const resolvedName = resolveAppName(null, name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const resolveAppName = (template, name) => {
+    if (template && !name) {
+      return template.name
     }
+    return name ? name.trim() : null
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(null, appName)
+    tidyUrl(resolvedUrl)
   }
 </script>
 
@@ -61,15 +81,17 @@
     bind:value={$values.name}
     error={$validation.touched.name && $validation.errors.name}
     on:blur={() => ($validation.touched.name = true)}
+    on:change={nameToUrl($values.name)}
     label="Name"
   />
   <Input
     bind:value={$values.url}
     error={$validation.touched.url && $validation.errors.url}
     on:blur={() => ($validation.touched.url = true)}
+    on:change={tidyUrl($values.url)}
     label="URL"
-    placeholder={$values.name
-      ? "/" + encodeURIComponent($values.name).toLowerCase()
-      : "/"}
+    placeholder={$values.url
+      ? $values.url
+      : `/${resolveAppUrl(null, $values.name)}`}
   />
 </ModalContent>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index 1160cc109b..4492a81e3e 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -71,7 +71,7 @@
       <Heading size="S">Users</Heading>
       <ButtonGroup>
         <Button disabled secondary>Import users</Button>
-        <Button primary on:click={createUserModal.show}>Add user</Button>
+        <Button primary dataCy="add-user" on:click={createUserModal.show}>Add user</Button>
       </ButtonGroup>
     </div>
     <div class="field">

From 7e3a0046bdc331644a2cb07d05cd6ea954f9e6ee Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 29 Mar 2022 09:59:39 +0100
Subject: [PATCH 7/8] Lint fix and now diplaying the '/app/' prefix when
 previewing an app url

---
 .../builder/src/components/start/CreateAppModal.svelte    | 8 ++++++--
 .../src/pages/builder/portal/manage/users/index.svelte    | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 623e30e73b..e75d7c4d09 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -25,8 +25,12 @@
     await setupValidation()
   })
 
+  const appPrefix = "/app"
+
   $: appUrl = `${window.location.origin}${
-    $values.url ? $values.url : `${resolveAppUrl(template, $values.name)}`
+    $values.url
+      ? `${appPrefix}${$values.url}`
+      : `${appPrefix}${resolveAppUrl(template, $values.name)}`
   }`
 
   const resolveAppUrl = (template, name) => {
@@ -161,7 +165,7 @@
     />
     {#if $values.url && $values.url !== "" && !$validation.errors.url}
       <div class="app-server" title={appUrl}>
-        {`${window.location.origin}${$values.url}`}
+        {appUrl}
       </div>
     {/if}
   </span>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index 4492a81e3e..bfbe520b2f 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -71,7 +71,9 @@
       <Heading size="S">Users</Heading>
       <ButtonGroup>
         <Button disabled secondary>Import users</Button>
-        <Button primary dataCy="add-user" on:click={createUserModal.show}>Add user</Button>
+        <Button primary dataCy="add-user" on:click={createUserModal.show}
+          >Add user</Button
+        >
       </ButtonGroup>
     </div>
     <div class="field">

From 864c83990f2defb90c87bb1a290cf89b8d590efe Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 29 Mar 2022 10:38:56 +0100
Subject: [PATCH 8/8] Replaced the expected string in the data rest test spec
 to the original

---
 packages/builder/cypress/integration/datasources/rest.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/cypress/integration/datasources/rest.spec.js b/packages/builder/cypress/integration/datasources/rest.spec.js
index f2b03a468b..7216a13847 100644
--- a/packages/builder/cypress/integration/datasources/rest.spec.js
+++ b/packages/builder/cypress/integration/datasources/rest.spec.js
@@ -24,7 +24,7 @@ filterTests(["smoke", "all"], () => {
       cy.wait("@queryError")
       cy.get("@queryError")
         .its("response.body")
-        .should("have.property", "message", "Invalid URL")
+        .should("have.property", "message", "Invalid URL: http://random text?")
       cy.get("@queryError")
         .its("response.body")
         .should("have.property", "status", 400)