kie-issues#1542: Implement ListField in the “form-code-generator-patternfly-theme” package

[ljmotta]

Closes: apache/incubator-kie-issues#1542

Description

The PR adds the ListField for the form-code-generator-patternfly-theme. To enable fields inside the list, the fields onChange and value were modified. For the case the field is part of a list, the valuemust use the list value, and the onChange must update the list.

The ReactFormGenerator was modified to add the @patternfly/react-icons import.

[jomarko]

@ljmotta hi, is this fix also for the apache/incubator-kie-issues#1313 ?

[ljmotta]

@jomarko Yes the PR will fix this issue! Thanks for bring this up. But only for the Patternfly. We need the Bootstrap4 PR to close the issue.

[jomarko]

Hi @ljmotta , I have issue to see the forms. Here are the steps I did:

• downloaded bpmn vsix from the PR and installed into my vscode
• in vscode, kie-tools, I run KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/process-compact-architecture build:dev
• installed the vsix
• in vscode I opened exmaples/process-compact-architecture
• I run mvn clean package
• ctrl+shift+P -> generate forms
• run mvn clean quarkus:dev -Pdevelopment
• open http://localhost:8080/q/dev-ui/ -> Forms
  and get:
  
  

[ljmotta]

@jomarko You will need to rubuild the example as I've changed the jBPM Dev UI:

To skip stunner editors please use the following command:
pnpm -F @kie-tools-examples/process-compact-architecture... -F \!stunner-editors build:dev

[thiagoelg]

Following @jomarko's steps and building the whole process-compact-architecture dependency tree, the form seems to work fine! 🎉

[thiagoelg]

Is itemProps always ListItemProps? I've seen this prop name used in different places, but sometimes it's ListItemProps and sometimes any.
We could use different names for them if they represent different things.

Also, isn't there any way to infer the typing of this prop when it's defined as any? I know this was not introduced with this PR, but it would be nice to have proper typings in an already complex codebase.

[jomarko]

Thank you, now I am able to see the form.

I have these questions after my review:

string vs any

I see in java, skills is list of strings, however react produce array of any

    private List<String> skills;

vs

	const [candidateData__skills, set__candidateData__skills] = useState<any[]>(
		[]
	);

is that expected, shouldn't react produce array of strings?

console logs

opening hiring form produces an error

is that expected?

[ljmotta]

@thiagoelg @jomarko Thanks for the reviews.

@thiagoelg No, the any was a mistake, thanks for spotting it. I'm not sure if I've followed what you said about infering the any.

@jomarko My last commit should have fixed both issues.

[thiagoelg]

@thiagoelg No, the any was a mistake, thanks for spotting it. I'm not sure if I've followed what you said about infering the any.

My question was that: If that specific instance of itemProps was not ListItemProps, then maybe we should type it somehow to avoid the any definition, but since it is ListItemProps then we already have the correct type. :)

[jomarko]

@ljmotta thank you for the updates. I can confirm the issues I reported in my previous review round are gone. I have one more question before merge.

[jomarko]

I tried to add one private field into CandidateDate like:

private List<Offer> offers;

Also getters and setters added and constructor adapted. However then in the run of mvn clean quarkus:dev -Pdevelopment of process-compact-architecture can not display the hiring form.

In other words, does patternfly forms support list fields only for number, string and boolean?

[ljmotta]

I'm not sure of what happened here. The form code was correctly generated? Can you share it here, please? What is a Offer?

[jomarko]

Offer is class from process-compact-architecture example.

Here is the CandidateData.java

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

package org.kie.kogito.hr;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonIgnore;

public class CandidateData {

    private String name;

    private String lastName;

    private String email;

    private Integer experience;

    private List<String> skills;

    private List<Offer> offers;

    public CandidateData() {
    }

    public CandidateData(String name, String lastName, String email, Integer experience, List<String> skills, List<Offer> offers) {
        this.name = name;
        this.lastName = lastName;
        this.email = email;
        this.experience = experience;
        this.skills = skills;
        this.offers = offers;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getExperience() {
        return experience;
    }

    public void setExperience(Integer experience) {
        this.experience = experience;
    }

    public List<String> getSkills() {
        return skills;
    }

    public void setSkills(List<String> skills) {
        this.skills = skills;
    }

    public List<Offer> getOffers() {
        return offers;
    }

    public void setOffers(List<Offer> offers) {
        this.offers = offers;
    }

    @JsonIgnore
    public String getFullName() {
        return name + " " + lastName;
    }
}

and here is hiring.tsx:

import React, { useCallback, useEffect, useState } from 'react';
import {
	Card,
	CardBody,
	TextInput,
	FormGroup,
	Split,
	SplitItem,
	Button,
} from '@patternfly/react-core';
import { PlusCircleIcon, MinusCircleIcon } from '@patternfly/react-icons';
const Form__hiring: React.FC<any> = (props: any) => {
	const [formApi, setFormApi] = useState<any>();
	const [candidateData__email, set__candidateData__email] =
		useState<string>('');
	const [candidateData__experience, set__candidateData__experience] =
		useState<number>();
	const [candidateData__lastName, set__candidateData__lastName] =
		useState<string>('');
	const [candidateData__name, set__candidateData__name] = useState<string>('');
	const [candidateData__offers, set__candidateData__offers] = useState<
		string[]
	>([]);
	const [candidateData__skills, set__candidateData__skills] = useState<
		string[]
	>([]);
	/* Utility function that fills the form with the data received from the kogito runtime */
	const setFormData = (data) => {
		if (!data) {
			return;
		}
		set__candidateData__email(data?.candidateData?.email ?? '');
		set__candidateData__experience(data?.candidateData?.experience);
		set__candidateData__lastName(data?.candidateData?.lastName ?? '');
		set__candidateData__name(data?.candidateData?.name ?? '');
		set__candidateData__offers(data?.candidateData?.offers ?? []);
		set__candidateData__skills(data?.candidateData?.skills ?? []);
	};
	/* Utility function to generate the expected form output as a json object */
	const getFormData = useCallback(() => {
		const formData: any = {};
		formData.candidateData = {};
		formData.candidateData.email = candidateData__email;
		formData.candidateData.experience = candidateData__experience;
		formData.candidateData.lastName = candidateData__lastName;
		formData.candidateData.name = candidateData__name;
		formData.candidateData.offers = candidateData__offers;
		formData.candidateData.skills = candidateData__skills;
		return formData;
	}, [
		candidateData__email,
		candidateData__experience,
		candidateData__lastName,
		candidateData__name,
		candidateData__offers,
		candidateData__skills,
	]);
	/* Utility function to validate the form on the 'beforeSubmit' Lifecycle Hook */
	const validateForm = useCallback(() => {}, []);
	/* Utility function to perform actions on the on the 'afterSubmit' Lifecycle Hook */
	const afterSubmit = useCallback((result) => {}, []);
	useEffect(() => {
		if (formApi) {
			/*
        Form Lifecycle Hook that will be executed before the form is submitted.
        Throwing an error will stop the form submit. Usually should be used to validate the form.
      */
			formApi.beforeSubmit = () => validateForm();
			/*
        Form Lifecycle Hook that will be executed after the form is submitted.
        It will receive a response object containing the `type` flag indicating if the submit has been successful and `info` with extra information about the submit result.
      */
			formApi.afterSubmit = (result) => afterSubmit(result);
			/* Generates the expected form output object to be posted */
			formApi.getFormData = () => getFormData();
		}
	}, [getFormData, validateForm, afterSubmit]);
	useEffect(() => {
		/*
      Call to the Kogito console form engine. It will establish the connection with the console embeding the form
      and return an instance of FormAPI that will allow hook custom code into the form lifecycle.
      The `window.Form.openForm` call expects an object with the following entries:
        - onOpen: Callback that will be called after the connection with the console is established. The callback
        will receive the following arguments:
          - data: the data to be bound into the form
          - ctx: info about the context where the form is being displayed. This will contain information such as the form JSON Schema, process/task, user...
    */
		const api = window.Form.openForm({
			onOpen: (data, context) => {
				setFormData(data);
			},
		});
		setFormApi(api);
	}, []);
	return (
		<div className={'pf-c-form'}>
			<Card>
				<CardBody className='pf-c-form'>
					<label>
						<b>Candidate data</b>
					</label>
					<FormGroup
						fieldId={'uniforms-000i-0002'}
						label={'Email'}
						isRequired={false}>
						<TextInput
							name={'candidateData.email'}
							id={'uniforms-000i-0002'}
							isDisabled={false}
							placeholder={''}
							type={'text'}
							value={candidateData__email}
							onChange={set__candidateData__email}
						/>
					</FormGroup>
					<FormGroup
						fieldId={'uniforms-000i-0004'}
						label={'Experience'}
						isRequired={false}>
						<TextInput
							type={'number'}
							name={'candidateData.experience'}
							isDisabled={false}
							id={'uniforms-000i-0004'}
							placeholder={''}
							step={1}
							value={candidateData__experience}
							onChange={(newValue) =>
								set__candidateData__experience(Number(newValue))
							}
						/>
					</FormGroup>
					<FormGroup
						fieldId={'uniforms-000i-0005'}
						label={'Last name'}
						isRequired={false}>
						<TextInput
							name={'candidateData.lastName'}
							id={'uniforms-000i-0005'}
							isDisabled={false}
							placeholder={''}
							type={'text'}
							value={candidateData__lastName}
							onChange={set__candidateData__lastName}
						/>
					</FormGroup>
					<FormGroup
						fieldId={'uniforms-000i-0006'}
						label={'Name'}
						isRequired={false}>
						<TextInput
							name={'candidateData.name'}
							id={'uniforms-000i-0006'}
							isDisabled={false}
							placeholder={''}
							type={'text'}
							value={candidateData__name}
							onChange={set__candidateData__name}
						/>
					</FormGroup>
					<div>
						<Split hasGutter>
							<SplitItem>
								{'Offers' && (
									<label className={'pf-c-form__label'}>
										<span className={'pf-c-form__label-text'}>Offers</span>
									</label>
								)}
							</SplitItem>
							<SplitItem isFilled />
							<SplitItem>
								<Button
									name='$'
									variant='plain'
									style={{ paddingLeft: '0', paddingRight: '0' }}
									disabled={false}
									onClick={() => {
										!false &&
											set__candidateData__offers(
												(candidateData__offers ?? []).concat([undefined])
											);
									}}>
									<PlusCircleIcon color='#0088ce' />
								</Button>
							</SplitItem>
						</Split>
						<div>
							{candidateData__offers?.map((_, itemIndex) => (
								<div
									key={itemIndex}
									style={{
										marginBottom: '1rem',
										display: 'flex',
										justifyContent: 'space-between',
									}}>
									<div style={{ width: '100%', marginRight: '10px' }}>
										<Card>
											<CardBody className='pf-c-form'>
												<FormGroup
													fieldId={'uniforms-000i-000b'}
													label={'Category'}
													isRequired={false}>
													<TextInput
														name={`candidateData.offers.${itemIndex}.category`}
														id={'uniforms-000i-000b'}
														isDisabled={false}
														placeholder={''}
														type={'text'}
														value={candidateData__offers[itemIndex].category}
														onChange={(newValue) => {
															set__candidateData__offers((s) => {
																const newState = [...s];
																newState[itemIndex].category = newValue;
																return newState;
															});
														}}
													/>
												</FormGroup>
												<FormGroup
													fieldId={'uniforms-000i-000d'}
													label={'Salary'}
													isRequired={false}>
													<TextInput
														type={'number'}
														name={`candidateData.offers.${itemIndex}.salary`}
														isDisabled={false}
														id={'uniforms-000i-000d'}
														placeholder={''}
														step={1}
														value={candidateData__offers[itemIndex].salary}
														onChange={(newValue) => {
															set__candidateData__offers((s) => {
																const newState = [...s];
																newState[itemIndex].salary = Number(newValue);
																return newState;
															});
														}}
													/>
												</FormGroup>
											</CardBody>
										</Card>
									</div>
									<div>
										<Button
											disabled={false}
											variant='plain'
											style={{ paddingLeft: '0', paddingRight: '0' }}
											onClick={() => {
												const value = [...candidateData__offers];
												value.splice(itemIndex, 1);
												!false && set__candidateData__offers(value);
											}}>
											<MinusCircleIcon color='#cc0000' />
										</Button>
									</div>
								</div>
							))}
						</div>
					</div>
					<div>
						<Split hasGutter>
							<SplitItem>
								{'Skills' && (
									<label className={'pf-c-form__label'}>
										<span className={'pf-c-form__label-text'}>Skills</span>
									</label>
								)}
							</SplitItem>
							<SplitItem isFilled />
							<SplitItem>
								<Button
									name='$'
									variant='plain'
									style={{ paddingLeft: '0', paddingRight: '0' }}
									disabled={false}
									onClick={() => {
										!false &&
											set__candidateData__skills(
												(candidateData__skills ?? []).concat([''])
											);
									}}>
									<PlusCircleIcon color='#0088ce' />
								</Button>
							</SplitItem>
						</Split>
						<div>
							{candidateData__skills?.map((_, itemIndex) => (
								<div
									key={itemIndex}
									style={{
										marginBottom: '1rem',
										display: 'flex',
										justifyContent: 'space-between',
									}}>
									<div style={{ width: '100%', marginRight: '10px' }}>
										<FormGroup
											fieldId={'uniforms-000i-000g'}
											label={''}
											isRequired={false}>
											<TextInput
												name={`candidateData.skills.${itemIndex}`}
												id={'uniforms-000i-000g'}
												isDisabled={false}
												placeholder={''}
												type={'text'}
												value={candidateData__skills[itemIndex]}
												onChange={(newValue) => {
													set__candidateData__skills((s) => {
														const newState = [...s];
														newState[itemIndex] = newValue;
														return newState;
													});
												}}
											/>
										</FormGroup>
									</div>
									<div>
										<Button
											disabled={false}
											variant='plain'
											style={{ paddingLeft: '0', paddingRight: '0' }}
											onClick={() => {
												const value = [...candidateData__skills];
												value.splice(itemIndex, 1);
												!false && set__candidateData__skills(value);
											}}>
											<MinusCircleIcon color='#cc0000' />
										</Button>
									</div>
								</div>
							))}
						</div>
					</div>
				</CardBody>
			</Card>
		</div>
	);
};
export default Form__hiring;