From 2d5854c84aecb3c49949d17cce888e953497a6f0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 19 Jun 2023 11:32:39 +0200
Subject: [PATCH] fix: deploy dev/staging/prod small fixes

---
 .../src/lib/components/DeployWorkspace.svelte |  4 +-
 .../src/lib/components/ScriptBuilder.svelte   |  2 +-
 .../apps/components/layout/AppList.svelte     | 85 +++++++++++++++++++
 .../apps/components/layout/ListWrapper.svelte | 11 +++
 .../apps/editor/SubGridEditor.svelte          |  3 +-
 .../apps/editor/component/Component.svelte    | 11 +++
 .../apps/editor/component/components.ts       | 37 +++++++-
 .../components/apps/editor/component/sets.ts  |  1 +
 frontend/src/lib/components/apps/types.ts     |  5 ++
 9 files changed, 154 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/layout/AppList.svelte
 create mode 100644 frontend/src/lib/components/apps/components/layout/ListWrapper.svelte

diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index a539fbeedf..d4e6bd6fec 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/frontend/src/lib/components/DeployWorkspace.svelte
@@ -100,7 +100,7 @@
 						})
 					}
 					if (x.value.type == 'script') {
-						if (x.value.path) {
+						if (x.value.path && !x.value.path.startsWith('hub/')) {
 							result.push({ kind: 'script', path: x.value.path })
 						}
 					} else if (x.value.type == 'flow') {
@@ -336,7 +336,7 @@
 		}
 	}
 
-	function deployAll() {
+	export function deployAll() {
 		dependencies?.slice().forEach(async ({ kind, path, include }) => {
 			if (include) {
 				await deploy(kind, path)
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 34015884f5..b542e480c5 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -548,7 +548,7 @@
 						size="sm"
 						startIcon={{ icon: faSave }}
 						on:click={() => editScript()}
-						dropdownItems={initialPath != '' ? computeDropdownItems : []}
+						dropdownItems={initialPath != '' ? computeDropdownItems : undefined}
 					>
 						Deploy
 					</Button>
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
new file mode 100644
index 0000000000..9dda380d8a
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import SubGridEditor from '../../editor/SubGridEditor.svelte'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import ListWrapper from './ListWrapper.svelte'
+	import type { AppInput } from '../../inputType'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import { components } from '../../editor/component'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
+
+	export let id: string
+	export let componentContainerHeight: number
+	export let componentInput: AppInput | undefined
+	export let configuration: RichConfigurations
+	export let customCss: ComponentCustomCSS<'containercomponent'> | undefined = undefined
+	export let render: boolean
+	export let initializing: boolean | undefined
+
+	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	const outputs = initOutput($worldStore, id, {
+		result: undefined,
+		loading: false
+	})
+
+	let resolvedConfig = initConfig(
+		components['listcomponent'].initialData.configuration,
+		configuration
+	)
+
+	function onFocus() {
+		$focusedGrid = {
+			parentComponentId: id,
+			subGridIndex: 0
+		}
+	}
+
+	$: css = concatCustomCss($app.css?.containercomponent, customCss)
+	let result: any[] | undefined = undefined
+</script>
+
+{#each Object.keys(components['listcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full flex flex-wrap overflow-auto gap-2">
+		{#if $app.subgrids?.[`${id}-0`]}
+			{#each result ?? [] as value, index}
+				<div
+					style={`min-width: ${resolvedConfig.minWidthPx}px; max-height: ${resolvedConfig.maxHeightPx}px;`}
+					class="border overflow-auto"
+				>
+					<ListWrapper {value} {index}>
+						<SubGridEditor
+							visible={render}
+							{id}
+							class={css?.container?.class}
+							style={css?.container?.style}
+							subGridId={`${id}-0`}
+							containerHeight={componentContainerHeight}
+							forceView={index != 0}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+								}
+								onFocus()
+							}}
+						/>
+					</ListWrapper>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</RunnableWrapper>
diff --git a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
new file mode 100644
index 0000000000..38cf6376e4
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { setContext } from 'svelte'
+	import type { ListContext } from '../../types'
+
+	export let index: number
+	export let value: any
+
+	setContext<ListContext>('ListWrapperContext', { index, value })
+</script>
+
+<slot />
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index dfca892fcc..bae0054e07 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -22,6 +22,7 @@
 	export let visible: boolean = true
 	export let id: string
 	export let shouldHighlight: boolean = true
+	export let forceView = false
 
 	const dispatch = createEventDispatcher()
 
@@ -77,7 +78,7 @@
 		)}
 		style="{containerHeight ? `height: ${containerHeight}px;` : ''} {style ?? ''}"
 	>
-		{#if $mode !== 'preview'}
+		{#if $mode !== 'preview' || forceView}
 			<div
 				class={highlight ? 'border-gray-600 animate-border border-dashed border-2 min-h-full' : ''}
 			>
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 1ff0283e99..8e9a513fd9 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -50,6 +50,7 @@
 	import AppFlowStatusComponent from '../../components/display/AppFlowStatusComponent.svelte'
 	import AppChartJs from '../../components/display/AppChartJs.svelte'
 	import AppQuillEditor from '../../components/inputs/AppQuillEditor.svelte'
+	import AppList from '../../components/layout/AppList.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -453,6 +454,16 @@
 				{componentContainerHeight}
 				{render}
 			/>
+		{:else if component.type === 'listcomponent'}
+			<AppList
+				id={component.id}
+				customCss={component.customCss}
+				configuration={component.configuration}
+				componentInput={component.componentInput}
+				{componentContainerHeight}
+				{render}
+				bind:initializing
+			/>
 		{:else if component.type === 'verticalsplitpanescomponent'}
 			<AppSplitpanes
 				id={component.id}
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 488e61b0e1..2ea56df87b 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -38,7 +38,8 @@ import {
 	Split,
 	Download,
 	PanelLeft,
-	PanelTopInactive
+	PanelTopInactive,
+	ListIcon
 } from 'lucide-svelte'
 import type {
 	Aligned,
@@ -109,6 +110,7 @@ export type TabsComponent = BaseComponent<'tabscomponent'> & {
 	tabs: string[]
 	disabledTabs: RichConfiguration[]
 }
+export type ListComponent = BaseComponent<'listcomponent'>
 export type ContainerComponent = BaseComponent<'containercomponent'>
 export type DrawerComponent = BaseComponent<'drawercomponent'>
 export type MapComponent = BaseComponent<'mapcomponent'>
@@ -163,6 +165,7 @@ export type TypedComponent =
 	| PlotlyComponent
 	| TabsComponent
 	| ContainerComponent
+	| ListComponent
 	| IconComponent
 	| HorizontalDividerComponent
 	| VerticalDividerComponent
@@ -469,6 +472,38 @@ export const components = {
 			numberOfSubgrids: 1
 		}
 	},
+	listcomponent: {
+		name: 'List',
+		icon: ListIcon,
+		dims: '2:8-6:8' as AppComponentDimensions,
+
+		customCss: {
+			container: { class: '', style: '' }
+		},
+		initialData: {
+			configuration: {
+				minWidthPx: {
+					type: 'static',
+					fieldType: 'number',
+					value: 300,
+					tooltip: 'Min Width in pixels'
+				},
+				maxHeightPx: {
+					type: 'static',
+					fieldType: 'number',
+					value: 300,
+					tooltip: 'Max Height in pixels'
+				}
+			},
+			componentInput: {
+				type: 'static',
+				fieldType: 'array',
+				subFieldType: 'object',
+				value: [{ foo: 1 }, { foo: 2 }, { foo: 3 }] as object[]
+			},
+			numberOfSubgrids: 1
+		}
+	},
 	textcomponent: {
 		name: 'Text',
 		icon: Type,
diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts
index aa450c193b..32548294ab 100644
--- a/frontend/src/lib/components/apps/editor/component/sets.ts
+++ b/frontend/src/lib/components/apps/editor/component/sets.ts
@@ -10,6 +10,7 @@ const layout: ComponentSet = {
 	title: 'Layout',
 	components: [
 		'containercomponent',
+		// 'listcomponent',
 		'horizontaldividercomponent',
 		'verticaldividercomponent',
 		'drawercomponent',
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 272142cdd1..4941a99d7b 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -150,6 +150,11 @@ export interface CancelablePromise<T> extends Promise<T> {
 	cancel: () => void
 }
 
+export type ListContext = {
+	index: number
+	value: any
+}
+
 export type AppViewerContext = {
 	worldStore: Writable<World>
 	app: Writable<App>