1904: Mark fields as required. Mark them red on errors

Author: Ruben van Leeuwen

packages/orchestrator-ui-components/src/components/WfoForms/formFields/commonStyles.ts

@@ -21,7 +21,11 @@ export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
         },
     });
 
+    const errorStyle = css({
+        color: theme.colors.dangerText,
+    });
     return {
+        errorStyle,
         formRowStyle,
     };
 };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { usePydanticFormContext } from 'pydantic-forms';
+
+import { css } from '@emotion/react';
+
+const headerStyling = css`
+    padding: 20px 0;
+    font-size: larger;
+    font-weight: bold;
+    margin-bottom: 15px;
+`;
+
+export const Header = () => {
+    const { pydanticFormSchema } = usePydanticFormContext();
+
+    return <h3 css={headerStyling}>{pydanticFormSchema?.title}</h3>;
+};

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

@@ -12,19 +12,31 @@ export const Row: RowRenderComponent = ({
     description,
     error,
     isInvalid,
+    required,
     children,
 }) => {
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+    const { formRowStyle, errorStyle } = useWithOrchestratorTheme(
+        getCommonFormFieldStyles,
+    );
+
     return (
         <EuiFormRow
             css={formRowStyle}
-            label={title}
+            label={
+                title ? (
+                    <EuiText size="m">
+                        <div css={error && errorStyle}>
+                            {title} {required && '*'}
+                        </div>
+                    </EuiText>
+                ) : undefined
+            }
             labelAppend={<EuiText size="m">{description}</EuiText>}
             error={error}
             isInvalid={isInvalid}
             fullWidth
         >
-            <div>{children}</div>
+            <>{children}</>
         </EuiFormRow>
     );
 };