1904: Adds EUI integer field

Author: Ruben van Leeuwen

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

@@ -30,6 +30,7 @@ import { Row } from './Row';
 import {
     Checkbox,
     Divider,
+    Integer,
     Label,
     Radio,
     Summary,
@@ -232,6 +233,17 @@ export const WfoPydanticForm = ({
                     );
                 },
             },
+            {
+                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/index.ts

@@ -5,3 +5,4 @@ export * from './Divider';
 export * from './Checkbox';
 export * from './Summary';
 export * from './Radio';
+export * from './Integer';