Adding http verbs instead of icons for REST requests.

packages/bbui/src/Icon/Icon.svelte

@@ -9,6 +9,7 @@
   export let size = "M"
   export let hoverable = false
   export let disabled = false
+  export let color
 
   $: rotation = getRotation(direction)
 
@@ -25,7 +26,9 @@
   focusable="false"
   aria-hidden={hidden}
   aria-label={name}
-  style={`transform: rotate(${rotation}deg)`}
+  style={`transform: rotate(${rotation}deg); ${
+    color ? `color: ${color};` : ""
+  }`}
 >
   <use xlink:href="#spectrum-icon-18-{name}" />
 </svg>

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

@@ -8,6 +8,7 @@
   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 ICONS from "./icons"
 
   let openDataSources = []
@@ -129,6 +130,8 @@
           <NavItem
             indentLevel={1}
             icon="SQLQuery"
+            iconText={customQueryIconText(datasource, query)}
+            iconColor={customQueryIconColor(datasource, query)}
             text={query.name}
             opened={$queries.selected === query._id}
             selected={$queries.selected === query._id}

packages/builder/src/components/common/NavItem.svelte

@@ -11,6 +11,8 @@
   export let selected = false
   export let opened = false
   export let draggable = false
+  export let iconText
+  export let iconColor
 
   const dispatch = createEventDispatcher()
 
@@ -42,9 +44,13 @@
     {/if}
 
     <slot name="icon" />
-    {#if icon}
+    {#if iconText}
+      <div class="iconText" style={iconColor ? `color: ${iconColor};` : ""}>
+        {iconText}
+      </div>
+    {:else if icon}
       <div class="icon">
-        <Icon size="S" name={icon} />
+        <Icon color={iconColor} size="S" name={icon} />
       </div>
     {/if}
     <div class="text">{text}</div>
@@ -123,4 +129,9 @@
     justify-content: center;
     align-items: center;
   }
+
+  .iconText {
+    margin-top: 1px;
+    font-size: var(--spectrum-global-dimension-font-size-50);
+  }
 </style>

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

@@ -1,3 +1,5 @@
+import { IntegrationTypes } from "constants/backend"
+
 export function schemaToFields(schema) {
   const response = {}
   if (schema && typeof schema === "object") {
@@ -69,3 +71,40 @@ export function queryParametersToKeyValue(array) {
   }
   return obj
 }
+
+export function customQueryIconText(datasource, query) {
+  if (datasource.source !== IntegrationTypes.REST) {
+    return
+  }
+  switch (query.queryVerb) {
+    case "create":
+      return "POST"
+    case "update":
+      return "PUT"
+    case "read":
+      return "GET"
+    case "delete":
+      return "DELETE"
+    case "patch":
+      return "PATCH"
+  }
+}
+
+export function customQueryIconColor(datasource, query) {
+  if (datasource.source !== IntegrationTypes.REST) {
+    return
+  }
+  switch (query.queryVerb) {
+    case "create":
+      return "#DCC339"
+    case "update":
+      return "#5197EC"
+    case "read":
+      return "#59B294"
+    case "delete":
+      return "#E16B71"
+    case "patch":
+    default:
+      return
+  }
+}

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -41,6 +41,7 @@
   import JSONPreview from "components/integration/JSONPreview.svelte"
   import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
   import Placeholder from "assets/bb-spaceship.svg"
+  import { cloneDeep } from "lodash/fp"
 
   let query, datasource
   let breakQs = {},
@@ -61,7 +62,7 @@
     response?.info?.code >= 200 && response?.info?.code <= 206
 
   function getSelectedQuery() {
-    return (
+    return cloneDeep(
       $queries.list.find(q => q._id === $queries.selected) || {
         datasourceId: $params.selectedDatasource,
         parameters: [],