diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx index f1bc99ad3..c58cbcce9 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx @@ -27,7 +27,16 @@ import { FormValidationError } from '@/types'; import { Footer } from './Footer'; import { Header } from './Header'; import { Row } from './Row'; -import { Checkbox, Divider, Label, Summary, Text, TextArea } from './fields'; +import { + Checkbox, + Divider, + Integer, + Label, + Radio, + Summary, + Text, + TextArea, +} from './fields'; interface WfoPydanticFormProps { processName: string; @@ -209,6 +218,32 @@ export const WfoPydanticForm = ({ return field.type === PydanticFormFieldType.BOOLEAN; }, }, + { + id: 'radio', + ElementMatch: { + Element: Radio, + isControlledElement: true, + }, + matcher(field) { + // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons. + return ( + field.type === PydanticFormFieldType.STRING && + field.options.length > 0 && + field.options.length <= 3 + ); + }, + }, + { + id: 'integerfield', + ElementMatch: { + Element: Integer, + isControlledElement: true, + }, + matcher(field) { + return field.type === PydanticFormFieldType.INTEGER; + }, + validator: zodValidationPresets.integer, + }, ...currentMatchers.filter((matcher) => matcher.id !== 'text'), { id: 'text', diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Integer.tsx b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Integer.tsx new file mode 100644 index 000000000..70f54a2ca --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Integer.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import type { PydanticFormControlledElement } from 'pydantic-forms'; + +import { EuiFieldNumber } from '@elastic/eui'; +import { css } from '@emotion/react'; + +import type { WfoTheme } from '@/hooks'; +import { useWithOrchestratorTheme } from '@/hooks'; + +const getFormFieldsBaseStyle = ({ theme }: WfoTheme) => { + const formFieldBaseStyle = css({ + backgroundColor: theme.colors.body, + color: theme.colors.text, + '&:focus': { + backgroundColor: theme.colors.emptyShade, + }, + }); + + return { + formFieldBaseStyle, + }; +}; + +export const Integer: PydanticFormControlledElement = ({ + pydanticFormField, + onChange, + value, + disabled, +}) => { + const { formFieldBaseStyle } = useWithOrchestratorTheme( + getFormFieldsBaseStyle, + ); + + return ( + onChange(parseInt(event.target.value))} + value={value} + disabled={disabled} + /> + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Radio.tsx b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Radio.tsx new file mode 100644 index 000000000..efbaaf128 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Radio.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import type { PydanticFormControlledElement } from 'pydantic-forms'; + +import { EuiRadioGroup } from '@elastic/eui'; + +export const Radio: PydanticFormControlledElement = ({ + pydanticFormField, + onChange, + value, + disabled, +}) => { + const radioOptions = pydanticFormField.options.map((option) => ({ + id: option.value, + label: option.label, + })); + + return ( + onChange(id)} + name={pydanticFormField.id} + disabled={disabled} + /> + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts index 9b1aa59ec..f2449c63b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts +++ b/packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts @@ -4,3 +4,5 @@ export * from './Label'; export * from './Divider'; export * from './Checkbox'; export * from './Summary'; +export * from './Radio'; +export * from './Integer'; diff --git a/packages/orchestrator-ui-components/src/messages/en-GB.json b/packages/orchestrator-ui-components/src/messages/en-GB.json index b2abf6cbf..47256a185 100644 --- a/packages/orchestrator-ui-components/src/messages/en-GB.json +++ b/packages/orchestrator-ui-components/src/messages/en-GB.json @@ -130,6 +130,7 @@ "nodePort": { "loadingNodes": "Loading Node subscriptions...", "loadingPorts": "Loading IMS ports...", + "noPorts": "NO PORTS FOUND FOR THIS NODE", "selectNode": "Select node", "selectPort": "Select port", "selectNodeFirst": "Select a node first" diff --git a/packages/orchestrator-ui-components/src/messages/nl-NL.json b/packages/orchestrator-ui-components/src/messages/nl-NL.json index 5f3c2cf85..16c876866 100644 --- a/packages/orchestrator-ui-components/src/messages/nl-NL.json +++ b/packages/orchestrator-ui-components/src/messages/nl-NL.json @@ -131,6 +131,7 @@ "loadingPorts": "IMS poorten laden...", "selectNode": "Selecteer node", "selectPort": "Selecteer poort", + "noPorts": "GEEN POORTEN GEVONDEN VOOR DEZE NODE", "selectNodeFirst": "Selecteer eerst een node" }, "fileUpload": {