Merge pull request #606 from topcoder-platform/TCA-1223

kkartunov · web-flow · commit 3bdb1e14d9e1 · 2023-04-27T09:53:49.000+03:00
TCA-1223 EMSI switch behind feature flag -&gt; dev
diff --git a/src-ts/config/environments/environment.default.config.ts b/src-ts/config/environments/environment.default.config.ts
@@ -25,6 +25,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         SERVICE: 'platform-ui',
     },
     MEMBER_VERIFY_LOOKER: 3322,
+    REACT_APP_ENABLE_EMSI_SKILLS: process.env.REACT_APP_ENABLE_EMSI_SKILLS as unknown as boolean || false,
     REACT_APP_ENABLE_TCA_CERT_MONETIZATION: process.env.REACT_APP_ENABLE_TCA_CERT_MONETIZATION as unknown as boolean || false,
     REAUTH_OFFSET: 55,
     SPRIG: {
diff --git a/src-ts/lib/global-config.model.ts b/src-ts/lib/global-config.model.ts
@@ -46,4 +46,5 @@ export interface GlobalConfig {
     }
     MEMBER_VERIFY_LOOKER: number,
     REACT_APP_ENABLE_TCA_CERT_MONETIZATION: boolean
+    REACT_APP_ENABLE_EMSI_SKILLS: boolean
 }
diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
@@ -6,6 +6,7 @@ import {
     CompletionTimeRange,
     LearnLevelIcon,
     ProvidersLogoList,
+    SkillTags,
     StickySidebar,
     TCACertificatePreview,
     TCACertification,
@@ -139,11 +140,13 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
             <div className={classNames('body-small-medium', styles['section-header'])}>
                 Skills Covered
             </div>
-            <ul className={styles['certification-skills-list']}>
-                {props.certification.skills.map(skill => (
-                    <li key={skill}>{skill}</li>
-                ))}
-            </ul>
+            <SkillTags
+                emsiSkills={props.certification.emsiSkills}
+                skills={props.certification.skills}
+                courseKey={props.certification.dashedName}
+                theme='gray'
+                expandCount={9}
+            />
 
             <ProvidersLogoList
                 label='Content from'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/courses-provider/learn-course.model.ts b/src-ts/tools/learn/learn-lib/data-providers/courses-provider/learn-course.model.ts
@@ -2,10 +2,12 @@ import { LearnModelBase } from '../../functions'
 import { CertificationLearnLevel, LearnCertification } from '../all-certifications-provider'
 import { LearnModule } from '../lesson-provider'
 import { ResourceProvider } from '../resource-provider-provider'
+import { TCAEMSISkillType } from '../tca-certifications-provider/tca-emsi-skill-type'
 
 export interface LearnCourse extends LearnModelBase {
     certificationId: string
     completionSuggestions: Array<string>
+    emsiSkills: Array<TCAEMSISkillType>
     estimatedCompletionTimeValue: number
     estimatedCompletionTimeUnits: string
     fccCourseUuid: string
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/index.ts
@@ -17,3 +17,4 @@ export * from './tca-certification-progress'
 export * from './tca-certification-enrollment-base.model'
 export * from './tca-certification-validation'
 export * from './tca-certification-enrollment'
+export * from './tca-emsi-skill-type'
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification.model.ts
@@ -5,6 +5,7 @@ import { TCACertificationCompletionTimeRange } from './tca-certification-complet
 import { TCACertificationProvider } from './tca-certification-provider.model'
 import { TCACertificationProviderBase } from './tca-certification-provider.model-base'
 import { TCACertificationResource } from './tca-certification-resource.model'
+import { TCAEMSISkillType } from './tca-emsi-skill-type'
 
 export interface TCACertification {
     certificationCategory: TCACertificationCategory
@@ -15,6 +16,7 @@ export interface TCACertification {
     createdAt: Date
     dashedName: string
     description: string
+    emsiSkills: Array<TCAEMSISkillType>
     id: number
     introText: string
     learnerLevel: TCACertificationLearnLevel
diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-emsi-skill-type.ts
@@ -0,0 +1,7 @@
+export type TCAEMSISkillType = {
+    assessed: boolean
+    confidence: number
+    emsiId: string
+    learned: boolean
+    name: string
+}
diff --git a/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx b/src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx
@@ -65,6 +65,7 @@ export interface HiringManagerViewProps {
     validationUrl?: string
 }
 
+// eslint-disable-next-line complexity
 const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewProps) => {
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
@@ -141,7 +142,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
     function renderTCACertificatePreview(ref?: MutableRefObject<HTMLDivElement | any>): ReactNode {
         return (
             <TCACertificatePreview
-                certification={props.certification}
+                certification={props.certification as TCACertification}
                 userName={props.userName}
                 completedDate={props.completedAt}
                 completionUuid={props.completionUuid}
@@ -295,6 +296,7 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
 
                             <SkillTags
                                 skills={props.certification?.skills ?? []}
+                                emsiSkills={props.certification?.emsiSkills ?? []}
                                 theme='gray'
                                 label=''
                                 expandCount={props.certification?.skills?.length ?? 0}
diff --git a/src-ts/tools/learn/learn-lib/skill-tags/SkillTags.tsx b/src-ts/tools/learn/learn-lib/skill-tags/SkillTags.tsx
@@ -2,7 +2,8 @@ import { FC } from 'react'
 import classNames from 'classnames'
 
 import { Tooltip } from '../../../../lib'
-import { SkillLabel } from '..'
+import { SkillLabel, TCAEMSISkillType } from '..'
+import { EnvironmentConfig } from '../../../../config'
 
 import styles from './SkillTags.module.scss'
 
@@ -11,26 +12,37 @@ interface SkillTagsProps {
     expandCount?: number
     label?: string
     theme?: 'white' | 'gray' | undefined
-    skills: Array<string> | null | undefined
+    skills?: Array<string> | null | undefined
+    emsiSkills?: TCAEMSISkillType[]
 }
 
 const SkillTags: FC<SkillTagsProps> = (props: SkillTagsProps) => {
     const expandCount: number = props.expandCount || 3
     const theme: 'white' | 'gray' = props.theme || 'white'
     const label: string = props.label ?? 'skills taught'
+    const tcaEMSIEnabled: boolean = EnvironmentConfig.REACT_APP_ENABLE_EMSI_SKILLS || false
+
+    const skills: string[] | TCAEMSISkillType[] = tcaEMSIEnabled ? (props.emsiSkills || []) : (props.skills || [])
 
     return (
         <div className={styles.skills}>
             {label && (
                 <span className={classNames('body-small', styles.infoText)}>{label}</span>
             )}
-            {props.skills?.slice(0, expandCount)
-                .map((skill: string) => <SkillLabel skill={skill} theme={theme} key={`${props.courseKey}:${skill}`} />)}
-            {props.skills?.length > expandCount && (
+            {skills?.slice(0, expandCount)
+                .map((skill: string | TCAEMSISkillType) => (
+                    <SkillLabel
+                        skill={skill}
+                        theme={theme}
+                        key={`${props.courseKey}:${typeof skill === 'string' ? skill : skill.name}`}
+                    />
+                ))}
+            {skills.length > expandCount && (
                 <Tooltip
-                    content={props.skills?.slice(expandCount)
+                    content={skills.slice(expandCount)
+                        .map(skill => (typeof skill === 'string' ? skill : skill.name))
                         .join(', ')}
-                    trigger={<SkillLabel skill={`+ ${props.skills?.slice(expandCount).length}`} theme={theme} />}
+                    trigger={<SkillLabel skill={`+ ${skills.slice(expandCount).length}`} theme={theme} />}
                 />
             )}
         </div>
diff --git a/src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx b/src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx
@@ -1,15 +1,17 @@
 import { FC } from 'react'
 
+import { TCAEMSISkillType } from '../data-providers'
+
 import styles from './SkillLabel.module.scss'
 
 interface SkillLabelProps {
-    skill: string
+    skill: string | TCAEMSISkillType
     theme: 'white' | 'gray' | undefined
 }
 
 const SkillLabel: FC<SkillLabelProps> = (props: SkillLabelProps) => (
     <div className={(props.theme === 'white' || props.theme === undefined) ? styles.wrap : styles.wrapGray}>
-        <span className='body-small'>{props.skill}</span>
+        <span className='body-small'>{typeof props.skill === 'string' ? props.skill : props.skill.name }</span>
     </div>
 )
 
diff --git a/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx b/src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx
@@ -112,6 +112,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
                 courseKey={props.certification.course.key}
                 expandCount={2}
                 skills={props.certification.course.skills}
+                emsiSkills={props.certification.course.emsiSkills}
                 theme={isCompleted ? 'gray' : 'white'}
             />
 
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx
@@ -12,6 +12,7 @@ import {
     TCACertification,
     TCACertificationProgress,
     TCACertificationProviderBase,
+    TCAEMSISkillType,
 } from '../../../learn-lib'
 import { EnvironmentConfig } from '../../../../../config'
 
@@ -32,10 +33,11 @@ const EXCERPT_TEXT_LEN: number = 165
 const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
     const desc: string = props.certification.description.slice(0, EXCERPT_TEXT_LEN)
 
-    const { skills, providers, dashedName }: {
+    const { skills, providers, dashedName, emsiSkills }: {
         skills: string[],
         providers: Array<TCACertificationProviderBase>,
         dashedName: string
+        emsiSkills: TCAEMSISkillType[]
     } = props.certification
 
     const isEnrolled: boolean = props.progress?.status === 'enrolled'
@@ -132,6 +134,7 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
             </p>
 
             <SkillTags
+                emsiSkills={emsiSkills}
                 skills={skills}
                 courseKey={dashedName}
                 theme={isCompleted ? 'gray' : 'white'}

Original file line number	Diff line number	Diff line change
`@@ -46,4 +46,5 @@ export interface GlobalConfig {`
`46`	`46`	`}`
`47`	`47`	`MEMBER_VERIFY_LOOKER: number,`
`48`	`48`	`REACT_APP_ENABLE_TCA_CERT_MONETIZATION: boolean`
	`49`	`+ REACT_APP_ENABLE_EMSI_SKILLS: boolean`
`49`	`50`	`}`