feat(frontend): app editor help box (#3970)

* feat(frontend): wip

* feat(frontend): Add missing stylings

* feat(frontend): Add output panel doc links

* feat(frontend): fix popover word break

* feat(frontend): fix theme

frontend/src/lib/components/Popover.svelte

@@ -74,7 +74,7 @@
 			on:mouseleave={close}
 			class="z-[5001] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left {popupClass}"
 		>
-			<div class="max-w-sm">
+			<div class="max-w-sm break-words">
 				<slot name="text" />
 				{#if documentationLink}
 					<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">

frontend/src/lib/components/apps/components/display/AppMenu.svelte

@@ -103,12 +103,12 @@
 					btnClasses={twMerge(
 						css?.button?.class,
 						'wm-button',
-						'wm-download-button',
+						'wm-menu-button',
 						resolvedConfig.fillContainer ? 'w-full h-full' : ''
 					)}
 					wrapperClasses={twMerge(
 						'wm-button-container',
-						'wm-download-button-container',
+						'wm-menu-button-container',
 						resolvedConfig.fillContainer ? 'w-full h-full' : ''
 					)}
 					style={css?.button?.style}

frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte

@@ -211,7 +211,7 @@
 				<SubGridEditor
 					visible={render && node.id === currentNodeId}
 					{id}
-					class={twMerge(css?.container?.class, 'wm-conditional-tabs')}
+					class={twMerge(css?.container?.class, 'wm-decision-tree')}
 					style={css?.container?.style}
 					subGridId={`${id}-${i}`}
 					containerHeight={componentContainerHeight - 40}

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

@@ -353,7 +353,13 @@ export const customisationByComponent: Customisation[] = [
 		variables: []
 	},
 	{
-		components: ['aggridcomponent', 'aggridcomponentee'],
+		components: [
+			'aggridcomponent',
+			'aggridcomponentee',
+			'aggridinfinitecomponent',
+			'aggridinfinitecomponentee',
+			'dbexplorercomponent'
+		],
 		selectors: [
 			{ selector: '.wm-aggrid-container', comment: 'Ag grid container', customCssKey: 'container' }
 		],
@@ -386,7 +392,7 @@ export const customisationByComponent: Customisation[] = [
 		variables: []
 	},
 	{
-		components: ['fileinputcomponent'],
+		components: ['fileinputcomponent', 's3fileinputcomponent'],
 		selectors: [
 			{ selector: '.wm-file-input', comment: 'File input component', customCssKey: 'input' }
 		],
@@ -549,7 +555,7 @@ export const customisationByComponent: Customisation[] = [
 		variables: []
 	},
 	{
-		components: ['agchartscomponent'],
+		components: ['agchartscomponent', 'agchartscomponentee'],
 		selectors: [{ selector: '.wm-agchart', comment: 'AgCharts', customCssKey: 'container' }],
 		variables: []
 	},
@@ -780,6 +786,36 @@ export const customisationByComponent: Customisation[] = [
 			}
 		],
 		root: '.multiselect'
+	},
+	{
+		components: ['alertcomponent'],
+		selectors: [
+			{
+				selector: 'wm-alert-card-container',
+				comment: 'Alert container',
+				customCssKey: 'container'
+			}
+		],
+		variables: []
+	},
+	{
+		components: ['decisiontreecomponent'],
+		selectors: [
+			{
+				selector: 'wm-decision-tree',
+				comment: 'Decision tree container',
+				customCssKey: 'container'
+			}
+		],
+		variables: []
+	},
+	{
+		components: ['menucomponent'],
+		selectors: [
+			{ selector: '.wm-menu-button', comment: 'Menu button', customCssKey: 'button' },
+			{ selector: '.wm-menu-button-container', comment: 'Menu button container' }
+		],
+		variables: []
 	}
 ]
 

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -10,6 +10,7 @@
 	import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte'
 	import OutputHeader from './components/OutputHeader.svelte'
 	import { ClearableInput } from '../../../common'
+	import DocLink from '../settingsPanel/DocLink.svelte'
 
 	const { connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 	const { search } = getContext<ContextPanelContext>('ContextPanel')
@@ -18,6 +19,11 @@
 </script>
 
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
+	<svelte:fragment slot="action">
+		<div class="p-0.5">
+			<DocLink docLink="https://www.windmill.dev/docs/apps/outputs" />
+		</div>
+	</svelte:fragment>
 	<div
 		class={classNames(
 			'bg-surface w-full h-full z-30 overflow-auto',

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -8,6 +8,7 @@
 	import IdEditor from './IdEditor.svelte'
 	import type { AppComponent } from '../../component'
 	import type { Runnable } from '$lib/components/apps/inputType'
+	import DocLink from '../../settingsPanel/DocLink.svelte'
 
 	export let id: string
 	export let name: string
@@ -263,6 +264,16 @@
 			{/if}
 		</div>
 		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+			{#if ['ctx', 'state'].includes(id)}
+				<DocLink
+					docLink={id === 'state'
+						? 'https://www.windmill.dev/docs/apps/outputs#state'
+						: id === 'ctx'
+						? 'https://www.windmill.dev/docs/apps/outputs#app-context'
+						: ''}
+					size="xs2"
+				/>
+			{/if}
 			{name}
 			<div class={classNames('bg-surface-secondary rounded-sm')}>
 				{#if !open}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -11,6 +11,7 @@
 	import { tutorialsToDo } from '$lib/stores'
 	import { ignoredTutorials } from '$lib/components/tutorials/ignoredTutorials'
 	import { tutorialInProgress } from '$lib/tutorialUtils'
+	import DocLink from '../settingsPanel/DocLink.svelte'
 
 	const PREFIX = 'script-selector-' as const
 
@@ -81,6 +82,9 @@
 </script>
 
 <PanelSection title="Runnables" id="app-editor-runnable-panel">
+	<svelte:fragment slot="action">
+		<DocLink docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable" />
+	</svelte:fragment>
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
 			<div class="flex flex-col gap-2 w-full">

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

@@ -22,7 +22,7 @@
 	import { slide } from 'svelte/transition'
 	import { push } from '$lib/history'
 	import StylePanel from './StylePanel.svelte'
-	import { ChevronLeft, ExternalLink, ArrowBigUp } from 'lucide-svelte'
+	import { ChevronLeft, ArrowBigUp } from 'lucide-svelte'
 	import GridCondition from './GridCondition.svelte'
 	import { isTriggerable } from './script/utils'
 	import { inferDeps } from '../appUtilsInfer'
@@ -30,6 +30,7 @@
 	import type { ResultAppInput } from '../../inputType'
 	import GridGroup from './GridGroup.svelte'
 	import { secondaryMenuLeft } from './secondaryMenu'
+	import DocLink from './DocLink.svelte'
 
 	import ComponentControl from './ComponentControl.svelte'
 	import GridAgGridLicenseKey from './GridAgGridLicenseKey.svelte'
@@ -175,20 +176,11 @@
 
 {#if componentSettings?.item?.data}
 	{@const component = componentSettings.item.data}
-	<div class="flex justify-between items-center px-3 py-2 bg-surface-secondary">
+	<div class="flex justify-between items-center px-3 py-1 bg-surface-secondary">
 		<div class="text-xs text-primary font-semibold"
 			>{components[componentSettings.item.data.type]?.name ?? 'Unknown'}</div
 		>
-		<a
-			href={components[componentSettings.item.data.type]?.documentationLink}
-			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>
+		<DocLink docLink={components[componentSettings.item.data.type]?.documentationLink} />
 	</div>
 
 	<div class="flex min-h-[calc(100%-32px)] flex-col min-w-[150px] w-full divide-y">
@@ -205,16 +197,19 @@
 					id={'component-input'}
 				>
 					<svelte:fragment slot="action">
-						{#if componentSettings.item.data.type !== 'plotlycomponentv2'}
-							<span
+						<div class="flex flex-row gap-1 justify-center items-center">
+							<DocLink
+								docLink={'https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable'}
+							/>
+							<div
 								class={classNames(
-									'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
+									'text-white px-2 text-2xs py-0.5 font-bold rounded-sm',
 									'bg-indigo-500'
 								)}
 							>
 								{`${component.id}`}
-							</span>
-						{/if}
+							</div>
+						</div>
 					</svelte:fragment>
 
 					{#if componentSettings.item.data.componentInput}

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import Popover from '$lib/components/Popover.svelte'
+	import { ButtonType } from '$lib/components/common'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { BookText, ExternalLink } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	export let docLink: string
+	export let btnClasses: string | undefined = undefined
+	export let size: ButtonType.Size = 'xs'
+</script>
+
+<Popover>
+	<svelte:fragment slot="text">
+		<div class="flex flex-row gap-1">
+			Open documentation in a new tab
+
+			<ExternalLink size={16} />
+		</div>
+	</svelte:fragment>
+	<Button
+		iconOnly
+		startIcon={{
+			icon: BookText
+		}}
+		{size}
+		btnClasses={twMerge(
+			'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent',
+			btnClasses
+		)}
+		href={docLink}
+		target="_blank"
+		color="light"
+	/>
+</Popover>

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

@@ -161,8 +161,8 @@
 							type="text"
 							bind:value={items[index].value}
 						/>
-						<div class="absolute right-6">
-							<CloseButton noBg on:close={() => deleteSubgrid(index)} />
+						<div class="absolute right-8">
+							<CloseButton noBg small on:close={() => deleteSubgrid(index)} />
 						</div>
 
 						<div class="flex flex-col justify-center gap-2">

frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -5,6 +5,7 @@
 	import type { AppViewerContext } from '../../../types'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
 	import { zIndexes } from '$lib/zIndexes'
+	import DocLink from '../DocLink.svelte'
 
 	const { selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	export let right: boolean
@@ -35,7 +36,12 @@
 			>
 				<CloseButton on:close={() => secondaryMenu?.close()} />
 				{#if $secondaryMenu?.props?.type === 'style'}
-					<div class="text-xs font-bold"> Style Panel</div>
+					<div class="flex flex-row items-center gap-1">
+						<div class="text-xs font-bold"> Style Panel</div>
+						<DocLink
+							docLink="https://www.windmill.dev/docs/apps/app_configuration_settings/app_styling"
+						/>
+					</div>
 				{/if}
 			</div>
 			<div class="relative h-full overflow-y-auto">

frontend/src/lib/components/common/CloseButton.svelte

@@ -1,10 +1,11 @@
-<script>
+<script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 	import Button from './button/Button.svelte'
 	import { X } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	export let noBg = false
+	export let small: boolean = false
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -15,7 +16,8 @@
 	size="sm"
 	color="light"
 	btnClasses={twMerge(
-		'hover:bg-surface-hover w-8 h-8 rounded-full p-0',
-		noBg ? '' : 'bg-surface-secondary'
+		'hover:bg-surface-hover rounded-full p-0',
+		noBg ? '' : 'bg-surface-secondary',
+		small ? 'w-6 h-6' : 'w-8 h-8'
 	)}
 />