fix: favorites column visibility (#2605)

Co-authored-by: sjaanus <sellinjaanus@gmail.com>

frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx

@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { useState, VFC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import {
     Star as StarIcon,
@@ -8,17 +8,23 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 
 interface IFavoriteIconHeaderProps {
     isActive: boolean;
-    onClick: () => void;
+    onClick: (isPinned: boolean) => void;
 }
 
 export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
     isActive = false,
     onClick,
 }) => {
+    const [internalState, setInternalState] = useState(isActive);
+    const onToggle = () => {
+        setInternalState(!internalState);
+        onClick(!internalState);
+    };
+
     return (
         <Tooltip
             title={
-                isActive
+                internalState
                     ? 'Unpin favorite features from the top'
                     : 'Pin favorite features to the top'
             }
@@ -31,11 +37,11 @@ export const FavoriteIconHeader: VFC<IFavoriteIconHeaderProps> = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}
-                onClick={onClick}
+                onClick={onToggle}
                 size="small"
             >
                 <ConditionallyRender
-                    condition={isActive}
+                    condition={internalState}
                     show={<StarIcon fontSize="small" />}
                     elseShow={<StarBorderIcon fontSize="small" />}
                 />

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -302,14 +302,7 @@ export const ProjectFeatureToggles = ({
                 disableSortBy: true,
             },
         ],
-        [
-            projectId,
-            environments,
-            loading,
-            onToggle,
-            isFavoritesPinned,
-            uiConfig?.flags?.favorites,
-        ]
+        [projectId, environments, loading, onToggle, uiConfig?.flags?.favorites]
     );
 
     const [searchValue, setSearchValue] = useState(

frontend/src/hooks/usePinnedFavorites.ts

@@ -36,13 +36,13 @@ export const usePinnedFavorites = (initialState = false) => {
     const [isFavoritesPinned, setIsFavoritesPinned] = useState(initialState);
     const { trackEvent } = usePlausibleTracker();
 
-    const onChangeIsFavoritePinned = () => {
+    const onChangeIsFavoritePinned = (newState: boolean) => {
         trackEvent('favorite', {
             props: {
-                eventType: `features ${isFavoritesPinned ? 'un' : ''}pinned `,
+                eventType: `features ${!newState ? 'un' : ''}pinned `,
             },
         });
-        setIsFavoritesPinned(!isFavoritesPinned);
+        setIsFavoritesPinned(newState);
     };
 
     const enhancedSortTypes = useMemo(() => {