[UI] Mantine 9 (#11947)

* Update mantine deps

* Get it to compile

* Update QueryCount widgets

- use new RollingNumber component

* Table updates

- Remove "hack" for column ordering

* "Fix" the column pinning bug (maybe?)

* Fix ColumnRenderers.tsx

* Fix login code for playwright

* Remove hashing requirement

* Fix build tests

* More fixes

* More test fixes

* Fix playwright test for dashboard item

* Update frontend version

* Update changelog

* Reduce query repeats

* More playwright fixes

* Further playwright fixes

* Fix for useFilterSet hook

* Fix unique key error

* Fix rendering issues when opening edit forms

* reduce console errors

* Fix unique key issues in search drawer

* Update frontend CHANGELOG.md

* More form tweaks

---------

Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/lib/components/RowActions.tsx

@@ -139,8 +139,8 @@ export function RowActions({
               aria-label={`row-action-menu-${index ?? ''}`}
               onClick={openMenu}
               disabled={disabled}
-              variant='subtle'
-              color='gray'
+              variant='transparent'
+              size='sm'
             >
               <IconDots />
             </ActionIcon>

src/frontend/lib/hooks/UseFilterSet.tsx

@@ -1,5 +1,5 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { FilterSetState, TableFilter } from '../types/Filters';
 
 export default function useFilterSet(
@@ -16,15 +16,15 @@ export default function useFilterSet(
     getInitialValueInEffect: false
   });
 
-  const activeFilters: TableFilter[] = useMemo(() => {
+  useEffect(() => {
     if (storedFilters == null) {
-      // If there are no stored filters, set initial values
-      const filters = initialFilters || [];
-      setStoredFilters(filters);
-      return filters;
+      setStoredFilters(initialFilters || []);
     }
-    return storedFilters || [];
-  }, [storedFilters]);
+  }, [storedFilters, initialFilters, setStoredFilters]);
+
+  const activeFilters: TableFilter[] = useMemo(() => {
+    return storedFilters ?? initialFilters ?? [];
+  }, [storedFilters, initialFilters]);
 
   // Callback to clear all active filters from the table
   const clearActiveFilters = useCallback(() => {

src/frontend/lib/types/Tables.tsx

@@ -100,7 +100,7 @@ export type TableState = {
  */
 export type TableColumnProps<T = any> = {
   accessor?: string;
-  title?: string;
+  title?: string | ReactNode;
   ordering?: string;
   sortable?: boolean;
   switchable?: boolean;