Merge branch 'improve-jschema-layout'

Author: rkpasia

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

@@ -29,9 +29,9 @@
 
 {#if schemaProperty }
   <div class='d-flex flex-column p-2'>
-    <div class='property-metadata d-flex flex-column w-50'>
-      <span class='fs-4 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title }</span>
-      <span>{schemaProperty.description }</span>
+    <div class='property-metadata d-flex flex-column w-100'>
+      <span class='fs-5 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title }</span>
+      <span class='small'>{schemaProperty.description }</span>
     </div>
     <div class='array-items my-2'>
 
@@ -40,7 +40,7 @@
         <div class='accordion-item'>
           <div class='accordion-header'>
             <button class='accordion-button' type='button' data-bs-toggle='collapse'
-                    data-bs-target='#{collapseSymbol}'>List arguments
+                    data-bs-target='#{collapseSymbol}'>Arguments list
             </button>
           </div>
           <div id='{collapseSymbol}' class='accordion-collapse collapse show' data-bs-parent='#{accordionParentKey}'>

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

@@ -14,9 +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'>
-      <span class='fs-4'>{ schemaProperty.title || 'Boolean argument' }</span>
+      <span class='fs-5'>{ schemaProperty.title || 'Boolean argument' }</span>
       {#if schemaProperty.description }
-        <span>{ schemaProperty.description }</span>
+        <span class='small'>{ schemaProperty.description }</span>
       {/if}
     </div>
     <div class='property-input ms-auto w-25'>

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

@@ -18,9 +18,9 @@
   <div class='d-flex align-items-center p-2'>
     <div class='property-metadata d-flex flex-column align-self-center w-50'>
       <span
-        class='fs-4 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'Number argument' }</span>
+        class='fs-5 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'Number argument' }</span>
       {#if schemaProperty.description }
-        <span>{ schemaProperty.description }</span>
+        <span class='small'>{ schemaProperty.description }</span>
       {/if}
     </div>
     <div class='property-input ms-auto w-25'>

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

@@ -36,9 +36,9 @@
 {#if objectSchema}
 
   <div class='d-flex flex-column p-2'>
-    <div class='property-metadata d-flex flex-column w-50'>
-      <span class='fs-4 {objectSchema.isRequired() ? "fw-bold" : ""}'>{ objectSchema.title }</span>
-      <span>{ objectSchema.description }</span>
+    <div class='property-metadata d-flex flex-column w-100'>
+      <span class='fs-5 {objectSchema.isRequired() ? "fw-bold" : ""}'>{ objectSchema.title }</span>
+      <span class='small'>{ objectSchema.description }</span>
     </div>
     <div class='object-properties my-2'>
       <div class='accordion' id='{accordionParentKey}'>

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

@@ -15,9 +15,9 @@
   <div class='d-flex align-items-center p-2'>
     <div class='property-metadata d-flex flex-column align-self-center w-50'>
       <span
-        class='fs-4 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'String argument' }</span>
+        class='fs-5 {schemaProperty.isRequired() ? "fw-bold" : ""}'>{ schemaProperty.title || 'String argument' }</span>
       {#if schemaProperty.description}
-        <span>{ schemaProperty.description }</span>
+        <span class='small'>{ schemaProperty.description }</span>
       {/if}
     </div>
     <div class='property-input ms-auto w-25'>

src/lib/components/workflow/ArgumentsSchema.svelte

@@ -88,7 +88,7 @@
         Save changes
       </button>
     </div>
-    <div>
+    <div class='ms-1'>
       <button class='btn btn-warning {unsavedChanges ? "" : "disabled"}' on:click={resetChanges.bind(this, args)}>
         Discard changes
       </button>

src/routes/projects/[projectId]/workflows/[workflowId]/+page.svelte

@@ -29,6 +29,7 @@
 	let workerInitControl = '';
 	let argsSchemaAvailable = undefined;
 	let argsSchemaValid = undefined;
+	let argsChangesSaved = false;
 
 	$: updatableWorkflowList = workflow?.task_list || [];
 
@@ -264,6 +265,10 @@
 	function handleArgsSaved(event) {
 		selectedWorkflowTask.args = event.detail.args;
 		selectedWorkflowTask = selectedWorkflowTask;
+		argsChangesSaved = true;
+		setTimeout(() => {
+			argsChangesSaved = false;
+		}, 3000);
 	}
 
 </script>
@@ -408,6 +413,11 @@
 								{#if selectedWorkflowTask}
 									{#key selectedWorkflowTask}
 										{#if argsSchemaAvailable && argsSchemaValid}
+											{#if argsChangesSaved }
+												<div class='alert alert-success m-3' role='alert'>
+													Arguments changes saved successfully
+												</div>
+											{/if}
 											<ArgumentsSchema
 												workflowId={workflow.id}
 												workflowTaskId={selectedWorkflowTask.id}