From fee43d7fd6c9392eb0788fcf39298d67bd3edb05 Mon Sep 17 00:00:00 2001
From: espenkalle <eskal@equinor.com>
Date: Tue, 30 Jan 2024 12:34:47 +0100
Subject: [PATCH] fix/ Filter types order does not reflect current order. #569

---
 .../filter/src/lib/components/quickFilter/QuickFilter.tsx   | 5 +++--
 .../toggleHideFilterPopover/ToggleHideFilterPopover.tsx     | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
index 3b565fc60..2e086b490 100644
--- a/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
+++ b/packages/filter/src/lib/components/quickFilter/QuickFilter.tsx
@@ -45,6 +45,7 @@ type QuickFilterReadyProps = {
 const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
   const { query, setUncheckedValues, uncheckedValues } = useFilterContext();
   const [isFilterExpanded, setIsFilterExpanded] = useState(false);
+  const [allFilterGroups, setFilterOrder] = useState<string[]>(groups.map((s) => s.name));
   const [visibleFilterGroups, setVisibleFilterGroups] = useState<string[]>(groups.map((s) => s.name));
   const [filterGroupOpen, setFilterGroupOpen] = useState<string | null>(null);
   const handleExpandFilterGroup = (groupName: string) =>
@@ -52,7 +53,6 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
 
   const quickFilterGroups = groups?.filter(({ isQuickFilter }) => isQuickFilter);
 
-  const filterGroups = groups?.map((s) => s.name);
   const toggleFilterIsExpanded = () => {
     setIsFilterExpanded(!isFilterExpanded);
     setFilterGroupOpen(null);
@@ -104,7 +104,8 @@ const QuickFilterReady = ({ groups }: QuickFilterReadyProps) => {
           <FiltersAppliedInfo activeFilters={calculateHiddenFiltersApplied()} />
           {isFilterExpanded && (
             <ToggleHideFilterPopover
-              allFilters={filterGroups}
+              allFilters={allFilterGroups}
+              setFilterOrder={setFilterOrder}
               setVisibleFilters={setVisibleFilterGroups}
               visibleFilters={visibleFilterGroups}
             />
diff --git a/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx b/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
index 63bee76d7..56c1ad261 100644
--- a/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
+++ b/packages/filter/src/lib/components/toggleHideFilterPopover/ToggleHideFilterPopover.tsx
@@ -7,11 +7,13 @@ import { StyledButton, StyledItemWrapper, StyledPopoverList } from './toggleHide
 interface ShowHideFilterButtonProps {
   allFilters: string[];
   visibleFilters: string[];
+  setFilterOrder: (val: string[]) => void;
   setVisibleFilters: (val: string[]) => void;
 }
 
 export const ToggleHideFilterPopover = ({
   setVisibleFilters,
+  setFilterOrder,
   visibleFilters,
   allFilters,
 }: ShowHideFilterButtonProps): JSX.Element => {
@@ -29,8 +31,10 @@ export const ToggleHideFilterPopover = ({
   };
   const DraggableHandleSelector = 'globalDraggableHandle';
 
-  const updateList = () =>
+  const updateList = () => {
     setVisibleFilters(listRef.current.map((s) => s.item).filter((s) => visibleFilters.includes(s)));
+    setFilterOrder(listRef.current.map((s) => s.item));
+  };
 
   return (
     <>