TCA-667 - use a lesson's id to show it as completed -> dev

src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx

@@ -16,6 +16,7 @@ import styles from './CollapsibleItem.module.scss'
 
 interface CollapsibleListItem {
     dashedName: string
+    id: string
     title: string
 }
 
@@ -50,9 +51,9 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
 
     const isPartial: boolean = useMemo(() => !!progress && !!progress.completedLessons.length, [progress])
 
-    const isItemCompleted: (key: string) => boolean = (key: string) => (
+    const isItemCompleted: (itemId: string) => boolean = (itemId: string) => (
         progress?.moduleStatus === LearnModuleStatus.completed
-        || !!progress?.completedLessons.find(l => l.dashedName === key)
+        || !!progress?.completedLessons.find(l => l.id === itemId)
     )
 
     const stepLabel: (
@@ -64,7 +65,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
         = (item: CollapsibleListItem, isActive: boolean, stepCount?: string, label?: string) => (
             <StepIcon
                 index={stepCount}
-                completed={isItemCompleted(item.dashedName)}
+                completed={isItemCompleted(item.id)}
                 active={isActive}
                 label={label}
             />
@@ -74,7 +75,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
         = (item: CollapsibleListItem) => {
             const isActive: boolean = props.itemId?.(item) === props.active
             const stepCount: string | undefined = item.dashedName.match(/^step-(\d+)$/i)?.[1]
-            const label: ReactNode = stepLabel(item, isActive, stepCount, !stepCount && item.title)
+            const label: ReactNode = stepLabel(item, isActive, stepCount, !stepCount ? item.title : undefined)
             const key: string = props.itemId?.(item) ?? item.title
 
             return (
@@ -127,7 +128,10 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
                         )}
                     </div>
                     <div className={styles['short-desc']}>
-                        <span className='body-small' dangerouslySetInnerHTML={{ __html: props.shortDescription.join('<br/>') }} />
+                        <span
+                            className='body-small'
+                            dangerouslySetInnerHTML={{ __html: props.shortDescription.join('<br/>') }}
+                        />
                     </div>
 
                     <ul className={classNames(styles.list, 'steps-list')}>

src-ts/tools/learn/learn-lib/data-providers/lesson-provider/learn-lesson.model.ts

@@ -1,4 +1,5 @@
 export interface LearnLesson {
     dashedName: string
+    id: string
     title: string
 }

src-ts/tools/learn/learn-lib/data-providers/user-certifications-provider/user-certifications-functions/learn-module-progress.model.ts

@@ -2,6 +2,7 @@ export interface LearnModuleProgress {
     completedLessons: Array<{
         completedDate?: string
         dashedName: string
+        id: string
     }>
     completedPercentage: number
     module: string