feat: creating the team members tab with the new ui

Author: jacobo-dominguez-wgu

src/authz-module/authz-home/index.tsx

@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import TeamMembersTable from 'authz-module/team-members/TeamMembersTable';
+import AddRoleButton from '@src/authz-module/components/AddRoleButton';
 import RolesPermissions from '../roles-permissions/RolesPermissions';
 import AuthZLayout from '../components/AuthZLayout';
 
@@ -9,6 +11,8 @@ import messages from '../libraries-manager/messages';
 const AuthzHome = () => {
   const { hash } = useLocation();
   const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const presetScope = searchParams.get('scope') || undefined;
 
   const rootBreadcrumb = intl.formatMessage(messages['library.authz.breadcrumb.root']) || '';
   const pageTitle = intl.formatMessage(messages['library.authz.manage.page.title']);
@@ -22,11 +26,7 @@ const AuthzHome = () => {
         pageTitle={pageTitle}
         pageSubtitle=""
         actions={
-          []
-          // this needs to be enable again once is refactored to be used outside of library context
-          // [
-          //   <AddNewTeamMemberTrigger libraryId="" key="add-new-member" />,
-          // ]
+          [<AddRoleButton key="add-role-button" />]
         }
       >
         <Tabs
@@ -35,8 +35,7 @@ const AuthzHome = () => {
           className="bg-light-100 px-5"
         >
           <Tab eventKey="team" title={intl.formatMessage(messages['library.authz.tabs.team'])} className="p-5">
-            {/* TODO: once TeamTable is refactored we can call it here. For now, this tab will be empty. */}
-            {/* <TeamTable /> */}
+            <TeamMembersTable presetScope={presetScope} />
           </Tab>
           <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['library.authz.tabs.permissionsRoles'])}>
             <RolesPermissions />

src/authz-module/components/AddRoleButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+
+import baseMessages from '@src/authz-module/messages';
+import { useNavigate } from 'react-router-dom';
+
+interface AddRoleButtonProps {
+  presetUsername?: string;
+}
+
+const AddRoleButton = ({ presetUsername }: AddRoleButtonProps) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    const assignRolePath = `/authz/assign-role${presetUsername ? `?username=${presetUsername}` : ''}`;
+    navigate(assignRolePath);
+  };
+
+  return (
+    <Button
+      iconBefore={Plus}
+      onClick={handleClick}
+    >
+      {intl.formatMessage(baseMessages['authz.management.assign.role.title'])}
+    </Button>
+  );
+};
+
+export default AddRoleButton;

src/authz-module/components/AuthZLayout.tsx

@@ -14,9 +14,10 @@ interface AuthZLayoutProps extends AuthZTitleProps {
 const AuthZLayout = ({ children, context, ...props }: AuthZLayoutProps) => (
   <>
     <StudioHeader
-      number={context.id}
-      org={context.org}
-      title={context.title}
+      number={context?.id || null}
+      org={context?.org || null}
+      title={context?.title || null}
+      isHiddenMainMenu
     />
     <AuthZTitle {...props} />
     {children}

src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx

@@ -0,0 +1,127 @@
+import {
+  Dropdown, Form, Icon, Stack,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { FilterList, Search } from '@openedx/paragon/icons';
+import { useState } from 'react';
+import messages from '../messages';
+import { MultipleChoiceFilterProps } from './types';
+
+const MultipleChoiceFilter = ({
+  filterButtonText,
+  filterChoices,
+  filterValue,
+  setFilter,
+  isGrouped = false,
+  isSearchable = false,
+  onSearchChange,
+  iconSrc,
+  disabled = false,
+}: MultipleChoiceFilterProps) => {
+  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
+  const { formatMessage } = useIntl();
+  const checkedBoxes = filterValue || [];
+  const handleClickCheckbox = (value) => {
+    const newValue = {
+      groupName: filterButtonText?.toLocaleLowerCase() || '',
+      value,
+      displayName: value,
+    };
+    if (checkedBoxes.includes(value)) {
+      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);
+      return setFilter(newCheckedBoxes, newValue);
+    }
+    checkedBoxes.push(value);
+    return setFilter(checkedBoxes, newValue);
+  };
+
+  const getGroupedChoices = () => {
+    const groupedFilterChoices = filterChoices.reduce((groups, choice) => {
+      const groupName = choice.groupName || 'Ungrouped';
+      const icon = choice.groupIcon || undefined;
+      if (!groups.has(groupName)) {
+        groups.set(groupName, { groupName, options: [], icon });
+      }
+      groups.get(groupName)!.options.push({
+        displayName: choice.displayName,
+        value: choice.value,
+      });
+      return groups;
+    }, new Map<string, { groupName: string; options: Array<{ displayName: string; value: string }>; icon?: any }>());
+    return Array.from(groupedFilterChoices.values());
+  };
+  return (
+    <Dropdown className="no-caret-dropdown filters">
+      <Dropdown.Toggle variant={checkedBoxes.length > 0 ? 'primary' : 'outline-primary'}>
+        <Stack direction="horizontal" gap={2}>
+          {iconSrc && <Icon color="primary" src={iconSrc} />}
+          {filterButtonText}
+          {checkedBoxes.length > 0 && ` (${checkedBoxes.length})`}
+          <Icon color="primary" src={FilterList} />
+        </Stack>
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        {isSearchable && (
+        <Form.Control
+          className="m-1"
+          type="text"
+          trailingElement={<Icon src={Search} />}
+          placeholder={formatMessage(messages['authz.table.controlbar.search'])}
+          onChange={(e) => {
+            setSearchValue(e.target.value);
+            onSearchChange?.(e.target.value);
+          }}
+          value={searchValue}
+        />
+        )}
+        <Form.CheckboxSet
+          className="pgn__dropdown-filter-checkbox-group"
+          name={filterButtonText}
+          aria-label={filterButtonText}
+          value={checkedBoxes}
+        >
+          {/** TODO: Change for actual values  */}
+          <span className="small text-info-700 mt-2">{formatMessage(messages['authz.table.controlbar.filters.items.showing'], { current: filterChoices.length, total: filterChoices.length })}</span>
+          {!isGrouped ? filterChoices.map(({
+            displayName, value,
+          }) => (
+            <Form.Checkbox
+              className="m-2"
+              key={displayName}
+              checked={checkedBoxes.includes(value)}
+              value={value}
+              onChange={() => handleClickCheckbox(value)}
+              aria-label={displayName}
+              disabled={checkedBoxes.includes(value) ? false : disabled}
+            >
+              <span className="small">{displayName}</span>
+            </Form.Checkbox>
+          ))
+            : getGroupedChoices().map(({ groupName, icon, options }) => (
+              <div key={groupName}>
+                <div className="pgn__dropdown-filter-group-name text-info-700 d-flex align-items-center small m-2 ml-0">
+                  {icon && <Icon color="primary" src={icon} className="mr-2" size="xs" />}
+                  <span>{groupName}</span>
+                </div>
+                {options.map(({ displayName, value }) => (
+                  <Form.Checkbox
+                    className="m-2"
+                    key={displayName}
+                    value={value}
+                    onChange={() => handleClickCheckbox(value)}
+                    disabled={checkedBoxes.includes(value) ? false : disabled}
+                    aria-label={displayName}
+                  >
+                    <span className="small">{displayName}</span>
+                  </Form.Checkbox>
+                ))}
+              </div>
+            ))}
+        </Form.CheckboxSet>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default MultipleChoiceFilter;

src/authz-module/components/TableControlBar/OrgFilter.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { Business } from '@openedx/paragon/icons';
+import { useOrgs } from '@src/authz-module/data/hooks';
+import { MultipleChoiceFilterProps } from './types';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+
+type OrgFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const OrgFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: OrgFilterProps) => {
+  const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined);
+  const { data: orgsData = { orgs: [] } } = useOrgs(searchValue);
+
+  const filterChoices = useMemo(() => orgsData.orgs.map((org) => ({
+    displayName: org.name,
+    value: org.id,
+  })), [orgsData]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={filterChoices}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isSearchable
+      onSearchChange={handleSearchChange}
+      iconSrc={Business}
+      disabled={disabled}
+    />
+  );
+};
+
+export default OrgFilter;

src/authz-module/components/TableControlBar/RolesFilter.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import {
+  Person, Language, School, LibraryBooks,
+} from '@openedx/paragon/icons';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+import { MultipleChoiceFilterProps } from './types';
+
+type RolesFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const RolesFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: RolesFilterProps) => {
+  // TODO: use a constant
+  const filterChoices = useMemo(() => [
+    {
+      groupName: 'Global', groupIcon: Language, displayName: 'Super Admin', value: 'Super Admin',
+    },
+    {
+      groupName: 'Global', groupIcon: Language, displayName: 'Global Staff', value: 'Global Staff',
+    },
+
+    {
+      groupName: 'Course', groupIcon: School, displayName: 'Course Admin', value: 'Course Admin',
+    },
+    {
+      groupName: 'Course', groupIcon: School, displayName: 'Course Staff', value: 'Course Staff',
+    },
+    {
+      groupName: 'Course', groupIcon: School, displayName: 'Course Editor', value: 'Course Editor',
+    },
+    {
+      groupName: 'Course', groupIcon: School, displayName: 'Course Auditor', value: 'Course Auditor',
+    },
+
+    {
+      groupName: 'Library', groupIcon: LibraryBooks, displayName: 'Library Admin', value: 'Library Admin',
+    },
+    {
+      groupName: 'Library', groupIcon: LibraryBooks, displayName: 'Library Author', value: 'Library Author',
+    },
+    {
+      groupName: 'Library', groupIcon: LibraryBooks, displayName: 'Library Collaborator', value: 'Library Collaborator',
+    },
+    {
+      groupName: 'Library', groupIcon: LibraryBooks, displayName: 'Library User', value: 'Library User',
+    },
+  ], []);
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={filterChoices}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isGrouped
+      iconSrc={Person}
+      disabled={disabled}
+    />
+  );
+};
+
+export default RolesFilter;

src/authz-module/components/TableControlBar/ScopesFilter.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { LocationOn } from '@openedx/paragon/icons';
+import { useScopes } from '@src/authz-module/data/hooks';
+import { MultipleChoiceFilterProps } from './types';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+
+type ScopesFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+
+const ScopesFilter = ({
+  filterButtonText, filterValue, setFilter, disabled,
+}: ScopesFilterProps) => {
+  const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined);
+  const { data: scopesData = { scopes: [] } } = useScopes(searchValue);
+
+  const filterChoices = useMemo(() => scopesData.scopes.map((scope) => ({
+    displayName: scope.name,
+    value: scope.key,
+    groupName: scope.organization.name,
+  })), [scopesData]);
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <MultipleChoiceFilter
+      filterButtonText={filterButtonText}
+      filterChoices={filterChoices}
+      filterValue={filterValue}
+      setFilter={setFilter}
+      isSearchable
+      isGrouped
+      onSearchChange={handleSearchChange}
+      iconSrc={LocationOn}
+      disabled={disabled}
+    />
+  );
+};
+
+export default ScopesFilter;

src/authz-module/components/TableControlBar/SearchFilter.tsx

@@ -0,0 +1,30 @@
+import {
+  Form,
+  Icon,
+} from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
+interface SearchFilterProps {
+  filterValue: string;
+  setFilter: (value: string) => void;
+  placeholder: string;
+}
+
+const SearchFilter = ({
+  filterValue, setFilter, placeholder,
+}: SearchFilterProps) => (
+  <Form.Group className="m-0">
+    <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}
+    />
+  </Form.Group>
+);
+
+export default SearchFilter;