From de6252b47d7fbb772dfb69dde89865f8f526cfda Mon Sep 17 00:00:00 2001
From: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:41:12 -0500
Subject: [PATCH] HPCC-30254 ECL Watch v9 ZAP Report Container Name

changes the ZAP Dialog "Container Name" logs filter to allow multiple
selections rather than single values

Signed-off-by: Jeremy Clements <79224539+jeclrsg@users.noreply.github.com>
---
 esp/src/src-react/components/forms/Fields.tsx   |  2 +-
 .../src-react/components/forms/ZAPDialog.tsx    | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/esp/src/src-react/components/forms/Fields.tsx b/esp/src/src-react/components/forms/Fields.tsx
index f7c435b1129..5e2213ba7fd 100644
--- a/esp/src/src-react/components/forms/Fields.tsx
+++ b/esp/src/src-react/components/forms/Fields.tsx
@@ -831,7 +831,7 @@ export const CloudContainerNameField: React.FunctionComponent<CloudContainerName
         setOptions([{ key: "", text: "" }, ...options]);
     }, [cloudContainerNames]);
 
-    return <ComboBox {...props} allowFreeform={true} autoComplete={"on"} options={options} />;
+    return <ComboBox {...props} allowFreeform={true} multiSelect autoComplete={"on"} options={options} />;
 };
 
 const states = Object.keys(States).map(s => States[s]);
diff --git a/esp/src/src-react/components/forms/ZAPDialog.tsx b/esp/src/src-react/components/forms/ZAPDialog.tsx
index 679c0b8a3a7..8d728ae5f8a 100644
--- a/esp/src/src-react/components/forms/ZAPDialog.tsx
+++ b/esp/src/src-react/components/forms/ZAPDialog.tsx
@@ -620,15 +620,22 @@ export const ZAPDialog: React.FunctionComponent<ZAPDialogProps> = ({
             <Controller
                 control={control} name="LogFilter.ComponentsFilter"
                 render={({
-                    field: { onChange, name: fieldName }
+                    field: { onChange, name: fieldName, value }
                 }) => <CloudContainerNameField
                         name={fieldName}
-                        onChange={(_evt, option, _idx, value) => {
-                            if (option?.key) {
-                                onChange(option.key);
+                        selectedKey={value}
+                        onChange={(_evt, option, _idx, _value) => {
+                            const selectedKeys = value ? [...value] : [];
+                            const selected = option?.key ?? _value;
+                            const index = selectedKeys.indexOf(selected.toString());
+
+                            if (index === -1) {
+                                selectedKeys.push(selected.toString());
                             } else {
-                                onChange(value);
+                                selectedKeys.splice(index, 1);
                             }
+
+                            onChange(selectedKeys);
                         }}
                         onRenderLabel={(props: CustomLabelProps) => <CustomLabel
                             id={`${fieldName}_Label`}