diff --git a/package.json b/package.json index a9ef6921e..1f2c0c9a0 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "sass": "^1.79.0", "styled-components": "^5.3.6", "swr": "^1.3.0", - "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.27", + "tc-auth-lib": "topcoder-platform/tc-auth-lib#master", "tinymce": "^7.9.1", "typescript": "^4.8.4", "universal-navigation": "https://github.com/topcoder-platform/universal-navigation#9fc50d938be7182", diff --git a/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.module.scss b/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.module.scss index 7862fdfea..74914a33d 100644 --- a/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.module.scss +++ b/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.module.scss @@ -19,10 +19,29 @@ text-align: center; } -.btnNewGroup { - margin: $sp-8 $sp-8 $sp-4 $sp-8; +.actions { + display: flex; + align-items: flex-end; + gap: $sp-4; + margin: $sp-8 $sp-8 $sp-4; @include ltelg { + flex-direction: column; + align-items: stretch; margin: $sp-4; + gap: $sp-3; + } +} + +.searchField { + flex: 1; +} + +.btnNewGroup { + margin: 0; + min-width: max-content; + + @include ltelg { + width: 100%; } } diff --git a/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.tsx b/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.tsx index fb94e452a..c0b8b9860 100644 --- a/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.tsx +++ b/src/apps/admin/src/permission-management/PermissionGroupsPage/PermissionGroupsPage.tsx @@ -1,10 +1,10 @@ /** * Permission groups page. */ -import { FC, useContext, useState } from 'react' +import { ChangeEvent, FC, useContext, useMemo, useState } from 'react' import classNames from 'classnames' -import { Button, LoadingSpinner, PageTitle } from '~/libs/ui' +import { Button, InputText, LoadingSpinner, PageTitle } from '~/libs/ui' import { PlusIcon } from '@heroicons/react/solid' import { DialogAddGroup } from '../../lib/components/DialogAddGroup' @@ -24,6 +24,7 @@ const pageTitle = 'Groups' export const PermissionGroupsPage: FC = (props: Props) => { const [openDialogAddGroup, setOpenDialogAddGroup] = useState(false) + const [searchTerm, setSearchTerm] = useState('') const { loadUser, cancelLoadUser, usersMapping }: AdminAppContextType = useContext(AdminAppContext) const { @@ -37,6 +38,26 @@ export const PermissionGroupsPage: FC = (props: Props) => { usersMapping, ) + const filteredGroups = useMemo(() => { + const normalized = searchTerm + .trim() + .toLowerCase() + if (!normalized) { + return groups + } + + return groups.filter(group => { + const id = group.id ? group.id.toLowerCase() : '' + const name = group.name ? group.name.toLowerCase() : '' + + return id.includes(normalized) || name.includes(normalized) + }) + }, [groups, searchTerm]) + const hasSearchTerm = useMemo( + () => searchTerm.trim().length > 0, + [searchTerm], + ) + return (
{pageTitle} @@ -51,24 +72,40 @@ export const PermissionGroupsPage: FC = (props: Props) => {
) : ( <> -