@orchestrator-ui/orchestrator-ui-components 2.7.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "2.7.0",
+    "version": "2.8.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -32,7 +32,7 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@elastic/eui": "^95.1.0",
+        "@elastic/eui": "^97.0.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
@@ -66,9 +66,8 @@
         "@storybook/blocks": "^8.1.10",
         "@storybook/nextjs": "^8.1.10",
         "@storybook/react": "^8.1.10",
-        "@storybook/testing-library": "^0.2.0",
         "@testing-library/jest-dom": "^6.1.5",
-        "@testing-library/react": "^14.0.0",
+        "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/invariant": "^2.2.33",
         "@types/jest": "^29.5.8",

package/src/components/WfoForms/formFields/SelectField/SelectField.tsx

@@ -12,7 +12,7 @@
  * limitations under the License.
  *
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactSelect from 'react-select';
 
 import { get } from 'lodash';
@@ -97,6 +97,10 @@ export function UnconnectedSelectField({
     const { reactSelectInnerComponentStyles, formRowStyle } =
         useWithOrchestratorTheme(getSelectFieldStyles);
 
+    useEffect(() => {
+        onChange(selectedValue?.value);
+    }, []);
+
     if (fieldType === Array) {
         // Avoid circular import with our own ListSelectField (instead of recursively trying to use SelectField)
         return (

package/src/components/WfoPageTemplate/WfoPageHeader/styles.ts

@@ -13,6 +13,7 @@ export const getWfoPageHeaderStyles = ({ theme }: WfoTheme) => {
         return css({
             backgroundColor: theme.colors.header,
             height: navigationHeight,
+            borderBottom: theme.colors.header, // Overrides EuiHeader default border bottom
         });
     };
 

package/src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeader } from '@elastic/eui';
+import { EuiPageHeader } from '@elastic/eui';
 
 import { WfoWebsocketStatusBadge } from '@/components';
 import { useGetOrchestratorConfig } from '@/hooks';
@@ -14,14 +14,13 @@ export const WfoTitleWithWebsocketBadge = ({
 }: WfoTitleWithWebsocketBadgeProps) => {
     const { useWebSockets } = useGetOrchestratorConfig();
 
-    return (
-        <EuiFlexGroup gutterSize="s" alignItems="baseline">
-            <EuiFlexItem grow={0}>
-                <EuiPageHeader pageTitle={title} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={0}>
-                {useWebSockets && <WfoWebsocketStatusBadge />}
-            </EuiFlexItem>
-        </EuiFlexGroup>
+    const pageTitle = useWebSockets ? (
+        <>
+            {title} <WfoWebsocketStatusBadge />
+        </>
+    ) : (
+        title
     );
+
+    return <EuiPageHeader pageTitle={pageTitle} />;
 };

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.7.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.8.0';