show pre-populated example data values in workflow run form

Author: ahmedhamidawan

client/src/components/Form/Elements/FormData/FormExampleData.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ExampleData } from "./types";
+
+import FormExampleDataElement from "./FormExampleDataElement.vue";
+
+const props = defineProps<{
+    value: ExampleData;
+}>();
+</script>
+
+<template>
+    <FormExampleDataElement
+        v-if="props.value.class === 'Collection'"
+        :value="{
+            class: 'Collection',
+            elements: props.value.elements,
+            identifier: 'Collection',
+            type: props.value.collection_type,
+        }" />
+    <FormExampleDataElement
+        v-else-if="props.value.class === 'File'"
+        :value="{
+            class: 'File',
+            identifier: 'Dataset',
+            location: props.value.location,
+        }"
+        :file-type="props.value.filetype" />
+</template>

client/src/components/Form/Elements/FormData/FormExampleDataElement.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { BCollapse, BLink } from "bootstrap-vue";
+import { ref } from "vue";
+
+import type { ExampleDataCollectionElement, ExampleDataFileElement } from "./types";
+
+const props = defineProps<{
+    value: ExampleDataCollectionElement | ExampleDataFileElement;
+    fileType?: string;
+}>();
+
+const expanded = ref(false);
+</script>
+
+<template>
+    <div v-if="props.value.class === 'Collection'">
+        <div
+            tabindex="0"
+            role="button"
+            class="form-example-data-element rounded"
+            @click="expanded = !expanded"
+            @keydown.enter="expanded = !expanded">
+            <strong>{{ props.value.identifier || "Collection" }}</strong>
+            <i>({{ props.value.type }})</i>
+            <span class="float-right"> {{ expanded ? "Hide" : "Show" }} elements </span>
+        </div>
+        <BCollapse :visible="expanded" class="pl-2">
+            <FormExampleDataElement v-for="(element, index) in props.value.elements" :key="index" :value="element" />
+        </BCollapse>
+    </div>
+    <div v-else-if="props.value.class === 'File'">
+        <div class="form-example-data-element rounded d-flex justify-content-between align-items-center w-100">
+            <div>
+                <strong>{{ props.value.identifier || "Dataset" }}</strong>
+                <i v-if="props.fileType">({{ props.fileType }})</i>
+            </div>
+            <BLink v-if="props.value.location" :href="props.value.location" target="_blank">
+                <i>{{ props.value.location }}</i>
+            </BLink>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.form-example-data-element {
+    // background-color: $state-success-bg; // TODO: Does not seem to work even
+    //                                              with the "theme/blue.scss" import
+    background-color: #c2ebc2;
+    padding: 0.5rem 1.25rem;
+}
+</style>

client/src/components/Form/Elements/FormData/types.ts

@@ -1,3 +1,30 @@
+type ExampleDataFile = {
+    class: "File";
+    filetype: string;
+    location: string;
+};
+
+type ExampleDataCollection = {
+    class: "Collection";
+    collection_type: string;
+    elements?: Array<ExampleDataFileElement | ExampleDataCollectionElement>;
+};
+
+export type ExampleDataFileElement = {
+    class: "File";
+    identifier: string;
+    location: string;
+};
+
+export type ExampleDataCollectionElement = {
+    class: "Collection";
+    elements?: Array<ExampleDataFileElement | ExampleDataCollectionElement>;
+    identifier: string;
+    type: string;
+};
+
+export type ExampleData = ExampleDataFile | ExampleDataCollection;
+
 export type DataOption = {
     id: string;
     hid?: number;
@@ -13,3 +40,7 @@ export type DataOption = {
 export function isDataOption(item: object): item is DataOption {
     return !!item && "src" in item;
 }
+
+export function isExampleData(item: object): item is ExampleData {
+    return !!item && "class" in item && (item as ExampleData).class !== undefined;
+}

client/src/components/Form/FormElement.vue

@@ -9,12 +9,14 @@ import { computed, ref, useAttrs } from "vue";
 
 import { linkify } from "@/utils/utils";
 
+import { isExampleData } from "./Elements/FormData/types";
 import type { FormParameterAttributes, FormParameterTypes, FormParameterValue } from "./parameterTypes";
 
 import FormBoolean from "./Elements/FormBoolean.vue";
 import FormColor from "./Elements/FormColor.vue";
 import FormData from "./Elements/FormData/FormData.vue";
 import FormDataUri from "./Elements/FormData/FormDataUri.vue";
+import FormExampleData from "./Elements/FormData/FormExampleData.vue";
 import FormDirectory from "./Elements/FormDirectory.vue";
 import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
 import FormError from "./Elements/FormError.vue";
@@ -169,6 +171,13 @@ const showField = computed(
 const formDataField = computed(() =>
     props.type && ["data", "data_collection"].includes(props.type) ? (props.type as "data" | "data_collection") : null
 );
+const isExampleDataField = computed(() => {
+    const dataField = formDataField.value;
+    if (dataField && isExampleData(props.value)) {
+        return true;
+    }
+    return false;
+});
 const isUriDataField = computed(() => {
     const dataField = props.type == "data";
     if (dataField && props.value && "src" in props.value) {
@@ -409,6 +418,11 @@ function onAlert(value: string | undefined) {
                     v-model="currentValue"
                     :value="attrs.value"
                     :multiple="attrs.multiple" />
+                <FormExampleData
+                    v-else-if="isExampleDataField"
+                    :id="id"
+                    :value="attrs.value"
+                    :multiple="attrs.multiple" />
                 <FormData
                     v-else-if="formDataField"
                     :id="id"