feat(frontend): Add component control doc (#2295)

* feat(frontend): Add component control doc

* feat(frontend): Add missing controls

* feat(frontend): add collapsable view

* feat(frontend): rework ui

* fix(frontend): fix build

* feat(frontend): add missing controls

* feat(frontend): update controls

* feat(frontend): only add recompute control for components with componentInput

frontend/src/lib/components/apps/editor/componentsPanel/componentControlUtils.ts

@@ -0,0 +1,102 @@
+import { components } from '../component'
+
+export type ComponentFunction = {
+	title: string
+	description: string
+	example: string
+	documentation: string
+}
+
+const setTab = {
+	title: 'setTab',
+	description: 'Use the setTab function to manually set the tab of a Tab component.',
+	example: 'setTab(id: string, index: string)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#settab'
+}
+
+const openModal = {
+	title: 'openModal',
+	description: 'Use the openModal function to open a modal.',
+	example: 'openModal(id: string)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#openmodal'
+}
+
+const closeModal = {
+	title: 'closeModal',
+	description: 'Use the closeModal function to close a modal.',
+	example: 'closeModal(id: string)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#closemodal'
+}
+
+const recompute = {
+	title: 'recompute',
+	description: 'Use the recompute function to recompute the value of a component.',
+	example: 'recompute(id: string)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#recompute'
+}
+
+const getAgGrid = {
+	title: 'getAgGrid',
+	description: 'Use the getAgGrid function to get the ag-grid instance of a table.',
+	example: 'getAgGrid(id: string)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#getaggrid'
+}
+
+const setValue = {
+	title: 'setValue',
+	description:
+		"The setValue function is meant to set or force the value of a component. This can be convenient in cases where connection is not the easiest pattern. Note that it's a bad idea to mix dynamic default value and setValue together.",
+	example: 'setValue(id: string, value: any)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#setvalue'
+}
+
+const setSelectedIndex = {
+	title: 'setSelectedIndex',
+	description: 'Use the setSelectedIndex function to select a row in a table or an AG Grid table.',
+	example: 'setSelectedIndex(id: string, index: number)',
+	documentation: 'https://www.windmill.dev/docs/apps/app-runnable-panel#setselectedindex'
+}
+
+export function getComponentControl(type: keyof typeof components): Array<ComponentFunction> {
+	switch (type) {
+		case 'tabscomponent':
+			return [setTab]
+		case 'selectstepcomponent':
+			return [setTab, setValue]
+		case 'selecttabcomponent':
+			return [setTab, setValue]
+		case 'conditionalwrapper':
+			return [setTab]
+		case 'steppercomponent':
+			return [setTab]
+		case 'modalcomponent':
+			return [openModal, closeModal]
+		case 'aggridcomponent':
+			return [getAgGrid]
+		case 'displaycomponent':
+		case 'dateinputcomponent':
+		case 'textinputcomponent':
+		case 'numberinputcomponent':
+		case 'currencycomponent':
+		case 'checkboxcomponent':
+		case 'formcomponent':
+		case 'rangecomponent':
+		case 'multiselectcomponent':
+		case 'selectcomponent':
+		case 'slidercomponent':
+		case 'schemaformcomponent':
+		case 'quillcomponent':
+		case 'textcomponent':
+		case 'textareainputcomponent':
+			return [setValue]
+		case 'tablecomponent':
+		case 'aggridcomponent':
+			return [setSelectedIndex]
+		default:
+			if (components[type].initialData['componentInput']) {
+				return [recompute]
+			} else {
+				return []
+			}
+	}
+}

frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { ExternalLink } from "lucide-svelte"
+	import PanelSection from "./common/PanelSection.svelte"
+	import type { components } from "../component"
+	import { getComponentControl } from '../componentsPanel/componentControlUtils'
+	import { Highlight } from 'svelte-highlight'
+	import typescript from 'svelte-highlight/languages/typescript'
+	import { Button } from "$lib/components/common"
+  export let type: keyof typeof components
+
+  const componentControls = getComponentControl(type)
+
+  let collapsed: boolean = true
+
+</script>
+
+{#if componentControls?.length > 0 }
+  <PanelSection title="Controls" >
+
+    <div slot="action" class="flex justify-end flex-wrap gap-1">
+      <Button
+        color="light"
+        size="xs"
+        variant="border"
+        on:click={() => {
+          collapsed = !collapsed
+        
+        }}
+      >
+        {collapsed ? "Show" : "Hide"} details
+      </Button>
+    </div>
+
+    {#if collapsed}
+      <div class="flex flex-row gap-1">
+        {#each componentControls as control}
+          <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border">
+            {control.title}
+          </span>
+        {/each}
+      </div>
+    {:else}
+      <div class="text-xs">This component can be controlled by frontend scripts using these functions:</div>
+      {#each componentControls as control}
+        <div class="text-xs leading-6 font-semibold">
+          {control.title}
+        </div>
+        <div class="text-xs">
+          {control.description}
+        </div>
+        <div class="p-1 border w-full">
+          <Highlight language={typescript} code={control.example} />
+        </div>
+      
+        <a
+          href={control.documentation}
+          target="_blank"
+          class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
+        >
+          <div class="flex flex-row gap-2">
+            See documentation
+            <ExternalLink size="16" />
+          </div>
+        </a>
+      
+      {/each}  
+    {/if}
+  </PanelSection>
+{/if}

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -34,6 +34,8 @@
 	import GridGroup from './GridGroup.svelte'
 	import { secondaryMenuLeft } from './secondaryMenu'
 
+	import ComponentControl from './ComponentControl.svelte'
+
 	export let componentSettings: { item: GridItem; parent: string | undefined } | undefined =
 		undefined
 	export let onDelete: (() => void) | undefined = undefined
@@ -297,7 +299,11 @@
 					{/if}
 				{/key}
 			</PanelSection>
+
 		{/if}
+	
+		<ComponentControl type={component.type} />
+
 		{#if componentSettings.item.data.type === 'tabscomponent'}
 			<GridTab
 				bind:tabs={componentSettings.item.data.tabs}
@@ -428,5 +434,6 @@
 				</div>
 			</PanelSection>
 		{/if}
+
 	</div>
 {/if}