From 683b20aa5b7de4feb386f0d6546e1ac589c01e3e Mon Sep 17 00:00:00 2001 From: Juan Pablo Sarmiento Date: Wed, 13 Nov 2024 18:38:17 -0500 Subject: [PATCH 1/4] Fixed typescript errors --- .../FieldsetSchemasEditor/FieldSchemaRow.tsx | 50 ++++++++++++++++--- .../FieldsetSchemaBlock.tsx | 12 +---- 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/src/components/SingleWorkflowView/FieldsetSchemasEditor/FieldSchemaRow.tsx b/src/components/SingleWorkflowView/FieldsetSchemasEditor/FieldSchemaRow.tsx index 708fc8f..17fa484 100644 --- a/src/components/SingleWorkflowView/FieldsetSchemasEditor/FieldSchemaRow.tsx +++ b/src/components/SingleWorkflowView/FieldsetSchemasEditor/FieldSchemaRow.tsx @@ -7,11 +7,14 @@ import { Checkbox, Select, ComboboxItem, + TagsInput, + Group, } from '@mantine/core'; import { IconCheck, IconEdit } from '@tabler/icons-react'; import { FieldSchema, ParamReference } from '../../../client'; import { useDisclosure } from '@mantine/hooks'; import { useField } from '@mantine/form'; +import { modals } from '@mantine/modals'; type Props = { fieldIndex: number; @@ -66,7 +69,6 @@ export function FieldSchemaRow({ onFieldSchemaChange, }: Props): JSX.Element { const [isEditModeOn, editModeActions] = useDisclosure(false); - const nameField = useField({ initialValue: fieldSchema.name }); const isRequiredField = useField({ initialValue: fieldSchema.required, @@ -83,6 +85,19 @@ export function FieldSchemaRow({ initialValue: fieldSchema.allowEmptyValues, type: 'checkbox', }); + const allowedValuesField = useField({ + initialValue: Array.isArray(fieldSchema.allowedValues) + ? fieldSchema.allowedValues + : undefined, + }); + + const openAllowedValuesModal = () => + modals.openConfirmModal({ + title: 'Allowed values', + children: , + labels: { confirm: 'Save', cancel: 'Cancel' }, + confirmProps: { color: 'blue' }, + }); const nameColumn = isEditModeOn ? ( @@ -116,6 +131,32 @@ export function FieldSchemaRow({ {booleanToString(fieldSchema.allowEmptyValues)} ); + const allowedValuesColumn = isEditModeOn ? ( + + + {allowedValueListToString(fieldSchema.allowedValues)} + {isEditModeOn ? ( + + { + openAllowedValuesModal(); + }} + /> + + ) : ( + '' + )} + + + ) : ( + {allowedValueListToString(fieldSchema.allowedValues)} + ); + return ( {nameColumn} @@ -123,12 +164,7 @@ export function FieldSchemaRow({ {dataTypeColumn} {isCaseSensitiveColumn} {allowEmptyValuesColumn} - - - - {allowedValueListToString(fieldSchema.allowedValues)} - - + {allowedValuesColumn} Data type Case sensitive Allows empty values - - - Allowed values - - - + Allowed values From 6a867e6c135ace236dd10d484c9b899b1a9a5a5d Mon Sep 17 00:00:00 2001 From: Juan Pablo Sarmiento Date: Fri, 15 Nov 2024 13:32:36 -0500 Subject: [PATCH 2/4] Added UI to set allowable values --- .../AllowedValuesModalContent.tsx | 131 ++++++++++++++++++ .../FieldsetSchemasEditor/FieldSchemaRow.tsx | 124 +++++++++++------ .../FieldsetSchemaBlock.tsx | 9 +- .../FieldsetSchemasEditor/index.tsx | 4 + .../SingleWorkflowView/Workspace/index.tsx | 1 + 5 files changed, 228 insertions(+), 41 deletions(-) create mode 100644 src/components/SingleWorkflowView/FieldsetSchemasEditor/AllowedValuesModalContent.tsx diff --git a/src/components/SingleWorkflowView/FieldsetSchemasEditor/AllowedValuesModalContent.tsx b/src/components/SingleWorkflowView/FieldsetSchemasEditor/AllowedValuesModalContent.tsx new file mode 100644 index 0000000..838068a --- /dev/null +++ b/src/components/SingleWorkflowView/FieldsetSchemasEditor/AllowedValuesModalContent.tsx @@ -0,0 +1,131 @@ +import { + SegmentedControl, + Select, + Stack, + TagsInput, + Text, +} from '@mantine/core'; +import * as React from 'react'; +import { ParamReference, WorkflowParam } from '../../../client'; + +export type AllowedValues = string[] | ParamReference | null; + +type Props = { + defaultAllowedValues: AllowedValues; + workflowParams: WorkflowParam[]; +}; + +export type AllowedValuesModalContentRef = { + getAllowedValues(): AllowedValues; +}; + +function isParamReference( + allowedValues: unknown, +): allowedValues is ParamReference { + return ( + typeof allowedValues === 'object' && + allowedValues !== null && + 'paramId' in allowedValues + ); +} + +export const AllowedValuesModalContent = React.forwardRef(function ( + { defaultAllowedValues, workflowParams }: Props, + ref: React.ForwardedRef, +): JSX.Element { + const [allowedValues, setAllowedValues] = + React.useState(defaultAllowedValues); + + const [pickerMode, setPickerMode] = React.useState< + 'workflow-params' | 'value-list' + >(!Array.isArray(defaultAllowedValues) ? 'workflow-params' : 'value-list'); + + React.useImperativeHandle( + ref, + () => { + return { + getAllowedValues: () => { + return allowedValues; + }, + }; + }, + [allowedValues], + ); + + // Filter to only string list params as they're the only valid type for allowed values + const paramOptions = workflowParams + .filter((param) => param.type === 'string list') + .map((param) => ({ + value: param.id, + label: param.displayName, + })); + + const onSwitchChange = (value: string) => { + setPickerMode(value as 'workflow-params' | 'value-list'); + setAllowedValues(value === 'value-list' ? [] : null); + }; + + const renderWorkflowParamsPicker = () => { + if (isParamReference(allowedValues) || allowedValues === null) { + if (paramOptions.length === 0) { + return ( + There are no workflow inputs of type Text List. + ); + } + + return ( +