Skip to content

Improve handling of dependent value handling in create/update dialog #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andreas-schultz wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Improve handling of dependent value handling in create/update dialog #1036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1732840
Improve handling of dependent value handling in create/update dialog
andreas-schultz Apr 24, 2026
0a65e2d
Add tests
andreas-schultz Apr 24, 2026
506b5f2
Add highlighting for input elements in dependent parameter case
andreas-schultz Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion libs/gui-elements
Open in desktop
Submodule gui-elements updated 3 files
+5 −0 CHANGELOG.md
+18 −4 src/components/AutoSuggestion/AutoSuggestion.tsx
+20 −4 src/extensions/codemirror/CodeMirror.tsx
2 changes: 1 addition & 1 deletion ...space/src/app/views/shared/TargetVocabularySelection/DefaultTargetVocabularySelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { IInputAttributes } from "../modals/CreateArtefactModal/ArtefactForms/In

/** Target vocabulary selection component that has static entries 'all installed vocabularies' and 'none'.
* And alternatively allows to multi-select all available vocabularies (from the global vocabulary cache). */
export function DefaultTargetVocabularySelection({ id, name, intent, defaultValue, onChange }: IInputAttributes) {
export function DefaultTargetVocabularySelection({ id, name, defaultValue, onChange }: IInputAttributes) {
const [vocabularies, setVocabularies] = useState<IVocabularyInfo[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [t] = useTranslation();
Expand Down
4 changes: 4 additions & 0 deletions workspace/src/app/views/shared/YamlEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from "react";
import { CodeAutocompleteField } from "@eccenca/gui-elements";
import {
CodeAutocompleteFieldPartialAutoCompleteResult,
CodeAutocompleteFieldProps,
CodeAutocompleteFieldReplacementResult,
CodeAutocompleteFieldValidationResult,
} from "@eccenca/gui-elements/src/components/AutoSuggestion/AutoSuggestion";
Expand Down Expand Up @@ -34,6 +35,7 @@ interface YamlEditorProps {
onChange: (currentValue: string) => any;
/** The auto-completion config. */
autoCompletion?: IPropertyAutocomplete;
intent?: CodeAutocompleteFieldProps["intent"];
}

export const YamlEditor: React.FC<YamlEditorProps> = ({
Expand All @@ -46,6 +48,7 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({
autoCompletion,
id,
onChange,
intent,
}) => {
const { registerError } = useErrorHandler();

Expand Down Expand Up @@ -125,6 +128,7 @@ export const YamlEditor: React.FC<YamlEditorProps> = ({
initialValue={initialValue ?? ""}
multiline={true}
onChange={onChange}
intent={intent}
fetchSuggestions={fetchSuggestions}
autoCompletionRequestDelay={200}
checkInput={checkYamlString}
Expand Down
16 changes: 14 additions & 2 deletions ...e/src/app/views/shared/modals/CreateArtefactModal/ArtefactForms/ArtefactFormParameter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import {
OptionallyLabelledParameter,
optionallyLabelledParameterToValue,
} from "../../../../taskViews/linking/linking.types";
import { CodeAutocompleteFieldValidationResult } from "@eccenca/gui-elements/src/components/AutoSuggestion/AutoSuggestion";
import {
CodeAutocompleteFieldProps,
CodeAutocompleteFieldValidationResult,
} from "@eccenca/gui-elements/src/components/AutoSuggestion/AutoSuggestion";
import { useSelector } from "react-redux";
import { commonSel } from "@ducks/common";
import { CreateArtefactModalContext } from "../CreateArtefactModalContext";
Expand Down Expand Up @@ -71,6 +74,7 @@ interface Props {
defaultValue?: string | number | boolean | OptionallyLabelledParameter<string | number | boolean>;
};
parameterType?: string;
highlightForReview?: boolean;
}

/** Wrapper around the input element of a parameter. Supports switching to variable templates. */
Expand All @@ -88,6 +92,7 @@ export const ArtefactFormParameter = ({
disabled = false,
tooltip,
supportVariableTemplateElement,
highlightForReview = false,
}: Props) => {
const [t] = useTranslation();
const [toggledTemplateSwitchBefore, setToggledTemplateSwitchBefore] = React.useState<boolean>(false);
Expand Down Expand Up @@ -182,17 +187,20 @@ export const ArtefactFormParameter = ({
parameterType,
))) ||
isTemplateInputType;
const inputIntent: CodeAutocompleteFieldProps["intent"] =
infoMessageDanger || !!validationError ? "danger" : highlightForReview ? "warning" : undefined;

return (
<FieldItem
key={parameterId}
data-test-id={`task-form-parameter-${parameterId}`}
labelProps={{
text: label,
info: required ? t("common.words.required") : undefined,
htmlFor: parameterId,
tooltip: tooltip,
}}
intent={infoMessageDanger || !!validationError ? "danger" : undefined}
intent={inputIntent}
messageText={infoMessage || validationError || templateInfoMessage || passwordMsgText}
disabled={disabled}
helperText={helperText}
Expand All @@ -216,6 +224,7 @@ export const ArtefactFormParameter = ({
evaluatedValueMessage={
supportVariableTemplateElement?.showTemplatePreview ? setTemplateInfoMessage : undefined
}
intent={inputIntent}
allowSensitiveVariables={isPasswordInput}
// If the parameter is a template parameter, the validation is not aware in general what variables exist
ignoreUnboundVariables={isTemplateInputType && !showVariableTemplateInput}
Expand Down Expand Up @@ -271,6 +280,7 @@ interface TemplateInputComponentProps {
allowSensitiveVariables?: boolean;
/** If the validation of the template string should ignore unbound variables. */
ignoreUnboundVariables: boolean;
intent?: CodeAutocompleteFieldProps["intent"];
}

/** The input component for the template value. */
Expand All @@ -287,6 +297,7 @@ export const TemplateInputComponent = memo(
multiline,
allowSensitiveVariables,
ignoreUnboundVariables,
intent,
}: TemplateInputComponentProps) => {
const currentUB = React.useRef<boolean>(ignoreUnboundVariables);
currentUB.current = ignoreUnboundVariables;
Expand Down Expand Up @@ -383,6 +394,7 @@ export const TemplateInputComponent = memo(
checkInput={checkTemplate}
autoCompletionRequestDelay={200}
multiline={multiline}
intent={intent}
outerDivAttributes={
{
"data-test-id": "codemirror-wrapper",
Expand Down
4 changes: 2 additions & 2 deletions workspace/src/app/views/shared/modals/CreateArtefactModal/ArtefactForms/InputMapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface IProps {
projectId: string;
parameter: ITaskParameter;
// Blueprint intent
intent: Intent;
intent?: Intent;
onChange: (value) => void;
// Initial values in a flat form, e.g. "nestedParam.param1". This is either set for all parameters or not set for none.
// The prefixed values can be addressed with help of the 'formParamId' parameter.
Expand All @@ -40,7 +40,7 @@ export type RegisterForExternalChangesFn = (
export interface IInputAttributes {
id: string;
name: string;
intent: Intent;
intent?: Intent;
onChange: (value) => void;
value?: any;
defaultValue?: any;
Expand Down
2 changes: 1 addition & 1 deletion ...src/app/views/shared/modals/CreateArtefactModal/ArtefactForms/ParameterAutoCompletion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export interface ParameterAutoCompletionProps {
/** If a value is required. If true, a reset won't be possible. */
required: boolean;
onChange: (value: IAutocompleteDefaultResponse) => any;
intent: Intent;
intent?: Intent;
/** Show errors in the auto-completion list instead of the global error notification widget. */
showErrorsInline?: boolean;
/** When set to true the auto-complete input field will be in read-only mode and cannot be edited. */
Expand Down
25 changes: 19 additions & 6 deletions workspace/src/app/views/shared/modals/CreateArtefactModal/ArtefactForms/ParameterWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ interface IProps {
// Values that the auto-completion of other parameters depends on
dependentValues: React.MutableRefObject<Record<string, DependsOnParameterValueAny | undefined>>;
parameterCallbacks: ExtendedParameterCallbacks;
isDependencyReviewHighlighted: (fullParameterId: string) => boolean;
}

/** Renders the errors message based on the error type. */
Expand Down Expand Up @@ -109,6 +110,7 @@ export const ParameterWidget = (props: IProps) => {
initialValues,
dependentValues,
parameterCallbacks,
isDependencyReviewHighlighted,
} = props;
const parameterExtensions = pluginRegistry.pluginComponent<ParameterExtensions>(
SUPPORTED_PLUGINS.DI_PARAMETER_EXTENSIONS,
Expand Down Expand Up @@ -144,6 +146,10 @@ export const ParameterWidget = (props: IProps) => {
: undefined;

const detailedDocumentationAvailable = parameterCallbacks.namedAnchors.includes(formParamId);
const dependencyReviewHighlighted = isDependencyReviewHighlighted(formParamId);
const dependencyReviewMessage = dependencyReviewHighlighted
? (t("form.taskForm.affectedParameterNeedsReview") as string)
: undefined;
let propertyHelperText: JSX.Element | undefined = undefined;
if ((description && description.length > MAXLENGTH_TOOLTIP) || detailedDocumentationAvailable) {
let parameterDescription: JSX.Element = <Markdown>{description}</Markdown>;
Expand Down Expand Up @@ -198,6 +204,7 @@ export const ParameterWidget = (props: IProps) => {
return (
<FieldSet
boxed
data-test-id={`task-form-parameter-${formParamId}`}
title={
<Label
isLayoutForElement="span"
Expand All @@ -207,6 +214,8 @@ export const ParameterWidget = (props: IProps) => {
/>
}
helperText={propertyHelperText}
intent={!!errorText ? "danger" : dependencyReviewHighlighted ? "warning" : undefined}
messageText={errorText ? errorText : dependencyReviewMessage}
>
{Object.entries(propertyDetails.properties as Record<string, IArtefactItemProperty>).map(
([nestedParamId, nestedParam]) => {
Expand All @@ -224,6 +233,7 @@ export const ParameterWidget = (props: IProps) => {
initialValues={initialValues}
dependentValues={dependentValues}
parameterCallbacks={parameterCallbacks}
isDependencyReviewHighlighted={isDependencyReviewHighlighted}
/>
);
},
Expand All @@ -234,6 +244,7 @@ export const ParameterWidget = (props: IProps) => {
return (
<FieldSet
boxed
data-test-id={`task-form-parameter-${formParamId}`}
title={
<Label
isLayoutForElement="span"
Expand All @@ -243,13 +254,13 @@ export const ParameterWidget = (props: IProps) => {
/>
}
helperText={propertyHelperText}
intent={!!errorMessage(title, errors) ? "danger" : undefined}
messageText={errorText ? errorText : infoHelperText}
intent={!!errorMessage(title, errors) ? "danger" : dependencyReviewHighlighted ? "warning" : undefined}
messageText={errorText ? errorText : dependencyReviewMessage ?? infoHelperText}
>
<InputMapper
projectId={projectId}
parameter={{ paramId: formParamId, param: propertyDetails }}
intent={errors ? Intent.DANGER : Intent.NONE}
intent={errors ? Intent.DANGER : dependencyReviewHighlighted ? Intent.WARNING : Intent.NONE}
onChange={changeHandlers[formParamId]}
initialParameterValue={initialValues[formParamId]}
required={required}
Expand All @@ -274,9 +285,10 @@ export const ParameterWidget = (props: IProps) => {
required={required && propertyDetails.parameterType !== "boolean"}
tooltip={description && description.length <= MAXLENGTH_TOOLTIP ? description : undefined}
helperText={propertyHelperText}
infoMessage={errorText ? errorText : infoHelperText}
infoMessage={errorText ? errorText : dependencyReviewMessage ?? infoHelperText}
infoMessageDanger={!!errorText}
parameterType={propertyDetails.parameterType}
highlightForReview={dependencyReviewHighlighted}
supportVariableTemplateElement={{
onChange: changeHandlers[formParamId],
startWithTemplateView: isTemplateParameter,
Expand All @@ -292,6 +304,7 @@ export const ParameterWidget = (props: IProps) => {
projectId={projectId}
pluginId={pluginId}
autoCompletion={autoCompletion}
intent={errors ? "danger" : dependencyReviewHighlighted ? "warning" : undefined}
id={formParamId}
initialValue={initialValue?.value ?? initialValue}
onChange={(value) => (onChange ? onChange(value) : changeHandlers[formParamId](value))}
Expand All @@ -318,7 +331,7 @@ export const ParameterWidget = (props: IProps) => {
: defaultValueAsJs(propertyDetails, true))
}
autoCompletion={autoCompletion}
intent={errors ? Intent.DANGER : Intent.NONE}
intent={errors ? Intent.DANGER : dependencyReviewHighlighted ? Intent.WARNING : undefined}
formParamId={formParamId}
dependentValue={dependentValue}
defaultValue={parameterCallbacks.defaultValue}
Expand All @@ -335,7 +348,7 @@ export const ParameterWidget = (props: IProps) => {
<InputMapper
projectId={projectId}
parameter={{ paramId: formParamId, param: propertyDetails }}
intent={errors ? Intent.DANGER : Intent.NONE}
intent={errors ? Intent.DANGER : dependencyReviewHighlighted ? Intent.WARNING : undefined}
onChange={onChange ?? changeHandlers[formParamId]}
initialParameterValue={initialParameterValue}
required={required}
Expand Down
Loading
Loading