Consolidate Skills Manager

Author: nqviet

src/apps/admin/src/AdminApp.tsx

@@ -3,7 +3,7 @@ import { Outlet, Routes } from 'react-router-dom'
 
 import { routerContext, RouterContextData } from '~/libs/core'
 
-import { AdminAppContextProvider, Layout, SWRConfigProvider } from './lib'
+import { AdminAppContextProvider, LayoutProps, SWRConfigProvider, useLayout } from './lib'
 import { toolTitle } from './admin-app.routes'
 import './lib/styles/index.scss'
 
@@ -14,6 +14,7 @@ const AdminApp: FC = () => {
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
     // eslint-disable-next-line react-hooks/exhaustive-deps -- missing dependency: getChildRoutes
     const childRoutes = useMemo(() => getChildRoutes(toolTitle), [])
+    const { Layout }: { Layout: FC<LayoutProps> } = useLayout()
 
     useEffect(() => {
         document.body.classList.add('admin-app')

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

@@ -12,9 +12,11 @@ import {
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
+    platformRouteId,
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
+import { platformSkillRouteId } from './platform-management/routes.config'
 
 const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
 
@@ -107,6 +109,17 @@ const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
     'PermissionAddGroupMembersPage',
 )
 
+const PlatformManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./platform-management/PlatformManagement'),
+)
+const SkillManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./platform-management/skill-management/SkillManagement'),
+)
+const SkillManagementLandingPage: LazyLoadedComponent = lazyLoad(
+    () => import('./platform-management/skill-management/LandingPage'),
+    'LandingPage',
+)
+
 export const toolTitle: string = ToolTitle.admin
 
 export const adminRoutes: ReadonlyArray<PlatformRoute> = [
@@ -256,6 +269,26 @@ export const adminRoutes: ReadonlyArray<PlatformRoute> = [
                 id: permissionManagementRouteId,
                 route: permissionManagementRouteId,
             },
+            // Platform Management Module
+            {
+                children: [
+                    {
+                        children: [
+                            {
+                                element: <SkillManagementLandingPage />,
+                                id: 'skills-landing-page',
+                                route: '',
+                            },
+                        ],
+                        element: <SkillManagement />,
+                        id: platformSkillRouteId,
+                        route: platformSkillRouteId,
+                    },
+                ],
+                element: <PlatformManagement />,
+                id: platformRouteId,
+                route: platformRouteId,
+            },
         ],
         domain: AppSubdomain.admin,
         element: <AdminApp />,

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

@@ -13,3 +13,4 @@ export const manageReviewRouteId = 'review-management'
 export const userManagementRouteId = 'user-management'
 export const billingAccountRouteId = 'billing-account'
 export const permissionManagementRouteId = 'permission-management'
+export const platformRouteId = 'platform'

src/apps/admin/src/lib/components/common/Layout/Layout.module.scss

@@ -20,7 +20,24 @@
     margin: $sp-8 auto !important;
 }
 
-.contantentLayoutInner {
+.contentLayoutInner {
     box-sizing: border-box;
     width: 100%;
 }
+
+/* --- PLATFORM SKILLS LAYOUT --- */
+
+.platformSkillsContentLayout {
+    color: $black-100;
+
+    .layout {
+        .main {
+            padding: 0 0 $sp-6;
+            background-color: $tc-white;
+
+            @include ltelg {
+                padding: $sp-4 0;
+            }
+        }
+    }
+}

src/apps/admin/src/lib/components/common/Layout/Layout.tsx

@@ -1,6 +1,11 @@
-import { FC, PropsWithChildren } from 'react'
+import { FC, PropsWithChildren, useContext } from 'react'
+import cn from 'classnames'
 
 import { ContentLayout } from '~/libs/ui'
+import { routerContext, RouterContextData } from '~/libs/core'
+import { platformRouteId } from '~/apps/admin/src/config/routes.config'
+import { platformSkillRouteId } from '~/apps/admin/src/platform-management/routes.config'
+import { AppSubdomain, EnvironmentConfig } from '~/config'
 
 import { SystemAdminTabs } from '../Tab'
 
@@ -10,19 +15,53 @@ export const NullLayout: FC<PropsWithChildren> = props => (
     <>{props.children}</>
 )
 
-export const Layout: FC<PropsWithChildren> = props => (
+export type LayoutProps = PropsWithChildren<{
+    classes?: { // eslint-disable-line react/no-unused-prop-types -- it's actually used
+        contentClass?: string
+        innerClass?: string
+        outerClass?: string
+        layoutClass?: string
+        mainClass?: string
+    }
+}>
+
+export const Layout: FC<LayoutProps> = props => (
     <ContentLayout
-        innerClass={styles.contantentLayoutInner}
-        outerClass={styles.contentLayoutOuter}
+        contentClass={cn(styles.contentLayout, props.classes?.contentClass)}
+        innerClass={cn(styles.contentLayoutInner, props.classes?.innerClass)}
+        outerClass={cn(styles.contentLayoutOuter, props.classes?.outerClass)}
     >
-        <div className={styles.layout}>
+        <div className={cn(styles.layout, props.classes?.layoutClass)}>
             <SystemAdminTabs />
 
-            <div className={styles.main}>
+            <div className={cn(styles.main, props.classes?.mainClass)}>
                 {props.children}
             </div>
         </div>
     </ContentLayout>
 )
 
+export const PlatformManagementSkillsLayout: FC<LayoutProps> = props => (
+    <Layout classes={{ contentClass: styles.platformSkillsContentLayout }}>
+        {props.children}
+    </Layout>
+)
+
+export function useLayout(): { Layout: FC<LayoutProps> } {
+    const routerContextData: RouterContextData = useContext(routerContext)
+
+    if (!routerContextData.initialized) return { Layout }
+
+    const skillManagementRouteId = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? `/${platformRouteId}/${platformSkillRouteId}`
+        : `/${AppSubdomain.admin}/${platformRouteId}/${platformSkillRouteId}`
+
+    if (window.location.pathname.toLowerCase()
+        .startsWith(skillManagementRouteId.toLowerCase())) {
+        return { Layout: PlatformManagementSkillsLayout }
+    }
+
+    return { Layout }
+}
+
 export default Layout

src/apps/admin/src/lib/components/common/Tab/config/system-admin-tabs-config.ts

@@ -6,8 +6,10 @@ import {
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
+    platformRouteId,
     userManagementRouteId,
 } from '~/apps/admin/src/config/routes.config'
+import { platformSkillRouteId } from '~/apps/admin/src/platform-management/routes.config'
 
 export const SystemAdminTabsConfig: TabsNavItem[] = [
     {
@@ -50,6 +52,16 @@ export const SystemAdminTabsConfig: TabsNavItem[] = [
         id: permissionManagementRouteId,
         title: 'Permission Management',
     },
+    {
+        children: [
+            {
+                id: `${platformRouteId}/${platformSkillRouteId}`,
+                title: 'Skills',
+            },
+        ],
+        id: platformRouteId,
+        title: 'Platform',
+    },
 ]
 
 export function getTabIdFromPathName(pathname: string): string {

src/apps/admin/src/platform-management/PlatformManagement.tsx

@@ -0,0 +1,34 @@
+import { FC, useContext, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { adminRoutes } from '../admin-app.routes'
+import { platformRouteId } from '../config/routes.config'
+
+/**
+ * The router outlet.
+ */
+export const PlatformManagement: FC = () => {
+    const childRoutes = useChildRoutes()
+
+    return (
+        <>
+            <Outlet />
+            <Routes>{childRoutes}</Routes>
+        </>
+    )
+}
+
+function useChildRoutes(): Array<JSX.Element> | undefined {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(
+        () => adminRoutes[0].children
+            ?.find(r => r.id === platformRouteId)
+            ?.children?.map(getRouteElement),
+        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+    )
+    return childRoutes
+}
+
+export default PlatformManagement

src/apps/admin/src/platform-management/routes.config.ts

@@ -0,0 +1 @@
+export const platformSkillRouteId = 'skills'

src/apps/skills-manager/src/skills-manager/landing-page/LandingPage.module.scss renamed to src/apps/admin/src/platform-management/skill-management/LandingPage/LandingPage.module.scss

@@ -1,17 +1,17 @@
 import { FC } from 'react'
 
-import { ContentLayout, InputCheckbox, PageTitle } from '~/libs/ui'
+import { InputCheckbox, PageTitle } from '~/libs/ui'
 
-import { SkillsManagerContextValue, useSkillsManagerContext } from '../context'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../lib/context'
 import {
     CategoriesAccordion,
     CategoryModal,
     MoreActionsMenu,
     PageHeader,
     SearchInput,
     SkillModal,
-} from '../components'
-import { BulkEditor } from '../components/bulk-editor'
+} from '../lib/components'
+import { BulkEditor } from '../lib/components/bulk-editor'
 
 import styles from './LandingPage.module.scss'
 
@@ -30,7 +30,7 @@ const LandingPage: FC<{}> = () => {
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
     return (
-        <ContentLayout innerClass={styles.contentWrap}>
+        <div className={styles.contentWrap}>
             <PageTitle>Skills Manager | Admin</PageTitle>
             <PageHeader title='Skills Manager'>
                 <InputCheckbox
@@ -63,7 +63,7 @@ const LandingPage: FC<{}> = () => {
             )}
 
             {!!showSkillModal && <SkillModal skill={showSkillModal} />}
-        </ContentLayout>
+        </div>
     )
 }