refactor: filters

frontend/src/component/filter/AddFilterButton.tsx

@@ -38,17 +38,15 @@ const StyledIcon = styled(Icon)(({ theme }) => ({
 
 interface IAddFilterButtonProps {
     visibleOptions: string[];
-    setVisibleOptions: (filters: string[]) => void;
     hiddenOptions: string[];
-    setHiddenOptions: (filters: string[]) => void;
+    onSelectedOptionsChange: (filters: string[]) => void;
     availableFilters: IFilterItem[];
 }
 
 export const AddFilterButton = ({
     visibleOptions,
-    setVisibleOptions,
     hiddenOptions,
-    setHiddenOptions,
+    onSelectedOptionsChange,
     availableFilters,
 }: IAddFilterButtonProps) => {
     const projectId = useOptionalPathParam('projectId');
@@ -69,11 +67,7 @@ export const AddFilterButton = ({
     };
 
     const onSelect = (label: string) => {
-        const newVisibleOptions = visibleOptions.filter((f) => f !== label);
+        onSelectedOptionsChange([...hiddenOptions, label]);
-        const newHiddenOptions = [...hiddenOptions, label];
-
-        setHiddenOptions(newHiddenOptions);
-        setVisibleOptions(newVisibleOptions);
         handleClose();
     };
 

frontend/src/component/filter/Filters/Filters.tsx

@@ -1,6 +1,5 @@
-import { type FC, useEffect, useState } from 'react';
+import { type FC, useEffect, useMemo, useState } from 'react';
 import { Box, Icon, styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AddFilterButton } from '../AddFilterButton.tsx';
 import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
 import {
@@ -165,28 +164,6 @@ const SingleFilter: FC<SingleFilterProps> = ({
     );
 };
 
-type MultiFilterProps = IFilterProps & {
-    rangeChangeHandler: RangeChangeHandler;
-};
-
-const MultiFilter: FC<MultiFilterProps> = ({
-    state,
-    onChange,
-    availableFilters,
-    rangeChangeHandler,
-    className,
-}) => {
-    const [unselectedFilters, setUnselectedFilters] = useState<string[]>([]);
-    const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
-
-    const deselectFilter = (label: string) => {
-        const newSelectedFilters = selectedFilters.filter((f) => f !== label);
-        const newUnselectedFilters = [...unselectedFilters, label].sort();
-
-        setSelectedFilters(newSelectedFilters);
-        setUnselectedFilters(newUnselectedFilters);
-    };
-
 const mergeArraysKeepingOrder = (
     firstArray: string[],
     secondArray: string[],
@@ -203,6 +180,25 @@ const MultiFilter: FC<MultiFilterProps> = ({
     return resultArray;
 };
 
+type MultiFilterProps = IFilterProps & {
+    rangeChangeHandler: RangeChangeHandler;
+};
+
+const MultiFilter: FC<MultiFilterProps> = ({
+    state,
+    onChange,
+    availableFilters,
+    rangeChangeHandler,
+    className,
+}) => {
+    const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+
+    const deselectFilter = (label: string) => {
+        const newSelectedFilters = selectedFilters.filter((f) => f !== label);
+
+        setSelectedFilters(newSelectedFilters);
+    };
+
     useEffect(() => {
         const newSelectedFilters = Object.keys(state)
             .map((filterKey) =>
@@ -219,15 +215,16 @@ const MultiFilter: FC<MultiFilterProps> = ({
             newSelectedFilters,
         );
         setSelectedFilters(allSelectedFilters);
-
-        const newUnselectedFilters = availableFilters
-            .filter((item) => !allSelectedFilters.includes(item.label))
-            .map((field) => field.label)
-            .sort();
-        setUnselectedFilters(newUnselectedFilters);
     }, [JSON.stringify(state), JSON.stringify(availableFilters)]);
 
-    const hasAvailableFilters = unselectedFilters.length > 0;
+    const unselectedFilters = useMemo(
+        () =>
+            availableFilters
+                .filter((item) => !selectedFilters.includes(item.label))
+                .map((field) => field.label)
+                .sort(),
+        [availableFilters, selectedFilters],
+    );
 
     return (
         <StyledBox className={className}>
@@ -251,19 +248,14 @@ const MultiFilter: FC<MultiFilterProps> = ({
                     />
                 );
             })}
-
+            {unselectedFilters.length > 0 ? (
-            <ConditionallyRender
-                condition={hasAvailableFilters}
-                show={
                 <AddFilterButton
                     availableFilters={availableFilters}
                     visibleOptions={unselectedFilters}
-                        setVisibleOptions={setUnselectedFilters}
                     hiddenOptions={selectedFilters}
-                        setHiddenOptions={setSelectedFilters}
+                    onSelectedOptionsChange={setSelectedFilters}
-                    />
-                }
                 />
+            ) : null}
         </StyledBox>
     );
 };

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

@@ -114,6 +114,7 @@ export const ProjectFeatureToggles = ({
         createdBy: tableState.createdBy,
         archived: tableState.archived,
         lifecycle: tableState.lifecycle,
+        lastSeenAt: tableState.lastSeenAt,
     };
 
     const { favorite, unfavorite } = useFavoriteFeaturesApi();