Implement view filtering and saving.

- Refactor GroupList and GroupSubGroupsPanel components for consistency with general models.
- Removed unused defaultFilter from GroupList and GroupSubGroupsPanel.
- Simplified FilteredGroupList by eliminating unnecessary state variables.
- Fixed dropdown alignment issue in FilteredListToolbar by setting menuPortalTarget to document.body.

ui/v2.5/src/components/Groups/GroupDetails/GroupSubGroupsPanel.tsx

@@ -64,13 +64,6 @@ interface IGroupSubGroupsPanel {
   extraOperations?: IItemListOperation<GQL.FindGroupsQueryResult>[];
 }
 
-const defaultFilter = (() => {
-  return new ListFilterModel(GQL.FilterMode.Groups, undefined, {
-    defaultSortBy: "sub_group_description",
-    defaultSortDir: GQL.SortDirectionEnum.Asc,
-  });
-})();
-
 export const GroupSubGroupsPanel: React.FC<IGroupSubGroupsPanel> =
   PatchComponent(
     "GroupSubGroupsPanel",
@@ -155,7 +148,6 @@ export const GroupSubGroupsPanel: React.FC<IGroupSubGroupsPanel> =
         <>
           {modal}
           <FilteredGroupList
-            defaultFilter={defaultFilter}
             filterHook={filterHook}
             alterQuery={active}
             fromGroupId={group.id}

ui/v2.5/src/components/Groups/GroupList.tsx

@@ -147,7 +147,6 @@ const SidebarContent: React.FC<{
 
 interface IGroupListContext {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
-  defaultFilter?: ListFilterModel;
   view?: View;
   alterQuery?: boolean;
 }
@@ -210,12 +209,8 @@ export const FilteredGroupList = PatchComponent(
       onMove,
       fromGroupId,
       otherOperations: providedOperations = [],
-      defaultFilter,
     } = props;
 
-    const withSidebar = view !== View.GroupSubGroups;
-    const filterable = view !== View.GroupSubGroups;
-    const sortable = true;
 
     // States
     const {
@@ -230,7 +225,6 @@ export const FilteredGroupList = PatchComponent(
       useFilteredItemList({
         filterStateProps: {
           filterMode: GQL.FilterMode.Groups,
-          defaultFilter,
           view,
           useURL: alterQuery,
         },
@@ -402,8 +396,6 @@ export const FilteredGroupList = PatchComponent(
           operationComponent={operations}
           view={view}
           zoomable
-          filterable={filterable}
-          sortable={sortable}
         />
 
         <FilterTags
@@ -455,10 +447,6 @@ export const FilteredGroupList = PatchComponent(
       </>
     );
 
-    if (!withSidebar) {
-      return content;
-    }
-
     return (
       <div
         className={cx("item-list-container group-list", {

ui/v2.5/src/components/List/FilteredListToolbar.tsx

@@ -99,6 +99,10 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
   sortable = true,
 }) => {
   const filterOptions = filter.options;
+  // Something in the popper layout for groups.sub-groups tab to double calculates the offset
+  // causing the dropdown to be misaligned. Portal to document.body to fix this.
+  const menuPortalTarget =
+    typeof document !== "undefined" ? document.body : undefined;
   const { setDisplayMode, setZoom } = useFilterOperations({
     filter,
     setFilter,
@@ -142,6 +146,7 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
                 filter={filter}
                 onSetFilter={setFilter}
                 view={view}
+                menuPortalTarget={menuPortalTarget}
               />
               <FilterButton
                 onClick={() => showEditFilter()}