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

[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. :)