1904: Adds radiobutton field for simple 2 way choices

Author: Ruben van Leeuwen

packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -27,7 +27,15 @@ 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,
+    Label,
+    Radio,
+    Summary,
+    Text,
+    TextArea,
+} from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -209,6 +217,21 @@ 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
+                    );
+                },
+            },
             ...currentMatchers.filter((matcher) => matcher.id !== 'text'),
             {
                 id: 'text',

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,4 @@ export * from './Label';
 export * from './Divider';
 export * from './Checkbox';
 export * from './Summary';
+export * from './Radio';

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