Fix Pamel filter alignment and checkboxes ids

trustification · Oct 29, 2024 · 474020a · 474020a
1 parent b34a57a
commit 474020a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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>
     </>
   );