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,90 +60,94 @@
   })
 </script>
 
-<ModalContent
+<span data-cy="data-source-modal">
-  title="Create CRUD Screens"
+  <ModalContent
-  confirmText="Confirm"
+    title="Create CRUD Screens"
-  cancelText="Back"
+    confirmText="Confirm"
-  onConfirm={confirmDatasourceSelection}
+    cancelText="Back"
-  {onCancel}
+    onConfirm={confirmDatasourceSelection}
-  disabled={!selectedScreens.length}
+    {onCancel}
-  size="L"
+    disabled={!selectedScreens.length}
->
+    size="L"
-  <Layout noPadding gap="S">
+  >
-    {#each filteredSources as datasource}
+    <Layout noPadding gap="S">
-      <div class="data-source-wrap">
+      {#each filteredSources as datasource}
-        <div class="data-source-header">
+        <div class="data-source-wrap">
-          <div class="datasource-icon">
+          <div class="data-source-header">
-            <svelte:component
+            <div class="datasource-icon">
-              this={ICONS[datasource.source]}
+              <svelte:component
-              height="24"
+                this={ICONS[datasource.source]}
-              width="24"
+                height="24"
-            />
+                width="24"
+              />
+            </div>
+            <div class="data-source-name">{datasource.name}</div>
           </div>
-          <div class="data-source-name">{datasource.name}</div>
+          {#if Array.isArray(datasource.entities)}
-        </div>
+            {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
-        {#if Array.isArray(datasource.entities)}
+              <div
-          {#each datasource.entities.filter(table => table._id !== "ta_users") as table}
+                class="data-source-entry"
-            <div
+                class:selected={selectedScreens.find(
-              class="data-source-entry"
+                  x => x.table === table.name
-              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
                 )}
-            >
+                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
-              </svg>
+                  width="16px"
-              {datasource.entities[table_key].name}
+                  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)}
+                {#if selectedScreens.find(x => x.table === table.name)}
-                <span class="data-source-check">
+                  <span class="data-source-check">
-                  <Icon size="S" name="CheckmarkCircle" />
+                    <Icon size="S" name="CheckmarkCircle" />
-                </span>
+                  </span>
-              {/if}
+                {/if}
-            </div>
+              </div>
-          {/each}
+            {/each}
-        {/if}
+          {/if}
-      </div>
+          {#if datasource["entities"] && !Array.isArray(datasource.entities)}
-    {/each}
+            {#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
-  </Layout>
+              <div
-</ModalContent>
+                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 {

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()
     }