From 2786f657c74b61e0f4c33a7d0a9db85983251291 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 25 Feb 2022 14:18:26 +0000
Subject: [PATCH] Improve REST query naming in navigation

---
 .../DatasourceNavigator.svelte                |  8 +++--
 packages/builder/src/helpers/data/utils.js    | 30 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 661c125377..45ff66a901 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/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)}
diff --git a/packages/builder/src/helpers/data/utils.js b/packages/builder/src/helpers/data/utils.js
index 0e99109189..8fe7b617a2 100644
--- a/packages/builder/src/helpers/data/utils.js
+++ b/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 {}