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 {
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(
+
+ {}}
+ >
+
+
+
+
+
+ );
+ // 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(
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.