TCA-1223 EMSI switch behind feature flag

Author: kkartunov

src-ts/config/environments/environment.default.config.ts

@@ -26,6 +26,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
     },
     MEMBER_VERIFY_LOOKER: 3322,
     REACT_APP_ENABLE_TCA_CERT_MONETIZATION: process.env.REACT_APP_ENABLE_TCA_CERT_MONETIZATION as unknown as boolean || false,
+    REACT_APP_ENABLE_EMSI_SKILLS: process.env.REACT_APP_ENABLE_EMSI_SKILLS as unknown as boolean || false,
     REAUTH_OFFSET: 55,
     SPRIG: {
         ENVIRONMENT_ID: 'bUcousVQ0-yF',

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
 }

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'

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

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';

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

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
+}

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -295,6 +295,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}

src-ts/tools/learn/learn-lib/skill-tags/SkillTags.tsx

@@ -2,35 +2,39 @@ import { FC } from 'react'
 import classNames from 'classnames'
 
 import { Tooltip } from '../../../../lib'
-import { SkillLabel } from '..'
+import { SkillLabel, TCAEMSISkillType } from '..'
 
 import styles from './SkillTags.module.scss'
+import { EnvironmentConfig } from '../../../../config'
 
 interface SkillTagsProps {
     courseKey?: string
     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 = 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)
-                        .join(', ')}
-                    trigger={<SkillLabel skill={`+ ${props.skills?.slice(expandCount).length}`} theme={theme} />}
+                    content={skills.slice(expandCount).map(skill => typeof skill === 'string' ? skill : skill.name).join(', ')}
+                    trigger={<SkillLabel skill={`+ ${skills.slice(expandCount).length}`} theme={theme} />}
                 />
             )}
         </div>

src-ts/tools/learn/learn-lib/skill/SkillLabel.tsx

@@ -1,15 +1,16 @@
 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>
 )