feat(frontend): Toggle to hide optional inputs (#1060)

windmill-labs · Jan 2, 2023 · 4d6a568 · 4d6a568
1 parent a34ae8b
commit 4d6a568
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
@@ -386,7 +386,7 @@
 										variant="border"
 										color="blue"
 										size="sm"
-										btnClasses="min-w-min items-center leading-4 py-0"
+										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
 										on:click={() => {
 											pickForField = label
 											itemPicker?.openDrawer?.()

diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
@@ -122,7 +122,7 @@
 </script>
 
 {#if arg != undefined}
-	<div class="flex flex-row justify-between gap-1 mb-1">
+	<div class="flex flex-row justify-between gap-1 pb-1">
 		<div class="flex items-center flex-wrap grow">
 			<FieldHeader
 				label={argName}
@@ -224,7 +224,7 @@
 	<div class="max-w-xs" />
 
 	<div
-		class="relative {$propPickerConfig?.propName == argName
+		class="relative pb-6 {$propPickerConfig?.propName == argName
 			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
 			: ''}"
 	>
@@ -296,7 +296,6 @@
 			Not recognized input type {argName}
 		{/if}
 	</div>
-	<div class="mb-6" />
 {:else}
 	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { dfs, flowStore } from '$lib/components/flows/flowStore'
-
 	import FlowCard from '../common/FlowCard.svelte'
-
 	import { Alert, Badge } from '$lib/components/common'
 	import type { FlowModule, FlowModuleValue, InputTransform, PathScript, RawScript } from '$lib/gen'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import { flowStateStore } from '../flowState'
 	import { setContext } from 'svelte'
 	import type { PropPickerWrapperContext } from '../propPicker/PropPickerWrapper.svelte'
 	import { writable } from 'svelte/store'
+	import { slide } from 'svelte/transition'
+	import Toggle from '../../Toggle.svelte'
+
+	let hideOptional = false
 
 	$: steps = (
 		dfs($flowStore.value.modules, (x) => x)
@@ -24,12 +26,19 @@
 				[
 					v.input_transforms,
 					Object.entries(v.input_transforms)
-						.filter((x) => x[1].type == 'static')
+						.filter((x) => {
+							const shouldDisplay = hideOptional
+								? $flowStateStore[m.id]?.schema.required?.includes(x[0])
+								: true
+							return x[1].type == 'static' && shouldDisplay
+						})
 						.map((x) => x[0]),
 					m
 				] as [Record<string, InputTransform>, string[], FlowModule]
 		)
 		.filter(([i, f, m]) => f.length > 0)
+	
+	$: console.log({flowState: $flowStateStore, steps});
 
 	setContext<PropPickerWrapperContext>('PropPickerWrapper', {
 		focusProp: () => {},
@@ -40,6 +49,11 @@
 
 <div class="min-h-full">
 	<FlowCard title="All Static Inputs">
+		<Toggle
+			slot="header"
+			bind:checked={hideOptional}
+			options={{left: 'Hide optional inputs'}}
+		/>
 		<div class="min-h-full flex-1">
 			<Alert type="info" title="Static Inputs" class="m-4"
 				>This page centralizes the static inputs of every steps. It is akin to a file containing all
@@ -62,7 +76,7 @@
 			{/if}
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
-					<div class="relative h-full border-t p-4">
+					<div transition:slide class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>