Topcoder Admin App - Permission Management

src/apps/admin/src/AdminApp.tsx

@@ -3,7 +3,7 @@ import { Outlet, Routes } from 'react-router-dom'
 
 import { routerContext, RouterContextData } from '~/libs/core'
 
-import { Layout, SWRConfigProvider } from './lib'
+import { AdminAppContextProvider, Layout, SWRConfigProvider } from './lib'
 import { toolTitle } from './admin-app.routes'
 import './lib/styles/index.scss'
 
@@ -24,12 +24,14 @@ const AdminApp: FC = () => {
 
     return (
         <div>
-            <SWRConfigProvider>
-                <Layout>
-                    <Outlet />
-                    <Routes>{childRoutes}</Routes>
-                </Layout>
-            </SWRConfigProvider>
+            <AdminAppContextProvider>
+                <SWRConfigProvider>
+                    <Layout>
+                        <Outlet />
+                        <Routes>{childRoutes}</Routes>
+                    </Layout>
+                </SWRConfigProvider>
+            </AdminAppContextProvider>
         </div>
     )
 }

src/apps/admin/src/admin-app.routes.tsx

@@ -10,6 +10,7 @@ import {
 import {
     manageChallengeRouteId,
     manageReviewRouteId,
+    permissionManagementRouteId,
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
@@ -42,6 +43,33 @@ const ManageReviewerPage: LazyLoadedComponent = lazyLoad(
     () => import('./review-management/ManageReviewerPage'),
     'ManageReviewerPage',
 )
+const PermissionManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionManagement'),
+)
+const PermissionRolesPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionRolesPage'),
+    'PermissionRolesPage',
+)
+const PermissionRoleMembersPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionRoleMembersPage'),
+    'PermissionRoleMembersPage',
+)
+const PermissionAddRoleMembersPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionAddRoleMembersPage'),
+    'PermissionAddRoleMembersPage',
+)
+const PermissionGroupsPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionGroupsPage'),
+    'PermissionGroupsPage',
+)
+const PermissionGroupMembersPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionGroupMembersPage'),
+    'PermissionGroupMembersPage',
+)
+const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
+    () => import('./permission-management/PermissionAddGroupMembersPage'),
+    'PermissionAddGroupMembersPage',
+)
 
 export const toolTitle: string = ToolTitle.admin
 
@@ -96,6 +124,44 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: manageReviewRouteId,
                 route: manageReviewRouteId,
             },
+            // Permission Management Module
+            {
+                children: [
+                    {
+                        element: <PermissionRolesPage />,
+                        id: 'permission-roles-page',
+                        route: 'roles',
+                    },
+                    {
+                        element: <PermissionRoleMembersPage />,
+                        id: 'permission-role-members-page',
+                        route: 'roles/:roleId/role-members',
+                    },
+                    {
+                        element: <PermissionAddRoleMembersPage />,
+                        id: 'permission-add-role-members-page',
+                        route: 'roles/:roleId/role-members/add',
+                    },
+                    {
+                        element: <PermissionGroupsPage />,
+                        id: 'permission-groups-page',
+                        route: 'groups',
+                    },
+                    {
+                        element: <PermissionGroupMembersPage />,
+                        id: 'permission-group-members-page',
+                        route: 'groups/:groupId/group-members',
+                    },
+                    {
+                        element: <PermissionAddGroupMembersPage />,
+                        id: 'permission-add-group-members-page',
+                        route: 'groups/:groupId/group-members/add',
+                    },
+                ],
+                element: <PermissionManagement />,
+                id: permissionManagementRouteId,
+                route: permissionManagementRouteId,
+            },
         ],
         domain: AppSubdomain.admin,
         element: <AdminApp />,

src/apps/admin/src/config/routes.config.ts

@@ -11,3 +11,4 @@ export const rootRoute: string
 export const manageChallengeRouteId = 'challenge-management'
 export const manageReviewRouteId = 'review-management'
 export const userManagementRouteId = 'user-management'
+export const permissionManagementRouteId = 'permission-management'

src/apps/admin/src/lib/components/DialogAddGroup/DialogAddGroup.module.scss

@@ -0,0 +1,33 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    position: relative;
+}
+
+.actionButtons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.blockRadios {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.dialogLoadingSpinnerContainer {
+    position: absolute;
+    width: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 0;
+    height: 64px;
+    left: 0;
+
+    .spinner {
+        background: none;
+    }
+}

src/apps/admin/src/lib/components/DialogAddGroup/DialogAddGroup.tsx

@@ -0,0 +1,179 @@
+/**
+ * Dialog add group.
+ */
+import { FC, useCallback } from 'react'
+import {
+    Controller,
+    ControllerRenderProps,
+    useForm,
+    UseFormReturn,
+} from 'react-hook-form'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+import {
+    BaseModal,
+    Button,
+    InputCheckbox,
+    InputText,
+    InputTextarea,
+    LoadingSpinner,
+} from '~/libs/ui'
+import { yupResolver } from '@hookform/resolvers/yup'
+
+import { FormAddGroup } from '../../models'
+import { formAddGroupSchema } from '../../utils'
+
+import styles from './DialogAddGroup.module.scss'
+
+interface Props {
+    className?: string
+    open: boolean
+    setOpen: (isOpen: boolean) => void
+    onSubmitForm?: (filter: FormAddGroup) => void
+    isLoading?: boolean
+}
+
+export const DialogAddGroup: FC<Props> = (props: Props) => {
+    const handleClose = useCallback(() => {
+        if (!props.isLoading) {
+            props.setOpen(false)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.isLoading])
+    const {
+        register,
+        handleSubmit,
+        control,
+        formState: { errors, isValid },
+    }: UseFormReturn<FormAddGroup> = useForm({
+        defaultValues: {
+            description: '',
+            name: '',
+            privateGroup: false,
+            selfRegister: false,
+        },
+        mode: 'all',
+        resolver: yupResolver(formAddGroupSchema),
+    })
+    const onSubmit = useCallback(
+        (data: FormAddGroup) => {
+            props.onSubmitForm?.(data)
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.onSubmitForm],
+    )
+
+    return (
+        <BaseModal
+            allowBodyScroll
+            blockScroll
+            focusTrapped={false}
+            title='Add Group'
+            onClose={handleClose}
+            open={props.open}
+            classNames={{
+                modal: classNames(styles.modal),
+            }}
+        >
+            <form
+                className={classNames(styles.container, props.className)}
+                onSubmit={handleSubmit(onSubmit)}
+            >
+                <div>
+                    <InputText
+                        type='text'
+                        name='name'
+                        label='Name'
+                        placeholder='Enter'
+                        tabIndex={0}
+                        forceUpdateValue
+                        onChange={_.noop}
+                        error={_.get(errors, 'name.message')}
+                        inputControl={register('name')}
+                        dirty
+                        disabled={props.isLoading}
+                    />
+                    <InputTextarea
+                        name='description'
+                        label='Description'
+                        placeholder='Enter'
+                        tabIndex={0}
+                        onChange={_.noop}
+                        inputControl={register('description')}
+                        dirty
+                        disabled={props.isLoading}
+                    />
+                    <div className={styles.blockRadios}>
+                        <Controller
+                            name='privateGroup'
+                            control={control}
+                            render={function render(controlProps: {
+                                field: ControllerRenderProps<
+                                    FormAddGroup,
+                                    'privateGroup'
+                                >
+                            }) {
+                                return (
+                                    <InputCheckbox
+                                        name='privateGroup'
+                                        label='Private Group'
+                                        onChange={controlProps.field.onChange}
+                                        checked={controlProps.field.value}
+                                        disabled={props.isLoading}
+                                    />
+                                )
+                            }}
+                        />
+                        <Controller
+                            name='selfRegister'
+                            control={control}
+                            render={function render(controlProps: {
+                                field: ControllerRenderProps<
+                                    FormAddGroup,
+                                    'selfRegister'
+                                >
+                            }) {
+                                return (
+                                    <InputCheckbox
+                                        name='selfRegister'
+                                        label='Self Register'
+                                        onChange={controlProps.field.onChange}
+                                        checked={controlProps.field.value}
+                                        disabled={props.isLoading}
+                                    />
+                                )
+                            }}
+                        />
+                    </div>
+                </div>
+                <div className={styles.actionButtons}>
+                    <Button
+                        secondary
+                        size='lg'
+                        onClick={handleClose}
+                        disabled={props.isLoading}
+                    >
+                        Close
+                    </Button>
+                    <Button
+                        type='submit'
+                        primary
+                        size='lg'
+                        disabled={props.isLoading || !isValid}
+                    >
+                        Save
+                    </Button>
+                </div>
+
+                {props.isLoading && (
+                    <div className={styles.dialogLoadingSpinnerContainer}>
+                        <LoadingSpinner className={styles.spinner} />
+                    </div>
+                )}
+            </form>
+        </BaseModal>
+    )
+}
+
+export default DialogAddGroup

src/apps/admin/src/lib/components/DialogAddGroup/index.ts

@@ -0,0 +1 @@
+export { default as DialogAddGroup } from './DialogAddGroup'

src/apps/admin/src/lib/components/GroupMembersFilters/GroupMembersFilters.module.scss

@@ -0,0 +1,34 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: $sp-8 $sp-8 0;
+
+    @include ltelg {
+        padding: $sp-4 $sp-4 0;
+    }
+}
+
+.fields {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px 30px;
+
+    @include ltemd {
+        grid-template-columns: 1fr;
+    }
+}
+
+.blockBottom {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 30px;
+    flex-wrap: wrap;
+
+    @include ltemd {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}