From 186dcc00f601a74d203372c168431ce6484622de Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 6 Apr 2022 10:10:53 +0100
Subject: [PATCH 01/12] Initial commit of screen workflow updates

---
 .../NavigationPanel/DatasourceModal.svelte    | 153 ++++++++++++++++++
 .../NavigationPanel/NewScreenModal.svelte     | 134 ++++++---------
 .../NavigationPanel/ScreenDetailsModal.svelte |  28 ++--
 .../NavigationPanel/ScreenWizard.svelte       |  53 ++++--
 4 files changed, 257 insertions(+), 111 deletions(-)
 create mode 100644 packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte

diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
new file mode 100644
index 0000000000..45b721ee49
--- /dev/null
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -0,0 +1,153 @@
+<script>
+  import { store, selectedAccessRole } from "builderStore"
+  import { ModalContent, Layout, Select } from "@budibase/bbui"
+  import { tables, datasources, roles } from "stores/backend"
+  import getTemplates from "builderStore/store/screenTemplates"
+  import ICONS from "../../backend/DatasourceNavigator/icons"
+  import { IntegrationNames } from "constants"
+
+  export let onCancel
+  export let onConfirm
+
+  let selectedScreens = []
+  let screenAccessRole = $selectedAccessRole + ""
+
+  const toggleScreenSelection = table => {
+    if (selectedScreens.find(s => s.table === table.name)) {
+      selectedScreens = selectedScreens.filter(
+        screen => screen.table !== table.name
+      )
+    } else {
+      let partialTemplates = getTemplates($store, $tables.list).filter(
+        template => template.table === table.name
+      )
+      selectedScreens = [...partialTemplates, ...selectedScreens]
+    }
+  }
+
+  const confirmDatasourceSelection = async () => {
+    await onConfirm({
+      templates: selectedScreens,
+      screenAccessRole,
+    })
+  }
+
+  $: filteredSources = $datasources.list.reduce((acc, datasource) => {
+    acc["restSources"] = !acc["restSources"] ? [] : acc["restSources"]
+    acc["otherSources"] = !acc["otherSources"] ? [] : acc["otherSources"]
+    if (datasource.source === IntegrationNames.REST) {
+      acc["restSources"].push(datasource)
+    } else {
+      acc["otherSources"].push(datasource)
+    }
+    return acc
+  }, {})
+</script>
+
+<ModalContent
+  title="Create CRUD Screens"
+  confirmText="Confirm"
+  cancelText="Back"
+  onConfirm={confirmDatasourceSelection}
+  {onCancel}
+  disabled={!selectedScreens.length}
+  size="L"
+>
+  <Layout noPadding gap="XS">
+    {#each filteredSources.otherSources as datasource}
+      <div class="data-source-header">
+        <div class="datasource-icon">
+          <svelte:component
+            this={ICONS[datasource.source]}
+            height="24"
+            width="24"
+          />
+        </div>
+        <div class="content">
+          <div class="text">{datasource.name}</div>
+        </div>
+      </div>
+      {#if Array.isArray(datasource.entities)}
+        {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
+          <div
+            class="data-source-entry"
+            class:selected={selectedScreens.find(x => x.table === table.name)}
+            on:click={() => toggleScreenSelection(table)}
+          >
+            <svg
+              width="16px"
+              height="16px"
+              class="spectrum-Icon"
+              style="color: white"
+              focusable="false"
+            >
+              <use xlink:href="#spectrum-icon-18-Table" />
+            </svg>
+            {table.name}
+          </div>
+        {/each}
+      {/if}
+      {#if datasource["entities"] && !Array.isArray(datasource.entities)}
+        {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
+          <div
+            class="data-source-entry"
+            class:selected={selectedScreens.find(
+              x => x.table === datasource.entities[table_key].name
+            )}
+            on:click={() =>
+              toggleScreenSelection(datasource.entities[table_key])}
+          >
+            <svg
+              width="16px"
+              height="16px"
+              class="spectrum-Icon"
+              style="color: white"
+              focusable="false"
+            >
+              <use xlink:href="#spectrum-icon-18-Table" />
+            </svg>
+            {datasource.entities[table_key].name}
+          </div>
+        {/each}
+      {/if}
+    {/each}
+    <Select
+      bind:value={screenAccessRole}
+      label="Screen access"
+      getOptionLabel={role => role.name}
+      getOptionValue={role => role._id}
+      getOptionColor={role => role.color}
+      options={$roles}
+    />
+  </Layout>
+</ModalContent>
+
+<style>
+  .data-source-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .data-source-header .content {
+    padding: var(--spectrum-alias-item-padding-l);
+  }
+
+  .data-source-entry {
+    cursor: pointer;
+    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
+    padding: var(--spectrum-alias-item-padding-s);
+    background: var(--spectrum-alias-background-color-primary);
+    transition: 0.3s all;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    border-width: 1px;
+    display: flex;
+    align-items: center;
+  }
+
+  .data-source-entry:hover,
+  .selected {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index cd83d81235..d1f1fe50df 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,43 +1,17 @@
 <script>
-  import { store } from "builderStore"
   import { tables } from "stores/backend"
-  import {
-    ModalContent,
-    Body,
-    Detail,
-    Layout,
-    Icon,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import getTemplates from "builderStore/store/screenTemplates"
+  import { ModalContent, Body, Layout, Icon } from "@budibase/bbui"
 
   export let onConfirm
   export let onCancel
-  export let showProgressCircle = false
 
-  const blankScreen = "createFromScratch"
+  let autoCreateModeKey = "autoCreate"
+  let blankScreenModeKey = "blankScreen"
 
-  let selectedScreens = []
-  let templates = getTemplates($store, $tables.list)
-
-  $: blankSelected = selectedScreens?.length === 1
-  $: autoSelected = selectedScreens?.length > 0 && !blankSelected
-
-  const toggleScreenSelection = table => {
-    if (selectedScreens.find(s => s.table === table.name)) {
-      selectedScreens = selectedScreens.filter(
-        screen => screen.table !== table.name
-      )
-    } else {
-      let partialTemplates = getTemplates($store, $tables.list).filter(
-        template => template.table === table.name
-      )
-      selectedScreens = [...partialTemplates, ...selectedScreens]
-    }
-  }
+  let selectedScreenMode
 
   const confirmScreenSelection = async () => {
-    await onConfirm(selectedScreens)
+    await onConfirm(selectedScreenMode)
   }
 </script>
 
@@ -48,70 +22,74 @@
     cancelText="Cancel"
     onConfirm={confirmScreenSelection}
     {onCancel}
-    disabled={!selectedScreens.length}
+    disabled={!selectedScreenMode}
     size="L"
   >
-    <Body size="S">
-      Please select the screens you would like to add to your application.
-      Autogenerated screens come with CRUD functionality.
-    </Body>
+    <Body size="S">Add a blank screen</Body>
     <Layout noPadding gap="S">
-      <Detail size="S">Blank screen</Detail>
       <div
-        class="item"
-        class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
-        on:click={() =>
-          toggleScreenSelection(templates.find(t => t.id === blankScreen))}
-        class:disabled={autoSelected}
+        class="screen-type item"
+        class:selected={selectedScreenMode == blankScreenModeKey}
+        on:click={() => {
+          selectedScreenMode = blankScreenModeKey
+        }}
       >
-        <div data-cy="blank-screen" class="content">
-          <div class="text">Blank</div>
+        <div data-cy="blank-screen" class="content screen-type-wrap">
+          <Icon name="WebPage" />
+          <span class="text">Blank</span>
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
         >
-          {#if selectedScreens.find(x => x.id === blankScreen)}
+          {#if selectedScreenMode == blankScreenModeKey}
             <div class="checkmark-spacing">
-              <Icon size="S" name="CheckmarkCircleOutline" />
+              <Icon size="S" name="CheckmarkCircle" />
             </div>
           {/if}
         </div>
       </div>
-      {#if $tables.list.filter(table => table._id !== "ta_users").length > 0}
-        <Detail size="S">Autogenerated Screens</Detail>
 
-        {#each $tables.list.filter(table => table._id !== "ta_users") as table}
-          <div
-            class:disabled={blankSelected}
-            class:selected={selectedScreens.find(x => x.table === table.name)}
-            on:click={() => toggleScreenSelection(table)}
-            class="item"
-          >
-            <div class="content">
-              <div class="text">{table.name}</div>
+      <Body size="S">
+        Add autogenerated screens with CRUD functionality to get a working app
+        quickly! (Requires a data source)
+      </Body>
+
+      <div
+        class="screen-type item"
+        class:selected={selectedScreenMode == autoCreateModeKey}
+        on:click={() => {
+          selectedScreenMode = autoCreateModeKey
+        }}
+        class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
+          .length}
+      >
+        <div data-cy="autogenerated-screens" class="content screen-type-wrap">
+          <Icon name="WebPages" />
+          <span class="text">Autogenerated Screens</span>
+        </div>
+        <div
+          style="color: var(--spectrum-global-color-green-600); float: right"
+        >
+          {#if selectedScreenMode == autoCreateModeKey}
+            <div class="checkmark-spacing">
+              <Icon size="S" name="CheckmarkCircle" />
             </div>
-            <div
-              style="color: var(--spectrum-global-color-green-600); float: right"
-            >
-              {#if selectedScreens.find(x => x.table === table.name)}
-                <div class="checkmark-spacing">
-                  <Icon size="S" name="CheckmarkCircleOutline" />
-                </div>
-              {/if}
-            </div>
-          </div>
-        {/each}
-      {/if}
+          {/if}
+        </div>
+      </div>
     </Layout>
-    <div slot="footer">
-      {#if showProgressCircle}
-        <div class="footer-progress"><ProgressCircle size="S" /></div>
-      {/if}
-    </div>
   </ModalContent>
 </div>
 
 <style>
+  .screen-type.item {
+    padding: var(--spectrum-alias-item-padding-xl);
+  }
+  .screen-type-wrap {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
   .disabled {
     opacity: 0.3;
     pointer-events: none;
@@ -119,22 +97,15 @@
   .checkmark-spacing {
     margin-right: var(--spacing-m);
   }
-
   .content {
     letter-spacing: 0px;
   }
-
-  .footer-progress {
-    margin-top: var(--spacing-s);
-  }
-
   .text {
     font-weight: 600;
     margin-left: var(--spacing-m);
     font-size: 14px;
     text-transform: capitalize;
   }
-
   .item {
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
@@ -150,7 +121,6 @@
     align-items: center;
     height: 60px;
   }
-
   .item:hover,
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index 75977e51a2..c5e76e9948 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -1,18 +1,18 @@
 <script>
-  import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
+  import { ModalContent, Input, Select } from "@budibase/bbui"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { selectedAccessRole, allScreens } from "builderStore"
   import { get } from "svelte/store"
+  import { roles } from "stores/backend"
 
   export let onConfirm
   export let onCancel
-  export let showProgressCircle = false
-  export let screenName
   export let screenUrl
   export let confirmText = "Continue"
 
   let routeError
   let touched = false
+  let screenAccessRole = $selectedAccessRole + ""
 
   const routeChanged = event => {
     if (!event.detail.startsWith("/")) {
@@ -38,8 +38,8 @@
 
   const confirmScreenDetails = async () => {
     await onConfirm({
-      screenName,
       screenUrl,
+      screenAccessRole,
     })
   }
 </script>
@@ -51,24 +51,24 @@
   onConfirm={confirmScreenDetails}
   {onCancel}
   cancelText={"Back"}
-  disabled={!screenName || !screenUrl || routeError || !touched}
+  disabled={!screenAccessRole || !screenUrl || routeError || !touched}
 >
-  <Input label="Name" bind:value={screenName} />
+  <!-- <Input label="Name" bind:value={screenName} /> -->
   <Input
     label="URL"
     error={routeError}
     bind:value={screenUrl}
     on:change={routeChanged}
   />
-  <div slot="footer">
-    {#if showProgressCircle}
-      <div class="footer-progress"><ProgressCircle size="S" /></div>
-    {/if}
-  </div>
+  <Select
+    bind:value={screenAccessRole}
+    label="Screen access"
+    getOptionLabel={role => role.name}
+    getOptionValue={role => role._id}
+    getOptionColor={role => role.color}
+    options={$roles}
+  />
 </ModalContent>
 
 <style>
-  .footer-progress {
-    margin-top: var(--spacing-s);
-  }
 </style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index c30241868a..ca4cba061f 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -1,11 +1,14 @@
 <script>
   import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import DatasourceModal from "components/design/NavigationPanel/DatasourceModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { Modal, notifications } from "@budibase/bbui"
   import { store, selectedAccessRole } from "builderStore"
   import analytics, { Events } from "analytics"
   import { get } from "svelte/store"
+  import getTemplates from "builderStore/store/screenTemplates"
+  import { tables } from "stores/backend"
 
   let pendingScreen
   let showProgressCircle = false
@@ -13,6 +16,7 @@
   // Modal refs
   let newScreenModal
   let screenDetailsModal
+  let datasourceModal
 
   // External handler to show the screen wizard
   export const showModal = () => {
@@ -24,7 +28,7 @@
   }
 
   // Creates an array of screens, checking and sanitising their URLs
-  const createScreens = async screens => {
+  const createScreens = async ({ screens, screenAccessRole }) => {
     if (!screens?.length) {
       return
     }
@@ -46,7 +50,9 @@
         screen.routing.route = sanitizeUrl(screen.routing.route)
 
         // Use the currently selected role
-        screen.routing.roleId = get(selectedAccessRole) || "BASIC"
+        screen.routing.roleId = screenAccessRole
+          ? screenAccessRole
+          : get(selectedAccessRole) || "BASIC"
 
         // Create the screen
         await store.actions.screens.save(screen)
@@ -98,37 +104,54 @@
   }
 
   // Handler for NewScreenModal
-  const confirmScreenSelection = async templates => {
-    // Handle template selection
-    if (templates?.length > 1) {
-      // Autoscreens, so create immediately
-      const screens = templates.map(template => template.create())
-      await createScreens(screens)
+  const confirmScreenSelection = async mode => {
+    if (mode == "autoCreate") {
+      datasourceModal.show()
     } else {
-      // Empty screen, so proceed to the next modal
-      pendingScreen = templates[0].create()
+      let templates = getTemplates($store, $tables.list)
+      const blankScreenTemplate = templates.find(
+        t => t.id === "createFromScratch"
+      )
+      pendingScreen = blankScreenTemplate.create()
       screenDetailsModal.show()
     }
   }
 
+  // Handler for DatasourceModal
+  const confirmScreenDatasources = async ({ templates, screenAccessRole }) => {
+    console.log("selected ", screenAccessRole)
+    console.log("global ", $selectedAccessRole)
+    // // Handle template selection
+    if (templates?.length > 1) {
+      // Autoscreens, so create immediately
+      const screens = templates.map(template => template.create())
+      await createScreens({ screens, screenAccessRole })
+    }
+  }
+
   // Handler for ScreenDetailsModal
-  const confirmScreenDetails = async ({ screenName, screenUrl }) => {
+  const confirmScreenDetails = async ({ screenUrl, screenAccessRole }) => {
     if (!pendingScreen) {
       return
     }
-    pendingScreen.props._instanceName = screenName
     pendingScreen.routing.route = screenUrl
-    await createScreens([pendingScreen])
+    await createScreens({ screens: [pendingScreen], screenAccessRole })
   }
 </script>
 
 <Modal bind:this={newScreenModal}>
-  <NewScreenModal onConfirm={confirmScreenSelection} {showProgressCircle} />
+  <NewScreenModal onConfirm={confirmScreenSelection} />
+</Modal>
+
+<Modal bind:this={datasourceModal}>
+  <DatasourceModal
+    onConfirm={confirmScreenDatasources}
+    onCancel={() => newScreenModal.show()}
+  />
 </Modal>
 
 <Modal bind:this={screenDetailsModal}>
   <ScreenDetailsModal
-    {showProgressCircle}
     onConfirm={confirmScreenDetails}
     onCancel={() => newScreenModal.show()}
   />

From aaa46e8992c176d8ed47337fc3b6554f4a7b0ff4 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 7 Apr 2022 09:35:12 +0100
Subject: [PATCH 02/12] Removed debugging statements and updated event data for
 screen create workflows

---
 packages/builder/src/analytics/constants.js   |  1 +
 .../NavigationPanel/DatasourceModal.svelte    | 40 ++++++++++++-------
 .../NavigationPanel/ScreenDetailsModal.svelte | 10 +++--
 .../NavigationPanel/ScreenWizard.svelte       | 15 ++++---
 4 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/analytics/constants.js b/packages/builder/src/analytics/constants.js
index 177d5320a5..ed679ccead 100644
--- a/packages/builder/src/analytics/constants.js
+++ b/packages/builder/src/analytics/constants.js
@@ -22,6 +22,7 @@ export const Events = {
   },
   SCREEN: {
     CREATED: "Screen Created",
+    CREATE_ROLE_UPDATED: "Changed Role On Screen Creation"
   },
   AUTOMATION: {
     CREATED: "Automation Created",
diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
index 45b721ee49..fb53763e81 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -1,10 +1,11 @@
 <script>
   import { store, selectedAccessRole } from "builderStore"
-  import { ModalContent, Layout, Select } from "@budibase/bbui"
+  import { ModalContent, Layout, Select, Divider } from "@budibase/bbui"
   import { tables, datasources, roles } from "stores/backend"
   import getTemplates from "builderStore/store/screenTemplates"
   import ICONS from "../../backend/DatasourceNavigator/icons"
   import { IntegrationNames } from "constants"
+  import analytics, { Events } from "analytics"
 
   export let onCancel
   export let onConfirm
@@ -12,14 +13,21 @@
   let selectedScreens = []
   let screenAccessRole = $selectedAccessRole + ""
 
-  const toggleScreenSelection = table => {
+  const toggleScreenSelection = (table, datasource) => {
     if (selectedScreens.find(s => s.table === table.name)) {
       selectedScreens = selectedScreens.filter(
         screen => screen.table !== table.name
       )
     } else {
-      let partialTemplates = getTemplates($store, $tables.list).filter(
-        template => template.table === table.name
+      let partialTemplates = getTemplates($store, $tables.list).reduce(
+        (acc, template) => {
+          if (template.table === table.name) {
+            template.datasource = datasource.name
+            acc.push(template)
+          }
+          return acc
+        },
+        []
       )
       selectedScreens = [...partialTemplates, ...selectedScreens]
     }
@@ -33,15 +41,11 @@
   }
 
   $: filteredSources = $datasources.list.reduce((acc, datasource) => {
-    acc["restSources"] = !acc["restSources"] ? [] : acc["restSources"]
-    acc["otherSources"] = !acc["otherSources"] ? [] : acc["otherSources"]
-    if (datasource.source === IntegrationNames.REST) {
-      acc["restSources"].push(datasource)
-    } else {
-      acc["otherSources"].push(datasource)
+    if (datasource.source !== IntegrationNames.REST && datasource["entities"]) {
+      acc.push(datasource)
     }
     return acc
-  }, {})
+  }, [])
 </script>
 
 <ModalContent
@@ -54,7 +58,7 @@
   size="L"
 >
   <Layout noPadding gap="XS">
-    {#each filteredSources.otherSources as datasource}
+    {#each filteredSources as datasource}
       <div class="data-source-header">
         <div class="datasource-icon">
           <svelte:component
@@ -72,7 +76,7 @@
           <div
             class="data-source-entry"
             class:selected={selectedScreens.find(x => x.table === table.name)}
-            on:click={() => toggleScreenSelection(table)}
+            on:click={() => toggleScreenSelection(table, datasource)}
           >
             <svg
               width="16px"
@@ -95,7 +99,7 @@
               x => x.table === datasource.entities[table_key].name
             )}
             on:click={() =>
-              toggleScreenSelection(datasource.entities[table_key])}
+              toggleScreenSelection(datasource.entities[table_key], datasource)}
           >
             <svg
               width="16px"
@@ -111,8 +115,16 @@
         {/each}
       {/if}
     {/each}
+    <div>
+      <Divider size="S" />
+    </div>
     <Select
       bind:value={screenAccessRole}
+      on:change={() => {
+        analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+          screenAccessRole,
+        })
+      }}
       label="Screen access"
       getOptionLabel={role => role.name}
       getOptionValue={role => role._id}
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index c5e76e9948..26d73949d2 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -4,6 +4,7 @@
   import { selectedAccessRole, allScreens } from "builderStore"
   import { get } from "svelte/store"
   import { roles } from "stores/backend"
+  import analytics, { Events } from "analytics"
 
   export let onConfirm
   export let onCancel
@@ -53,7 +54,6 @@
   cancelText={"Back"}
   disabled={!screenAccessRole || !screenUrl || routeError || !touched}
 >
-  <!-- <Input label="Name" bind:value={screenName} /> -->
   <Input
     label="URL"
     error={routeError}
@@ -62,6 +62,11 @@
   />
   <Select
     bind:value={screenAccessRole}
+    on:change={() => {
+      analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+        screenAccessRole,
+      })
+    }}
     label="Screen access"
     getOptionLabel={role => role.name}
     getOptionValue={role => role._id}
@@ -69,6 +74,3 @@
     options={$roles}
   />
 </ModalContent>
-
-<style>
-</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index ca4cba061f..97d1b1c204 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -11,7 +11,6 @@
   import { tables } from "stores/backend"
 
   let pendingScreen
-  let showProgressCircle = false
 
   // Modal refs
   let newScreenModal
@@ -24,7 +23,6 @@
 
     // Reset state when showing modal again
     pendingScreen = null
-    showProgressCircle = false
   }
 
   // Creates an array of screens, checking and sanitising their URLs
@@ -32,7 +30,6 @@
     if (!screens?.length) {
       return
     }
-    showProgressCircle = true
 
     try {
       for (let screen of screens) {
@@ -61,6 +58,8 @@
         if (screen.template) {
           analytics.captureEvent(Events.SCREEN.CREATED, {
             template: screen.template,
+            datasource: screen.datasource,
+            screenAccessRole,
           })
         }
 
@@ -75,8 +74,6 @@
     } catch (error) {
       notifications.error("Error creating screens")
     }
-
-    showProgressCircle = false
   }
 
   // Checks if any screens exist in the store with the given route and
@@ -119,12 +116,14 @@
 
   // Handler for DatasourceModal
   const confirmScreenDatasources = async ({ templates, screenAccessRole }) => {
-    console.log("selected ", screenAccessRole)
-    console.log("global ", $selectedAccessRole)
     // // Handle template selection
     if (templates?.length > 1) {
       // Autoscreens, so create immediately
-      const screens = templates.map(template => template.create())
+      const screens = templates.map(template => {
+        let screenTemplate = template.create()
+        screenTemplate.datasource = template.datasource
+        return screenTemplate
+      })
       await createScreens({ screens, screenAccessRole })
     }
   }

From cffdad78e53dcfebb1e95e601ce7e8d97797996f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 7 Apr 2022 12:22:16 +0100
Subject: [PATCH 03/12] Minor test updates and formatting

---
 .../cypress/integration/autoScreensUI.spec.js | 92 +++++++++----------
 .../cypress/integration/createScreen.js       | 19 ++++
 packages/builder/cypress/support/commands.js  | 19 +++-
 packages/builder/src/analytics/constants.js   |  2 +-
 4 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js
index ab65e6561f..53ea94a61f 100644
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@@ -1,51 +1,51 @@
 import filterTests from "../support/filterTests"
 
 filterTests(['smoke', 'all'], () => {
-    context("Auto Screens UI", () => {
-        before(() => {
-        cy.login()
-        cy.createTestApp()
-        })
-        
-        it("should generate internal table screens", () => {
-            // Create autogenerated screens from the internal table
-            cy.createAutogeneratedScreens(["Cypress Tests"])
-            // Confirm screens have been auto generated
-            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
-            cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
-            .and('contain', 'cypress-tests/new/row')
-        })
-        
-        it("should generate multiple internal table screens at once", () => {
-            // Create a second internal table
-            const initialTable = "Cypress Tests"
-            const secondTable = "Table Two"
-            cy.createTable(secondTable)
-            // Create autogenerated screens from the internal tables
-            cy.createAutogeneratedScreens([initialTable, secondTable])
-            // Confirm screens have been auto generated
-            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
-            // Previously generated tables are suffixed with numbers - as expected
-            cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
-            .and('contain', 'cypress-tests-2/new/row')
-            cy.get(".nav-items-container").contains("table-two").click()
-            cy.get(".nav-items-container").should('contain', 'table-two/:id')
-            .and('contain', 'table-two/new/row')
-        })
-        
-        if (Cypress.env("TEST_ENV")) {
-            it("should generate data source screens", () => {
-                // Using MySQL data source for testing this
-                const datasource = "MySQL"
-                // Select & configure MySQL data source
-                cy.selectExternalDatasource(datasource)
-                cy.addDatasourceConfig(datasource)
-                // Create autogenerated screens from a MySQL table - MySQL contains books table
-                cy.createAutogeneratedScreens(["books"])
-                cy.get(".nav-items-container").contains("books").click()
-                cy.get(".nav-items-container").should('contain', 'books/:id')
-                .and('contain', 'books/new/row')
-            })
-        }
+  context("Auto Screens UI", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
     })
+
+    it("should generate internal table screens", () => {
+      // Create autogenerated screens from the internal table
+      cy.createAutogeneratedScreens(["Cypress Tests"])
+      // Confirm screens have been auto generated
+      cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+      cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
+        .and('contain', 'cypress-tests/new/row')
+    })
+
+    it("should generate multiple internal table screens at once", () => {
+      // Create a second internal table
+      const initialTable = "Cypress Tests"
+      const secondTable = "Table Two"
+      cy.createTable(secondTable)
+      // Create autogenerated screens from the internal tables
+      cy.createAutogeneratedScreens([initialTable, secondTable])
+      // Confirm screens have been auto generated
+      cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+      // Previously generated tables are suffixed with numbers - as expected
+      cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
+        .and('contain', 'cypress-tests-2/new/row')
+      cy.get(".nav-items-container").contains("table-two").click()
+      cy.get(".nav-items-container").should('contain', 'table-two/:id')
+        .and('contain', 'table-two/new/row')
+    })
+
+    if (Cypress.env("TEST_ENV")) {
+      it("should generate data source screens", () => {
+        // Using MySQL data source for testing this
+        const datasource = "MySQL"
+        // Select & configure MySQL data source
+        cy.selectExternalDatasource(datasource)
+        cy.addDatasourceConfig(datasource)
+        // Create autogenerated screens from a MySQL table - MySQL contains books table
+        cy.createAutogeneratedScreens(["books"])
+        cy.get(".nav-items-container").contains("books").click()
+        cy.get(".nav-items-container").should('contain', 'books/:id')
+          .and('contain', 'books/new/row')
+      })
+    }
+  })
 })
diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index ada68d82dc..0ed10bed2e 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -1,6 +1,18 @@
 import filterTests from "../support/filterTests"
 
 filterTests(["smoke", "all"], () => {
+  /*
+    Blank screen
+    URL
+    Screen access
+    Screen access confirmation.
+
+    CRUD Tests
+    list the sources
+    check for exluded contents
+      rest, user table etc
+  */
+
   context("Screen Tests", () => {
     before(() => {
       cy.login()
@@ -21,5 +33,12 @@ filterTests(["smoke", "all"], () => {
         cy.contains("/test-with-spaces").should("exist")
       })
     })
+
+    it("Should update create the screen with the selected", () => {
+      cy.createScreen("Test Screen", "admin only", "Admin")
+      cy.get(".nav-items-container").within(() => {
+        cy.contains("/admin-only").should("exist")
+      })
+    })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index f4ccdcca24..3a19e57eac 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -270,7 +270,8 @@ Cypress.Commands.add("navigateToDataSection", () => {
   cy.contains("Data").click()
 })
 
-Cypress.Commands.add("createScreen", (screenName, route) => {
+//Blank
+Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
   cy.contains("Design").click()
   cy.get("[aria-label=AddCircle]").click()
   cy.get(".spectrum-Modal").within(() => {
@@ -279,8 +280,14 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
     cy.wait(500)
   })
   cy.get(".spectrum-Dialog-grid").within(() => {
-    cy.get(".spectrum-Form-itemField").eq(0).type(screenName)
-    cy.get(".spectrum-Form-itemField").eq(1).type(route)
+    cy.get(".spectrum-Form-itemField").eq(0).type(route)
+
+    if(accessLevelLabel){
+      cy.get(".spectrum-Picker-label").click()
+      cy.wait(500)
+      cy.contains(accessLevelLabel).click()
+    }
+
     cy.get(".spectrum-Button").contains("Continue").click({ force: true })
     cy.wait(1000)
   })
@@ -290,9 +297,13 @@ Cypress.Commands.add("createAutogeneratedScreens", screenNames => {
   // Screen name must already exist within data source
   cy.contains("Design").click()
   cy.get("[aria-label=AddCircle]").click()
+  cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
+  cy.wait(500)
+
   for (let i = 0; i < screenNames.length; i++) {
-    cy.get(".item").contains(screenNames[i]).click()
+    cy.get(".data-source-entry").contains(screenNames[i]).click()
   }
+
   cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
   cy.wait(4000)
 })
diff --git a/packages/builder/src/analytics/constants.js b/packages/builder/src/analytics/constants.js
index ed679ccead..98408b5cb3 100644
--- a/packages/builder/src/analytics/constants.js
+++ b/packages/builder/src/analytics/constants.js
@@ -22,7 +22,7 @@ export const Events = {
   },
   SCREEN: {
     CREATED: "Screen Created",
-    CREATE_ROLE_UPDATED: "Changed Role On Screen Creation"
+    CREATE_ROLE_UPDATED: "Changed Role On Screen Creation",
   },
   AUTOMATION: {
     CREATED: "Automation Created",

From 0817f3f7b498e6ae81d20fb943a7d3eefaa16da6 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 7 Apr 2022 12:23:19 +0100
Subject: [PATCH 04/12] Formatting for command

---
 packages/builder/cypress/support/commands.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 3a19e57eac..f49e71f8fa 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -282,7 +282,7 @@ Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
   cy.get(".spectrum-Dialog-grid").within(() => {
     cy.get(".spectrum-Form-itemField").eq(0).type(route)
 
-    if(accessLevelLabel){
+    if (accessLevelLabel) {
       cy.get(".spectrum-Picker-label").click()
       cy.wait(500)
       cy.contains(accessLevelLabel).click()

From ebf1fd5238b09391ef727fc2470ebd3f3127fcde Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Apr 2022 09:05:56 +0100
Subject: [PATCH 05/12] Ensure datasources are refreshed when loading the
 create screen modal

---
 .../NavigationPanel/DatasourceModal.svelte    | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
index fb53763e81..16854caa1e 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -1,11 +1,18 @@
 <script>
   import { store, selectedAccessRole } from "builderStore"
-  import { ModalContent, Layout, Select, Divider } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    Select,
+    Divider,
+    notifications,
+  } from "@budibase/bbui"
   import { tables, datasources, roles } from "stores/backend"
   import getTemplates from "builderStore/store/screenTemplates"
   import ICONS from "../../backend/DatasourceNavigator/icons"
   import { IntegrationNames } from "constants"
   import analytics, { Events } from "analytics"
+  import { onMount } from "svelte"
 
   export let onCancel
   export let onConfirm
@@ -40,12 +47,25 @@
     })
   }
 
-  $: filteredSources = $datasources.list.reduce((acc, datasource) => {
-    if (datasource.source !== IntegrationNames.REST && datasource["entities"]) {
-      acc.push(datasource)
+  $: filteredSources = Array.isArray($datasources.list)
+    ? $datasources.list.reduce((acc, datasource) => {
+        if (
+          datasource.source !== IntegrationNames.REST &&
+          datasource["entities"]
+        ) {
+          acc.push(datasource)
+        }
+        return acc
+      }, [])
+    : []
+
+  onMount(async () => {
+    try {
+      await datasources.fetch()
+    } catch (error) {
+      notifications.error("Error fetching datasources")
     }
-    return acc
-  }, [])
+  })
 </script>
 
 <ModalContent

From 122c5e6f3a03f921bebfa89f5aa4dff090a50ea5 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Apr 2022 09:56:20 +0100
Subject: [PATCH 06/12] Test updates for screen creation

---
 .../cypress/integration/autoScreensUI.spec.js | 52 +++++++++++++++++-
 .../cypress/integration/createScreen.js       | 23 ++++----
 packages/builder/cypress/support/commands.js  | 53 ++++++++++++++-----
 3 files changed, 101 insertions(+), 27 deletions(-)

diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js
index 53ea94a61f..c3fbf2bd7d 100644
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@@ -4,10 +4,42 @@ filterTests(['smoke', 'all'], () => {
   context("Auto Screens UI", () => {
     before(() => {
       cy.login()
-      cy.createTestApp()
     })
 
+    it("should disable the autogenerated screen options if no sources are available", () => {
+      cy.createApp("First Test App", false)
+      
+      cy.closeModal();
+
+      cy.contains("Design").click()
+      cy.get("[aria-label=AddCircle]").click()
+      cy.get(".spectrum-Modal").within(() => {
+        cy.get(".item.disabled").contains("Autogenerated Screens")
+        cy.get(".confirm-wrap .spectrum-Button").should('be.disabled')
+      })
+
+      cy.deleteAllApps()
+    });
+
+    it("should not display incompatible sources", () => {
+      cy.createApp("Test App")
+
+      cy.selectExternalDatasource("REST")
+      cy.selectExternalDatasource("S3")
+      cy.get(".spectrum-Modal").within(() => {
+        cy.get(".spectrum-Button").contains("Save and continue to query").click({ force : true })
+      })
+      
+      cy.navigateToAutogeneratedModal()
+
+      cy.get('.data-source-entry').should('have.length', 1)
+      cy.get('.data-source-entry')
+
+      cy.deleteAllApps()
+    });
+      
     it("should generate internal table screens", () => {
+      cy.createTestApp()
       // Create autogenerated screens from the internal table
       cy.createAutogeneratedScreens(["Cypress Tests"])
       // Confirm screens have been auto generated
@@ -33,6 +65,24 @@ filterTests(['smoke', 'all'], () => {
         .and('contain', 'table-two/new/row')
     })
 
+    it("should generate multiple internal table screens with the same screen access level", () => {
+      //The tables created in the previous step still exist
+
+      cy.createTable("Table Three")
+      cy.createTable("Table Four")
+      cy.createAutogeneratedScreens(["Table Three", "Table Four"], "Admin")
+      
+      cy.get(".nav-items-container").within(() => {
+        cy.get(".nav-item").contains("/table-three").click()
+        cy.get(".nav-item").should('contain', 'table-three/:id')
+          .and('contain', 'table-three/new/row')
+
+        cy.get(".nav-item").contains("/table-four").click()
+        cy.get(".nav-item").should('contain', 'table-four/:id')
+          .and('contain', 'table-four/new/row')
+      })
+    })
+
     if (Cypress.env("TEST_ENV")) {
       it("should generate data source screens", () => {
         // Using MySQL data source for testing this
diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index 0ed10bed2e..450b360145 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -1,18 +1,6 @@
 import filterTests from "../support/filterTests"
 
 filterTests(["smoke", "all"], () => {
-  /*
-    Blank screen
-    URL
-    Screen access
-    Screen access confirmation.
-
-    CRUD Tests
-    list the sources
-    check for exluded contents
-      rest, user table etc
-  */
-
   context("Screen Tests", () => {
     before(() => {
       cy.login()
@@ -34,11 +22,18 @@ filterTests(["smoke", "all"], () => {
       })
     })
 
-    it("Should update create the screen with the selected", () => {
-      cy.createScreen("Test Screen", "admin only", "Admin")
+    it("Should create a blank screen with the selected access level", () => {
+      cy.createScreen("Test Screen Admin", "admin only", "Admin")
+
       cy.get(".nav-items-container").within(() => {
         cy.contains("/admin-only").should("exist")
       })
+
+      cy.createScreen("Test Screen Public", "open to all", "Public")
+
+      cy.get(".nav-items-container").within(() => {
+        cy.contains("/open-to-all").should("exist")
+      })
     })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index f49e71f8fa..f3b0418120 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -32,7 +32,17 @@ Cypress.Commands.add("login", () => {
   })
 })
 
-Cypress.Commands.add("createApp", name => {
+Cypress.Commands.add("closeModal", () => {
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get(".close-icon").click()
+    cy.wait(500)
+  })
+})
+
+Cypress.Commands.add("createApp", (name, addDefaultTable) => {
+  const shouldCreateDefaultTable =
+    typeof addDefaultTable != "boolean" ? true : addDefaultTable
+
   cy.visit(`${Cypress.config().baseUrl}/builder`)
   cy.wait(500)
   cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
@@ -51,7 +61,9 @@ Cypress.Commands.add("createApp", name => {
     cy.get(".spectrum-ButtonGroup").contains("Create app").click()
     cy.wait(10000)
   })
-  cy.createTable("Cypress Tests", true)
+  if (shouldCreateDefaultTable) {
+    cy.createTable("Cypress Tests", true)
+  }
 })
 
 Cypress.Commands.add("deleteApp", name => {
@@ -293,21 +305,38 @@ Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
   })
 })
 
-Cypress.Commands.add("createAutogeneratedScreens", screenNames => {
+Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   // Screen name must already exist within data source
   cy.contains("Design").click()
   cy.get("[aria-label=AddCircle]").click()
-  cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
-  cy.wait(500)
-
-  for (let i = 0; i < screenNames.length; i++) {
-    cy.get(".data-source-entry").contains(screenNames[i]).click()
-  }
-
-  cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
-  cy.wait(4000)
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get(".item").contains("Autogenerated Screens").click()
+    cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
+    cy.wait(500)
+  })
 })
 
+Cypress.Commands.add(
+  "createAutogeneratedScreens",
+  (screenNames, accessLevelLabel) => {
+    cy.navigateToAutogeneratedModal()
+
+    for (let i = 0; i < screenNames.length; i++) {
+      cy.get(".data-source-entry").contains(screenNames[i]).click()
+    }
+
+    cy.get(".spectrum-Modal").within(() => {
+      if (accessLevelLabel) {
+        cy.get(".spectrum-Picker-label").click()
+        cy.wait(500)
+        cy.contains(accessLevelLabel).click()
+      }
+      cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
+      cy.wait(4000)
+    })
+  }
+)
+
 Cypress.Commands.add("addRow", values => {
   cy.contains("Create row").click()
   cy.get(".spectrum-Modal").within(() => {

From fe9f3aeafce13164799b11dfdf1f2271ed3557f3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Apr 2022 10:29:19 +0100
Subject: [PATCH 07/12] Minor updates for cypress tests. Check that access
 filtering is reflected

---
 packages/builder/cypress/integration/autoScreensUI.spec.js | 5 +++++
 packages/builder/cypress/integration/createScreen.js       | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js
index c3fbf2bd7d..79c38600f8 100644
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@@ -80,6 +80,11 @@ filterTests(['smoke', 'all'], () => {
         cy.get(".nav-item").contains("/table-four").click()
         cy.get(".nav-item").should('contain', 'table-four/:id')
           .and('contain', 'table-four/new/row')
+
+        //The access level should now be set to admin. Previous screens should be filtered.
+        cy.get(".nav-item").contains("/table-two").should('not.exist')
+        cy.get(".nav-item").contains("/cypress-tests").should('not.exist')
+        
       })
     })
 
diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index 450b360145..6147d519ba 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -33,6 +33,8 @@ filterTests(["smoke", "all"], () => {
 
       cy.get(".nav-items-container").within(() => {
         cy.contains("/open-to-all").should("exist")
+        //The access level should now be set to admin. Previous screens should be filtered.
+        cy.get(".nav-item").contains("/test-screen").should('not.exist')
       })
     })
   })

From 63ec5b0fc3819157c83935305e09a0789cdccfde Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 8 Apr 2022 10:31:04 +0100
Subject: [PATCH 08/12] Minor formatting

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

diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index 6147d519ba..75132a22ba 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -34,7 +34,7 @@ filterTests(["smoke", "all"], () => {
       cy.get(".nav-items-container").within(() => {
         cy.contains("/open-to-all").should("exist")
         //The access level should now be set to admin. Previous screens should be filtered.
-        cy.get(".nav-item").contains("/test-screen").should('not.exist')
+        cy.get(".nav-item").contains("/test-screen").should("not.exist")
       })
     })
   })

From 1885a3e275f1d04a6cc71721beee89ae5190a0ea Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 22 Apr 2022 12:22:21 +0100
Subject: [PATCH 09/12] Refactored the screen wizard to separate out the role
 selection. Design and layout updates to address feedback

---
 packages/builder/cypress/support/commands.js  |   4 +-
 .../NavigationPanel/DatasourceModal.svelte    | 186 +++++++++---------
 .../NavigationPanel/NewScreenModal.svelte     |  40 ++--
 .../NavigationPanel/ScreenDetailsModal.svelte |  20 +-
 .../NavigationPanel/ScreenWizard.svelte       |  94 ++++++++-
 5 files changed, 208 insertions(+), 136 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index f3b0418120..7549270af4 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -288,7 +288,7 @@ Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
   cy.get("[aria-label=AddCircle]").click()
   cy.get(".spectrum-Modal").within(() => {
     cy.get(".item").contains("Blank").click()
-    cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
+    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
     cy.wait(500)
   })
   cy.get(".spectrum-Dialog-grid").within(() => {
@@ -311,7 +311,7 @@ Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   cy.get("[aria-label=AddCircle]").click()
   cy.get(".spectrum-Modal").within(() => {
     cy.get(".item").contains("Autogenerated Screens").click()
-    cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
+    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
     cy.wait(500)
   })
 })
diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
index 16854caa1e..17a8556831 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -1,24 +1,17 @@
 <script>
-  import { store, selectedAccessRole } from "builderStore"
-  import {
-    ModalContent,
-    Layout,
-    Select,
-    Divider,
-    notifications,
-  } from "@budibase/bbui"
-  import { tables, datasources, roles } from "stores/backend"
+  import { store } from "builderStore"
+  import { ModalContent, Layout, notifications, Icon } from "@budibase/bbui"
+  import { tables, datasources } from "stores/backend"
   import getTemplates from "builderStore/store/screenTemplates"
   import ICONS from "../../backend/DatasourceNavigator/icons"
   import { IntegrationNames } from "constants"
-  import analytics, { Events } from "analytics"
   import { onMount } from "svelte"
 
   export let onCancel
   export let onConfirm
+  export let initalScreens = []
 
-  let selectedScreens = []
-  let screenAccessRole = $selectedAccessRole + ""
+  let selectedScreens = [...initalScreens]
 
   const toggleScreenSelection = (table, datasource) => {
     if (selectedScreens.find(s => s.table === table.name)) {
@@ -43,7 +36,6 @@
   const confirmDatasourceSelection = async () => {
     await onConfirm({
       templates: selectedScreens,
-      screenAccessRole,
     })
   }
 
@@ -77,93 +69,94 @@
   disabled={!selectedScreens.length}
   size="L"
 >
-  <Layout noPadding gap="XS">
+  <Layout noPadding gap="S">
     {#each filteredSources as datasource}
-      <div class="data-source-header">
-        <div class="datasource-icon">
-          <svelte:component
-            this={ICONS[datasource.source]}
-            height="24"
-            width="24"
-          />
-        </div>
-        <div class="content">
-          <div class="text">{datasource.name}</div>
+      <div class="data-source-wrap">
+        <div class="data-source-header">
+          <div class="datasource-icon">
+            <svelte:component
+              this={ICONS[datasource.source]}
+              height="24"
+              width="24"
+            />
+          </div>
+          <div class="data-source-name">{datasource.name}</div>
         </div>
+        {#if Array.isArray(datasource.entities)}
+          {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
+            <div
+              class="data-source-entry"
+              class:selected={selectedScreens.find(x => x.table === table.name)}
+              on:click={() => toggleScreenSelection(table, datasource)}
+            >
+              <svg
+                width="16px"
+                height="16px"
+                class="spectrum-Icon"
+                style="color: white"
+                focusable="false"
+              >
+                <use xlink:href="#spectrum-icon-18-Table" />
+              </svg>
+              {table.name}
+
+              {#if selectedScreens.find(x => x.table === table.name)}
+                <span class="data-source-check">
+                  <Icon size="S" name="CheckmarkCircle" />
+                </span>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+        {#if datasource["entities"] && !Array.isArray(datasource.entities)}
+          {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
+            <div
+              class="data-source-entry"
+              class:selected={selectedScreens.find(
+                x => x.table === datasource.entities[table_key].name
+              )}
+              on:click={() =>
+                toggleScreenSelection(
+                  datasource.entities[table_key],
+                  datasource
+                )}
+            >
+              <svg
+                width="16px"
+                height="16px"
+                class="spectrum-Icon"
+                style="color: white"
+                focusable="false"
+              >
+                <use xlink:href="#spectrum-icon-18-Table" />
+              </svg>
+              {datasource.entities[table_key].name}
+
+              {#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
+                <span class="data-source-check">
+                  <Icon size="S" name="CheckmarkCircle" />
+                </span>
+              {/if}
+            </div>
+          {/each}
+        {/if}
       </div>
-      {#if Array.isArray(datasource.entities)}
-        {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
-          <div
-            class="data-source-entry"
-            class:selected={selectedScreens.find(x => x.table === table.name)}
-            on:click={() => toggleScreenSelection(table, datasource)}
-          >
-            <svg
-              width="16px"
-              height="16px"
-              class="spectrum-Icon"
-              style="color: white"
-              focusable="false"
-            >
-              <use xlink:href="#spectrum-icon-18-Table" />
-            </svg>
-            {table.name}
-          </div>
-        {/each}
-      {/if}
-      {#if datasource["entities"] && !Array.isArray(datasource.entities)}
-        {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
-          <div
-            class="data-source-entry"
-            class:selected={selectedScreens.find(
-              x => x.table === datasource.entities[table_key].name
-            )}
-            on:click={() =>
-              toggleScreenSelection(datasource.entities[table_key], datasource)}
-          >
-            <svg
-              width="16px"
-              height="16px"
-              class="spectrum-Icon"
-              style="color: white"
-              focusable="false"
-            >
-              <use xlink:href="#spectrum-icon-18-Table" />
-            </svg>
-            {datasource.entities[table_key].name}
-          </div>
-        {/each}
-      {/if}
     {/each}
-    <div>
-      <Divider size="S" />
-    </div>
-    <Select
-      bind:value={screenAccessRole}
-      on:change={() => {
-        analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
-          screenAccessRole,
-        })
-      }}
-      label="Screen access"
-      getOptionLabel={role => role.name}
-      getOptionValue={role => role._id}
-      getOptionColor={role => role.color}
-      options={$roles}
-    />
   </Layout>
 </ModalContent>
 
 <style>
+  .data-source-wrap {
+    padding-bottom: var(--spectrum-alias-item-padding-s);
+    display: grid;
+    grid-gap: var(--spacing-xs);
+  }
+
   .data-source-header {
     display: flex;
     align-items: center;
   }
 
-  .data-source-header .content {
-    padding: var(--spectrum-alias-item-padding-l);
-  }
-
   .data-source-entry {
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
@@ -172,7 +165,6 @@
     transition: 0.3s all;
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
-    box-sizing: border-box;
     border-width: 1px;
     display: flex;
     align-items: center;
@@ -182,4 +174,22 @@
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
   }
+
+  .data-source-name {
+    padding: var(--spectrum-alias-item-padding-s);
+    min-height: var(--spectrum-icon-size-s);
+  }
+
+  .data-source-entry .data-source-check {
+    margin-left: auto;
+  }
+
+  .data-source-entry :global(.spectrum-Icon) {
+    min-width: 16px;
+  }
+
+  .data-source-entry .data-source-check :global(.spectrum-Icon) {
+    color: var(--spectrum-global-color-green-600);
+    display: block;
+  }
 </style>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index d1f1fe50df..9318da5b77 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { tables } from "stores/backend"
-  import { ModalContent, Body, Layout, Icon } from "@budibase/bbui"
+  import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
 
   export let onConfirm
   export let onCancel
@@ -18,14 +18,13 @@
 <div>
   <ModalContent
     title="Add screens"
-    confirmText="Add screens"
+    confirmText="Continue"
     cancelText="Cancel"
     onConfirm={confirmScreenSelection}
     {onCancel}
     disabled={!selectedScreenMode}
     size="L"
   >
-    <Body size="S">Add a blank screen</Body>
     <Layout noPadding gap="S">
       <div
         class="screen-type item"
@@ -36,7 +35,10 @@
       >
         <div data-cy="blank-screen" class="content screen-type-wrap">
           <Icon name="WebPage" />
-          <span class="text">Blank</span>
+          <div class="screen-type-text">
+            <Heading size="XS">Blank screen</Heading>
+            <Body size="S">Add a blank screen</Body>
+          </div>
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
@@ -49,11 +51,6 @@
         </div>
       </div>
 
-      <Body size="S">
-        Add autogenerated screens with CRUD functionality to get a working app
-        quickly! (Requires a data source)
-      </Body>
-
       <div
         class="screen-type item"
         class:selected={selectedScreenMode == autoCreateModeKey}
@@ -65,7 +62,13 @@
       >
         <div data-cy="autogenerated-screens" class="content screen-type-wrap">
           <Icon name="WebPages" />
-          <span class="text">Autogenerated Screens</span>
+          <div class="screen-type-text">
+            <Heading size="XS">Autogenerated Screens</Heading>
+            <Body size="S">
+              Add autogenerated screens with CRUD functionality to get a working
+              app quickly! (Requires a data source)
+            </Body>
+          </div>
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
@@ -100,12 +103,6 @@
   .content {
     letter-spacing: 0px;
   }
-  .text {
-    font-weight: 600;
-    margin-left: var(--spacing-m);
-    font-size: 14px;
-    text-transform: capitalize;
-  }
   .item {
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
@@ -114,15 +111,22 @@
     transition: 0.3s all;
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
-    box-sizing: border-box;
     border-width: 1px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 60px;
   }
   .item:hover,
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
   }
+  .screen-type-wrap .screen-type-text {
+    padding-left: var(--spectrum-alias-item-padding-xl);
+  }
+  .screen-type-wrap :global(.spectrum-Icon) {
+    min-width: var(--spectrum-icon-size-m);
+  }
+  .screen-type-wrap :global(.spectrum-Heading) {
+    padding-bottom: var(--spectrum-alias-item-padding-s);
+  }
 </style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index 26d73949d2..39d3abf828 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -1,10 +1,8 @@
 <script>
-  import { ModalContent, Input, Select } from "@budibase/bbui"
+  import { ModalContent, Input } from "@budibase/bbui"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { selectedAccessRole, allScreens } from "builderStore"
   import { get } from "svelte/store"
-  import { roles } from "stores/backend"
-  import analytics, { Events } from "analytics"
 
   export let onConfirm
   export let onCancel
@@ -40,7 +38,6 @@
   const confirmScreenDetails = async () => {
     await onConfirm({
       screenUrl,
-      screenAccessRole,
     })
   }
 </script>
@@ -55,22 +52,9 @@
   disabled={!screenAccessRole || !screenUrl || routeError || !touched}
 >
   <Input
-    label="URL"
+    label="Enter a URL for the new screen"
     error={routeError}
     bind:value={screenUrl}
     on:change={routeChanged}
   />
-  <Select
-    bind:value={screenAccessRole}
-    on:change={() => {
-      analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
-        screenAccessRole,
-      })
-    }}
-    label="Screen access"
-    getOptionLabel={role => role.name}
-    getOptionValue={role => role._id}
-    getOptionColor={role => role.color}
-    options={$roles}
-  />
 </ModalContent>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index 97d1b1c204..f874cfc338 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -3,12 +3,12 @@
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import DatasourceModal from "components/design/NavigationPanel/DatasourceModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { Modal, notifications } from "@budibase/bbui"
+  import { Modal, ModalContent, Select, notifications } from "@budibase/bbui"
   import { store, selectedAccessRole } from "builderStore"
   import analytics, { Events } from "analytics"
   import { get } from "svelte/store"
   import getTemplates from "builderStore/store/screenTemplates"
-  import { tables } from "stores/backend"
+  import { tables, roles } from "stores/backend"
 
   let pendingScreen
 
@@ -16,11 +16,22 @@
   let newScreenModal
   let screenDetailsModal
   let datasourceModal
+  let screenAccessRoleModal
+
+  // Cache variables for workflow
+  let screenAccessRole = $selectedAccessRole + ""
+  let selectedTemplates = null
+  let blankScreenUrl = null
+
+  let screenMode = null
 
   // External handler to show the screen wizard
   export const showModal = () => {
-    newScreenModal.show()
+    selectedTemplates = null
+    blankScreenUrl = null
+    screenMode = null
 
+    newScreenModal.show()
     // Reset state when showing modal again
     pendingScreen = null
   }
@@ -102,6 +113,8 @@
 
   // Handler for NewScreenModal
   const confirmScreenSelection = async mode => {
+    screenMode = mode
+
     if (mode == "autoCreate") {
       datasourceModal.show()
     } else {
@@ -114,12 +127,18 @@
     }
   }
 
-  // Handler for DatasourceModal
-  const confirmScreenDatasources = async ({ templates, screenAccessRole }) => {
+  // Handler for DatasourceModal confirmation, move to screen access select
+  const confirmScreenDatasources = async ({ templates }) => {
+    selectedTemplates = templates
+    screenAccessRoleModal.show()
+  }
+
+  // Handler for Datasource Screen Creation
+  const completeDatasourceScreenCreation = async () => {
     // // Handle template selection
-    if (templates?.length > 1) {
+    if (selectedTemplates?.length > 1) {
       // Autoscreens, so create immediately
-      const screens = templates.map(template => {
+      const screens = selectedTemplates.map(template => {
         let screenTemplate = template.create()
         screenTemplate.datasource = template.datasource
         return screenTemplate
@@ -128,14 +147,42 @@
     }
   }
 
-  // Handler for ScreenDetailsModal
-  const confirmScreenDetails = async ({ screenUrl, screenAccessRole }) => {
+  const confirmScreenBlank = async ({ screenUrl }) => {
+    blankScreenUrl = screenUrl
+    screenAccessRoleModal.show()
+  }
+
+  // Submit request for a blank screen
+  const confirmBlankScreenCreation = async ({
+    screenUrl,
+    screenAccessRole,
+  }) => {
     if (!pendingScreen) {
       return
     }
     pendingScreen.routing.route = screenUrl
     await createScreens({ screens: [pendingScreen], screenAccessRole })
   }
+
+  // Submit screen config for creation.
+  const confirmScreenCreation = async () => {
+    if (screenMode === "blankScreen") {
+      confirmBlankScreenCreation({
+        screenUrl: blankScreenUrl,
+        screenAccessRole,
+      })
+    } else {
+      completeDatasourceScreenCreation()
+    }
+  }
+
+  const roleSelectBack = () => {
+    if (screenMode === "blankScreen") {
+      newScreenModal.show()
+    } else {
+      datasourceModal.show()
+    }
+  }
 </script>
 
 <Modal bind:this={newScreenModal}>
@@ -146,12 +193,39 @@
   <DatasourceModal
     onConfirm={confirmScreenDatasources}
     onCancel={() => newScreenModal.show()}
+    initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
   />
 </Modal>
 
+<Modal bind:this={screenAccessRoleModal}>
+  <ModalContent
+    title={"Create CRUD Screens"}
+    confirmText={"Done"}
+    cancelText={"Back"}
+    onConfirm={confirmScreenCreation}
+    onCancel={roleSelectBack}
+  >
+    Select which level of access you want your screens to have
+    <Select
+      bind:value={screenAccessRole}
+      on:change={() => {
+        analytics.captureEvent(Events.SCREEN.CREATE_ROLE_UPDATED, {
+          screenAccessRole,
+        })
+      }}
+      label="Access"
+      getOptionLabel={role => role.name}
+      getOptionValue={role => role._id}
+      getOptionColor={role => role.color}
+      options={$roles}
+    />
+  </ModalContent>
+</Modal>
+
 <Modal bind:this={screenDetailsModal}>
   <ScreenDetailsModal
-    onConfirm={confirmScreenDetails}
+    onConfirm={confirmScreenBlank}
     onCancel={() => newScreenModal.show()}
+    initialUrl={blankScreenUrl}
   />
 </Modal>

From b9f57eecb3a439e6ec44ae487be81f071e3afc1d Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 22 Apr 2022 14:57:13 +0100
Subject: [PATCH 10/12] Minor modal refactor for testing. Updates to the
 cypress tests around creating screens

---
 .../cypress/integration/createBinding.spec.js |   2 +-
 .../cypress/integration/createScreen.js       |  14 +-
 packages/builder/cypress/support/commands.js  |  43 ++++-
 .../NavigationPanel/DatasourceModal.svelte    | 164 +++++++++---------
 .../NavigationPanel/NewScreenModal.svelte     |   2 +-
 .../NavigationPanel/ScreenWizard.svelte       |   2 +-
 6 files changed, 134 insertions(+), 93 deletions(-)

diff --git a/packages/builder/cypress/integration/createBinding.spec.js b/packages/builder/cypress/integration/createBinding.spec.js
index 8bf1ec8ea4..57cd0cc5fc 100644
--- a/packages/builder/cypress/integration/createBinding.spec.js
+++ b/packages/builder/cypress/integration/createBinding.spec.js
@@ -26,7 +26,7 @@ filterTests(['smoke', 'all'], () => {
 
     it("should add a URL param binding", () => {
       const paramName = "foo"
-      cy.createScreen("Test Param", `/test/:${paramName}`)
+      cy.createScreen(`/test/:${paramName}`)
       cy.addComponent("Elements", "Paragraph").then(componentId => {
         addSettingBinding("text", `URL.${paramName}`)
         // The builder preview pages don't have a real URL, so all we can do
diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index 75132a22ba..f83de22df8 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -9,27 +9,27 @@ filterTests(["smoke", "all"], () => {
     })
 
     it("Should successfully create a screen", () => {
-      cy.createScreen("Test Screen", "/test")
+      cy.createScreen("/test")
       cy.get(".nav-items-container").within(() => {
         cy.contains("/test").should("exist")
       })
     })
 
     it("Should update the url", () => {
-      cy.createScreen("Test Screen", "test with spaces")
+      cy.createScreen("test with spaces")
       cy.get(".nav-items-container").within(() => {
         cy.contains("/test-with-spaces").should("exist")
       })
     })
 
     it("Should create a blank screen with the selected access level", () => {
-      cy.createScreen("Test Screen Admin", "admin only", "Admin")
+      cy.createScreen("admin only", "Admin")
 
       cy.get(".nav-items-container").within(() => {
         cy.contains("/admin-only").should("exist")
       })
 
-      cy.createScreen("Test Screen Public", "open to all", "Public")
+      cy.createScreen("open to all", "Public")
 
       cy.get(".nav-items-container").within(() => {
         cy.contains("/open-to-all").should("exist")
@@ -37,5 +37,11 @@ filterTests(["smoke", "all"], () => {
         cy.get(".nav-item").contains("/test-screen").should("not.exist")
       })
     })
+
+    it("Should create a set of datasource screens with the selected access level", () => {
+      
+      cy.createDatasourceScreen("Cypress Tests", "Public")
+
+    })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 7549270af4..1966957edb 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -142,7 +142,7 @@ Cypress.Commands.add("createTestApp", () => {
   const appName = "Cypress Tests"
   cy.deleteApp(appName)
   cy.createApp(appName, "This app is used for Cypress testing.")
-  cy.createScreen("home", "home")
+  cy.createScreen("home")
 })
 
 Cypress.Commands.add("createTestTableWithData", () => {
@@ -283,28 +283,59 @@ Cypress.Commands.add("navigateToDataSection", () => {
 })
 
 //Blank
-Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
+Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
   cy.contains("Design").click()
   cy.get("[aria-label=AddCircle]").click()
   cy.get(".spectrum-Modal").within(() => {
-    cy.get(".item").contains("Blank").click()
+    cy.get(".item").contains("Blank screen").click()
     cy.get(".spectrum-Button").contains("Continue").click({ force: true })
     cy.wait(500)
   })
   cy.get(".spectrum-Dialog-grid").within(() => {
     cy.get(".spectrum-Form-itemField").eq(0).type(route)
+    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
+    cy.wait(1000)
+  })
 
+  cy.get(".spectrum-Modal").within(() => {
     if (accessLevelLabel) {
       cy.get(".spectrum-Picker-label").click()
       cy.wait(500)
       cy.contains(accessLevelLabel).click()
     }
-
-    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
-    cy.wait(1000)
+    cy.get(".spectrum-Button").contains("Done").click({ force: true })
   })
 })
 
+Cypress.Commands.add("createDatasourceScreen", (datasourceName, accessLevelLabel) => {
+  cy.contains("Design").click()
+  cy.get("[aria-label=AddCircle]").click()
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get(".item").contains("Autogenerated screens").click()
+    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
+    cy.wait(500)
+  })
+  cy.get(".spectrum-Modal [data-cy='data-source-modal']").within(() => {
+    cy.get(".data-source-entry").contains(datasourceName).should("exist")
+    cy.get(".data-source-entry").contains(datasourceName).click({ force: true })
+
+    cy.get(".data-source-entry").contains(datasourceName).get(".data-source-check").should("exist")
+    cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
+  })
+
+  cy.get(".spectrum-Modal").within(() => {
+    if (accessLevelLabel) {
+      cy.get(".spectrum-Picker-label").click()
+      cy.wait(500)
+      cy.contains(accessLevelLabel).click()
+    }
+    cy.get(".spectrum-Button").contains("Done").click({ force: true })
+  })
+
+  cy.contains("Design").click()
+})
+
+
 Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   // Screen name must already exist within data source
   cy.contains("Design").click()
diff --git a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
index 17a8556831..1cb3856165 100644
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@@ -60,90 +60,94 @@
   })
 </script>
 
-<ModalContent
-  title="Create CRUD Screens"
-  confirmText="Confirm"
-  cancelText="Back"
-  onConfirm={confirmDatasourceSelection}
-  {onCancel}
-  disabled={!selectedScreens.length}
-  size="L"
->
-  <Layout noPadding gap="S">
-    {#each filteredSources as datasource}
-      <div class="data-source-wrap">
-        <div class="data-source-header">
-          <div class="datasource-icon">
-            <svelte:component
-              this={ICONS[datasource.source]}
-              height="24"
-              width="24"
-            />
+<span data-cy="data-source-modal">
+  <ModalContent
+    title="Create CRUD Screens"
+    confirmText="Confirm"
+    cancelText="Back"
+    onConfirm={confirmDatasourceSelection}
+    {onCancel}
+    disabled={!selectedScreens.length}
+    size="L"
+  >
+    <Layout noPadding gap="S">
+      {#each filteredSources as datasource}
+        <div class="data-source-wrap">
+          <div class="data-source-header">
+            <div class="datasource-icon">
+              <svelte:component
+                this={ICONS[datasource.source]}
+                height="24"
+                width="24"
+              />
+            </div>
+            <div class="data-source-name">{datasource.name}</div>
           </div>
-          <div class="data-source-name">{datasource.name}</div>
-        </div>
-        {#if Array.isArray(datasource.entities)}
-          {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
-            <div
-              class="data-source-entry"
-              class:selected={selectedScreens.find(x => x.table === table.name)}
-              on:click={() => toggleScreenSelection(table, datasource)}
-            >
-              <svg
-                width="16px"
-                height="16px"
-                class="spectrum-Icon"
-                style="color: white"
-                focusable="false"
-              >
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              {table.name}
-
-              {#if selectedScreens.find(x => x.table === table.name)}
-                <span class="data-source-check">
-                  <Icon size="S" name="CheckmarkCircle" />
-                </span>
-              {/if}
-            </div>
-          {/each}
-        {/if}
-        {#if datasource["entities"] && !Array.isArray(datasource.entities)}
-          {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
-            <div
-              class="data-source-entry"
-              class:selected={selectedScreens.find(
-                x => x.table === datasource.entities[table_key].name
-              )}
-              on:click={() =>
-                toggleScreenSelection(
-                  datasource.entities[table_key],
-                  datasource
+          {#if Array.isArray(datasource.entities)}
+            {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
+              <div
+                class="data-source-entry"
+                class:selected={selectedScreens.find(
+                  x => x.table === table.name
                 )}
-            >
-              <svg
-                width="16px"
-                height="16px"
-                class="spectrum-Icon"
-                style="color: white"
-                focusable="false"
+                on:click={() => toggleScreenSelection(table, datasource)}
               >
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              {datasource.entities[table_key].name}
+                <svg
+                  width="16px"
+                  height="16px"
+                  class="spectrum-Icon"
+                  style="color: white"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                {table.name}
 
-              {#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
-                <span class="data-source-check">
-                  <Icon size="S" name="CheckmarkCircle" />
-                </span>
-              {/if}
-            </div>
-          {/each}
-        {/if}
-      </div>
-    {/each}
-  </Layout>
-</ModalContent>
+                {#if selectedScreens.find(x => x.table === table.name)}
+                  <span class="data-source-check">
+                    <Icon size="S" name="CheckmarkCircle" />
+                  </span>
+                {/if}
+              </div>
+            {/each}
+          {/if}
+          {#if datasource["entities"] && !Array.isArray(datasource.entities)}
+            {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
+              <div
+                class="data-source-entry"
+                class:selected={selectedScreens.find(
+                  x => x.table === datasource.entities[table_key].name
+                )}
+                on:click={() =>
+                  toggleScreenSelection(
+                    datasource.entities[table_key],
+                    datasource
+                  )}
+              >
+                <svg
+                  width="16px"
+                  height="16px"
+                  class="spectrum-Icon"
+                  style="color: white"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                {datasource.entities[table_key].name}
+
+                {#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
+                  <span class="data-source-check">
+                    <Icon size="S" name="CheckmarkCircle" />
+                  </span>
+                {/if}
+              </div>
+            {/each}
+          {/if}
+        </div>
+      {/each}
+    </Layout>
+  </ModalContent>
+</span>
 
 <style>
   .data-source-wrap {
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 9318da5b77..8fd22926e4 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -63,7 +63,7 @@
         <div data-cy="autogenerated-screens" class="content screen-type-wrap">
           <Icon name="WebPages" />
           <div class="screen-type-text">
-            <Heading size="XS">Autogenerated Screens</Heading>
+            <Heading size="XS">Autogenerated screens</Heading>
             <Body size="S">
               Add autogenerated screens with CRUD functionality to get a working
               app quickly! (Requires a data source)
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index f874cfc338..1859ba93b6 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -178,7 +178,7 @@
 
   const roleSelectBack = () => {
     if (screenMode === "blankScreen") {
-      newScreenModal.show()
+      screenDetailsModal.show()
     } else {
       datasourceModal.show()
     }

From 7a043dcdbda55b23a349b14e49fadc88696d87d2 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 22 Apr 2022 16:36:33 +0100
Subject: [PATCH 11/12] Code styling

---
 .../cypress/integration/createScreen.js       |  2 -
 packages/builder/cypress/support/commands.js  | 57 +++++++++++--------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index f83de22df8..f30dcfd330 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -39,9 +39,7 @@ filterTests(["smoke", "all"], () => {
     })
 
     it("Should create a set of datasource screens with the selected access level", () => {
-      
       cy.createDatasourceScreen("Cypress Tests", "Public")
-
     })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 1966957edb..7fb64e6f5d 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -307,34 +307,41 @@ Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
   })
 })
 
-Cypress.Commands.add("createDatasourceScreen", (datasourceName, accessLevelLabel) => {
-  cy.contains("Design").click()
-  cy.get("[aria-label=AddCircle]").click()
-  cy.get(".spectrum-Modal").within(() => {
-    cy.get(".item").contains("Autogenerated screens").click()
-    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
-    cy.wait(500)
-  })
-  cy.get(".spectrum-Modal [data-cy='data-source-modal']").within(() => {
-    cy.get(".data-source-entry").contains(datasourceName).should("exist")
-    cy.get(".data-source-entry").contains(datasourceName).click({ force: true })
-
-    cy.get(".data-source-entry").contains(datasourceName).get(".data-source-check").should("exist")
-    cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
-  })
-
-  cy.get(".spectrum-Modal").within(() => {
-    if (accessLevelLabel) {
-      cy.get(".spectrum-Picker-label").click()
+Cypress.Commands.add(
+  "createDatasourceScreen",
+  (datasourceName, accessLevelLabel) => {
+    cy.contains("Design").click()
+    cy.get("[aria-label=AddCircle]").click()
+    cy.get(".spectrum-Modal").within(() => {
+      cy.get(".item").contains("Autogenerated screens").click()
+      cy.get(".spectrum-Button").contains("Continue").click({ force: true })
       cy.wait(500)
-      cy.contains(accessLevelLabel).click()
-    }
-    cy.get(".spectrum-Button").contains("Done").click({ force: true })
-  })
+    })
+    cy.get(".spectrum-Modal [data-cy='data-source-modal']").within(() => {
+      cy.get(".data-source-entry").contains(datasourceName).should("exist")
+      cy.get(".data-source-entry")
+        .contains(datasourceName)
+        .click({ force: true })
 
-  cy.contains("Design").click()
-})
+      cy.get(".data-source-entry")
+        .contains(datasourceName)
+        .get(".data-source-check")
+        .should("exist")
+      cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
+    })
 
+    cy.get(".spectrum-Modal").within(() => {
+      if (accessLevelLabel) {
+        cy.get(".spectrum-Picker-label").click()
+        cy.wait(500)
+        cy.contains(accessLevelLabel).click()
+      }
+      cy.get(".spectrum-Button").contains("Done").click({ force: true })
+    })
+
+    cy.contains("Design").click()
+  }
+)
 
 Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   // Screen name must already exist within data source

From 7cbf9c2e61c9b4acd08794650d7b2c49db9f328f Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 22 Apr 2022 18:23:16 +0100
Subject: [PATCH 12/12] Cypress fixes for screen create flow

---
 .../cypress/integration/autoScreensUI.spec.js | 41 +++++++++----------
 .../cypress/integration/createScreen.js       |  4 --
 packages/builder/cypress/support/commands.js  | 20 ++++-----
 .../NavigationPanel/ScreenDetailsModal.svelte | 19 +++++++++
 4 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js
index 79c38600f8..2c2a43e711 100644
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@@ -14,7 +14,7 @@ filterTests(['smoke', 'all'], () => {
       cy.contains("Design").click()
       cy.get("[aria-label=AddCircle]").click()
       cy.get(".spectrum-Modal").within(() => {
-        cy.get(".item.disabled").contains("Autogenerated Screens")
+        cy.get(".item.disabled").contains("Autogenerated screens")
         cy.get(".confirm-wrap .spectrum-Button").should('be.disabled')
       })
 
@@ -40,8 +40,8 @@ filterTests(['smoke', 'all'], () => {
       
     it("should generate internal table screens", () => {
       cy.createTestApp()
-      // Create autogenerated screens from the internal table
-      cy.createAutogeneratedScreens(["Cypress Tests"])
+      // Create Autogenerated screens from the internal table
+      cy.createDatasourceScreen(["Cypress Tests"])
       // Confirm screens have been auto generated
       cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
       cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
@@ -53,8 +53,8 @@ filterTests(['smoke', 'all'], () => {
       const initialTable = "Cypress Tests"
       const secondTable = "Table Two"
       cy.createTable(secondTable)
-      // Create autogenerated screens from the internal tables
-      cy.createAutogeneratedScreens([initialTable, secondTable])
+      // Create Autogenerated screens from the internal tables
+      cy.createDatasourceScreen([initialTable, secondTable])
       // Confirm screens have been auto generated
       cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
       // Previously generated tables are suffixed with numbers - as expected
@@ -67,25 +67,21 @@ filterTests(['smoke', 'all'], () => {
 
     it("should generate multiple internal table screens with the same screen access level", () => {
       //The tables created in the previous step still exist
-
       cy.createTable("Table Three")
       cy.createTable("Table Four")
-      cy.createAutogeneratedScreens(["Table Three", "Table Four"], "Admin")
-      
-      cy.get(".nav-items-container").within(() => {
-        cy.get(".nav-item").contains("/table-three").click()
-        cy.get(".nav-item").should('contain', 'table-three/:id')
-          .and('contain', 'table-three/new/row')
+      cy.createDatasourceScreen(["Table Three", "Table Four"], "Admin")
 
-        cy.get(".nav-item").contains("/table-four").click()
-        cy.get(".nav-item").should('contain', 'table-four/:id')
-          .and('contain', 'table-four/new/row')
+      cy.get(".nav-items-container").contains("table-three").click()
+      cy.get(".nav-items-container").should('contain', 'table-three/:id')
+      .and('contain', 'table-three/new/row')
 
-        //The access level should now be set to admin. Previous screens should be filtered.
-        cy.get(".nav-item").contains("/table-two").should('not.exist')
-        cy.get(".nav-item").contains("/cypress-tests").should('not.exist')
-        
-      })
+      cy.get(".nav-items-container").contains("table-four").click()
+      cy.get(".nav-items-container").should('contain', 'table-four/:id')
+      .and('contain', 'table-four/new/row')
+
+      //The access level should now be set to admin. Previous screens should be filtered.
+      cy.get(".nav-items-container").contains("table-two").should('not.exist')
+      cy.get(".nav-items-container").contains("cypress-tests").should('not.exist')
     })
 
     if (Cypress.env("TEST_ENV")) {
@@ -95,8 +91,9 @@ filterTests(['smoke', 'all'], () => {
         // Select & configure MySQL data source
         cy.selectExternalDatasource(datasource)
         cy.addDatasourceConfig(datasource)
-        // Create autogenerated screens from a MySQL table - MySQL contains books table
-        cy.createAutogeneratedScreens(["books"])
+        // Create Autogenerated screens from a MySQL table - MySQL contains books table
+        cy.createDatasourceScreen(["books"])
+        
         cy.get(".nav-items-container").contains("books").click()
         cy.get(".nav-items-container").should('contain', 'books/:id')
           .and('contain', 'books/new/row')
diff --git a/packages/builder/cypress/integration/createScreen.js b/packages/builder/cypress/integration/createScreen.js
index f30dcfd330..ae10577ff0 100644
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@@ -37,9 +37,5 @@ filterTests(["smoke", "all"], () => {
         cy.get(".nav-item").contains("/test-screen").should("not.exist")
       })
     })
-
-    it("Should create a set of datasource screens with the selected access level", () => {
-      cy.createDatasourceScreen("Cypress Tests", "Public")
-    })
   })
 })
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 7fb64e6f5d..13f3031827 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -309,7 +309,7 @@ Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
 
 Cypress.Commands.add(
   "createDatasourceScreen",
-  (datasourceName, accessLevelLabel) => {
+  (datasourceNames, accessLevelLabel) => {
     cy.contains("Design").click()
     cy.get("[aria-label=AddCircle]").click()
     cy.get(".spectrum-Modal").within(() => {
@@ -318,15 +318,15 @@ Cypress.Commands.add(
       cy.wait(500)
     })
     cy.get(".spectrum-Modal [data-cy='data-source-modal']").within(() => {
-      cy.get(".data-source-entry").contains(datasourceName).should("exist")
-      cy.get(".data-source-entry")
-        .contains(datasourceName)
-        .click({ force: true })
+      for (let i = 0; i < datasourceNames.length; i++) {
+        cy.get(".data-source-entry").contains(datasourceNames[i]).click()
+        //Ensure the check mark is visible
+        cy.get(".data-source-entry")
+          .contains(datasourceNames[i])
+          .get(".data-source-check")
+          .should("exist")
+      }
 
-      cy.get(".data-source-entry")
-        .contains(datasourceName)
-        .get(".data-source-check")
-        .should("exist")
       cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
     })
 
@@ -348,7 +348,7 @@ Cypress.Commands.add("navigateToAutogeneratedModal", () => {
   cy.contains("Design").click()
   cy.get("[aria-label=AddCircle]").click()
   cy.get(".spectrum-Modal").within(() => {
-    cy.get(".item").contains("Autogenerated Screens").click()
+    cy.get(".item").contains("Autogenerated screens").click()
     cy.get(".spectrum-Button").contains("Continue").click({ force: true })
     cy.wait(500)
   })
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index 39d3abf828..4afd182053 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -13,6 +13,12 @@
   let touched = false
   let screenAccessRole = $selectedAccessRole + ""
 
+  const appPrefix = "/app"
+
+  $: appUrl = screenUrl
+    ? `${window.location.origin}${appPrefix}${screenUrl}`
+    : `${window.location.origin}${appPrefix}`
+
   const routeChanged = event => {
     if (!event.detail.startsWith("/")) {
       screenUrl = "/" + event.detail
@@ -57,4 +63,17 @@
     bind:value={screenUrl}
     on:change={routeChanged}
   />
+  <div class="app-server" title={appUrl}>
+    {appUrl}
+  </div>
 </ModalContent>
+
+<style>
+  .app-server {
+    color: var(--spectrum-global-color-gray-600);
+    width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>