refactor: cleanup fix for persistent set (#6060)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -134,13 +134,7 @@ const FeatureOverviewEnvironment = ({
 
     return (
         <ConditionallyRender
-            condition={
+            condition={!new Set(globalStore.hiddenEnvironments).has(env.name)}
-                !new Set(
-                    Array.isArray(globalStore.hiddenEnvironments)
-                        ? globalStore.hiddenEnvironments
-                        : [],
-                ).has(env.name)
-            }
             show={
                 <StyledFeatureOverviewEnvironment enabled={env.enabled}>
                     <StyledAccordion

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,
     };
 };

frontend/src/hooks/useHiddenEnvironments.ts

@@ -9,21 +9,12 @@ export const useHiddenEnvironments = () => {
         useGlobalLocalStorage();
     const [hiddenEnvironments, setStoredHiddenEnvironments] = useState<
         Set<string>
-    >(
+    >(new Set(globalStore.hiddenEnvironments));
-        new Set(
-            Array.isArray(globalStore.hiddenEnvironments)
-                ? globalStore.hiddenEnvironments
-                : [],
-        ),
-    );
 
     const setHiddenEnvironments = (environment: string) => {
-        // @ts-expect-error
         setGlobalStore((params) => {
             const hiddenEnvironments = new Set(
-                Array.isArray(globalStore.hiddenEnvironments)
+                Array.from(params.hiddenEnvironments || []),
-                    ? globalStore.hiddenEnvironments
-                    : [],
             );
             if (hiddenEnvironments.has(environment)) {
                 hiddenEnvironments.delete(environment);

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] }]);
+    });
 });

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);
     }