November Prod Release

.circleci/config.yml

@@ -257,9 +257,7 @@ workflows:
                       branches:
                           only:
                               - dev
-                              - justin_fixes
-                              - talent_search_fixes
-                              - feature/standardized-skills
+                              - MP-356_member-stats-and-history
 
             - deployQa:
                   context: org-global

package.json

@@ -92,7 +92,7 @@
     "react-responsive-modal": "^6.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "react-select": "^5.5.0",
+    "react-select": "^5.8.0",
     "react-spinners": "^0.13.6",
     "react-stickynode": "^1.4.1",
     "react-toastify": "^9.0.8",

src/apps/learn/src/certification-details/CertificationDetailsPage.tsx

@@ -43,6 +43,7 @@ const CertificationDetailsPage: FC<{}> = () => {
     const {
         certification,
         ready: certificationReady,
+        mutate: reloadCertification,
     }: TCACertificationProviderData = useGetTCACertification(dashedName as string)
 
     // Fetch Enrollment status & progress
@@ -130,6 +131,8 @@ const CertificationDetailsPage: FC<{}> = () => {
                 certification={certification}
                 enrolled={isEnrolled}
                 certProgress={progress}
+                profile={profile}
+                reloadCertification={reloadCertification}
             />
         )
     }

src/apps/learn/src/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss

@@ -3,6 +3,8 @@
 
 .section-header {
     margin-top: $sp-6;
+    display: flex;
+    align-items: center;
 }
 
 .certificate-placeholder {

src/apps/learn/src/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -1,12 +1,16 @@
-import { FC, ReactNode } from 'react'
+import { Dispatch, FC, ReactNode, SetStateAction, useMemo, useState } from 'react'
+import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
 import { EnvironmentConfig } from '~/config'
 import { IconOutline, IconSolid, Tooltip } from '~/libs/ui'
+import { UserProfile, UserRole } from '~/libs/core'
 
 import {
     CompletionTimeRange,
+    EditSkillsBtn,
     LearnLevelIcon,
+    ModifySkillsModal,
     ProvidersLogoList,
     SkillTags,
     StickySidebar,
@@ -24,6 +28,8 @@ interface CertificationDetailsSidebarProps {
     certification: TCACertification
     enrolled: boolean
     certProgress?: TCACertificationProgress
+    profile: UserProfile | undefined
+    reloadCertification: KeyedMutator<any>
 }
 
 function renderTooltipContents(icon: ReactNode, text: Array<string>): ReactNode {
@@ -57,6 +63,26 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
 
     const suggestedRetailPrice: string = product?.metadata?.estimatedRetailPrice || '20'
 
+    const canEdit: boolean = useMemo(() => !!props.profile?.roles?.includes(UserRole.tcaAdmin), [props.profile])
+
+    const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    function handleModyfSkillsModalClose(): void {
+        setIsEditMode(false)
+    }
+
+    function handleModyfSkillsSave(): void {
+        setTimeout(() => {
+            setIsEditMode(false)
+            props.reloadCertification()
+        }, 1500)
+    }
+
+    function handleEditSkillsClick(): void {
+        setIsEditMode(true)
+    }
+
     return (
         <StickySidebar>
             <div className={styles['certificate-placeholder']}>
@@ -140,10 +166,17 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
             </ul>
 
             <div className={classNames('body-small-medium', styles['section-header'])}>
-                Skills Covered
+                <span>Skills Covered</span>
+                {
+                    canEdit && (
+                        <EditSkillsBtn
+                            onClick={handleEditSkillsClick}
+                            className={styles.editTCABtn}
+                        />
+                    )
+                }
             </div>
             <SkillTags
-                emsiSkills={props.certification.emsiSkills}
                 skills={props.certification.skills}
                 courseKey={props.certification.dashedName}
                 theme='gray'
@@ -173,6 +206,16 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                     <EnrollCtaBtn certification={props.certification.dashedName} />
                 )}
             </div>
+
+            {
+                isEditMode && (
+                    <ModifySkillsModal
+                        onClose={handleModyfSkillsModalClose}
+                        onSave={handleModyfSkillsSave}
+                        certification={props.certification}
+                    />
+                )
+            }
         </StickySidebar>
     )
 }

src/apps/learn/src/course-details/CourseDetailsPage.module.scss

@@ -42,6 +42,9 @@
         @extend .body-main;
         margin-top: $sp-8;
     }
+    .skills-section-header {
+        margin-top: $sp-8;
+    }
 }
 
 .description {

src/apps/learn/src/course-details/CourseDetailsPage.tsx

@@ -1,6 +1,8 @@
+/* eslint-disable complexity */
 /* eslint-disable react/no-danger */
-import { FC, ReactNode, useContext, useMemo } from 'react'
+import { Dispatch, FC, ReactNode, SetStateAction, useContext, useMemo, useState } from 'react'
 import { Params, useParams } from 'react-router-dom'
+import classNames from 'classnames'
 
 import {
     Breadcrumb,
@@ -10,14 +12,17 @@ import {
     LoadingSpinner,
 } from '~/libs/ui'
 import { textFormatGetSafeString } from '~/libs/shared'
-import { profileContext, ProfileContextData } from '~/libs/core'
+import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
 
 import {
     AllCertificationsProviderData,
     CoursesProviderData,
     CourseTitle,
+    EditSkillsBtn,
+    ModifySkillsModal,
     PageTitle,
     ResourceProviderData,
+    SkillTags,
     TCACertificationProgressBox,
     useGetCertification,
     useGetCourses,
@@ -44,6 +49,7 @@ const CourseDetailsPage: FC<{}> = () => {
     const {
         course,
         ready: courseReady,
+        mutate: reloadCourse,
     }: CoursesProviderData = useGetCourses(textFormatGetSafeString(routeParams.provider), routeParams.certification)
 
     const {
@@ -79,6 +85,11 @@ const CourseDetailsPage: FC<{}> = () => {
         routeParams.provider,
     ])
 
+    const canEdit: boolean = useMemo(() => !!profile?.roles?.includes(UserRole.tcaAdmin), [profile])
+
+    const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
     function getDescription(): ReactNode {
 
         if (!course) {
@@ -178,6 +189,21 @@ const CourseDetailsPage: FC<{}> = () => {
         )
     }
 
+    function handleEditSkillsClick(): void {
+        setIsEditMode(true)
+    }
+
+    function handleModyfSkillsModalClose(): void {
+        setIsEditMode(false)
+    }
+
+    function handleModyfSkillsSave(): void {
+        setTimeout(() => {
+            setIsEditMode(false)
+            reloadCourse()
+        }, 1500)
+    }
+
     return (
         <ContentLayout>
             <PageTitle>{course?.title ?? 'Course Details'}</PageTitle>
@@ -199,6 +225,24 @@ const CourseDetailsPage: FC<{}> = () => {
                                 trackType={certificate?.certificationCategory.track}
                             />
 
+                            <div className={classNames('body-small-medium', styles['skills-section-header'])}>
+                                <span>Skills Covered</span>
+                                {
+                                    canEdit && (
+                                        <EditSkillsBtn
+                                            onClick={handleEditSkillsClick}
+                                            className={styles.editTCABtn}
+                                        />
+                                    )
+                                }
+                            </div>
+                            <SkillTags
+                                skills={course.skills || []}
+                                courseKey={course.id}
+                                theme='gray'
+                                expandCount={9}
+                            />
+
                             <TCACertificationProgressBox
                                 userId={profile?.userId}
                                 className={styles.tcaCertBanner}
@@ -229,6 +273,16 @@ const CourseDetailsPage: FC<{}> = () => {
                             />
                         </div>
                     </div>
+
+                    {
+                        isEditMode && (
+                            <ModifySkillsModal
+                                onClose={handleModyfSkillsModalClose}
+                                onSave={handleModyfSkillsSave}
+                                course={course}
+                            />
+                        )
+                    }
                 </>
             )}
         </ContentLayout>

src/apps/learn/src/lib/components/edit-skills-btn/EditSkillsBtn.module.scss

@@ -0,0 +1,12 @@
+@import "@libs/ui/styles/includes";
+
+.editSkillsBtn {
+    padding: 0 !important;
+    padding-left: $sp-4 !important;
+    color: $black-100;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}

src/apps/learn/src/lib/components/edit-skills-btn/EditSkillsBtn.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline } from '~/libs/ui'
+
+import styles from './EditSkillsBtn.module.scss'
+
+interface EditSkillsBtnProps {
+    className?: string
+    onClick: () => void
+}
+
+const EditSkillsBtn: FC<EditSkillsBtnProps> = (props: EditSkillsBtnProps) => (
+    <Button
+        icon={IconOutline.PencilIcon}
+        onClick={props.onClick}
+        className={classNames(styles.editSkillsBtn, props.className)}
+        size='md'
+    />
+)
+
+export default EditSkillsBtn

src/apps/learn/src/lib/components/edit-skills-btn/index.ts

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

src/apps/learn/src/lib/components/hiring-manager-view/HiringManagerView.tsx

@@ -276,7 +276,6 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
 
                             <SkillTags
                                 skills={props.certification?.skills ?? []}
-                                emsiSkills={props.certification?.emsiSkills ?? []}
                                 theme='gray'
                                 label=''
                                 expandCount={props.certification?.skills?.length ?? 0}

src/apps/learn/src/lib/components/index.ts

@@ -8,8 +8,10 @@ export * from './course-outline'
 export * from './course-title'
 export * from './curriculum-summary'
 export * from './dynamic-icons'
+export * from './edit-skills-btn'
 export * from './hiring-manager-view'
 export * from './learn-breadcrumb-provider'
+export * from './modify-skills-modal'
 export * from './page-title'
 export * from './providers-logo-list'
 export * from './skill'

src/apps/learn/src/lib/components/modify-skills-modal/ModifySkillsModal.module.scss

@@ -0,0 +1,31 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    :global(.body-main-bold) {
+        font-size: 20px;
+        margin-bottom: $sp-2;
+    }
+
+    .skillPicker {
+        margin-top: $sp-4;
+    }
+}
+
+.modalButtons {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.skillsModal {
+    @include gtemd {
+        overflow: visible !important;
+    }
+}
+
+.skillsModalBody {
+    overflow: visible !important;
+}