Prevent access to undefined AttemptLogs while looking at reports

[LianaHarris360]

Summary

This pull request fixes the console errors that would appear when viewing learner exercise attempts. The errors occurred because AttemptLogItem was being rendered with an undefined attemptLog prop and caused runtime errors when it tried to access properties of attemptLog. This pull request also addresses an issue where, on mobile screens, the KSelect options included selections that did not have associated attemptLogs but could still be selected.

• Conditionally render the AttemptLogItem component only when attemptLog is defined.
• A computed property named attemptLogsForCurrentSection has been added for the attempt logs of the current section.
• Added a computed property for the selected attempt log called selectedAttemptLog to be displayed as the current KSelect item on mobile displays.
• Updated the questionSelectOptions computed property to filter out any questions that don't have an associated attemptLog.

Console Errors fixed:

Before:

Before.mov

After:

After.mov

References

Fixes #12550

Reviewer guidance

1. Create a lesson using the resource "Make 10 (grids and number bonds)" found within Kolibri QA Channel > Exercises > CK12 Exercises (token: nakav-mafak) and assign it to a learner.
2. While signed into the learner account, attempt the lesson.
3. Sign back into Kolibri with an admin/coach account and navigate to Coach > Reports > Lessons and review the learner lesson attempt.
4. Confirm that there are no console errors.

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.17.3a0.dev0_git.23.g3c87d718.pex
Windows Installer (EXE)	kolibri-0.17.3a0.dev0+git.23.g3c87d718-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.3a0.dev0+git.23.g3c87d718-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.3a0.dev0+git.23.g3c87d718.dmg
Android Package (APK)	kolibri-0.17.3a0.dev0+git.23.g3c87d718-0.1.4-debug.apk
TAR file	kolibri-0.17.3a0.dev0+git.23.g3c87d718.tar.gz
WHL file	kolibri-0.17.3a0.dev0+git.23.g3c87d718-py2.py3-none-any.whl

[rtibbles]

A couple of questions - have not manually tested.

[marcellamaki]

@pcenov @radinamatic this is a PR for planned patch 2 - if we can get manual QA before I tag the release beta, that would be great.

[rtibbles]

Hrm, is this happening when section.title is undefined rather than being an empty string? Perhaps we could just tweak the implementation here:

kolibri/packages/kolibri-common/strings/enhancedQuizManagementStrings.js

Line 224 in 3d12dae

return section.section_title === ''

to do a looser check, that section is defined, section.title is defined, and section.title is not empty?

So could maybe update it to:

export function displaySectionTitle(section, index) {
  return section?.section_title
    ? sectionLabel$({ sectionNumber: index + 1 })
    : section.section_title;
}

[LianaHarris360]

Yes, this was happening because displaySectionTitle() is checking for section.section_title, but it seems that Attemptlogs for practice exercises have section.title instead. I did try this way, but had some issues with it not working when checking the attempt logs for exams.

export function displaySectionTitle(section, index) {
  const title = section.section_title || section.title;
  return title === ' '
    ? sectionLabel$({ sectionNumber: index + 1 })
    : title;
}

I could instead try

const title = section.section_title ? section.section_title : section.title;

Edit: I get this console error with this way as well: Invalid prop: type check failed for prop "title". Expected String, got Undefined

[rtibbles]

Hrm... I suspect that the discrepancy between section_title and title is the root issue here. So, maybe we should trace back where that is coming from and just rectify that instead?

[rtibbles]

i.e. it should always be section_title for the title for a section, and not title.

[LianaHarris360]

Hmm, I may have found where it's coming from. Possibly this annotateSections() util function.

[rtibbles]

That looks rather like a bug, and one that I caused, looking at the git blame, so I'd be most obliged if you could fix it!

[LianaHarris360]

It's fixed, now all sections annotated with annotateSections() have the field section_title
Before:

After:

[rtibbles]

Thank you!

[rtibbles]

All code review based questions resolved - manual QA sign off should leave this good to merge!

[pcenov]

Thanks @LianaHarris360 - I confirm that the console errors are no longer displayed and there are no regressions!

[rtibbles]

QA approved - good to go!

[rtibbles]

Merging with failing check that is fixed on release-v0.17.x