Merge pull request #4700 from Budibase/rest-api-endpoint-naming

Improve REST query naming in navigation

packages/builder/cypress/integration/datasources/rest.spec.js

@@ -1,6 +1,6 @@
 import filterTests from "../../support/filterTests"
 
-filterTests(['smoke', 'all'], () => {
+filterTests(["smoke", "all"], () => {
   context("REST Datasource Testing", () => {
     before(() => {
       cy.login()
@@ -16,15 +16,17 @@ filterTests(['smoke', 'all'], () => {
       // Enter incorrect api & attempt to send query
       cy.wait(500)
       cy.get(".spectrum-Button").contains("Add query").click({ force: true })
-            cy.intercept('**/preview').as('queryError')
+      cy.intercept("**/preview").as("queryError")
       cy.get("input").clear().type("random text")
       cy.get(".spectrum-Button").contains("Send").click({ force: true })
       // Intercept Request after button click & apply assertions
       cy.wait("@queryError")
-            cy.get("@queryError").its('response.body')
+      cy.get("@queryError")
-            .should('have.property', 'message', 'Invalid URL: http://random text?')
+        .its("response.body")
-            cy.get("@queryError").its('response.body')
+        .should("have.property", "message", "Invalid URL: http://random text?")
-            .should('have.property', 'status', 400)
+      cy.get("@queryError")
+        .its("response.body")
+        .should("have.property", "status", 400)
     })
 
     it("should add and configure a REST datasource", () => {
@@ -32,12 +34,12 @@ filterTests(['smoke', 'all'], () => {
       cy.selectExternalDatasource(datasource)
       cy.wait(500)
       // createRestQuery confirms query creation
-            cy.createRestQuery("GET", restUrl)
+      cy.createRestQuery("GET", restUrl, "/breweries")
       // Confirm status code response within REST datasource
       cy.get(".spectrum-FieldLabel")
         .contains("Status")
         .children()
-            .should('contain', 200)
+        .should("contain", 200)
     })
   })
 })

packages/builder/cypress/integration/queryLevelTransformers.spec.js

@@ -1,6 +1,6 @@
 import filterTests from "../support/filterTests"
 
-filterTests(['smoke', 'all'], () => {
+filterTests(["smoke", "all"], () => {
   context("Query Level Transformers", () => {
     before(() => {
       cy.login()
@@ -13,24 +13,27 @@ filterTests(['smoke', 'all'], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-        cy.createRestQuery("GET", restUrl)
+      cy.createRestQuery("GET", restUrl, "/breweries")
       cy.get(".spectrum-Tabs-itemLabel").contains("Transformer").click()
       // Get Transformer Function from file
-        cy.readFile("cypress/support/queryLevelTransformerFunction.js").then((transformerFunction) => {
+      cy.readFile("cypress/support/queryLevelTransformerFunction.js").then(
+        transformerFunction => {
           cy.get(".CodeMirror textarea")
             // Highlight current text and overwrite with file contents
-          .type(Cypress.platform === 'darwin' ? '{cmd}a' : '{ctrl}a', { force: true })
+            .type(Cypress.platform === "darwin" ? "{cmd}a" : "{ctrl}a", {
-          .type(transformerFunction, { parseSpecialCharSequences: false })
+              force: true,
             })
+            .type(transformerFunction, { parseSpecialCharSequences: false })
+        }
+      )
       // Send Query
-        cy.intercept('**/queries/preview').as('query')
+      cy.intercept("**/queries/preview").as("query")
       cy.get(".spectrum-Button").contains("Send").click({ force: true })
       cy.wait("@query")
       // Assert against Status Code, body, & body rows
-        cy.get("@query").its('response.statusCode')
+      cy.get("@query").its("response.statusCode").should("eq", 200)
-        .should('eq', 200)
+      cy.get("@query").its("response.body").should("not.be.empty")
-        cy.get("@query").its('response.body').should('not.be.empty')
+      cy.get("@query").its("response.body.rows").should("not.be.empty")
-        cy.get("@query").its('response.body.rows').should('not.be.empty')
     })
 
     it("should add data to the previous query", () => {
@@ -38,25 +41,28 @@ filterTests(['smoke', 'all'], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-      cy.createRestQuery("GET", restUrl)
+      cy.createRestQuery("GET", restUrl, "/breweries")
       cy.get(".spectrum-Tabs-itemLabel").contains("Transformer").click()
       // Get Transformer Function with Data from file
-      cy.readFile("cypress/support/queryLevelTransformerFunctionWithData.js").then((transformerFunction) => {
+      cy.readFile(
+        "cypress/support/queryLevelTransformerFunctionWithData.js"
+      ).then(transformerFunction => {
         //console.log(transformerFunction[1])
         cy.get(".CodeMirror textarea")
           // Highlight current text and overwrite with file contents
-        .type(Cypress.platform === 'darwin' ? '{cmd}a' : '{ctrl}a', { force: true })
+          .type(Cypress.platform === "darwin" ? "{cmd}a" : "{ctrl}a", {
+            force: true,
+          })
           .type(transformerFunction, { parseSpecialCharSequences: false })
       })
       // Send Query
-      cy.intercept('**/queries/preview').as('query')
+      cy.intercept("**/queries/preview").as("query")
       cy.get(".spectrum-Button").contains("Send").click({ force: true })
       cy.wait("@query")
       // Assert against Status Code, body, & body rows
-      cy.get("@query").its('response.statusCode')
+      cy.get("@query").its("response.statusCode").should("eq", 200)
-      .should('eq', 200)
+      cy.get("@query").its("response.body").should("not.be.empty")
-      cy.get("@query").its('response.body').should('not.be.empty')
+      cy.get("@query").its("response.body.rows").should("not.be.empty")
-      cy.get("@query").its('response.body.rows').should('not.be.empty')
     })
 
     it("should run an invalid query within the transformer section", () => {
@@ -64,52 +70,70 @@ filterTests(['smoke', 'all'], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-      cy.createRestQuery("GET", restUrl)
+      cy.createRestQuery("GET", restUrl, "/breweries")
       cy.get(".spectrum-Tabs-itemLabel").contains("Transformer").click()
       // Clear the code box and add "test"
       cy.get(".CodeMirror textarea")
-      .type(Cypress.platform === 'darwin' ? '{cmd}a' : '{ctrl}a', { force: true })
+        .type(Cypress.platform === "darwin" ? "{cmd}a" : "{ctrl}a", {
+          force: true,
+        })
         .type("test")
       // Run Query and intercept
-      cy.intercept('**/preview').as('queryError')
+      cy.intercept("**/preview").as("queryError")
       cy.get(".spectrum-Button").contains("Send").click({ force: true })
       cy.wait("@queryError")
       cy.wait(500)
       // Assert against message and status for the query error
-      cy.get("@queryError").its('response.body').should('have.property', 'message', "test is not defined")
+      cy.get("@queryError")
-      cy.get("@queryError").its('response.body').should('have.property', 'status', 400)
+        .its("response.body")
+        .should("have.property", "message", "test is not defined")
+      cy.get("@queryError")
+        .its("response.body")
+        .should("have.property", "status", 400)
     })
 
     xit("should run an invalid query via POST request", () => {
       // POST request with transformer as null
-      cy.request({method: 'POST',
+      cy.request({
+        method: "POST",
         url: `${Cypress.config().baseUrl}/api/queries/`,
-      body: {fields : {"headers":{},"queryString":null,"path":null},
+        body: {
+          fields: { headers: {}, queryString: null, path: null },
           parameters: [],
           schema: {},
           name: "test",
           queryVerb: "read",
           transformer: null,
-      datasourceId: "test"},
+          datasourceId: "test",
+        },
         // Expected 400 error - Transformer must be a string
-      failOnStatusCode: false}).then((response) => {
+        failOnStatusCode: false,
+      }).then(response => {
         expect(response.status).to.equal(400)
-        expect(response.body.message).to.include('Invalid body - "transformer" must be a string')
+        expect(response.body.message).to.include(
+          'Invalid body - "transformer" must be a string'
+        )
       })
     })
 
     xit("should run an empty query", () => {
       // POST request with Transformer as an empty string
-      cy.request({method: 'POST',
+      cy.request({
+        method: "POST",
         url: `${Cypress.config().baseUrl}/api/queries/preview`,
-      body: {fields : {"headers":{},"queryString":null,"path":null},
+        body: {
+          fields: { headers: {}, queryString: null, path: null },
           queryVerb: "read",
           transformer: "",
-      datasourceId: "test"},
+          datasourceId: "test",
+        },
         // Expected 400 error - Transformer is not allowed to be empty
-      failOnStatusCode: false}).then((response) => {
+        failOnStatusCode: false,
+      }).then(response => {
         expect(response.status).to.equal(400)
-        expect(response.body.message).to.include('Invalid body - "transformer" is not allowed to be empty')
+        expect(response.body.message).to.include(
+          'Invalid body - "transformer" is not allowed to be empty'
+        )
       })
     })
   })

packages/builder/cypress/support/commands.js

@@ -435,7 +435,7 @@ Cypress.Commands.add("addDatasourceConfig", (datasource, skipFetch) => {
   }
 })
 
-Cypress.Commands.add("createRestQuery", (method, restUrl) => {
+Cypress.Commands.add("createRestQuery", (method, restUrl, queryPrettyName) => {
   // addExternalDatasource should be called prior to this
   // Configures REST datasource & sends query
   cy.wait(1000)
@@ -450,5 +450,5 @@ Cypress.Commands.add("createRestQuery", (method, restUrl) => {
   cy.get(".spectrum-Button").contains("Save").click({ force: true })
   cy.get(".hierarchy-items-container")
     .should("contain", method)
-    .and("contain", restUrl)
+    .and("contain", queryPrettyName)
 })

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -8,7 +8,11 @@
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
-  import { customQueryIconText, customQueryIconColor } from "helpers/data/utils"
+  import {
+    customQueryIconText,
+    customQueryIconColor,
+    customQueryText,
+  } from "helpers/data/utils"
   import ICONS from "./icons"
   import { notifications } from "@budibase/bbui"
 
@@ -137,7 +141,7 @@
             icon="SQLQuery"
             iconText={customQueryIconText(datasource, query)}
             iconColor={customQueryIconColor(datasource, query)}
-            text={query.name}
+            text={customQueryText(datasource, query)}
             opened={$queries.selected === query._id}
             selected={$queries.selected === query._id}
             on:click={() => onClickQuery(query)}

packages/builder/src/helpers/data/utils.js

@@ -109,6 +109,36 @@ export function customQueryIconColor(datasource, query) {
   }
 }
 
+export function customQueryText(datasource, query) {
+  if (!query.name || datasource.source !== IntegrationTypes.REST) {
+    return query.name
+  }
+
+  // Remove protocol
+  let name = query.name
+  if (name.includes("//")) {
+    name = name.split("//")[1]
+  }
+
+  // If no path, return the full name
+  if (!name.includes("/")) {
+    return name
+  }
+
+  // Remove trailing slash
+  if (name.endsWith("/")) {
+    name = name.slice(0, -1)
+  }
+
+  // Only use path
+  const split = name.split("/")
+  if (split[1]) {
+    return `/${split.slice(1).join("/")}`
+  } else {
+    return split[0]
+  }
+}
+
 export function flipHeaderState(headersActivity) {
   if (!headersActivity) {
     return {}