Merge pull request #1120 from nqviet/feat/system-admin

Consolidate Skills Manager

Author: jmgasper

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

@@ -18,6 +18,7 @@ import {
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
+import { platformSkillRouteId } from './platform/routes.config'
 
 const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
 
@@ -111,6 +112,13 @@ const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
 )
 
 const Platform: LazyLoadedComponent = lazyLoad(() => import('./platform/Platform'))
+const SkillManagement: LazyLoadedComponent = lazyLoad(
+    () => import('./platform/skill-management/SkillManagement'),
+)
+const SkillManagementLandingPage: LazyLoadedComponent = lazyLoad(
+    () => import('./platform/skill-management/LandingPage'),
+    'LandingPage',
+)
 const BadgeDetailPage: LazyLoadedComponent = lazyLoad(
     () => import('../../gamification-admin/src/pages/badge-detail/BadgeDetailPage'),
 )
@@ -270,8 +278,22 @@ 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: (
                             <BadgeListingPage

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

@@ -29,7 +29,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,41 +1,80 @@
-import { FC, PropsWithChildren, useMemo } from 'react'
-import { useLocation } from 'react-router-dom'
-import classNames from 'classnames'
+import { FC, PropsWithChildren, useContext } from 'react'
+import cn from 'classnames'
 
 import { platformRouteId } from '~/apps/admin/src/config/routes.config'
 import { ContentLayout } from '~/libs/ui'
+import { routerContext, RouterContextData } from '~/libs/core'
+import { platformSkillRouteId } from '~/apps/admin/src/platform/routes.config'
+import { AppSubdomain, EnvironmentConfig } from '~/config'
 
 import { SystemAdminTabs } from '../Tab'
 
 import styles from './Layout.module.scss'
 
 export const NullLayout: FC<PropsWithChildren> = props => <>{props.children}</>
 
-export const Layout: FC<PropsWithChildren> = props => {
-    const { pathname }: { pathname: string } = useLocation()
-    const isPlatformPage = useMemo(
-        () => pathname.indexOf(platformRouteId) >= 0,
-        [pathname],
-    )
-
-    return (
-        <ContentLayout
-            innerClass={styles.contantentLayoutInner}
-            outerClass={styles.contentLayoutOuter}
-        >
-            <div className={styles.layout}>
-                <SystemAdminTabs />
-
-                <div
-                    className={classNames(styles.main, {
-                        [styles.isPlatformPage]: isPlatformPage,
-                    })}
-                >
-                    {props.children}
-                </div>
+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
+        contentClass={cn(styles.contentLayout, props.classes?.contentClass)}
+        innerClass={cn(styles.contentLayoutInner, props.classes?.innerClass)}
+        outerClass={cn(styles.contentLayoutOuter, props.classes?.outerClass)}
+    >
+        <div className={cn(styles.layout, props.classes?.layoutClass)}>
+            <SystemAdminTabs />
+
+            <div className={cn(styles.main, props.classes?.mainClass)}>
+                {props.children}
             </div>
-        </ContentLayout>
-    )
+        </div>
+    </ContentLayout>
+)
+
+export const PlatformLayout: FC<LayoutProps> = props => (
+    <Layout classes={{ mainClass: styles.isPlatformPage }}>
+        {props.children}
+    </Layout>
+)
+
+export const PlatformSkillsLayout: 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 platformBaseRouteId = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? `/${platformRouteId}`
+        : `/${AppSubdomain.admin}/${platformRouteId}`
+
+    const skillManagementRouteId = EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin
+        ? `/${platformRouteId}/${platformSkillRouteId}`
+        : `/${AppSubdomain.admin}/${platformRouteId}/${platformSkillRouteId}`
+
+    if (window.location.pathname.toLowerCase()
+        .startsWith(skillManagementRouteId.toLowerCase())) {
+        return { Layout: PlatformSkillsLayout }
+    }
+
+    if (window.location.pathname.toLowerCase()
+        .startsWith(platformBaseRouteId.toLowerCase())) {
+        return { Layout: PlatformLayout }
+    }
+
+    return { Layout }
 }
 
 export default Layout

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

@@ -10,6 +10,7 @@ import {
     platformRouteId,
     userManagementRouteId,
 } from '~/apps/admin/src/config/routes.config'
+import { platformSkillRouteId } from '~/apps/admin/src/platform/routes.config'
 
 export const SystemAdminTabsConfig: TabsNavItem[] = [
     {
@@ -54,9 +55,15 @@ export const SystemAdminTabsConfig: TabsNavItem[] = [
     },
     {
         children: [
+            {
+
+                id: `${platformRouteId}/${platformSkillRouteId}`,
+                title: 'Skills',
+            },
             {
                 id: `${platformRouteId}/${gamificationAdminRouteId}`,
                 title: 'Badges',
+
             },
         ],
         id: platformRouteId,

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/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/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>
     )
 }
 

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

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

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

@@ -6,7 +6,6 @@ import { profilesRoutes } from '~/apps/profiles'
 import { talentSearchRoutes } from '~/apps/talent-search'
 import { accountsRoutes } from '~/apps/accounts'
 import { onboardingRoutes } from '~/apps/onboarding'
-import { skillsManagerRoutes } from '~/apps/skills-manager'
 import { walletRoutes } from '~/apps/wallet'
 import { walletAdminRoutes } from '~/apps/wallet-admin'
 import { copilotsRoutes } from '~/apps/copilots'
@@ -38,7 +37,6 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...walletRoutes,
     ...walletAdminRoutes,
     ...accountsRoutes,
-    ...skillsManagerRoutes,
     ...homeRoutes,
     ...adminRoutes,
 ]