Improved usability of workflow task forms

Author: zonia3000

playwright.config.js

@@ -38,7 +38,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.0a10',
+			command: './tests/start-test-server.sh 1.4.0',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/lib/components/common/jschema/ArrayProperty.svelte

@@ -29,26 +29,28 @@
 
 {#if schemaProperty}
 	<div class="d-flex flex-column p-2">
-		<div class="property-metadata d-flex flex-row w-100">
-			<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>{schemaProperty.title || ''}</span>
-			<PropertyDescription description={schemaProperty.description} />
-		</div>
 		<div class="array-items my-2">
 			<div class="accordion" id={accordionParentKey}>
 				<div class="accordion-item">
 					<div class="accordion-header">
 						<button
-							class="accordion-button collapsed"
+							class="accordion-button"
+							class:collapsed={!schemaProperty.isRequired()}
 							type="button"
 							data-bs-toggle="collapse"
 							data-bs-target="#{collapseSymbol}"
 						>
-							Arguments list
+							<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>
+								{schemaProperty.title || ''}
+							</span>
+							<PropertyDescription description={schemaProperty.description} />
 						</button>
 					</div>
 					<div
 						id={collapseSymbol}
-						class="accordion-collapse collapse"
+						class="accordion-collapse"
+						class:collapse={!schemaProperty.isRequired()}
+						class:show={schemaProperty.isRequired()}
 						data-bs-parent="#{accordionParentKey}"
 					>
 						<div class="accordion-body p-1">

src/lib/components/common/jschema/ObjectProperty.svelte

@@ -38,26 +38,26 @@
 
 {#if objectSchema}
 	<div class="d-flex flex-column p-2">
-		<div class="property-metadata d-flex flex-row w-100">
-			<span class={objectSchema.isRequired() ? 'fw-bold' : ''}>{objectSchema.title}</span>
-			<PropertyDescription description={objectSchema.description} />
-		</div>
 		<div class="object-properties my-2">
 			<div class="accordion" id={accordionParentKey}>
 				<div class="accordion-item">
 					<div class="accordion-header">
 						<button
-							class="accordion-button collapsed"
+							class="accordion-button"
+							class:collapsed={!objectSchema.isRequired()}
 							type="button"
 							data-bs-toggle="collapse"
 							data-bs-target="#{collapseSymbol}"
 						>
-							Argument Properties
+							<span class={objectSchema.isRequired() ? 'fw-bold' : ''}>{objectSchema.title}</span>
+							<PropertyDescription description={objectSchema.description} />
 						</button>
 					</div>
 					<div
 						id={collapseSymbol}
-						class="accordion-collapse collapse"
+						class="accordion-collapse"
+						class:collapse={!objectSchema.isRequired()}
+						class:show={objectSchema.isRequired()}
 						data-bs-parent="#{accordionParentKey}"
 					>
 						<div class="accordion-body p-1">

src/lib/components/common/jschema/PropertyDescription.svelte

@@ -3,13 +3,34 @@
 
 	export let description = undefined;
 
+	/** @type {HTMLElement|undefined} */
 	let element;
 
+	let popover;
+	let windowEventListener;
+
 	onMount(() => {
 		if (element) {
-			// @ts-ignore
-			// eslint-disable-next-line no-undef
-			new bootstrap.Popover(element);
+			element.addEventListener('click', function () {
+				// @ts-ignore
+				// eslint-disable-next-line no-undef
+				popover = bootstrap.Popover.getOrCreateInstance(element, { trigger: 'manual' });
+				popover.toggle();
+				if (!windowEventListener) {
+					windowEventListener = function (/** @type {MouseEvent} */ event) {
+						if (event.target instanceof HTMLElement && event.target !== element) {
+							const clickedPopover = event.target.closest('.popover');
+							if (!clickedPopover) {
+								popover.hide();
+								popover = undefined;
+								window.removeEventListener('click', windowEventListener);
+								windowEventListener = undefined;
+							}
+						}
+					};
+					window.addEventListener('click', windowEventListener);
+				}
+			});
 		}
 	});
 </script>
@@ -22,7 +43,8 @@
 			role="button"
 			data-bs-trigger="focus"
 			class="bi bi-info-circle text-primary"
-			data-bs-toggle="popover"
+			data-bs-toggle="collapse"
+			data-bs-target
 			data-bs-content={description}
 		/>
 	{/if}