feat: add filters and sorting functionality to the team table

Author: bra-i-am

src/authz-module/libraries-manager/components/MultipleChoiceFilter.tsx

@@ -0,0 +1,65 @@
+import { FC } from 'react';
+import {
+  Dropdown, Form, Icon, Stack,
+} from '@openedx/paragon';
+import { FilterList } from '@openedx/paragon/icons';
+
+interface MultipleChoiceFilterProps {
+  Header: string;
+  filterChoices: Array<{ name: string; number: number; value: string }>;
+  filterValue: string[] | undefined;
+  setFilter: (value: string[]) => void;
+}
+
+const MultipleChoiceFilter: FC<MultipleChoiceFilterProps> = ({
+  Header, filterChoices, filterValue, setFilter,
+}) => {
+  const checkedBoxes = filterValue || [];
+
+  const changeCheckbox = (value) => {
+    if (checkedBoxes.includes(value)) {
+      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);
+      return setFilter(newCheckedBoxes);
+    }
+    checkedBoxes.push(value);
+    return setFilter(checkedBoxes);
+  };
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="outline-primary">
+        <Stack direction="horizontal" gap={2}>
+          <Icon color="primary" src={FilterList} />
+          {Header}
+        </Stack>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Form.CheckboxSet
+          className="pgn__dropdown-filter-checkbox-group"
+          name={Header}
+          aria-label={Header}
+          value={checkedBoxes}
+        >
+          {filterChoices.map(({
+            name, number, value,
+          }) => (
+            <Form.Checkbox
+              className="m-2"
+              key={name}
+              value={name}
+              onChange={() => changeCheckbox(value)}
+              aria-label={name}
+            >
+              <Stack direction="horizontal" gap={2}>
+                {`${name} (${number || 0})`}
+              </Stack>
+            </Form.Checkbox>
+          ))}
+        </Form.CheckboxSet>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default MultipleChoiceFilter;

src/authz-module/libraries-manager/components/SearchFilter.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import {
+  Form,
+  Icon,
+} from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
+interface SearchFilterProps {
+  filterValue: string[];
+  setFilter: (value: string[]) => void;
+  placeholder: string;
+}
+
+const SearchFilter: FC<SearchFilterProps> = ({
+  filterValue, setFilter, placeholder,
+}) => (
+  <Form.Control
+    className="mw-xs mr-0"
+    trailingElement={<Icon src={Search} />}
+    value={filterValue || ''}
+    type="text"
+    onChange={e => {
+      setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+    }}
+    placeholder={placeholder}
+  />
+);
+
+export default SearchFilter;

src/authz-module/libraries-manager/components/SortDropdown.tsx

@@ -0,0 +1,107 @@
+import {
+  useContext, useState, useMemo, useCallback,
+  useEffect,
+  FC,
+} from 'react';
+import {
+  DataTableContext,
+  Dropdown,
+  Icon,
+  Stack,
+} from '@openedx/paragon';
+import { SwapVert } from '@openedx/paragon/icons';
+
+interface SortOption {
+  id: string;
+  desc: boolean;
+  label: string;
+}
+
+interface SortByOptions {
+  [key: string]: Omit<SortOption, 'label'>;
+}
+
+const SORT_BY_OPTIONS: SortByOptions = {
+  'name-a-z': { id: 'username', desc: false },
+  'name-z-a': { id: 'username', desc: true },
+  newest: { id: 'createdAt', desc: true },
+  oldest: { id: 'createdAt', desc: false },
+};
+
+const SORT_LABELS: Record<string, string> = {
+  'name-a-z': 'Name A-Z',
+  'name-z-a': 'Name Z-A',
+  newest: 'Newest',
+  oldest: 'Oldest',
+};
+
+const SortDropdown: FC = () => {
+  const { toggleSortBy, state } = useContext<DataTableContext>(DataTableContext);
+  const [sortOrder, setSortOrder] = useState<string | undefined>(undefined);
+
+  // Get current sort state from DataTable context
+  const currentSort = useMemo(() => {
+    if (!state?.sortBy?.length) { return undefined; }
+
+    const activeSortBy = state.sortBy[0];
+    return Object.entries(SORT_BY_OPTIONS).find(
+      ([, option]) => option.id === activeSortBy.id && option.desc === activeSortBy.desc,
+    )?.[0];
+  }, [state?.sortBy]);
+
+  // Update local state when external sort changes
+  useEffect(() => {
+    setSortOrder(currentSort);
+  }, [currentSort]);
+
+  const handleChangeSortBy = useCallback((newSortOrder: string) => {
+    if (!SORT_BY_OPTIONS[newSortOrder]) {
+      console.warn(`Invalid sort option: ${newSortOrder}`);
+      return;
+    }
+
+    setSortOrder(newSortOrder);
+    const { id, desc } = SORT_BY_OPTIONS[newSortOrder];
+    toggleSortBy(id, desc);
+  }, [toggleSortBy]);
+
+  const sortOptions = useMemo(
+    () => Object.entries(SORT_BY_OPTIONS).map(([key, option]) => ({
+      key,
+      ...option,
+      label: SORT_LABELS[key],
+    })),
+    [],
+  );
+
+  const currentSortLabel = sortOrder ? SORT_LABELS[sortOrder] : 'Sort';
+
+  return (
+    <Dropdown onSelect={handleChangeSortBy}>
+      <Dropdown.Toggle
+        variant="outline-primary"
+        aria-label={`Sort options. Currently sorted by: ${currentSortLabel}`}
+      >
+        <Stack direction="horizontal" gap={2}>
+          <Icon color="primary" src={SwapVert} />
+          {currentSortLabel}
+        </Stack>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {sortOptions.map(({ key, label }) => (
+          <Dropdown.Item
+            key={key}
+            active={sortOrder === key}
+            eventKey={key}
+            aria-label={`Sort by ${label}`}
+          >
+            {label}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default SortDropdown;

src/authz-module/libraries-manager/components/TableControlBar.tsx

@@ -0,0 +1,59 @@
+import { useContext } from 'react';
+import {
+  breakpoints,
+  DataTable, DataTableContext,
+  CheckboxFilter,
+  Stack,
+  TextFilter,
+  useWindowSize,
+} from '@openedx/paragon';
+
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+import SortDropdown from './SortDropdown';
+import SearchFilter from './SearchFilter';
+
+const TableControlBar = () => {
+  const {
+    columns,
+  } = useContext<DataTableContext>(DataTableContext);
+
+  const availableFilters = columns.filter((column) => column.canFilter);
+
+  const columnTextFilterHeaders = columns
+    .filter((column) => column.Filter === TextFilter)
+    .map((column) => column.Header);
+
+  const isSmallScreen = useWindowSize().width! < breakpoints.medium.minWidth!;
+
+  return (
+    <div className="pgn__data-table-status-bar">
+      <Stack className="mb-3" direction={isSmallScreen ? 'vertical' : 'horizontal'} gap={3}>
+
+        {availableFilters.map((column) => {
+          if (column.Filter === CheckboxFilter) {
+            return <MultipleChoiceFilter {...column} />;
+          }
+
+          if (column.Filter === TextFilter) {
+            return (
+              <SearchFilter
+                filterValue={column.filterValue}
+                setFilter={column.setFilter}
+                placeholder={`Search by ${columnTextFilterHeaders.map((header) => header).join(' or ')}`}
+              />
+            );
+          }
+
+          return null;
+        })}
+
+        <SortDropdown />
+      </Stack>
+
+      <DataTable.RowStatus />
+      <DataTable.BulkActions />
+    </div>
+  );
+};
+
+export default TableControlBar;

src/authz-module/libraries-manager/components/TeamTable.tsx

@@ -2,13 +2,16 @@ import { useNavigate } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   DataTable, Button, Chip, Skeleton,
+  TextFilter,
+  CheckboxFilter,
 } from '@openedx/paragon';
 import { Edit } from '@openedx/paragon/icons';
 import { TableCellValue, TeamMember } from '@src/types';
 import { ROUTES } from '@src/authz-module/constants';
 import { useTeamMembers } from '@src/authz-module/data/hooks';
 import { useLibraryAuthZ } from '../context';
 import messages from './messages';
+import TableControlBar from './TableControlBar';
 
 const SKELETON_ROWS = Array.from({ length: 10 }).map(() => ({
   username: 'skeleton',
@@ -65,9 +68,38 @@ const TeamTable = () => {
 
   const navigate = useNavigate();
 
+  const reducedChoices = teamMembers?.reduce((acc, currentObject) => {
+    const { roles } = currentObject;
+    roles.forEach((role) => {
+      if (role in acc) {
+        acc[role].number += 1;
+      } else {
+        acc[role] = {
+          name: role,
+          number: 1,
+          value: role,
+        };
+      }
+    });
+    return acc;
+  }, {}) ?? {};
+
+  const handleFetchData = (querySettings) => {
+    console.log('Filters', querySettings.filters);
+    console.log('Sorting', querySettings.sortBy);
+  };
+
   return (
     <DataTable
       isPaginated
+      isFilterable
+      defaultColumnValues={{ Filter: TextFilter }}
+      numBreakoutFilters={3}
+      manualFilters
+      manualPagination
+      isSortable
+      manualSortBy
+      fetchData={handleFetchData}
       data={rows}
       itemCount={rows?.length}
       additionalColumns={[
@@ -91,27 +123,44 @@ const TeamTable = () => {
       ]}
       initialState={{
         pageSize: 10,
+        hiddenColumns: ['createdAt'],
       }}
       columns={
         [
           {
             Header: intl.formatMessage(messages['library.authz.team.table.username']),
             accessor: 'username',
             Cell: NameCell,
+            disableSortBy: true,
           },
           {
             Header: intl.formatMessage(messages['library.authz.team.table.email']),
             accessor: 'email',
             Cell: EmailCell,
+            disableFilters: true,
+            disableSortBy: true,
           },
           {
             Header: intl.formatMessage(messages['library.authz.team.table.roles']),
             accessor: 'roles',
             Cell: RolesCell,
+            Filter: CheckboxFilter,
+            filter: 'includesValue',
+            filterChoices: Object.values(reducedChoices),
+            disableSortBy: true,
+          },
+          {
+            accessor: 'createdAt',
+            Filter: false,
+            disableFilters: true,
+            disableSortBy: true,
           },
         ]
       }
-    />
+    >
+      <TableControlBar />
+      <DataTable.Table />
+    </DataTable>
   );
 };
 

src/types.ts

@@ -13,6 +13,7 @@ export interface TeamMember {
   fullName: string;
   email: string;
   roles: string[];
+  createdAt: string;
 }
 
 export interface LibraryMetadata {