1904 lib create port

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',

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 (
+        <EuiFieldNumber
+            css={formFieldBaseStyle}
+            name={pydanticFormField.id}
+            onChange={(event) => onChange(parseInt(event.target.value))}
+            value={value}
+            disabled={disabled}
+        />
+    );
+};

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 (
+        <EuiRadioGroup
+            options={radioOptions}
+            idSelected={value}
+            onChange={(id) => onChange(id)}
+            name={pydanticFormField.id}
+            disabled={disabled}
+        />
+    );
+};

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';

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"

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": {