From bc6a96cf6b1fd28899f192755ec4f77195a6f5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 13 Mar 2024 16:07:01 +0000
Subject: [PATCH] chore: suggest nested properties in action filters (#6533)

https://linear.app/unleash/issue/2-2029/support-filtering-on-nested-properties

Suggests nested properties in action filters. Also sorts them
alphabetically.

Follow up to https://github.com/Unleash/unleash/pull/6531

<img width="381" alt="image"
src="https://github.com/Unleash/unleash/assets/14320932/4e2c900d-335b-4360-8be4-186f3887e42b">
---
 .../ProjectActionsFormStepSource.tsx          |  5 +-
 src/lib/util/flattenPayload.ts                | 60 ++++++++++---------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
index a877dc378f..23c09dcc1d 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepSource/ProjectActionsFormStepSource.tsx
@@ -13,6 +13,7 @@ import Add from '@mui/icons-material/Add';
 import { ProjectActionsPreviewPayload } from './ProjectActionsPreviewPayload';
 import { useSignalEndpointSignals } from 'hooks/api/getters/useSignalEndpointSignals/useSignalEndpointSignals';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { flattenPayload } from '@server/util/flattenPayload';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     margin: theme.spacing(2, 0),
@@ -86,7 +87,9 @@ export const ProjectActionsFormStepSource = ({
         const lastSourcePayload = signalEndpointSignals[0]?.payload;
         return {
             lastSourcePayload,
-            filterSuggestions: Object.keys(lastSourcePayload || {}),
+            filterSuggestions: Object.keys(
+                flattenPayload(lastSourcePayload) || {},
+            ).sort(),
         };
     }, [signalEndpointSignals]);
 
diff --git a/src/lib/util/flattenPayload.ts b/src/lib/util/flattenPayload.ts
index 78cc6034ff..9c807dcb0e 100644
--- a/src/lib/util/flattenPayload.ts
+++ b/src/lib/util/flattenPayload.ts
@@ -1,32 +1,38 @@
 export const flattenPayload = (
-    payload = {},
+    payload: Record<string, unknown> = {},
     parentKey = '',
 ): Record<string, unknown> =>
-    Object.entries(payload).reduce((acc, [key, value]) => {
-        const newKey = parentKey ? `${parentKey}.${key}` : key;
+    Object.entries(payload).reduce(
+        (acc, [key, value]) => {
+            const newKey = parentKey ? `${parentKey}.${key}` : key;
 
-        if (
-            typeof value === 'object' &&
-            value !== null &&
-            !Array.isArray(value)
-        ) {
-            // If it's an object, recurse and merge the results
-            Object.assign(acc, flattenPayload(value, newKey));
-        } else if (Array.isArray(value)) {
-            // If it's an array, map through it and handle objects and non-objects differently
-            value.forEach((item, index) => {
-                if (typeof item === 'object' && item !== null) {
-                    Object.assign(
-                        acc,
-                        flattenPayload(item, `${newKey}[${index}]`),
-                    );
-                } else {
-                    acc[`${newKey}[${index}]`] = item;
-                }
-            });
-        } else {
-            acc[newKey] = value;
-        }
+            if (
+                typeof value === 'object' &&
+                value !== null &&
+                !Array.isArray(value)
+            ) {
+                // If it's an object, recurse and merge the results
+                Object.assign(
+                    acc,
+                    flattenPayload(value as Record<string, unknown>, newKey),
+                );
+            } else if (Array.isArray(value)) {
+                // If it's an array, map through it and handle objects and non-objects differently
+                value.forEach((item, index) => {
+                    if (typeof item === 'object' && item !== null) {
+                        Object.assign(
+                            acc,
+                            flattenPayload(item, `${newKey}[${index}]`),
+                        );
+                    } else {
+                        acc[`${newKey}[${index}]`] = item;
+                    }
+                });
+            } else {
+                acc[newKey] = value;
+            }
 
-        return acc;
-    }, {});
+            return acc;
+        },
+        {} as Record<string, unknown>,
+    );