From 06353494ca91e48e680ce84c4d6b80104e7be023 Mon Sep 17 00:00:00 2001 From: Georgi2704 Date: Thu, 3 Apr 2025 15:47:56 +0200 Subject: [PATCH 1/2] 1821 Update WfoSidebar, add toOptionalArrayEntries --- .changeset/mean-rockets-learn.md | 5 +++ .../WfoPageTemplate/WfoSidebar/WfoSidebar.tsx | 15 ++++--- .../WfoSettings/WfoModifySettings.tsx | 4 +- .../src/utils/optionalArray.spec.ts | 42 ++++++++++++++++++- .../src/utils/optionalArray.ts | 5 +++ 5 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 .changeset/mean-rockets-learn.md diff --git a/.changeset/mean-rockets-learn.md b/.changeset/mean-rockets-learn.md new file mode 100644 index 000000000..3c2529b36 --- /dev/null +++ b/.changeset/mean-rockets-learn.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': minor +--- + +1821 Update WfoSidebar, add toOptionalArrayEntries diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx index a8381eab9..dd97d6bfe 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx +++ b/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([ [PATH_WORKFLOWS, PolicyResource.NAVIGATION_WORKFLOWS], @@ -36,11 +41,11 @@ export const urlPolicyMap = new Map([ [PATH_SETTINGS, PolicyResource.NAVIGATION_SETTINGS], ]); -export const sideNavMenuDivider: EuiSideNavItemType = { +export const createSideNavDivider = (): EuiSideNavItemType => ({ name: '', - id: 'menuDivider', + id: htmlIdGenerator('menuDivider')(), renderItem: () => , -}; +}); export type WfoSidebarProps = { overrideMenuItems?: ( diff --git a/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx b/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx index 9a82c1584..1c6c82abf 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx @@ -4,8 +4,8 @@ import { useTranslations } from 'next-intl'; import { EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; -import { WfoEngineStatusButton } from './WfoEngineStatusButton'; -import { WfoResetTextSearchIndexButton } from './WfoResetTextSearchIndexButton'; +import { WfoEngineStatusButton } from '@/components'; +import { WfoResetTextSearchIndexButton } from '@/components'; export const WfoModifySettings = () => { const t = useTranslations('settings.page'); diff --git a/packages/orchestrator-ui-components/src/utils/optionalArray.spec.ts b/packages/orchestrator-ui-components/src/utils/optionalArray.spec.ts index a8f2a22c0..b4399e63c 100644 --- a/packages/orchestrator-ui-components/src/utils/optionalArray.spec.ts +++ b/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' }]; diff --git a/packages/orchestrator-ui-components/src/utils/optionalArray.ts b/packages/orchestrator-ui-components/src/utils/optionalArray.ts index c63c939fb..8f19e0056 100644 --- a/packages/orchestrator-ui-components/src/utils/optionalArray.ts +++ b/packages/orchestrator-ui-components/src/utils/optionalArray.ts @@ -3,6 +3,11 @@ export const toOptionalArrayEntry = ( condition: boolean, ): [T] | [] => (condition ? [data] : []); +export const toOptionalArrayEntries = ( + data: T | T[], + condition: boolean, +): T[] => (condition ? (Array.isArray(data) ? data : [data]) : []); + export const optionalArrayMapper = ( data: T[] | undefined = [], mapper: (input: T) => U, From 767ea47037bf284eb4c0e4227caaec093db31815 Mon Sep 17 00:00:00 2001 From: Georgi2704 Date: Thu, 3 Apr 2025 15:57:38 +0200 Subject: [PATCH 2/2] linted --- .../src/components/WfoSettings/WfoModifySettings.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx b/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx index 1c6c82abf..a3dc52772 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSettings/WfoModifySettings.tsx +++ b/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 '@/components'; -import { WfoResetTextSearchIndexButton } from '@/components'; +import { + WfoEngineStatusButton, + WfoResetTextSearchIndexButton, +} from '@/components'; export const WfoModifySettings = () => { const t = useTranslations('settings.page');