From 8a7e65eaa6df3a3ef1fbb760cc35eedf80ede682 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 29 Jan 2024 12:33:01 +0100
Subject: [PATCH] refactor: cleanup fix for persistent set (#6060)

---
 .../FeatureOverviewEnvironment.tsx                 |  8 +-------
 frontend/src/hooks/useGlobalLocalStorage.ts        | 10 ++++++++--
 frontend/src/hooks/useHiddenEnvironments.ts        | 13 ++-----------
 frontend/src/utils/storage.test.ts                 |  8 ++++++++
 frontend/src/utils/storage.ts                      | 14 ++++++++++++--
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 31015ad43b..62d5287d56 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -134,13 +134,7 @@ const FeatureOverviewEnvironment = ({
 
     return (
         <ConditionallyRender
-            condition={
-                !new Set(
-                    Array.isArray(globalStore.hiddenEnvironments)
-                        ? globalStore.hiddenEnvironments
-                        : [],
-                ).has(env.name)
-            }
+            condition={!new Set(globalStore.hiddenEnvironments).has(env.name)}
             show={
                 <StyledFeatureOverviewEnvironment enabled={env.enabled}>
                     <StyledAccordion
diff --git a/frontend/src/hooks/useGlobalLocalStorage.ts b/frontend/src/hooks/useGlobalLocalStorage.ts
index 6d594cd792..ce9ac1e32b 100644
--- a/frontend/src/hooks/useGlobalLocalStorage.ts
+++ b/frontend/src/hooks/useGlobalLocalStorage.ts
@@ -2,7 +2,7 @@ import { createLocalStorage } from 'utils/createLocalStorage';
 
 interface IGlobalStore {
     favorites?: boolean;
-    hiddenEnvironments?: Set<string>;
+    hiddenEnvironments?: Array<string>;
 }
 
 export const useGlobalLocalStorage = () => {
@@ -11,8 +11,14 @@ export const useGlobalLocalStorage = () => {
         {},
     );
 
+    // fix incorrect values introduced by a bug
+    const parsedValue = {
+        ...value,
+        hiddenEnvironments: Array.from(value.hiddenEnvironments || []),
+    };
+
     return {
-        value,
+        value: parsedValue,
         setValue,
     };
 };
diff --git a/frontend/src/hooks/useHiddenEnvironments.ts b/frontend/src/hooks/useHiddenEnvironments.ts
index b9929e75f1..64318b9f85 100644
--- a/frontend/src/hooks/useHiddenEnvironments.ts
+++ b/frontend/src/hooks/useHiddenEnvironments.ts
@@ -9,21 +9,12 @@ export const useHiddenEnvironments = () => {
         useGlobalLocalStorage();
     const [hiddenEnvironments, setStoredHiddenEnvironments] = useState<
         Set<string>
-    >(
-        new Set(
-            Array.isArray(globalStore.hiddenEnvironments)
-                ? globalStore.hiddenEnvironments
-                : [],
-        ),
-    );
+    >(new Set(globalStore.hiddenEnvironments));
 
     const setHiddenEnvironments = (environment: string) => {
-        // @ts-expect-error
         setGlobalStore((params) => {
             const hiddenEnvironments = new Set(
-                Array.isArray(globalStore.hiddenEnvironments)
-                    ? globalStore.hiddenEnvironments
-                    : [],
+                Array.from(params.hiddenEnvironments || []),
             );
             if (hiddenEnvironments.has(environment)) {
                 hiddenEnvironments.delete(environment);
diff --git a/frontend/src/utils/storage.test.ts b/frontend/src/utils/storage.test.ts
index 5d98caccf9..c8aa3f510e 100644
--- a/frontend/src/utils/storage.test.ts
+++ b/frontend/src/utils/storage.test.ts
@@ -117,4 +117,12 @@ describe('localStorage with TTL', () => {
         );
         expect(retrievedObject).toBeUndefined();
     });
+
+    test('should handle set with any level of nesting', () => {
+        setLocalStorageItem(
+            'testKey',
+            new Set([{ nestedSet: new Set([1, 2]) }]),
+        );
+        expect(getLocalStorageItem('testKey')).toEqual([{ nestedSet: [1, 2] }]);
+    });
 });
diff --git a/frontend/src/utils/storage.ts b/frontend/src/utils/storage.ts
index 113f3a65f5..e54a75568d 100644
--- a/frontend/src/utils/storage.ts
+++ b/frontend/src/utils/storage.ts
@@ -39,7 +39,12 @@ export function setLocalStorageItem<T>(
                     ? new Date().getTime() + timeToLive
                     : null,
         };
-        window.localStorage.setItem(key, JSON.stringify(item));
+        window.localStorage.setItem(
+            key,
+            JSON.stringify(item, (_key, value) =>
+                value instanceof Set ? [...value] : value,
+            ),
+        );
     } catch (err: unknown) {
         console.warn(err);
     }
@@ -59,7 +64,12 @@ export function setSessionStorageItem<T>(
                     ? new Date().getTime() + timeToLive
                     : null,
         };
-        window.sessionStorage.setItem(key, JSON.stringify(item));
+        window.sessionStorage.setItem(
+            key,
+            JSON.stringify(item, (_key, value) =>
+                value instanceof Set ? [...value] : value,
+            ),
+        );
     } catch (err: unknown) {
         console.warn(err);
     }