Merge pull request #3488 from Budibase/feature/auto-screen-ui

Remove nav selection modal from screens UI (for now)

packages/builder/cypress/support/commands.js

@@ -195,10 +195,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
     cy.get("input").first().clear().type(screenName)
     cy.get("input").eq(1).clear().type(route)
     cy.get(".spectrum-Button--cta").click()
-  })
+    cy.wait(2000)
-  cy.get(".spectrum-Modal").within(() => {
-    cy.get(`[data-cy="left-nav"]`).click()
-    cy.get(".spectrum-Button--cta").click()
   })
 })
 

packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte

@@ -1,98 +1,12 @@
 <script>
   import { ModalContent, Body, Detail } from "@budibase/bbui"
-  import { store, selectedAccessRole, allScreens } from "builderStore"
-  import { cloneDeep } from "lodash/fp"
-  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { onDestroy } from "svelte"
 
   export let selectedScreens
-  export let screenName
-  export let url
   export let chooseModal
-
+  export let save
-  let roleId = $selectedAccessRole || "BASIC"
-
-  let routeError
   let selectedNav
   let createdScreens = []
-  $: {
-    selectedScreens?.forEach(screen => {
-      createdScreens = [...createdScreens, screen.create()]
-    })
-  }
-
   $: blankSelected = selectedScreens.length === 1
-
-  const save = async screens => {
-    for (let screen of screens) {
-      await saveScreens(screen)
-    }
-
-    let navLayout = cloneDeep(
-      $store.layouts.find(layout => layout._id === "layout_private_master")
-    )
-    navLayout.props.navigation = selectedNav
-
-    await store.actions.routing.fetch()
-    await store.actions.layouts.save(navLayout)
-    selectedScreens = []
-    screenName = ""
-    url = ""
-  }
-  const saveScreens = async draftScreen => {
-    let existingScreenCount = $store.screens.filter(
-      s => s.props._instanceName == draftScreen.props._instanceName
-    ).length
-
-    if (existingScreenCount > 0) {
-      let oldUrlArr = draftScreen.routing.route.split("/")
-      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
-      draftScreen.routing.route = oldUrlArr.join("/")
-    }
-
-    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
-    if (draftScreen) {
-      if (!route) {
-        routeError = "URL is required"
-      } else {
-        if (routeExists(route, roleId)) {
-          routeError = "This URL is already taken for this access role"
-        } else {
-          routeError = ""
-        }
-      }
-
-      if (routeError) return false
-
-      if (screenName) {
-        draftScreen.props._instanceName = screenName
-      }
-
-      draftScreen.routing.route = route
-
-      await store.actions.screens.create(draftScreen)
-      if (draftScreen.props._instanceName.endsWith("List")) {
-        await store.actions.components.links.save(
-          draftScreen.routing.route,
-          draftScreen.routing.route.split("/")[1]
-        )
-      }
-    }
-  }
-
-  const routeExists = (route, roleId) => {
-    return $allScreens.some(
-      screen =>
-        screen.routing.route.toLowerCase() === route.toLowerCase() &&
-        screen.routing.roleId === roleId
-    )
-  }
-
-  onDestroy(() => {
-    selectedScreens = []
-    screenName = ""
-    url = ""
-  })
 </script>
 
 <ModalContent

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -6,23 +6,23 @@
 
   export let selectedScreens = []
   export let chooseModal
+  export let save
 
   const blankScreen = "createFromScratch"
 
   $: blankSelected = selectedScreens?.length === 1
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
-
+  let templates = getTemplates($store, $tables.list)
-  $: templates = getTemplates($store, $tables.list)
   const toggleScreenSelection = table => {
     if (selectedScreens.find(s => s.name.includes(table.name))) {
       selectedScreens = selectedScreens.filter(
         screen => !screen.name.includes(table.name)
       )
     } else {
-      templates = templates.filter(template =>
+      let partialTemplates = getTemplates($store, $tables.list).filter(
-        template.name.includes(table.name)
+        template => template.name.includes(table.name)
       )
-      selectedScreens = [...templates, ...selectedScreens]
+      selectedScreens = [...partialTemplates, ...selectedScreens]
     }
   }
 </script>
@@ -31,7 +31,7 @@
   title="Add screens"
   confirmText="Add Screens"
   cancelText="Cancel"
-  onConfirm={() => (autoSelected ? chooseModal(2) : chooseModal(1))}
+  onConfirm={() => (autoSelected ? save() : chooseModal(1))}
   disabled={!selectedScreens.length}
   size="L"
 >
@@ -60,7 +60,7 @@
     </div>
     <Detail size="S">Autogenerated Screens</Detail>
 
-    {#each $tables.list.filter(table => table.type !== "external") as table}
+    {#each $tables.list.filter(table => table.type !== "external" && table._id !== "ta_users") as table}
       <div
         class:disabled={blankSelected}
         class:selected={selectedScreens.find(x => x.name.includes(table.name))}

packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte

@@ -6,7 +6,7 @@
   export let screenName
   export let url
   export let chooseModal
-
+  export let save
   let routeError
   let roleId = $selectedAccessRole || "BASIC"
 
@@ -37,7 +37,7 @@
   title={"Enter details"}
   confirmText={"Continue"}
   onCancel={() => chooseModal(0)}
-  onConfirm={() => chooseModal(2)}
+  onConfirm={() => save()}
   cancelText={"Back"}
   disabled={!screenName || !url || routeError}
 >

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -1,8 +1,10 @@
 <script>
-  import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte"
   import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { Modal } from "@budibase/bbui"
+  import { store, selectedAccessRole, allScreens } from "builderStore"
+  import { onDestroy } from "svelte"
 
   let newScreenModal
   let navigationSelectionModal
@@ -11,6 +13,81 @@
   let url = ""
   let selectedScreens = []
 
+  let roleId = $selectedAccessRole || "BASIC"
+
+  let routeError
+  let createdScreens = []
+  $: {
+    selectedScreens?.forEach(screen => {
+      createdScreens = [...createdScreens, screen.create()]
+    })
+  }
+
+  const save = async () => {
+    for (let screen of createdScreens) {
+      await saveScreens(screen)
+    }
+
+    await store.actions.routing.fetch()
+    selectedScreens = []
+    screenName = ""
+    url = ""
+  }
+  const saveScreens = async draftScreen => {
+    let existingScreenCount = $store.screens.filter(
+      s => s.props._instanceName == draftScreen.props._instanceName
+    ).length
+
+    if (existingScreenCount > 0) {
+      let oldUrlArr = draftScreen.routing.route.split("/")
+      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
+      draftScreen.routing.route = oldUrlArr.join("/")
+    }
+
+    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
+    if (draftScreen) {
+      if (!route) {
+        routeError = "URL is required"
+      } else {
+        if (routeExists(route, roleId)) {
+          routeError = "This URL is already taken for this access role"
+        } else {
+          routeError = ""
+        }
+      }
+
+      if (routeError) return false
+
+      if (screenName) {
+        draftScreen.props._instanceName = screenName
+      }
+
+      draftScreen.routing.route = route
+
+      await store.actions.screens.create(draftScreen)
+      if (draftScreen.props._instanceName.endsWith("List")) {
+        await store.actions.components.links.save(
+          draftScreen.routing.route,
+          draftScreen.routing.route.split("/")[1]
+        )
+      }
+    }
+  }
+
+  const routeExists = (route, roleId) => {
+    return $allScreens.some(
+      screen =>
+        screen.routing.route.toLowerCase() === route.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
+
+  onDestroy(() => {
+    selectedScreens = []
+    screenName = ""
+    url = ""
+  })
+
   export const showModal = () => {
     newScreenModal.show()
   }
@@ -32,17 +109,9 @@
 </script>
 
 <Modal bind:this={newScreenModal}>
-  <NewScreenModal bind:selectedScreens {chooseModal} />
+  <NewScreenModal bind:selectedScreens {save} {chooseModal} />
 </Modal>
 
 <Modal bind:this={screenDetailsModal}>
-  <ScreenDetailsModal bind:screenName bind:url {chooseModal} />
+  <ScreenDetailsModal bind:screenName bind:url {save} {chooseModal} />
-</Modal>
-<Modal bind:this={navigationSelectionModal}>
-  <NavigationSelectionModal
-    bind:url
-    bind:screenName
-    bind:selectedScreens
-    {chooseModal}
-  />
 </Modal>