From 474020a638bba55dc6e85c36e8cce4f2a5d59ff8 Mon Sep 17 00:00:00 2001
From: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:23:08 +0100
Subject: [PATCH] Fix Pamel filter alignment and checkboxes ids

---
 .../FilterPanel/CheckboxFilterControl.tsx     |  2 +-
 .../components/FilterPanel/FilterPanel.tsx    | 32 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/client/src/app/components/FilterPanel/CheckboxFilterControl.tsx b/client/src/app/components/FilterPanel/CheckboxFilterControl.tsx
index 4570c3c5..e9fcdead 100644
--- a/client/src/app/components/FilterPanel/CheckboxFilterControl.tsx
+++ b/client/src/app/components/FilterPanel/CheckboxFilterControl.tsx
@@ -59,7 +59,7 @@ export const CheckboxFilterControl = <TItem,>({
         return (
           <Checkbox
             key={index}
-            id={`checkbox-${index}`}
+            id={`checkbox-${index}-${category.categoryKey}`}
             isLabelWrapped
             label={label}
             isChecked={filterValue?.includes(value)}
diff --git a/client/src/app/components/FilterPanel/FilterPanel.tsx b/client/src/app/components/FilterPanel/FilterPanel.tsx
index a937661d..be5eaa85 100644
--- a/client/src/app/components/FilterPanel/FilterPanel.tsx
+++ b/client/src/app/components/FilterPanel/FilterPanel.tsx
@@ -8,12 +8,12 @@ import {
   TextContent,
 } from "@patternfly/react-core";
 
-import { FilterControl } from "./FilterControl";
 import {
   FilterCategory,
   FilterValue,
   IFilterValues,
 } from "../FilterToolbar/FilterToolbar";
+import { FilterControl } from "./FilterControl";
 
 export interface IFilterPanelProps<TItem, TFilterCategoryKey extends string> {
   filterCategories: FilterCategory<TItem, TFilterCategoryKey>[];
@@ -60,18 +60,18 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
             Clear all filters
           </Button>
         </StackItem>
-        <StackItem>
-          {filterCategories
-            .filter((filterCategory) => {
-              return (
-                omitFilterCategoryKeys.find(
-                  (categoryKey) => categoryKey === filterCategory.categoryKey
-                ) === undefined
-              );
-            })
-            .map((category) => {
-              return (
-                <Stack key={category.categoryKey} hasGutter>
+        {filterCategories
+          .filter((filterCategory) => {
+            return (
+              omitFilterCategoryKeys.find(
+                (categoryKey) => categoryKey === filterCategory.categoryKey
+              ) === undefined
+            );
+          })
+          .map((category) => {
+            return (
+              <StackItem key={category.categoryKey}>
+                <Stack hasGutter>
                   <StackItem>
                     <TextContent>
                       <Text component="h4">{category.title}</Text>
@@ -89,9 +89,9 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
                     />
                   </StackItem>
                 </Stack>
-              );
-            })}
-        </StackItem>
+              </StackItem>
+            );
+          })}
       </Stack>
     </>
   );