Custom page size and saved zoom level (#1636)

* Allow custom page sizes
* Save zoom level in filters

ui/v2.5/src/hooks/ListHook.tsx

@@ -124,7 +124,6 @@ interface IListHookOptions<T, E> {
     result: T,
     filter: ListFilterModel,
     selectedIds: Set<string>,
-    zoomIndex: number,
     onChangePage: (page: number) => void,
     pageCount: number
   ) => React.ReactNode;
@@ -170,7 +169,6 @@ const RenderList = <
   QueryResult extends IQueryResult,
   QueryData extends IDataItem
 >({
-  defaultZoomIndex,
   filter,
   filterOptions,
   onChangePage,
@@ -194,7 +192,6 @@ const RenderList = <
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [lastClickedId, setLastClickedId] = useState<string | undefined>();
-  const [zoomIndex, setZoomIndex] = useState<number>(defaultZoomIndex ?? 1);
 
   const [editingCriterion, setEditingCriterion] = useState<
     Criterion<CriterionValue> | undefined
@@ -334,7 +331,9 @@ const RenderList = <
   }
 
   function onChangeZoom(newZoomIndex: number) {
-    setZoomIndex(newZoomIndex);
+    const newFilter = _.cloneDeep(filter);
+    newFilter.zoomIndex = newZoomIndex;
+    updateQueryParams(newFilter);
   }
 
   async function onOperationClicked(o: IListHookOperation<QueryResult>) {
@@ -405,14 +404,7 @@ const RenderList = <
     return (
       <>
         {renderPagination()}
-        {renderContent(
-          result,
-          filter,
-          selectedIds,
-          zoomIndex,
-          onChangePage,
-          pages
-        )}
+        {renderContent(result, filter, selectedIds, onChangePage, pages)}
         <PaginationIndex
           itemsPerPage={filter.itemsPerPage}
           currentPage={filter.currentPage}
@@ -501,7 +493,7 @@ const RenderList = <
           displayMode={filter.displayMode}
           displayModeOptions={filterOptions.displayModeOptions}
           onSetDisplayMode={onChangeDisplayMode}
-          zoomIndex={zoomable ? zoomIndex : undefined}
+          zoomIndex={zoomable ? filter.zoomIndex : undefined}
           onSetZoom={zoomable ? onChangeZoom : undefined}
         />
       </ButtonToolbar>
@@ -566,7 +558,8 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
       options.filterMode,
       queryString.parse(location.search),
       defaultSort,
-      defaultDisplayMode
+      defaultDisplayMode,
+      options.defaultZoomIndex
     )
   );