Merge pull request #227 from fractal-analytics-platform/better-display-of-task-argument-descriptions

Improve JSchema component descriptions handling

Author: rkpasia

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

@@ -1,6 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import PropertyDiscriminator from '$lib/components/common/jschema/PropertyDiscriminator.svelte';
+	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
 
 	export let schemaProperty = undefined;
 	let nestedProperties = [];
@@ -29,9 +30,9 @@
 
 {#if schemaProperty }
   <div class='d-flex flex-column p-2'>
-    <div class='property-metadata d-flex flex-column w-100'>
+    <div class='property-metadata d-flex flex-row w-100'>
       <span class='{schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || "" }</span>
-      <span class='small fw-light'>{schemaProperty.description || "" }</span>
+      <PropertyDescription description={schemaProperty.description} />
     </div>
     <div class='array-items my-2'>
 

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

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
+	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
 
 	const schemaManager = getContext('schemaManager');
 
@@ -13,11 +14,9 @@
 
 {#if schemaProperty}
   <div class='d-flex align-items-center p-2'>
-    <div class='property-metadata d-flex flex-column align-self-center w-50'>
+    <div class='property-metadata d-flex flex-row align-self-center w-50'>
       <span class=''>{ schemaProperty.title || 'Boolean argument' }</span>
-      {#if schemaProperty.description }
-        <span class='small fw-light'>{ schemaProperty.description }</span>
-      {/if}
+      <PropertyDescription description={schemaProperty.description} />
     </div>
     <div class='property-input ms-auto w-25'>
       <div class='form-check'>

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

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
+	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
 
 	const schemaManager = getContext('schemaManager');
 
@@ -16,12 +17,10 @@
 
 {#if schemaProperty }
   <div class='d-flex align-items-center p-2'>
-    <div class='property-metadata d-flex flex-column align-self-center w-50'>
+    <div class='property-metadata d-flex flex-row align-self-center w-50'>
       <span
         class='{schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'Number argument' }</span>
-      {#if schemaProperty.description }
-        <span class='small fw-light'>{ schemaProperty.description }</span>
-      {/if}
+      <PropertyDescription description={schemaProperty.description} />
     </div>
     <div class='property-input ms-auto w-25'>
       <input type='number' bind:value={schemaProperty.value} on:change={handleValueChange} class='form-control'>

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

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
 	import PropertiesBlock from '$lib/components/common/jschema/PropertiesBlock.svelte';
+	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
 
 	export let objectSchema = undefined;
 
@@ -36,9 +37,9 @@
 {#if objectSchema}
 
   <div class='d-flex flex-column p-2'>
-    <div class='property-metadata d-flex flex-column w-100'>
+    <div class='property-metadata d-flex flex-row w-100'>
       <span class='{objectSchema.isRequired() ? "fw-bold" : ""}'>{ objectSchema.title }</span>
-      <span class='small fw-light'>{ objectSchema.description || "" }</span>
+      <PropertyDescription description={objectSchema.description} />
     </div>
     <div class='object-properties my-2'>
       <div class='accordion' id='{accordionParentKey}'>

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

@@ -0,0 +1,19 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let description = undefined;
+
+	onMount(() => {
+		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+		// eslint-disable-next-line no-undef
+		popoverTriggerList.forEach(popoverEl => new bootstrap.Popover(popoverEl));
+	});
+
+</script>
+
+<span class='ms-2'>
+  {#if description }
+    <a tabindex='0' role='button' data-bs-trigger='focus' class='bi bi-info-circle' data-bs-toggle='popover'
+       data-bs-content={description}></a>
+  {/if}
+</span>

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

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from 'svelte';
+	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
 
 	const schemaManager = getContext('schemaManager');
 
@@ -13,14 +14,12 @@
 
 {#if schemaProperty }
   <div class='d-flex align-items-center p-2'>
-    <div class='property-metadata d-flex flex-column align-self-center w-50'>
+    <div class='property-metadata d-flex flex-row align-self-center w-50'>
       <span
         class='{schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'String argument' }</span>
-      {#if schemaProperty.description}
-        <span class='small fw-light'>{ schemaProperty.description }</span>
-      {/if}
+      <PropertyDescription description={schemaProperty.description} />
     </div>
-    <div class='property-input ms-auto w-25'>
+    <div class='property-input ms-auto w-50'>
       <input type='text' bind:value={schemaProperty.value} on:change={handleValueChange} class='form-control'>
     </div>
   </div>

static/global.css

@@ -1,3 +1,7 @@
 #json-schema > .properties-block > .property-block {
     border-top: 1px solid #dee2e6;
 }
+
+.popover {
+    max-width: 500px !important;
+}