component name tooltips

packages/builder/src/builderStore/componentUtils.js

@@ -1,4 +1,5 @@
 import { store } from "./index"
+import { get } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
 import {
   decodeJSBinding,
@@ -238,6 +239,10 @@ export const makeComponentUnique = component => {
 }
 
 export const getComponentText = component => {
+  if (component == null) {
+    return ""
+  }
+
   if (component?._instanceName) {
     return component._instanceName
   }
@@ -246,3 +251,15 @@ export const getComponentText = component => {
     "component"
   return capitalise(type)
 }
+
+export const getComponentName = component => {
+  if (component == null) {
+    return ""
+  }
+
+  const components = get(store)?.components || {};
+  const componentDefinition = components[component._component] || {};
+  const name = componentDefinition.friendlyName || componentDefinition.name || "";
+
+  return name;
+}

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

@@ -1,10 +1,11 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { AbsTooltip, Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
   import { helpers } from "@budibase/shared-core"
   import { UserAvatars } from "@budibase/frontend-core"
 
   export let icon
+  export let iconTooltip
   export let withArrow = false
   export let withActions = true
   export let indentLevel = 0
@@ -98,7 +99,9 @@
       </div>
     {:else if icon}
       <div class="icon" class:right={rightAlignIcon}>
+        <AbsTooltip type="info" position="right" text={iconTooltip}>
         <Icon color={iconColor} size="S" name={icon} />
+        </AbsTooltip>
       </div>
     {/if}
     <div class="text" title={showTooltip ? text : null}>

packages/builder/src/components/design/Panel.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { Icon, Body } from "@budibase/bbui"
+  import { AbsTooltip, Icon, Body } from "@budibase/bbui"
 
   export let title
   export let icon
+  export let iconTooltip
   export let showAddButton = false
   export let showBackButton = false
   export let showCloseButton = false
@@ -31,7 +32,9 @@
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
     {#if icon}
-      <Icon name={icon} />
+      <AbsTooltip type="info" text={iconTooltip}>
+        <Icon name={icon} />
+      </AbsTooltip>
     {/if}
     <div class="title">
       {#if customTitleContent}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
-  import { getComponentText } from "builderStore/componentUtils"
+  import { getComponentName } from "builderStore/componentUtils"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
@@ -44,17 +44,19 @@
 
   $: id = $selectedComponent?._id
   $: id, (section = tabs[0])
+
+  $: componentName = getComponentName(componentInstance);
 </script>
 
 {#if $selectedComponent}
   {#key $selectedComponent._id}
-    <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
+  <Panel {title} icon={componentDefinition?.icon} iconTooltip={componentName} borderLeft wide>
       <span class="panel-title-content" slot="panel-title-content">
         <input
           class="input"
           value={title}
           {title}
-          placeholder={getComponentText(componentInstance)}
+          placeholder={componentName}
           on:keypress={e => {
             if (e.key.toLowerCase() === "enter") {
               e.target.blur()

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -11,6 +11,7 @@
   import {
     findComponentPath,
     getComponentText,
+    getComponentName,
   } from "builderStore/componentUtils"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
@@ -109,6 +110,7 @@
         on:drop={onDrop}
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
+        iconTooltip={getComponentName(component)}
         withArrow={componentHasChildren(component)}
         indentLevel={level}
         selected={$store.selectedComponentId === component._id}