Minor refactoring and icon updates

packages/builder/src/builderStore/dataBinding.js

@@ -359,7 +359,8 @@ const getProviderContextBindings = (asset, dataProviders) => {
           providerId,
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
-          category: "Data",
+          category: "Dataprovider",
+          display: { name: readableBinding, type: fieldSchema.type },
         })
       })
     })
@@ -387,6 +388,7 @@ const getUserBindings = () => {
       fieldSchema,
       providerId: "user",
       category: "Current User",
+      display: fieldSchema,
     })
   })
   return bindings
@@ -404,12 +406,14 @@ const getDeviceBindings = () => {
       runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
       readableBinding: `Device.Mobile`,
       category: "Device",
+      display: { type: "string", name: "mobile" },
     })
     bindings.push({
       type: "context",
       runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
       readableBinding: `Device.Tablet`,
       category: "Device",
+      display: { type: "string", name: "tablet" },
     })
   }
   return bindings
@@ -433,6 +437,7 @@ const getSelectedRowsBindings = asset => {
           "selectedRows"
         )}`,
         readableBinding: `${table._instanceName}.Selected rows`,
+        category: "Dataprovider",
       }))
     )
 
@@ -465,6 +470,7 @@ const getStateBindings = () => {
       runtimeBinding: `${safeState}.${makePropSafe(key)}`,
       readableBinding: `State.${key}`,
       category: "State",
+      display: { name: key },
     }))
   }
   return bindings
@@ -505,6 +511,7 @@ const getRoleBindings = () => {
       runtimeBinding: `trim "${role._id}"`,
       readableBinding: `Role.${role.name}`,
       category: "Role",
+      display: { name: role.name },
     }
   })
 }

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -53,15 +53,15 @@
     Device: "DevicePhone",
     "Current User": "User",
     Helpers: "MagicWand",
-    Data: "Data",
+    Dataprovider: "Data",
     State: "AutomatedSegment",
     URL: "RailTop",
-    Role: "UsersLock",
+    Role: "UserGroup",
   }
 
   let popover
   let popoverAnchor
-  let hoverHelper
+  let hoverTarget
 
   $: usingJS = mode === "JavaScript"
   $: searchRgx = new RegExp(search, "ig")
@@ -179,21 +179,15 @@
     bind:this={popover}
     anchor={popoverAnchor}
     maxWidth={300}
-    observe={false}
   >
     <Layout gap="S">
-      {#if selectedCategory === "Helpers" || search}
+      <div class="helper">
-        <div class="helper">
+        <div class="helper__name">{hoverTarget.title}</div>
-          <div class="helper__name">{hoverHelper.displayText}</div>
+        <div class="helper__description">
-          <div class="helper__description">
+          {@html hoverTarget.description}
-            {@html hoverHelper.description}
-          </div>
-          <pre class="helper__example">{getHelperExample(
-              hoverHelper,
-              usingJS
-            )}</pre>
         </div>
-      {/if}
+        <pre class="helper__example">{hoverTarget.example}</pre>
+      </div>
     </Layout>
   </Popover>
 </span>
@@ -244,21 +238,53 @@
             </div>
             <ul>
               {#each category.bindings as binding}
-                <!-- {JSON.stringify(binding)} -->
+                <li
-                <li class="binding" on:click={() => addBinding(binding)}>
+                  class="binding"
-                  <span class="binding__label">{binding.readableBinding}</span>
+                  on:mouseenter={e => {
-                  <!-- {#if binding.type}
+                    popoverAnchor = e.target
-                    <span class="binding__typeWrap">
+                    if (!binding.name && !binding.description) {
-                      <span class="binding__type">{binding.type}</span>
+                      return
-                    </span>
+                    }
-                  {/if} -->
+                    hoverTarget = {
-                  {#if binding.fieldSchema?.type}
+                      title: binding.name,
+                      description: binding.description,
+                    }
+                    popover.show()
+                    e.stopPropagation()
+                  }}
+                  on:mouseleave={() => {
+                    popover.hide()
+                    popoverAnchor = null
+                    hoverTarget = null
+                  }}
+                  on:focus={() => {}}
+                  on:blur={() => {}}
+                  on:click={() => addBinding(binding)}
+                >
+                  <span class="binding__label">
+                    {#if binding.display?.name}
+                      {binding.display.name}
+                    {:else if binding.fieldSchema?.name}
+                      {binding.fieldSchema?.name}
+                    {:else}
+                      {binding.readableBinding}
+                    {/if}
+                  </span>
+
+                  {#if binding.display?.type}
                     <span class="binding__typeWrap">
                       <span class="binding__type">
-                        {binding.fieldSchema.type}
+                        {binding.display.type}
+                      </span>
+                    </span>
+                  {:else if binding.fieldSchema?.type}
+                    <span class="binding__typeWrap">
+                      <span class="binding__type">
+                        {binding.fieldSchema?.type}
                       </span>
                     </span>
                   {/if}
+
                   {#if binding.description}
                     <br />
                     <div class="binding__description">
@@ -277,28 +303,33 @@
             <ul class="helpers">
               {#each filteredHelpers as helper}
                 <li
+                  class="binding"
                   on:click={() => addHelper(helper, usingJS)}
                   on:mouseenter={e => {
-                    // if (e.target !== this) return
                     popoverAnchor = e.target
-                    hoverHelper = helper
+                    if (!helper.displayText && helper.description) {
+                      return
+                    }
+                    hoverTarget = {
+                      title: helper.displayText,
+                      description: helper.description,
+                      example: getHelperExample(helper, usingJS),
+                    }
                     popover.show()
                     e.stopPropagation()
                   }}
                   on:mouseleave={() => {
                     popover.hide()
                     popoverAnchor = null
-                    hoverHelper = null
+                    hoverTarget = null
                   }}
                   on:focus={() => {}}
                   on:blur={() => {}}
                 >
                   <span class="binding__label">{helper.displayText}</span>
-                  {#if helper.type}
+                  <span class="binding__typeWrap">
-                    <span class="binding__typeWrap">
+                    <span class="binding__type">function</span>
-                      <span class="binding__type">{helper.type}</span>
+                  </span>
-                    </span>
-                  {/if}
                 </li>
               {/each}
             </ul>