Hotfixes for minor issues

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%;
     }
 }

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: 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: 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 (
         <div className={classNames(styles.container, props.className)}>
             <PageTitle>{pageTitle}</PageTitle>
@@ -51,24 +72,40 @@ export const PermissionGroupsPage: FC<Props> = (props: Props) => {
                     </div>
                 ) : (
                     <>
-                        <Button
-                            primary
-                            size='lg'
-                            icon={PlusIcon}
-                            iconToLeft
-                            label='new group'
-                            onClick={function onClick() {
-                                setOpenDialogAddGroup(true)
-                            }}
-                            className={styles.btnNewGroup}
-                        />
-                        {groups.length === 0 ? (
+                        <div className={styles.actions}>
+                            <InputText
+                                name='groupSearch'
+                                type='text'
+                                label='Search groups'
+                                placeholder='Search by name or ID'
+                                value={searchTerm}
+                                onChange={function onChange(event: ChangeEvent<HTMLInputElement>) {
+                                    setSearchTerm(event.target.value)
+                                }}
+                                forceUpdateValue
+                                classNameWrapper={styles.searchField}
+                            />
+                            <Button
+                                primary
+                                size='lg'
+                                icon={PlusIcon}
+                                iconToLeft
+                                label='new group'
+                                onClick={function onClick() {
+                                    setOpenDialogAddGroup(true)
+                                }}
+                                className={styles.btnNewGroup}
+                            />
+                        </div>
+                        {filteredGroups.length === 0 ? (
                             <p className={styles.noRecordFound}>
-                                {MSG_NO_RECORD_FOUND}
+                                {hasSearchTerm
+                                    ? 'No groups match your search.'
+                                    : MSG_NO_RECORD_FOUND}
                             </p>
                         ) : (
                             <GroupsTable
-                                datas={groups}
+                                datas={filteredGroups}
                                 usersMapping={usersMapping}
                             />
                         )}