Minor modal refactor for testing. Updates to the cypress tests around creating screens

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

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")
+
+    })
   })
 })

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("Done").click({ force: true })
-    cy.get(".spectrum-Button").contains("Continue").click({ force: true })
-    cy.wait(1000)
   })
 })
 
+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()

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

@@ -60,7 +60,8 @@
   })
 </script>
 
-<ModalContent
+<span data-cy="data-source-modal">
+  <ModalContent
     title="Create CRUD Screens"
     confirmText="Confirm"
     cancelText="Back"
@@ -68,7 +69,7 @@
     {onCancel}
     disabled={!selectedScreens.length}
     size="L"
->
+  >
     <Layout noPadding gap="S">
       {#each filteredSources as datasource}
         <div class="data-source-wrap">
@@ -86,7 +87,9 @@
             {#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)}
+                class:selected={selectedScreens.find(
+                  x => x.table === table.name
+                )}
                 on:click={() => toggleScreenSelection(table, datasource)}
               >
                 <svg
@@ -143,7 +146,8 @@
         </div>
       {/each}
     </Layout>
-</ModalContent>
+  </ModalContent>
+</span>
 
 <style>
   .data-source-wrap {

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)

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

@@ -178,7 +178,7 @@
 
   const roleSelectBack = () => {
     if (screenMode === "blankScreen") {
-      newScreenModal.show()
+      screenDetailsModal.show()
     } else {
       datasourceModal.show()
     }