[Nu-1279] fragment input validation fields (#5247)

* NU-1279 Adjust validation to the newest contract * NU-1279 update validation * NU-1279 fragment input validation fields * NU-1279 fix build * NU-1279 wait for validation expand * Updated snapshots (#5248) Co-authored-by: Dzuming <[email protected]> * NU-1279 change placeholder message * NU-1279 make tooltip icon smaller * Updated snapshots (#5251) Co-authored-by: Dzuming <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dzuming <[email protected]>
TouK · Dec 17, 2023 · 9822ec4 · 9822ec4
1 parent 2001310
commit 9822ec4
Show file tree

Hide file tree

Showing 22 changed files with 218 additions and 105 deletions.
diff --git a/...d allow adding input parameters and display used fragment graph in modal #0.png b/...d allow adding input parameters and display used fragment graph in modal #0.png
diff --git a/...d allow adding input parameters and display used fragment graph in modal #1.png b/...d allow adding input parameters and display used fragment graph in modal #1.png
diff --git a/...d allow adding input parameters and display used fragment graph in modal #3.png b/...d allow adding input parameters and display used fragment graph in modal #3.png
diff --git a/...d allow adding input parameters and display used fragment graph in modal #4.png b/...d allow adding input parameters and display used fragment graph in modal #4.png
diff --git a/...d allow adding input parameters and display used fragment graph in modal #7.png b/...d allow adding input parameters and display used fragment graph in modal #7.png
diff --git a/designer/client/cypress/e2e/fragment.cy.ts b/designer/client/cypress/e2e/fragment.cy.ts
@@ -102,6 +102,17 @@ describe("Fragment", () => {
         toggleSettings(6);
         cy.get("[data-testid='settings:6']").find("[id='ace-editor']").type("1");
 
+        // Activate a validation
+        cy.get("[data-testid='settings:6']")
+            .find("label")
+            .contains(/validation/i)
+            .siblings()
+            .eq(0)
+            .click();
+        cy.get("[data-testid='settings:6']")
+            .find("label")
+            .contains(/Validation expression/i);
+
         cy.get("@window").find("[data-testid='settings:6']").matchImage();
 
         cy.get("@window")

diff --git a/designer/client/src/components/graph/node-modal/FieldLabel.tsx b/designer/client/src/components/graph/node-modal/FieldLabel.tsx
@@ -25,8 +25,12 @@ const Footer = styled("div")({
     overflow: "hidden",
 });
 
-const StyledNodeTip = styled(NodeTip)`
+export const StyledNodeTip = styled(NodeTip)`
     margin: 0 8px;
+    svg {
+        width: 16px;
+        height: 16px;
+    }
 `;
 export function FieldLabel({
     nodeId,

diff --git a/designer/client/src/components/graph/node-modal/editors/EditableEditor.tsx b/designer/client/src/components/graph/node-modal/editors/EditableEditor.tsx
@@ -24,6 +24,7 @@ interface Props {
     fieldErrors: FieldError[];
     variableTypes: VariableTypes;
     validationLabelInfo?: string;
+    placeholder?: string;
 }
 
 export const EditableEditor = forwardRef((props: Props, ref) => {

diff --git a/designer/client/src/components/graph/node-modal/fragment-input-definition/item/Item.tsx b/designer/client/src/components/graph/node-modal/fragment-input-definition/item/Item.tsx
@@ -75,7 +75,10 @@ export function Item(props: ItemProps): JSX.Element {
                 />
                 <SettingsButton isOpen={isOpen} toggleIsOpen={openSettingMenu} />
             </FieldsRow>
-            <SettingsProvider initialFixedValuesList={item?.valueEditor?.fixedValuesList}>
+            <SettingsProvider
+                initialFixedValuesList={item?.valueEditor?.fixedValuesList}
+                initialTemporaryValueCompileTimeValidation={item?.valueCompileTimeValidation}
+            >
                 {isOpen && (
                     <Settings
                         path={path}

diff --git a/designer/client/src/components/graph/node-modal/fragment-input-definition/item/types.ts b/designer/client/src/components/graph/node-modal/fragment-input-definition/item/types.ts
@@ -1,12 +1,14 @@
 import { Expression, ReturnedType } from "../../../../../types";
 
-export type onChangeType = string | number | boolean | FixedValuesOption | FixedValuesOption[];
+export type onChangeType = string | number | boolean | FixedValuesOption | FixedValuesOption[] | ValueCompileTimeValidation;
+
+export interface ValueCompileTimeValidation {
+    validationExpression: Expression;
+    validationFailedMessage?: string;
+}
 
-//TODO: Makes values required when backend ready
 export interface FragmentValidation {
-    validation?: boolean;
-    validationErrorMessage?: string;
-    validationExpression?: string;
+    valueCompileTimeValidation: ValueCompileTimeValidation | null;
 }
 
 export enum FixedValuesType {
@@ -48,7 +50,7 @@ export interface DefaultParameterVariant extends GenericParameterVariant, Fragme
     valueEditor: null;
 }
 
-export interface FixedListParameterVariant extends GenericParameterVariant {
+export interface FixedListParameterVariant extends GenericParameterVariant, FragmentValidation {
     valueEditor: ValueEditor;
     fixedValuesListPresetId: string;
     presetSelection?: string;

diff --git a/designer/client/src/components/graph/node-modal/fragment-input-definition/item/utils.ts b/designer/client/src/components/graph/node-modal/fragment-input-definition/item/utils.ts
@@ -12,11 +12,8 @@ export const getDefaultFields = (refClazzName: string): FragmentInputParameter =
         // fixedValuesType: FixedValuesType.UserDefinedList,
         valueEditor: null,
         // fixedValuesListPresetId: "",
-        // validationExpression: "test",
         // presetSelection: "",
-        // validationExpression: "",
-        // validationErrorMessage: "",
-        // validation: true,
+        valueCompileTimeValidation: null,
         typ: { refClazzName } as ReturnedType,
     };
 };
diff --git a/...t/src/components/graph/node-modal/fragment-input-definition/settings/SettingsProvider.tsx b/...t/src/components/graph/node-modal/fragment-input-definition/settings/SettingsProvider.tsx
@@ -1,23 +1,45 @@
 import React, { createContext, PropsWithChildren, useContext, useState } from "react";
-import { FixedValuesOption } from "../item";
+import { FixedValuesOption, ValueCompileTimeValidation } from "../item";
 
 const SettingsContext = createContext<{
     temporaryUserDefinedList: FixedValuesOption[];
     handleTemporaryUserDefinedList: (listItem: FixedValuesOption[]) => void;
+    temporaryValueCompileTimeValidation: ValueCompileTimeValidation;
+    handleTemporaryValueCompileTimeValidation: (valueCompileTimeValidation: ValueCompileTimeValidation) => void;
 }>(null);
 
 export const SettingsProvider = ({
     initialFixedValuesList,
+    initialTemporaryValueCompileTimeValidation,
     children,
-}: PropsWithChildren<{ initialFixedValuesList: FixedValuesOption[] }>) => {
+}: PropsWithChildren<{
+    initialFixedValuesList: FixedValuesOption[];
+    initialTemporaryValueCompileTimeValidation: ValueCompileTimeValidation;
+}>) => {
     const [temporaryUserDefinedList, setTemporaryUserDefinedList] = useState<FixedValuesOption[]>(initialFixedValuesList || []);
+    const [temporaryValueCompileTimeValidation, setTemporaryValueCompileTimeValidation] = useState<ValueCompileTimeValidation>(
+        initialTemporaryValueCompileTimeValidation || null,
+    );
 
     const handleTemporaryUserDefinedList = (listItem: FixedValuesOption[]) => {
         setTemporaryUserDefinedList(listItem);
     };
 
+    const handleTemporaryValueCompileTimeValidation = (valueCompileTimeValidation: ValueCompileTimeValidation) => {
+        setTemporaryValueCompileTimeValidation(valueCompileTimeValidation);
+    };
+
     return (
-        <SettingsContext.Provider value={{ temporaryUserDefinedList, handleTemporaryUserDefinedList }}>{children}</SettingsContext.Provider>
+        <SettingsContext.Provider
+            value={{
+                temporaryUserDefinedList,
+                handleTemporaryUserDefinedList,
+                temporaryValueCompileTimeValidation,
+                handleTemporaryValueCompileTimeValidation,
+            }}
+        >
+            {children}
+        </SettingsContext.Provider>
     );
 };
 

diff --git a/...omponents/graph/node-modal/fragment-input-definition/settings/variants/DefaultVariant.tsx b/...omponents/graph/node-modal/fragment-input-definition/settings/variants/DefaultVariant.tsx
@@ -6,6 +6,8 @@ import { DefaultParameterVariant, onChangeType } from "../../item";
 import { NodeValidationError, VariableTypes } from "../../../../../../types";
 import { TextAreaNodeWithFocus } from "../../../../../withFocus";
 import InitialValue from "./fields/InitialValue";
+import { ValidationsFields } from "./fields/validation";
+import { getValidationErrorsForField } from "../../../editors/Validators";
 
 interface Props {
     item: DefaultParameterVariant;
@@ -28,15 +30,21 @@ export const DefaultVariant = ({ item, onChange, path, variableTypes, readOnly,
                     label=""
                 />
             </SettingRow>
-            {/*<ValidationsFields path={path} onChange={onChange} item={item} variableTypes={variableTypes} />*/}
+            <ValidationsFields
+                path={path}
+                onChange={onChange}
+                item={item}
+                variableTypes={variableTypes}
+                readOnly={readOnly}
+                errors={errors}
+            />
             <InitialValue
                 onChange={onChange}
                 item={item}
                 path={path}
                 readOnly={readOnly}
                 variableTypes={variableTypes}
-                errors={errors}
-                fieldName={`$param.${item.name}.$initialValue`}
+                fieldErrors={getValidationErrorsForField(errors, `$param.${item.name}.$initialValue`)}
             />
             <SettingRow>
                 <SettingLabelStyled>{t("fragment.hintText", "Hint text:")}</SettingLabelStyled>

diff --git a/...dal/fragment-input-definition/settings/variants/StringBooleanVariants/AnyValueVariant.tsx b/...dal/fragment-input-definition/settings/variants/StringBooleanVariants/AnyValueVariant.tsx
@@ -5,6 +5,8 @@ import { TextAreaNodeWithFocus } from "../../../../../../withFocus";
 import { AnyValueParameterVariant, onChangeType } from "../../../item";
 import { NodeValidationError, VariableTypes } from "../../../../../../../types";
 import { useTranslation } from "react-i18next";
+import { ValidationsFields } from "../fields/validation";
+import { getValidationErrorsForField } from "../../../../editors/Validators";
 
 interface Props {
     item: AnyValueParameterVariant;
@@ -20,15 +22,21 @@ export const AnyValueVariant = ({ item, path, onChange, readOnly, variableTypes,
 
     return (
         <>
-            {/*<ValidationsFields path={path} item={item} onChange={onChange} variableTypes={variableTypes} />*/}
+            <ValidationsFields
+                path={path}
+                item={item}
+                onChange={onChange}
+                variableTypes={variableTypes}
+                readOnly={readOnly}
+                errors={errors}
+            />
             <InitialValue
                 path={path}
                 item={item}
                 onChange={onChange}
                 readOnly={readOnly}
                 variableTypes={variableTypes}
-                errors={errors}
-                fieldName={`$param.${item.name}.$initialValue`}
+                fieldErrors={getValidationErrorsForField(errors, `$param.${item.name}.$initialValue`)}
             />
             <SettingRow>
                 <SettingLabelStyled>{t("fragment.hintText", "Hint text:")}</SettingLabelStyled>

diff --git a/...nput-definition/settings/variants/StringBooleanVariants/AnyValueWithSuggestionVariant.tsx b/...nput-definition/settings/variants/StringBooleanVariants/AnyValueWithSuggestionVariant.tsx
@@ -6,6 +6,8 @@ import { AnyValueWithSuggestionsParameterVariant, FixedValuesType, onChangeType
 import { useTranslation } from "react-i18next";
 import { FixedValuesSetting } from "../fields/FixedValuesSetting";
 import { FixedValuesPresets, NodeValidationError, VariableTypes } from "../../../../../../../types";
+import { ValidationsFields } from "../fields/validation";
+import { getValidationErrorsForField } from "../../../../editors/Validators";
 
 interface Props {
     item: AnyValueWithSuggestionsParameterVariant;
@@ -44,16 +46,22 @@ export const AnyValueWithSuggestionVariant = ({ item, path, onChange, variableTy
                 name={item.name}
                 initialValue={item.initialValue}
             />
-            {/*<ValidationsFields path={path} onChange={onChange} item={item} variableTypes={variableTypes} />*/}
+            <ValidationsFields
+                path={path}
+                onChange={onChange}
+                item={item}
+                variableTypes={variableTypes}
+                readOnly={readOnly}
+                errors={errors}
+            />
             <InitialValue
                 path={path}
                 item={item}
                 onChange={onChange}
                 options={fixedValuesType === FixedValuesType.ValueInputWithFixedValuesProvided ? fixedValuesList : presetListItemOptions}
                 readOnly={readOnly}
                 variableTypes={variableTypes}
-                errors={errors}
-                fieldName={`$param.${item.name}.$initialValue`}
+                fieldErrors={getValidationErrorsForField(errors, `$param.${item.name}.$initialValue`)}
             />
             <SettingRow>
                 <SettingLabelStyled>{t("fragment.hintText", "Hint text:")}</SettingLabelStyled>

diff --git a/...al/fragment-input-definition/settings/variants/StringBooleanVariants/FixedListVariant.tsx b/...al/fragment-input-definition/settings/variants/StringBooleanVariants/FixedListVariant.tsx
@@ -6,6 +6,7 @@ import { FixedValuesSetting } from "../fields/FixedValuesSetting";
 import { SettingLabelStyled, SettingRow } from "../fields/StyledSettingsComponnets";
 import { TextAreaNodeWithFocus } from "../../../../../../withFocus";
 import { FixedValuesPresets, NodeValidationError, VariableTypes } from "../../../../../../../types";
+import { getValidationErrorsForField } from "../../../../editors/Validators";
 
 interface Props {
     item: FixedListParameterVariant;
@@ -51,8 +52,7 @@ export const FixedListVariant = ({ item, path, onChange, fixedValuesPresets, rea
                 options={fixedValuesType === FixedValuesType.ValueInputWithFixedValuesProvided ? fixedValuesList : presetListItemOptions}
                 readOnly={readOnly}
                 variableTypes={variableTypes}
-                errors={errors}
-                fieldName={`$param.${item.name}.$initialValue`}
+                fieldErrors={getValidationErrorsForField(errors, `$param.${item.name}.$initialValue`)}
             />
             <SettingRow>
                 <SettingLabelStyled>{t("fragment.hintText", "Hint text:")}</SettingLabelStyled>

diff --git a/...ents/graph/node-modal/fragment-input-definition/settings/variants/fields/InitialValue.tsx b/...ents/graph/node-modal/fragment-input-definition/settings/variants/fields/InitialValue.tsx
@@ -1,26 +1,25 @@
 import React from "react";
 import { SettingLabelStyled, SettingRow } from "./StyledSettingsComponnets";
 import { useTranslation } from "react-i18next";
-import { onChangeType, FragmentInputParameter, FixedValuesOption, FieldName } from "../../../item";
+import { onChangeType, FragmentInputParameter, FixedValuesOption } from "../../../item";
 import { Option, TypeSelect } from "../../../TypeSelect";
 import { ExpressionLang } from "../../../../editors/expression/types";
 import { EditableEditor } from "../../../../editors/EditableEditor";
-import { NodeValidationError, VariableTypes } from "../../../../../../../types";
-import { getValidationErrorsForField } from "../../../../editors/Validators";
+import { VariableTypes } from "../../../../../../../types";
+import { FieldError } from "../../../../editors/Validators";
 import { EditorType } from "../../../../editors/expression/Editor";
 
 interface InitialValue {
     item: FragmentInputParameter;
     path: string;
     onChange: (path: string, value: onChangeType) => void;
-    fieldName: FieldName;
     options?: FixedValuesOption[];
     readOnly: boolean;
     variableTypes: VariableTypes;
-    errors: NodeValidationError[];
+    fieldErrors: FieldError[];
 }
 
-export default function InitialValue({ onChange, fieldName, item, path, options, readOnly, variableTypes, errors = [] }: InitialValue) {
+export default function InitialValue({ onChange, item, path, options, readOnly, variableTypes, fieldErrors }: InitialValue) {
     const { t } = useTranslation();
 
     const emptyOption = { label: "", value: "" };
@@ -39,7 +38,7 @@ export default function InitialValue({ onChange, fieldName, item, path, options,
                     options={optionsToDisplay}
                     readOnly={readOnly}
                     placeholder={""}
-                    fieldErrors={getValidationErrorsForField(errors, fieldName)}
+                    fieldErrors={fieldErrors}
                 />
             ) : (
                 <EditableEditor
@@ -49,7 +48,7 @@ export default function InitialValue({ onChange, fieldName, item, path, options,
                     readOnly={readOnly}
                     param={{ editor: { type: EditorType.RAW_PARAMETER_EDITOR } }}
                     showValidation
-                    fieldErrors={getValidationErrorsForField(errors, fieldName)}
+                    fieldErrors={fieldErrors}
                 />
             )}
         </SettingRow>

diff --git a/...ode-modal/fragment-input-definition/settings/variants/fields/StyledSettingsComponnets.tsx b/...ode-modal/fragment-input-definition/settings/variants/fields/StyledSettingsComponnets.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Switch, Typography, styled, FormLabel, css } from "@mui/material";
 import { NodeRow } from "../../../../NodeDetailsContent/NodeStyled";
+import InfoIcon from "@mui/icons-material/Info";
+import { StyledNodeTip } from "../../../../FieldLabel";
 
 export const SettingsWrapper = styled("div")`
     padding: 10px;
@@ -78,4 +80,9 @@ export const StyledFormControlLabel = styled(Typography)`
     text-align: left;
 `;
 
-export const fieldLabel = (label: string) => <SettingLabelStyled required>{label}</SettingLabelStyled>;
+export const fieldLabel = ({ label, required = false, hintText }: { label: string; required?: boolean; hintText?: string }) => (
+    <SettingLabelStyled required={required}>
+        {label}
+        {hintText && <StyledNodeTip title={hintText} icon={<InfoIcon />} />}
+    </SettingLabelStyled>
+);