Add data-testid attributes to wfo form components

.changeset/easy-planets-post.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+Fixes for pydanticforms integration

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

@@ -29,6 +29,7 @@ export const Footer = () => {
 
     const PreviousButton = () => (
         <EuiButton
+            data-testid="button-submit-form-previous"
             id="button-submit-form-submit"
             tabIndex={0}
             fill
@@ -47,6 +48,7 @@ export const Footer = () => {
 
     const CancelButton = () => (
         <div
+            data-testid="button-submit-form-cancel"
             onClick={handlePrevious}
             css={{
                 cursor: 'pointer',
@@ -75,6 +77,7 @@ export const Footer = () => {
          */
         return (
             <EuiButton
+                data-testid="button-submit-form-submit"
                 id="button-submit-form-submit"
                 tabIndex={0}
                 fill
@@ -89,7 +92,7 @@ export const Footer = () => {
     };
 
     return (
-        <div>
+        <div data-testid="pydantic-form-footer">
             <RenderFormErrors />
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>

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

@@ -16,6 +16,8 @@ export const Header = () => {
 
     return pydanticFormSchema?.title &&
         pydanticFormSchema.title !== 'unknown' ? (
-        <h3 css={headerStyling}>{pydanticFormSchema?.title}</h3>
+        <h3 data-testid="pydantic-form-header" css={headerStyling}>
+            {pydanticFormSchema?.title}
+        </h3>
     ) : undefined;
 };

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

@@ -29,6 +29,7 @@ export const Row: RowRenderComponent = ({
 
     return (
         <EuiFormRow
+            data-testid="pydantic-form-row"
             css={formRowStyle}
             label={<Label />}
             labelAppend={<EuiText size="m">{description}</EuiText>}

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

@@ -25,16 +25,16 @@ import { Footer } from './Footer';
 import { Header } from './Header';
 import { Row } from './Row';
 import {
-    Checkbox,
-    Divider,
-    Integer,
-    Label,
-    Radio,
-    Summary,
-    Text,
-    TextArea,
     WfoArrayField,
+    WfoCheckbox,
+    WfoDivider,
+    WfoInteger,
+    WfoLabel,
     WfoObjectField,
+    WfoRadio,
+    WfoSummary,
+    WfoText,
+    WfoTextArea,
 } from './fields';
 
 interface WfoPydanticFormProps {
@@ -146,7 +146,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'textarea',
                 ElementMatch: {
-                    Element: TextArea,
+                    Element: WfoTextArea,
                     isControlledElement: true,
                 },
                 matcher(field) {
@@ -159,7 +159,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'summary',
                 ElementMatch: {
-                    Element: Summary,
+                    Element: WfoSummary,
                     isControlledElement: false,
                 },
                 matcher(field) {
@@ -172,7 +172,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'label',
                 ElementMatch: {
-                    Element: Label,
+                    Element: WfoLabel,
                     isControlledElement: false,
                 },
                 matcher(field) {
@@ -185,7 +185,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'divider',
                 ElementMatch: {
-                    Element: Divider,
+                    Element: WfoDivider,
                     isControlledElement: false,
                 },
                 matcher(field) {
@@ -198,7 +198,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'checkbox',
                 ElementMatch: {
-                    Element: Checkbox,
+                    Element: WfoCheckbox,
                     isControlledElement: true,
                 },
                 matcher(field) {
@@ -208,7 +208,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'radio',
                 ElementMatch: {
-                    Element: Radio,
+                    Element: WfoRadio,
                     isControlledElement: true,
                 },
                 matcher(field) {
@@ -223,7 +223,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'integerfield',
                 ElementMatch: {
-                    Element: Integer,
+                    Element: WfoInteger,
                     isControlledElement: true,
                 },
                 matcher(field) {
@@ -259,7 +259,7 @@ export const WfoPydanticForm = ({
             {
                 id: 'text',
                 ElementMatch: {
-                    Element: Text,
+                    Element: WfoText,
                     isControlledElement: true,
                 },
                 matcher(field) {

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

@@ -91,7 +91,7 @@ export const WfoArrayField = ({
     };
 
     return (
-        <div css={container}>
+        <div data-testid={arrayName} css={container}>
             {fields.map(renderField)}
 
             {showPlus && (

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Checkbox.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoCheckbox.tsx

@@ -4,14 +4,15 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiCheckbox } from '@elastic/eui';
 
-export const Checkbox: PydanticFormControlledElement = ({
+export const WfoCheckbox: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
     disabled,
 }) => {
     return (
         <EuiCheckbox
+            data-testid={pydanticFormField.id}
             checked={value || false}
             disabled={disabled}
             id={pydanticFormField.id}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Divider.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoDivider.tsx

@@ -6,10 +6,11 @@ import { EuiHorizontalRule } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
 
-export const Divider: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoDivider: PydanticFormElement = ({ pydanticFormField }) => {
     const { theme } = useOrchestratorTheme();
     return (
         <EuiHorizontalRule
+            data-testid={pydanticFormField.id}
             style={{ marginTop: theme.base }}
             id={pydanticFormField.id}
         />

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Integer.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoInteger.tsx

@@ -22,7 +22,7 @@ const getFormFieldsBaseStyle = ({ theme }: WfoTheme) => {
     };
 };
 
-export const Integer: PydanticFormControlledElement = ({
+export const WfoInteger: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
@@ -34,6 +34,7 @@ export const Integer: PydanticFormControlledElement = ({
 
     return (
         <EuiFieldNumber
+            data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             name={pydanticFormField.id}
             onChange={(event) => onChange(parseInt(event.target.value))}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Label.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoLabel.tsx

@@ -4,11 +4,11 @@ import { PydanticFormElement } from 'pydantic-forms';
 
 import { useOrchestratorTheme } from '@/hooks';
 
-export const Label: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
     const { theme } = useOrchestratorTheme();
 
     return (
-        <div>
+        <div data-testid={pydanticFormField.id}>
             <label
                 css={{
                     color: theme.colors.text,

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

@@ -22,7 +22,10 @@ export const WfoObjectField = ({
     );
 
     return (
-        <EuiFlexGroup css={wfoObjectFieldStyles}>
+        <EuiFlexGroup
+            data-testid={pydanticFormField.id}
+            css={wfoObjectFieldStyles}
+        >
             <RenderFields pydanticFormComponents={components} />
         </EuiFlexGroup>
     );

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Radio.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoRadio.tsx

@@ -4,7 +4,7 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiRadioGroup } from '@elastic/eui';
 
-export const Radio: PydanticFormControlledElement = ({
+export const WfoRadio: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
@@ -17,6 +17,7 @@ export const Radio: PydanticFormControlledElement = ({
 
     return (
         <EuiRadioGroup
+            data-testid={pydanticFormField.id}
             options={radioOptions}
             idSelected={value}
             onChange={(id) => onChange(id)}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Summary.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoSummary.tsx

@@ -52,7 +52,7 @@ export const getStyles = ({ theme }: WfoTheme) => {
     };
 };
 
-export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
+export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
     const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
@@ -103,7 +103,7 @@ export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
         );
 
     return (
-        <EuiFlexItem css={[summaryFieldStyle, formRowStyle]}>
+        <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
             <section>
                 <EuiFormRow
                     label={description}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Text.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoText.tsx

@@ -7,17 +7,19 @@ import { EuiFieldText } from '@elastic/eui';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
-export const Text: PydanticFormControlledElement = ({
+export const WfoText: PydanticFormControlledElement = ({
     onChange,
     value,
     disabled,
+    pydanticFormField,
 }) => {
     const { formFieldBaseStyle } = useWithOrchestratorTheme(
         getFormFieldsBaseStyle,
     );
 
     return (
         <EuiFieldText
+            data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             disabled={disabled}
             onChange={(event) => onChange(event.target.value)}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/TextArea.tsx → packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoTextArea.tsx

@@ -4,14 +4,15 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiTextArea } from '@elastic/eui';
 
-export const TextArea: PydanticFormControlledElement = ({
+export const WfoTextArea: PydanticFormControlledElement = ({
     pydanticFormField,
     onChange,
     value,
     disabled,
 }) => {
     return (
         <EuiTextArea
+            data-testid={pydanticFormField.id}
             disabled={disabled}
             name={pydanticFormField.id}
             onChange={(event) => onChange(event.target.value)}

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts

@@ -1,10 +1,10 @@
-export * from './TextArea';
-export * from './Text';
-export * from './Label';
-export * from './Divider';
-export * from './Checkbox';
-export * from './Summary';
+export * from './WfoTextArea';
+export * from './WfoText';
+export * from './WfoLabel';
+export * from './WfoDivider';
+export * from './WfoCheckbox';
+export * from './WfoSummary';
 export * from './WfoObjectField';
 export * from './WfoArrayField';
-export * from './Radio';
-export * from './Integer';
+export * from './WfoRadio';
+export * from './WfoInteger';