From 27845336b76e4e02a9b9b348e33b816a3cedad5a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 30 Nov 2022 14:18:31 +0000
Subject: [PATCH] Add ability to show component info above the settings panel
 and add info to side panels

---
 .../src/DetailSummary/DetailSummary.svelte    | 23 ++++++++----
 .../settings/ComponentInfoSection.svelte      | 36 +++++++++++++++++++
 .../settings/ComponentSettingsPanel.svelte    |  4 +++
 packages/client/manifest.json                 |  3 +-
 4 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte

diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index 518c615504..f7e2611792 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -19,13 +19,19 @@
 </script>
 
 <div class="property-group-container">
-  <div class="property-group-name" on:click={onHeaderClick}>
-    <div class="name">{name}</div>
-    {#if collapsible}
-      <Icon size="S" name={show ? "Remove" : "Add"} />
-    {/if}
-  </div>
-  <div class="property-panel" class:show={show || !collapsible}>
+  {#if name}
+    <div class="property-group-name" on:click={onHeaderClick}>
+      <div class="name">{name}</div>
+      {#if collapsible}
+        <Icon size="S" name={show ? "Remove" : "Add"} />
+      {/if}
+    </div>
+  {/if}
+  <div
+    class="property-panel"
+    class:show={show || !collapsible}
+    class:no-title={!name}
+  >
     <slot />
   </div>
 </div>
@@ -72,6 +78,9 @@
     padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
   }
+  .property-panel.no-title {
+    padding: var(--spacing-xl);
+  }
 
   .show {
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
new file mode 100644
index 0000000000..756a4bb43e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { DetailSummary, Icon } from "@budibase/bbui"
+
+  export let componentDefinition
+</script>
+
+<DetailSummary collapsible={false}>
+  <div class="info">
+    <div class="title">
+      <Icon name="HelpOutline" />
+      {componentDefinition.name}
+    </div>
+    {componentDefinition.info}
+  </div>
+</DetailSummary>
+
+<style>
+  .title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .info {
+    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-s);
+    font-size: 13px;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
index 688d7c5db9..c301bfdc20 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -5,6 +5,7 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
+  import ComponentInfoSection from "./ComponentInfoSection.svelte"
   import {
     getBindableProperties,
     getComponentBindableProperties,
@@ -29,6 +30,9 @@
 {#if $selectedComponent}
   {#key $selectedComponent._id}
     <Panel {title} icon={componentDefinition?.icon} borderLeft>
+      {#if componentDefinition.info}
+        <ComponentInfoSection {componentDefinition} />
+      {/if}
       <ComponentSettingsSection
         {componentInstance}
         {componentDefinition}
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index d7b0184876..23967f188a 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5207,7 +5207,8 @@
       "section"
     ],
     "showEmptyState": false,
-    "draggable": false
+    "draggable": false,
+    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action."
   },
   "rowexplorer": {
     "block": true,