Merge pull request #960 from topcoder-platform/dev

RELEASE: TSJR-57 skills manager

Author: vas3a

.circleci/config.yml

@@ -257,6 +257,7 @@ workflows:
                       branches:
                           only:
                               - dev
+                              - TSJR-314_skill-manager_landing-page
 
             - deployQa:
                   context: org-global

.vscode/components.code-snippets

@@ -15,7 +15,7 @@
     //   ],
     //   "description": "Log output to console"
     // }
-    "[MFE] React component": {
+    "[PLAT] React component": {
       "scope": "typescript,typescriptreact",
       "prefix": "rfc",
       "body": [
@@ -28,18 +28,39 @@
         "",
         "const ${1:ComponentName}: FC<${1:ComponentName}Props> = props => {",
         "",
-        "  return (",
+        "    return (",
+        "        <div className={styles.wrap}>",
+        "        </div>",
+        "    )",
+        "}",
+        "",
+        "export default ${1:ComponentName}",
+        ""
+      ],
+      "description": "Create a react functional component"
+    },
+    "[PLAT] Simple React component": {
+      "scope": "typescript,typescriptreact",
+      "prefix": "rfc",
+      "body": [
+        "import { FC } from 'react'",
+        "",
+        "import styles from './${1:ComponentName}.module.scss'",
+        "",
+        "interface ${1:ComponentName}Props {",
+        "}",
+        "",
+        "const ${1:ComponentName}: FC<${1:ComponentName}Props> = props => (",
         "    <div className={styles.wrap}>",
         "    </div>",
-        "  )",
-        "}",
+        ")",
         "",
         "export default ${1:ComponentName}",
         ""
       ],
       "description": "Create a react functional component"
     },
-    "[MFE] export comp": {
+    "[PLAT] export comp": {
       "scope": "typescript,typescriptreact",
       "prefix": "exp",
       "body": [
@@ -48,14 +69,21 @@
       ],
       "description": "Export module"
     },
-    "[MFE] use state": {
+    "[PLAT] use state": {
         "scope": "typescript,typescriptreact",
         "prefix": "usest",
         "body": [
             "const [$1, set$2]: [$3, Dispatch<SetStateAction<$3>>] = useState($4)$0",
         ]
     },
-    "[MFE] Storybook Template": {
+    "[PLAT] includes": {
+        "scope": "css,scss",
+        "prefix": "includes",
+        "body": [
+            "@import '@libs/ui/styles/includes';",
+        ]
+    },
+    "[PLAT] Storybook Template": {
         "scope": "typescript,typescriptreact",
         "prefix": "sb",
         "body": [

src/apps/admin/README.md

@@ -0,0 +1 @@
+# Admin App

src/apps/admin/index.tsx

@@ -0,0 +1 @@
+export * from './src'

src/apps/admin/src/AdminApp.tsx

@@ -0,0 +1,22 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+import { SharedSwrConfig } from '~/libs/shared'
+
+import { toolTitle } from './admin.routes'
+
+const AdminApp: FC<{}> = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <SharedSwrConfig>
+            <Outlet />
+            <Routes>
+                {getChildRoutes(toolTitle)}
+            </Routes>
+        </SharedSwrConfig>
+    )
+}
+
+export default AdminApp

src/apps/admin/src/admin.routes.tsx

@@ -0,0 +1,34 @@
+import { Navigate } from 'react-router-dom'
+
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '~/libs/core'
+import { AppSubdomain, EnvironmentConfig, ToolTitle } from '~/config'
+
+import { skillsManagerRootRoute, skillsManagerRoutes } from './skills-manager'
+
+const AdminApp: LazyLoadedComponent = lazyLoad(() => import('./AdminApp'))
+
+export const rootRoute: string = (
+    EnvironmentConfig.SUBDOMAIN === AppSubdomain.admin ? '' : `/${AppSubdomain.admin}`
+)
+
+export const toolTitle: string = ToolTitle.admin
+export const absoluteRootRoute: string = `${window.location.origin}${rootRoute}`
+
+export const adminRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        children: [
+            ...skillsManagerRoutes,
+            {
+                element: <Navigate to={`${rootRoute}${skillsManagerRootRoute}`} />,
+                id: 'Default Admin Route',
+                route: '',
+            },
+        ],
+        domain: AppSubdomain.admin,
+        element: <AdminApp />,
+        id: toolTitle,
+        rolesRequired: [UserRole.administrator],
+        route: rootRoute,
+    },
+]

src/apps/admin/src/index.ts

@@ -0,0 +1,4 @@
+export {
+    adminRoutes,
+    rootRoute as adminRootRoute,
+} from './admin.routes'

src/apps/admin/src/skills-manager/SkillsManager.tsx

@@ -0,0 +1,22 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { skillsManagerRoutes } from './skills-manager.routes'
+import { SkillsManagerContext } from './context'
+
+const SkillsManager: FC<{}> = () => {
+    const { getRouteElement }: RouterContextData = useContext(routerContext)
+
+    return (
+        <SkillsManagerContext>
+            <Outlet />
+            <Routes>
+                {skillsManagerRoutes.map(getRouteElement)}
+            </Routes>
+        </SkillsManagerContext>
+    )
+}
+
+export default SkillsManager

src/apps/admin/src/skills-manager/components/accordion/Accordion.module.scss

@@ -0,0 +1 @@
+@import '@libs/ui/styles/includes';

src/apps/admin/src/skills-manager/components/accordion/Accordion.tsx

@@ -0,0 +1,82 @@
+import {
+    Children,
+    cloneElement,
+    FC,
+    isValidElement,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
+
+import { AccordionItemProps } from './accordion-item'
+import styles from './Accordion.module.scss'
+
+interface AccordionProps {
+    children: JSX.Element[] | JSX.Element
+    defaultOpen?: boolean
+}
+
+function computeOpenSectionsState(props: AccordionProps): {[key: string]: boolean} {
+    const newOpenState: {[key: string]: boolean} = {}
+
+    Children.forEach<ReactNode>(props.children, child => {
+        if (!isValidElement(child)) {
+            return
+        }
+
+        const childKey = child.key as string
+        newOpenState[childKey] = child.props.open ?? props.defaultOpen
+    })
+
+    return newOpenState
+}
+
+const Accordion: FC<AccordionProps> = props => {
+    const prevProps = useRef({ ...props })
+    const [openedSections, setOpenedSections] = useState<{[key: string]: boolean}>({})
+
+    const handleToggle = useCallback((key: string) => {
+        setOpenedSections(all => ({ ...all, [key]: !all[key] }))
+    }, [])
+
+    // check if props have changed and update the openedSections synchronously
+    if (prevProps.current.defaultOpen !== props.defaultOpen) {
+        prevProps.current = { ...props }
+        Object.assign(openedSections, computeOpenSectionsState(props))
+    }
+
+    // use an effect to make sure the changes are propagated in the state
+    useEffect(() => {
+        setOpenedSections(computeOpenSectionsState(props))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.defaultOpen])
+
+    const renderAccordions = (children: JSX.Element[] | JSX.Element): ReactNode => (
+        Children.map<ReactNode, ReactNode>(children, child => {
+            if (isValidElement(child)) {
+                const childKey = child.key as string
+                openedSections[childKey] = openedSections[childKey] ?? child.props.open ?? props.defaultOpen
+
+                return cloneElement(
+                    child,
+                    {
+                        open: !!openedSections[childKey],
+                        toggle: function toggle() { handleToggle(childKey) },
+                    } as AccordionItemProps,
+                )
+            }
+
+            return child
+        })
+    )
+
+    return (
+        <div className={styles.wrap}>
+            {renderAccordions(props.children)}
+        </div>
+    )
+}
+
+export default Accordion