Cypress fixes for screen create flow

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.createDatasourceScreen(["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')
+      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')
 
-        cy.get(".nav-item").contains("/table-four").click()
-        cy.get(".nav-item").should('contain', 'table-four/:id')
+      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-item").contains("/table-two").should('not.exist')
-        cy.get(".nav-item").contains("/cypress-tests").should('not.exist')
-        
-      })
+      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')

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

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")
+      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(datasourceName)
-        .click({ force: true })
-
-      cy.get(".data-source-entry")
-        .contains(datasourceName)
+          .contains(datasourceNames[i])
           .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)
   })

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>