From d1d5fd8ac83493cb8d5f98a197319603a28fbd5b Mon Sep 17 00:00:00 2001 From: Siddhartha Bingi Date: Fri, 21 Feb 2025 00:46:52 -0800 Subject: [PATCH 1/3] Increase category field limit from 2 to 5 for time series splitting Signed-off-by: Siddhartha Bingi --- .../CategoryField/CategoryField.module.scss | 14 ++++++++++++++ .../components/CategoryField/CategoryField.tsx | 5 +++-- 2 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 public/pages/ConfigureModel/components/CategoryField/CategoryField.module.scss diff --git a/public/pages/ConfigureModel/components/CategoryField/CategoryField.module.scss b/public/pages/ConfigureModel/components/CategoryField/CategoryField.module.scss new file mode 100644 index 00000000..8cde71e9 --- /dev/null +++ b/public/pages/ConfigureModel/components/CategoryField/CategoryField.module.scss @@ -0,0 +1,14 @@ +.categoryFieldComboBox { + // Ensure the combo box can handle multiple selections + .euiComboBoxPill { + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .euiComboBox__inputWrap { + max-height: 150px; // Adjust height to accommodate more selections + overflow-y: auto; + } +} diff --git a/public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx b/public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx index f1b52250..4806eb04 100644 --- a/public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx +++ b/public/pages/ConfigureModel/components/CategoryField/CategoryField.tsx @@ -33,6 +33,7 @@ import { validateCategoryField, } from '../../../../utils/utils'; import { ModelConfigurationFormikValues } from '../../models/interfaces'; +import './CategoryField.module.scss'; interface CategoryFieldProps { isEdit: boolean; @@ -74,7 +75,7 @@ export function CategoryField(props: CategoryFieldProps) { style={{ lineHeight: 'normal' }} > Split a single time series into multiple time series based on - categorical fields. You can select up to 2.{' '} + categorical fields. You can select up to 5.{' '} Learn more @@ -155,7 +156,7 @@ export function CategoryField(props: CategoryFieldProps) { onChange={(options) => { const selection = options.map((option) => option.label); if (!isEmpty(selection)) { - if (selection.length <= 2) { + if (selection.length <= 5) { form.setFieldValue('categoryField', selection); } } else { From 66749d00e314cb59ef74b598eddf770a7e3086a0 Mon Sep 17 00:00:00 2001 From: Siddhartha Bingi Date: Fri, 21 Feb 2025 00:54:35 -0800 Subject: [PATCH 2/3] Adding test to verify support of categories upto 5 Signed-off-by: Siddhartha Bingi --- .../__tests__/CategoryField.test.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/public/pages/ConfigureModel/components/CategoryField/__tests__/CategoryField.test.tsx b/public/pages/ConfigureModel/components/CategoryField/__tests__/CategoryField.test.tsx index 9f6fba7e..24688f4e 100644 --- a/public/pages/ConfigureModel/components/CategoryField/__tests__/CategoryField.test.tsx +++ b/public/pages/ConfigureModel/components/CategoryField/__tests__/CategoryField.test.tsx @@ -205,6 +205,64 @@ describe(' spec', () => { expect(queryByText('b')).not.toBeNull(); expect(queryByText('c')).toBeNull(); }); + test(`limits selection to a maximum of 5 entities`, () => { + const { getAllByRole, getByTestId, queryByText } = render( + + {}} + > + +
+ { + return; + }} + isLoading={false} + formikProps={{ + values: { + categoryFieldEnabled: true, + }, + }} + /> + +
+ + + ); + // open combo box + fireEvent.click(getByTestId('comboBoxToggleListButton')); + expect(queryByText('a')).not.toBeNull(); + expect(queryByText('b')).not.toBeNull(); + expect(queryByText('c')).not.toBeNull(); + expect(queryByText('d')).not.toBeNull(); + expect(queryByText('e')).not.toBeNull(); + expect(queryByText('f')).not.toBeNull(); + + // select top 6 options (a, b, c, d, e, f) + fireEvent.click(getAllByRole('option')[0]); + fireEvent.click(getAllByRole('option')[0]); + fireEvent.click(getAllByRole('option')[0]); + fireEvent.click(getAllByRole('option')[0]); + fireEvent.click(getAllByRole('option')[0]); + fireEvent.click(getAllByRole('option')[0]); + + // close combo box + fireEvent.click(getByTestId('comboBoxToggleListButton')); + + // the last selection (f) is still not selected + expect(queryByText('a')).not.toBeNull(); + expect(queryByText('b')).not.toBeNull(); + expect(queryByText('c')).not.toBeNull(); + expect(queryByText('d')).not.toBeNull(); + expect(queryByText('e')).not.toBeNull(); + expect(queryByText('f')).toBeNull(); + }); test(`fields are readonly if editing`, () => { const { getByTestId, queryByText } = render( From c47352319f5e731b518053c5503786c039e46ac0 Mon Sep 17 00:00:00 2001 From: Siddhartha Bingi Date: Fri, 21 Feb 2025 01:06:43 -0800 Subject: [PATCH 3/3] Updating the snapshot for UTs Signed-off-by: Siddhartha Bingi --- .../__tests__/__snapshots__/CategoryField.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap b/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap index eaeb74b0..c5637908 100644 --- a/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap +++ b/public/pages/ConfigureModel/components/CategoryField/__tests__/__snapshots__/CategoryField.test.tsx.snap @@ -42,7 +42,7 @@ exports[` spec renders the component when disabled 1`] = ` class="euiText euiText--medium content-panel-subTitle" style="line-height: normal;" > - Split a single time series into multiple time series based on categorical fields. You can select up to 2. + Split a single time series into multiple time series based on categorical fields. You can select up to 5. spec renders the component when enabled 1`] = ` class="euiText euiText--medium content-panel-subTitle" style="line-height: normal;" > - Split a single time series into multiple time series based on categorical fields. You can select up to 2. + Split a single time series into multiple time series based on categorical fields. You can select up to 5.