fix(FilterBar): Add missing onFiltersDialogSave event properties and fix manually controlled visibleInFilterBar prop (#682)

Author: Lukas742

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -224,11 +224,11 @@ export const FilterDialog = (props) => {
   }, [children, searchString, filterBarRefs]);
 
   const handleCheckBoxChange = useCallback(
-    (element, toggledFilters) => (e) => {
+    (element) => (e) => {
       if (handleSelectionChange) {
         handleSelectionChange(enrichEventWithDetails(e, { element, checked: e.target.checked }));
       }
-      setToggledFilters({ ...toggledFilters, [element.key]: e.target.checked });
+      setToggledFilters((old) => ({ ...old, [element.key]: e.target.checked }));
     },
     [setToggledFilters, handleSelectionChange]
   );
@@ -251,7 +251,7 @@ export const FilterDialog = (props) => {
               {el}
               <CheckBox
                 checked={el.props.visibleInFilterBar || el.props.required || el.type.displayName !== 'FilterGroupItem'}
-                onChange={handleCheckBoxChange(el, toggledFilters)}
+                onChange={handleCheckBoxChange(el)}
                 disabled={el.props.required || el.type.displayName !== 'FilterGroupItem'}
               />
             </div>
@@ -282,7 +282,7 @@ export const FilterDialog = (props) => {
         )}
         {renderGroups()}
       </div>
-    </Dialog>, 
+    </Dialog>,
     document.body
   );
 };

packages/main/src/components/FilterBar/index.tsx

@@ -131,19 +131,18 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   );
 
   useEffect(() => {
-    if (showFilterConfiguration) {
-      Children.toArray(children).forEach((item: ReactElement<any>) => {
-        if (
-          prevVisibleInFilterBarProps.current?.[item.key] !== undefined &&
-          prevVisibleInFilterBarProps.current?.[item.key] !== item.props.visibleInFilterBar
-        ) {
-          const updatedToggledFilters = toggledFilters;
-          delete updatedToggledFilters[item.key];
-          setToggledFilters(updatedToggledFilters);
+    Children.toArray(children).forEach((item: ReactElement<any>) => {
+      setToggledFilters((prev) => {
+        if (!item.props.hasOwnProperty('visibleInFilterBar') && prev?.[item.key] === undefined) {
+          return { ...prev, [item.key]: true };
         }
+        if (item.props.hasOwnProperty('visibleInFilterBar')) {
+          return { ...prev, [item.key]: item.props.visibleInFilterBar };
+        }
+        return prev;
       });
-    }
-  }, [children, prevVisibleInFilterBarProps, setToggledFilters, toggledFilters, showFilterConfiguration]);
+    });
+  }, [children, setToggledFilters]);
 
   useEffect(() => {
     setShowFilters(useToolbar ? filterBarExpanded : true);
@@ -171,9 +170,14 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   const handleDialogSave = useCallback(
     (e, newRefs, updatedToggledFilters) => {
       setDialogRefs(newRefs);
-      setToggledFilters({ ...toggledFilters, ...updatedToggledFilters });
+      setToggledFilters((old) => ({ ...old, ...updatedToggledFilters }));
       if (onFiltersDialogSave) {
-        onFiltersDialogSave(enrichEventWithDetails(e));
+        onFiltersDialogSave(
+          enrichEventWithDetails(e, {
+            elements: newRefs,
+            toggledElements: { ...toggledFilters, ...updatedToggledFilters }
+          })
+        );
       }
       handleDialogClose(e);
     },
@@ -215,7 +219,7 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   ]);
 
   const safeChildren = useCallback(() => {
-    if (showFilterConfiguration && Object.keys(toggledFilters).length > 0) {
+    if (Object.keys(toggledFilters).length > 0) {
       return Children.toArray(children).map((child: ReactElement) => {
         if (toggledFilters?.[child.key] !== undefined) {
           return cloneElement(child, {

packages/main/src/components/FilterGroupItem/index.tsx

@@ -86,7 +86,6 @@ FilterGroupItem.displayName = 'FilterGroupItem';
 FilterGroupItem.defaultProps = {
   groupName: 'default',
   visible: true,
-  visibleInFilterBar: true,
   required: false,
   label: ''
 };