PROD - gamification / skills management consolidation. SSO users option

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

@@ -1,3 +1,4 @@
+import { baseDetailPath, createBadgePath } from '~/apps/gamification-admin'
 import { AppSubdomain, ToolTitle } from '~/config'
 import {
     lazyLoad,
@@ -9,12 +10,15 @@ import {
 
 import {
     billingAccountRouteId,
+    gamificationAdminRouteId,
     manageChallengeRouteId,
     manageReviewRouteId,
     permissionManagementRouteId,
+    platformRouteId,
     rootRoute,
     userManagementRouteId,
 } from './config/routes.config'
+import { platformSkillRouteId } from './platform/routes.config'
 
 const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
 
@@ -107,6 +111,24 @@ const PermissionAddGroupMembersPage: LazyLoadedComponent = lazyLoad(
     'PermissionAddGroupMembersPage',
 )
 
+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'),
+)
+const BadgeListingPage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/badge-listing/BadgeListingPage'),
+)
+const CreateBadgePage: LazyLoadedComponent = lazyLoad(
+    () => import('../../gamification-admin/src/pages/create-badge/CreateBadgePage'),
+)
+
 export const toolTitle: string = ToolTitle.admin
 
 export const adminRoutes: ReadonlyArray<PlatformRoute> = [
@@ -256,6 +278,43 @@ 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
+                                rootPage={`${rootRoute}/${platformRouteId}/${gamificationAdminRouteId}`}
+                            />
+                        ),
+                        route: gamificationAdminRouteId,
+                    },
+                    {
+                        element: <CreateBadgePage />,
+                        route: `${gamificationAdminRouteId}${createBadgePath}`,
+                    },
+                    {
+                        element: <BadgeDetailPage />,
+                        route: `${gamificationAdminRouteId}${baseDetailPath}/:id`,
+                    },
+                ],
+                element: <Platform />,
+                id: platformRouteId,
+                route: platformRouteId,
+            },
         ],
         domain: AppSubdomain.admin,
         element: <AdminApp />,

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

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

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

@@ -5,6 +5,13 @@
     position: relative;
 }
 
+.blockForm {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    position: relative;
+}
+
 .actionButtons {
     display: flex;
     justify-content: flex-end;

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

@@ -67,7 +67,7 @@ export const DialogEditUserEmail: FC<Props> = (props: Props) => {
                     className={classNames(styles.container, props.className)}
                     onSubmit={handleSubmit(onSubmit)}
                 >
-                    <div>
+                    <div className={styles.blockForm}>
                         <InputText
                             type='text'
                             name='id'

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

@@ -0,0 +1,71 @@
+.modal {
+    width: 800px !important;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    position: relative;
+    align-items: flex-start;
+
+    th:first-child {
+        padding-left: 16px !important;
+    }
+}
+
+.tableCell {
+    white-space: break-spaces !important;
+    text-align: left !important;
+}
+
+.actionButtons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+    width: 100%;
+}
+
+.btnActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.blockAction {
+    width: 120px;
+}
+
+.loadingSpinnerContainer {
+    position: relative;
+    height: 100px;
+
+    .spinner {
+        background: none;
+    }
+}
+
+.dialogLoadingSpinnerContainer {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 0;
+    height: 64px;
+    left: 0;
+
+    .spinner {
+        background: none;
+    }
+}
+
+.desktopTable {
+    td {
+        vertical-align: middle;
+    }
+}
+
+.mobileTable {
+    width: 100%;
+}