Update WfoSidebar, add toOptionalArrayEntries

.changeset/mean-rockets-learn.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1821 Update WfoSidebar, add toOptionalArrayEntries

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -3,10 +3,16 @@ import React, { FC, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiHorizontalRule, EuiSideNav, EuiSpacer } from '@elastic/eui';
+import {
+    EuiHorizontalRule,
+    EuiSideNav,
+    EuiSpacer,
+    htmlIdGenerator,
+} from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
 import { WfoIsAllowedToRender, menuItemIsAllowed } from '@/components';
+import { WfoMenuItemLink } from '@/components';
 import { getMenuStyles } from '@/components/WfoPageTemplate/WfoSidebar/styles';
 import { WfoStartWorkflowButtonComboBox } from '@/components/WfoStartButton/WfoStartWorkflowComboBox';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -26,7 +32,6 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
-import { WfoMenuItemLink } from './WfoMenuLink';
 
 export const urlPolicyMap = new Map<string, PolicyResource>([
     [PATH_WORKFLOWS, PolicyResource.NAVIGATION_WORKFLOWS],
@@ -36,11 +41,11 @@ export const urlPolicyMap = new Map<string, PolicyResource>([
     [PATH_SETTINGS, PolicyResource.NAVIGATION_SETTINGS],
 ]);
 
-export const sideNavMenuDivider: EuiSideNavItemType<object> = {
+export const createSideNavDivider = (): EuiSideNavItemType<object> => ({
     name: '',
-    id: 'menuDivider',
+    id: htmlIdGenerator('menuDivider')(),
     renderItem: () => <EuiHorizontalRule margin="xs" />,
-};
+});
 
 export type WfoSidebarProps = {
     overrideMenuItems?: (

packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx

@@ -4,8 +4,10 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
-import { WfoEngineStatusButton } from './WfoEngineStatusButton';
-import { WfoResetTextSearchIndexButton } from './WfoResetTextSearchIndexButton';
+import {
+    WfoEngineStatusButton,
+    WfoResetTextSearchIndexButton,
+} from '@/components';
 
 export const WfoModifySettings = () => {
     const t = useTranslations('settings.page');

packages/orchestrator-ui-components/src/utils/optionalArray.spec.ts

@@ -1,4 +1,8 @@
-import { optionalArrayMapper, toOptionalArrayEntry } from './optionalArray';
+import {
+    optionalArrayMapper,
+    toOptionalArrayEntries,
+    toOptionalArrayEntry,
+} from './optionalArray';
 
 describe('toOptionalArrayEntry', () => {
     const testInput = { testField: 'testValue' };
@@ -16,6 +20,42 @@ describe('toOptionalArrayEntry', () => {
     });
 });
 
+describe('toOptionalArrayEntries', () => {
+    test('returns data as an array when condition is true and data is not an array', () => {
+        const result = toOptionalArrayEntries('singleItem', true);
+        expect(result).toEqual(['singleItem']);
+    });
+
+    test('returns data as it is when condition is true and data is already an array', () => {
+        const result = toOptionalArrayEntries(['item1', 'item2'], true);
+        expect(result).toEqual(['item1', 'item2']);
+    });
+
+    test('returns an empty array when condition is false regardless of data type', () => {
+        const resultWithSingleItem = toOptionalArrayEntries(
+            'singleItem',
+            false,
+        );
+        const resultWithArray = toOptionalArrayEntries(
+            ['item1', 'item2'],
+            false,
+        );
+
+        expect(resultWithSingleItem).toEqual([]);
+        expect(resultWithArray).toEqual([]);
+    });
+
+    test('does not mutate the original data', () => {
+        const singleItem = 'singleItem';
+        const arrayData = ['item1', 'item2'];
+        toOptionalArrayEntries(singleItem, true);
+        toOptionalArrayEntries(arrayData, true);
+
+        expect(singleItem).toBe('singleItem');
+        expect(arrayData).toEqual(['item1', 'item2']);
+    });
+});
+
 describe('optionalArrayMapper', () => {
     it('applies the mapper when data is defined', () => {
         const testData = [{ testField: 'testValue' }];

packages/orchestrator-ui-components/src/utils/optionalArray.ts

@@ -3,6 +3,11 @@ export const toOptionalArrayEntry = <T>(
     condition: boolean,
 ): [T] | [] => (condition ? [data] : []);
 
+export const toOptionalArrayEntries = <T>(
+    data: T | T[],
+    condition: boolean,
+): T[] => (condition ? (Array.isArray(data) ? data : [data]) : []);
+
 export const optionalArrayMapper = <T, U>(
     data: T[] | undefined = [],
     mapper: (input: T) => U,