Merge pull request #1016 from topcoder-platform/diazz-challenge-30376220

Winner of Challenge: Topcoder Admin App - User Management

Author: jmgasper

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
+    "@hookform/resolvers": "^4.1.2",
     "@popperjs/core": "^2.11.8",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "7.6.10",
@@ -71,6 +72,7 @@
     "react-elastic-carousel": "^0.11.5",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.54.2",
     "react-markdown": "8.0.6",
     "react-otp-input": "^3.1.1",
     "react-popper": "^2.3.0",
@@ -101,7 +103,8 @@
     "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.27",
     "typescript": "^4.8.4",
     "universal-navigation": "https://github.com/topcoder-platform/universal-navigation#9fc50d938be7182",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

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

@@ -1,4 +1,4 @@
-import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+import { AppSubdomain, ToolTitle } from '~/config'
 import {
     lazyLoad,
     LazyLoadedComponent,
@@ -7,6 +7,13 @@ import {
     UserRole,
 } from '~/libs/core'
 
+import {
+    manageChallengeRouteId,
+    manageReviewRouteId,
+    rootRoute,
+    userManagementRouteId,
+} from './config/routes.config'
+
 const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
 
 const ChallengeManagement: LazyLoadedComponent = lazyLoad(
@@ -20,7 +27,10 @@ const ManageUserPage: LazyLoadedComponent = lazyLoad(
     () => import('./challenge-management/ManageUserPage'),
     'ManageUserPage',
 )
-
+const UserManagementPage: LazyLoadedComponent = lazyLoad(
+    () => import('./user-management/UserManagementPage'),
+    'UserManagementPage',
+)
 const ReviewManagement: LazyLoadedComponent = lazyLoad(
     () => import('./review-management/ReviewManagement'),
 )
@@ -34,13 +44,6 @@ const ManageReviewerPage: LazyLoadedComponent = lazyLoad(
 )
 
 export const toolTitle: string = ToolTitle.admin
-export const rootRoute: string
-    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
-        ? ''
-        : `/${AppSubdomain.admin}`
-
-export const manageChallengeRouteId = 'challenge-management'
-export const manageReviewRouteId = 'review-management'
 
 export const adminRoutes: ReadonlyArray<PlatformRoute> = [
     // Admin App Root
@@ -69,6 +72,12 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: manageChallengeRouteId,
                 route: manageChallengeRouteId,
             },
+            // User Management Module
+            {
+                element: <UserManagementPage />,
+                id: userManagementRouteId,
+                route: userManagementRouteId,
+            },
             // Reviewer Management Module
             {
                 children: [

src/apps/admin/src/challenge-management/ChallengeManagement.tsx

@@ -5,7 +5,8 @@ import { routerContext, RouterContextData } from '~/libs/core'
 
 import { Layout } from '../lib/components'
 import { ChallengeManagementContextProvider } from '../lib/contexts'
-import { adminRoutes, manageChallengeRouteId } from '../admin-app.routes'
+import { adminRoutes } from '../admin-app.routes'
+import { manageChallengeRouteId } from '../config/routes.config'
 
 /**
  * The router outlet with layout.

src/apps/admin/src/challenge-management/ManageUserPage/ManageUserPage.tsx

@@ -39,9 +39,9 @@ import {
     getChallengeByLegacyId,
     getChallengeResources,
 } from '../../lib/services'
-import { rootRoute } from '../../admin-app.routes'
 import { createChallengeQueryString, handleError } from '../../lib/utils'
 import { useEventCallback } from '../../lib/hooks'
+import { rootRoute } from '../../config/routes.config'
 
 import styles from './ManageUserPage.module.scss'
 

src/apps/admin/src/config/index.config.ts

@@ -0,0 +1,31 @@
+// eslint-disable-next-line max-len
+import { InputSelectOption } from '~/libs/ui/lib/components/form/form-groups/form-input/input-select-react/InputSelectReact'
+
+/**
+ * Common config for ui.
+ */
+const EMPTY_OPTION: InputSelectOption = { label: '', value: '' }
+export const USER_STATUS_SELECT_OPTIONS: InputSelectOption[] = [
+    EMPTY_OPTION,
+    { label: 'active', value: 'active' },
+    { label: 'inactive', value: 'inactive' },
+]
+export const USER_STATUS_DETAIL_SELECT_OPTIONS: InputSelectOption[] = [
+    { label: 'Verified', value: 'A' },
+    { label: 'Inactive - Duplicate account', value: '5' },
+    { label: 'Inactive - Member wanted account removed', value: '4' },
+    { label: 'Inactive - Deactivated for cheating', value: '6' },
+]
+export const DICT_USER_STATUS = {
+    4: 'Deactivated(User request)',
+    5: 'Deactivated(Duplicate account)',
+    6: 'Deactivated(Cheating account)',
+    A: 'Verified',
+    U: 'Unverified',
+}
+export const TABLE_DATE_FORMAT = 'MMM DD, YYYY HH:mm'
+export const TABLE_PAGINATION_ITEM_PER_PAGE = 25
+export const TABLE_USER_TEMRS_PAGINATION_ITEM_PER_PAGE = 10
+export const LABEL_EMAIL_STATUS_VERIFIED = 'Verified'
+export const LABEL_EMAIL_STATUS_UNVERIFIED = 'Unverified'
+export const MSG_NO_RECORD_FOUND = 'No record found.'

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

@@ -0,0 +1,13 @@
+/**
+ * Common config for routes in admin app.
+ */
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? ''
+        : `/${AppSubdomain.admin}`
+
+export const manageChallengeRouteId = 'challenge-management'
+export const manageReviewRouteId = 'review-management'
+export const userManagementRouteId = 'user-management'

src/apps/admin/src/index.ts

@@ -1 +1,2 @@
-export { adminRoutes, rootRoute as adminRootRoute } from './admin-app.routes'
+export { adminRoutes } from './admin-app.routes'
+export { rootRoute as adminRootRoute } from './config/routes.config'

src/apps/admin/src/lib/assets/i/rectangle-list-regular-icon.svg

@@ -0,0 +1,15 @@
+@import "@libs/ui/styles/includes";
+
+.copy-btn {
+    line-height: 0;
+
+    padding: $sp-3 $sp-4;
+    margin: 10;
+    background: none;
+    border: none;
+    border-radius: inherit;
+
+    &:active {
+        background-color: rgba(darken($blue-10, 25%), 0.25);
+    }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Copy button ui.
+ */
+import * as React from 'react'
+import { toast } from 'react-toastify'
+import classNames from 'classnames'
+
+import { Button, IconOutline, Tooltip } from '~/libs/ui'
+import { copyTextToClipboard } from '~/libs/shared'
+
+import styles from './CopyButton.module.scss'
+
+interface CopyButtonProps {
+    className?: string
+    text?: string
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = props => {
+    function handleCopyClick(): void {
+        copyTextToClipboard(props.text ?? '')
+            .then(() => {
+                toast.success('Copied', {
+                    toastId: 'CopyButton',
+                })
+            })
+    }
+
+    return (
+        <Tooltip content='Copy to clipboard'>
+            <Button
+                size='xl'
+                className={classNames(styles['copy-btn'], props.className)}
+                icon={IconOutline.DocumentDuplicateIcon}
+                onClick={handleCopyClick}
+            />
+        </Tooltip>
+    )
+}
+
+export default CopyButton

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

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

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

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