feat(form): Add a placeholder for Select fields

Currently, there's no placeholder for the `SelectField`.

This commit updates `@kaoto-next/uniforms-patternfly` to version `^0.5.7` to be able
to import the typings for the `SelectField` component and create a
wrapper that sets a default placeholder.

fix: #676

packages/ui/package.json

@@ -42,7 +42,7 @@
     "lint:style:fix": "yarn lint:style --fix"
   },
   "dependencies": {
-    "@kaoto-next/uniforms-patternfly": "^0.5.0",
+    "@kaoto-next/uniforms-patternfly": "^0.5.7",
     "@kie-tools-core/editor": "0.32.0",
     "@kie-tools-core/notifications": "0.32.0",
     "@patternfly/patternfly": "^5.0.0",

packages/ui/src/components/Form/CustomAutoField.test.tsx

@@ -8,11 +8,12 @@ jest.mock('uniforms', () => {
   };
 });
 
-import { DateField, ListField, NestField, RadioField, SelectField, TextField } from '@kaoto-next/uniforms-patternfly';
+import { DateField, ListField, NestField, RadioField, TextField } from '@kaoto-next/uniforms-patternfly';
 import { AutoFieldProps } from 'uniforms';
 import { CustomAutoField } from './CustomAutoField';
-import { DisabledField } from './DisabledField';
 import BoolField from './customField/BoolField';
+import { CustomSelectField } from './customField/CustomSelectField';
+import { DisabledField } from './customField/DisabledField';
 
 describe('CustomAutoField', () => {
   it('should return `RadioField` if `props.options` & `props.checkboxes` are defined and `props.fieldType` is not `Array`', () => {
@@ -38,7 +39,7 @@ describe('CustomAutoField', () => {
 
     const result = CustomAutoField(props);
 
-    expect(result).toBe(SelectField);
+    expect(result).toBe(CustomSelectField);
   });
 
   it('should return `DisabledField` if `props.name` ends with `steps`', () => {

packages/ui/src/components/Form/CustomAutoField.tsx

@@ -1,19 +1,20 @@
-import { DateField, ListField, NestField, RadioField, SelectField, TextField } from '@kaoto-next/uniforms-patternfly';
+import { DateField, ListField, NestField, RadioField, TextField } from '@kaoto-next/uniforms-patternfly';
 import { createAutoField } from 'uniforms';
-import { DisabledField } from './DisabledField';
-import { PropertiesField } from './properties/PropertiesField';
+import { CustomSelectField } from './customField/CustomSelectField';
+import { DisabledField } from './customField/DisabledField';
 import { BeanReferenceField } from './bean/BeanReferenceField';
-import { ExpressionField } from './expression/ExpressionField';
-import { ExpressionAwareNestField } from './expression/ExpressionAwareNestField';
 import BoolField from './customField/BoolField';
+import { ExpressionAwareNestField } from './expression/ExpressionAwareNestField';
+import { ExpressionField } from './expression/ExpressionField';
+import { PropertiesField } from './properties/PropertiesField';
 
 /**
  * Custom AutoField that supports all the fields from Uniforms PatternFly
  * In case a field is not supported, it will render a DisabledField
  */
 export const CustomAutoField = createAutoField((props) => {
   if (props.options) {
-    return props.checkboxes && props.fieldType !== Array ? RadioField : SelectField;
+    return props.checkboxes && props.fieldType !== Array ? RadioField : CustomSelectField;
   }
 
   const comment = props['$comment'] as string;

packages/ui/src/components/Form/customField/CustomSelectField.tsx

@@ -0,0 +1,6 @@
+import { SelectField, SelectFieldProps } from '@kaoto-next/uniforms-patternfly';
+import { FunctionComponent } from 'react';
+
+export const CustomSelectField: FunctionComponent<SelectFieldProps> = (props) => {
+  return <SelectField {...(props as SelectFieldProps)} placeholder="Please select an option..." />;
+};

packages/ui/src/components/Form/DisabledField.tsx → packages/ui/src/components/Form/customField/DisabledField.tsx

@@ -1,5 +1,5 @@
 import { ConnectedFieldProps, connectField } from 'uniforms';
-import { ExpandableDetails } from './ExpandableDetails';
+import { ExpandableDetails } from '../ExpandableDetails';
 import { Card, CardBody, CardTitle } from '@patternfly/react-core';
 
 interface CustomStepsFieldProps {

yarn.lock

@@ -2624,7 +2624,7 @@ __metadata:
     "@babel/preset-react": ^7.18.6
     "@babel/preset-typescript": ^7.21.5
     "@kaoto-next/camel-catalog": "workspace:*"
-    "@kaoto-next/uniforms-patternfly": ^0.5.0
+    "@kaoto-next/uniforms-patternfly": ^0.5.7
     "@kie-tools-core/editor": 0.32.0
     "@kie-tools-core/notifications": 0.32.0
     "@patternfly/patternfly": ^5.0.0
@@ -2694,17 +2694,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kaoto-next/uniforms-patternfly@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@kaoto-next/uniforms-patternfly@npm:0.5.0"
+"@kaoto-next/uniforms-patternfly@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "@kaoto-next/uniforms-patternfly@npm:0.5.7"
   dependencies:
     "@types/invariant": ^2.2.35
     invariant: ^2.2.4
     lodash: ^4.17.21
     react: ^18.2.0
     react-dom: ^18.2.0
     uniforms: 4.0.0-alpha.5
-  checksum: d50f480d7647fee7f97d851c6783431846fd8459623728df154f4b92673870f67bcd3f49d67ec89f101317b544e2b338886eb74b1c77cffbc0cc31eb1a3f7ee1
+  checksum: 169e3e39fc12591d039347500b7fc8acc1c4c6a5d7c6261896a434409de8c848bd20e59ce03a6b47c822b9f52e869a4c4ab1b372a2e0b922edf31e02d5ed524c
   languageName: node
   linkType: hard