fix(frontend): fix style panel overflow (#2437)

* fix(frontend): fix style panel overflow

* fix(frontend): hide deprecated options

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -433,7 +433,12 @@
 			<SplitPanesWrapper>
 				<Splitpanes class="max-w-full overflow-hidden">
 					<Pane bind:size={leftPanelSize} minSize={5} maxSize={33}>
-						<div class="w-full h-full relative">
+						<div
+							class={twMerge(
+								'w-full h-full relative',
+								$secondaryMenuLeftStore.isOpen ? 'overflow-hidden' : ''
+							)}
+						>
 							<SecondaryMenu right={false} />
 							<ContextPanel />
 						</div>

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -6,7 +6,6 @@
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import Dropdown from '$lib/components/Dropdown.svelte'
 	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
 	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
@@ -17,20 +16,19 @@
 	import { AppService, DraftService, Job, Policy } from '$lib/gen'
 	import { redo, undo } from '$lib/history'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
-	import {
-		faClipboard,
-		faFileExport,
-		faHistory,
-		faSave,
-		faSlidersH
-	} from '@fortawesome/free-solid-svg-icons'
+	import { faClipboard, faSave } from '@fortawesome/free-solid-svg-icons'
 	import {
 		AlignHorizontalSpaceAround,
 		BellOff,
 		Bug,
 		Expand,
+		FileJson,
+		FileUp,
+		FormInput,
+		History,
 		Laptop2,
 		Loader2,
+		MoreVertical,
 		Smartphone
 	} from 'lucide-svelte'
 	import { getContext } from 'svelte'
@@ -62,6 +60,8 @@
 	import DeploymentHistory from './DeploymentHistory.svelte'
 	import Awareness from '$lib/components/Awareness.svelte'
 	import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu'
+	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
+	import { MenuItem } from '@rgossiaux/svelte-headlessui'
 
 	async function hash(message) {
 		try {
@@ -393,6 +393,45 @@
 
 	let dirtyPath = false
 	let path: Path | undefined = undefined
+
+	let moreItems = [
+		{
+			displayName: 'Deployment History',
+			icon: History,
+			action: () => {
+				historyBrowserDrawerOpen = true
+			}
+		},
+		{
+			displayName: 'JSON',
+			icon: FileJson,
+			action: () => {
+				appExport.open($app)
+			}
+		},
+		// {
+		// 	displayName: 'Publish to Hub',
+		// 	icon: faGlobe,
+		// 	action: () => {
+		// 		const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
+		// 		window.open(url.toString(), '_blank')
+		// 	}
+		// },
+		{
+			displayName: 'Hub compatible JSON',
+			icon: FileUp,
+			action: () => {
+				appExport.open(toStatic($app, $staticExporter, $summary).app)
+			}
+		},
+		{
+			displayName: 'App Inputs',
+			icon: FormInput,
+			action: () => {
+				inputsDrawerOpen = true
+			}
+		}
+	]
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -595,6 +634,7 @@
 							<div class="flex gap-2 flex-col">
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
+									<!-- svelte-ignore a11y-no-static-element-interactions -->
 									<div
 										class={classNames(
 											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
@@ -795,48 +835,29 @@
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
-		<Dropdown
-			placement="bottom-end"
-			btnClasses="!rounded-md"
-			dropdownItems={[
-				{
-					displayName: 'Deployment History',
-					icon: faHistory,
-					action: () => {
-						historyBrowserDrawerOpen = true
-					}
-				},
-				{
-					displayName: 'JSON',
-					icon: faFileExport,
-					action: () => {
-						appExport.open($app)
-					}
-				},
-				// {
-				// 	displayName: 'Publish to Hub',
-				// 	icon: faGlobe,
-				// 	action: () => {
-				// 		const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
-				// 		window.open(url.toString(), '_blank')
-				// 	}
-				// },
-				{
-					displayName: 'Hub compatible JSON',
-					icon: faFileExport,
-					action: () => {
-						appExport.open(toStatic($app, $staticExporter, $summary).app)
-					}
-				},
-				{
-					displayName: 'App Inputs',
-					icon: faSlidersH,
-					action: () => {
-						inputsDrawerOpen = true
-					}
-				}
-			]}
-		/>
+		<ButtonDropdown hasPadding={false}>
+			<svelte:fragment slot="buttonReplacement">
+				<Button nonCaptureEvent size="xs" color="light">
+					<div class="flex flex-row items-center">
+						<MoreVertical size={14} />
+					</div>
+				</Button>
+			</svelte:fragment>
+			<svelte:fragment slot="items">
+				{#each moreItems as item}
+					<MenuItem on:click={item.action}>
+						<div
+							class={classNames(
+								'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+							)}
+						>
+							<svelte:component this={item.icon} size={14} />
+							{item.displayName}
+						</div>
+					</MenuItem>
+				{/each}
+			</svelte:fragment>
+		</ButtonDropdown>
 		<div class="hidden md:inline relative overflow-visible">
 			{#if hasErrors}
 				<span

frontend/src/lib/components/apps/editor/TabsDebug.svelte

@@ -11,10 +11,9 @@
 	export let isConditionalDebugMode: boolean = false
 
 	const { componentControl } = getContext<AppViewerContext>('AppViewerContext')
+	const dispatch = createEventDispatcher()
 
 	let isManuallySelected: boolean = false
-
-	const dispatch = createEventDispatcher()
 </script>
 
 <button

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -105,8 +105,12 @@ export function selectId(
 	}
 }
 
-
-export function connectOutput(connectingInput: Writable<ConnectingInput>, typ:  TypedComponent['type'], id: string, spath: string) {
+export function connectOutput(
+	connectingInput: Writable<ConnectingInput>,
+	typ: TypedComponent['type'],
+	id: string,
+	spath: string
+) {
 	if (get(connectingInput).opened) {
 		let splitted = spath?.split('.')
 		let componentId = typ == 'containercomponent' ? splitted?.[0] : id
@@ -385,7 +389,6 @@ export function copyComponent(
 	return newItem
 }
 
-
 export function getAllSubgridsAndComponentIds(
 	app: App,
 	component: AppComponent
@@ -574,7 +577,7 @@ export function initConfig<
 		| {
 				type: 'oneOf'
 				selected: string
-				configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>
+				configuration: Record<string, Record<string, StaticAppInput | EvalAppInput | boolean>>
 		  }
 		| any
 	>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -303,7 +303,9 @@ const labels = {
 	sendToast: 'Display a toast notification',
 	sendErrorToast: 'Display an error toast notification',
 	open: 'Open a modal or a drawer',
-	close: 'Close a modal or a drawer'
+	close: 'Close a modal or a drawer',
+	openModal: 'Open a modal (deprecated)',
+	closeModal: 'Close a modal (deprecated)'
 }
 
 const onSuccessClick = {
@@ -351,7 +353,8 @@ const onSuccessClick = {
 				tooltip: 'The id of the modal to open',
 				fieldType: 'text',
 				type: 'static',
-				value: ''
+				value: '',
+				deprecated: true
 			}
 		},
 		closeModal: {
@@ -359,7 +362,8 @@ const onSuccessClick = {
 				tooltip: 'The id of the modal to close',
 				fieldType: 'text',
 				type: 'static',
-				value: ''
+				value: '',
+				deprecated: true
 			}
 		},
 		open: {

frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -177,7 +177,12 @@
 					</Tooltip>
 				</div>
 				<div class="relative">
-					<ClearableInput bind:value={value.class} />
+					<ClearableInput
+						bind:value={value.class}
+						type="textarea"
+						wrapperClass="h-full"
+						inputClass="h-full !text-xs  !rounded-none !p-2 min-h-[72px]"
+					/>
 				</div>
 			</label>
 		{/if}

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

@@ -38,6 +38,14 @@
 			}
 		}
 	}
+
+	function getValueOfDeprecated(obj: object): boolean {
+		if (!obj) return false
+
+		let innerObject = obj[Object.keys(obj)[0]]
+
+		return innerObject?.deprecated
+	}
 </script>
 
 <div class="p-2 border">
@@ -55,7 +63,9 @@
 		}}
 	>
 		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-			<option value={choice}>{labels?.[choice] ?? choice}</option>
+			{#if !getValueOfDeprecated(inputSpecsConfiguration[choice]) || oneOf.selected === choice}
+				<option value={choice}>{labels?.[choice] ?? choice}</option>
+			{/if}
 		{/each}
 	</select>
 	{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}