Improved Object Validations with New ValidateObject

[Abhishek-Punhani]

Summary

Implemented improved object validations using validateObject function

• Replaced ad-hoc validation logic with validateObject function for consistency and maintainability
• Updated prop validation in components to use validateObject
• Ensure all object prop validations are thorough and standardized
• Manual verification performed to ensure no regressions
• Issue Addressed : https://github.com/learningequality/kolibri/issues/8903

…

References

#8903 …

Reviewer guidance

1. HybridLearningLessonCard.vue

• Appears on lesson listing or hybrid learning pages.
• Navigate to the page listing lessons.
• Verify each lesson card displays correct title, thumbnail, and progress bar.
• Observe the console for errors.

2. DownloadButton.vue

• Often appears on resource detail pages.
• Go to the relevant resource page or file download section.
• Check that the download button is visible, clicking triggers the correct download.
• Observe the console for errors.

3. LibraryAndChannelBrowserMainContent.vue

• Found in the library or channel browsing view.
• Navigate to the library/channel page.
• Confirm channel or resource items display and link properly.
• Observe the console for errors.

Check for any validation failed or invalid prop type erros in console while navigating Learn App

Summary by CodeRabbit

• New Features
  • Enhanced validation for lesson, content, and file data in various components, ensuring required fields and correct data types.
• Refactor
  • Improved prop validation logic for better data integrity across multiple components.
• Style
  • Removed restrictive validation on view style selection to allow more flexibility.

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0a0.dev0_git.92.g6b23780e.pex
Windows Installer (EXE)	kolibri-0.18.0a0.dev0+git.92.g6b23780e-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0a0.dev0+git.92.g6b23780e-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0a0.dev0+git.92.g6b23780e.dmg
Android Package (APK)	kolibri-0.18.0a0.dev0+git.92.g6b23780e-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0a0.dev0+git.92.g6b23780e.zip
TAR file	kolibri-0.18.0a0.dev0+git.92.g6b23780e.tar.gz
WHL file	kolibri-0.18.0a0.dev0+git.92.g6b23780e-py2.py3-none-any.whl

[Abhishek-Punhani]

It'd be nice to have a consistent spec for a base content node. It's worth noting though that we'd want to be sure that in certain cases, such as where the spec in LibraryAndChannelBrowserMainContent.vue expects a copies key. So we'd want to be sure we include fields like that directly in the component.

I'm not super sure where we should put the specs - my first sense was alongside the objectSpecs.js file in packages/kolibri/utils (maybe in a subdir) -- but would be interested in @rtibbles thoughts for where it should live

@nucleogenesis , It seems a good idea to have a function like validateContentNode; it will reduce code replication. I think we can handle that in a different issue.

[Abhishek-Punhani]

@nucleogenesis @rtibbles , How do you think we should proceed? I believe we can separate the spec for contentNode validations to improve consistency and reduce redundancy. I have opened an issue for that #13315

[coderabbitai[bot]]

Walkthrough

The changes introduce stricter runtime validation for props in several Vue components. The validateObject utility is now used to enforce specific object structures for props that accept objects or arrays of objects. In HybridLearningLessonCard.vue, the content prop must match a defined schema. In LibraryAndChannelBrowserMainContent.vue, each item in the contents array must conform to a required shape, and the validator for currentCardViewStyle has been removed. In DownloadButton.vue, each file in the files prop array is validated for required fields and structure.

Changes

File(s)	Change Summary
kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue	Added a validator to the content prop using validateObject to enforce required and optional fields.
kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue	Added a validator to the contents prop enforcing object shape for each array element; removed validator from currentCardViewStyle.
packages/kolibri/components/DownloadButton.vue	Added a validator to the files prop to enforce a strict schema for each file object in the array.

Sequence Diagram(s)

sequenceDiagram
    participant ParentComponent
    participant VueComponent

    ParentComponent->>VueComponent: Passes prop (object or array)
    VueComponent->>VueComponent: Runs custom validator (using validateObject)
    alt Validation passes
        VueComponent-->>ParentComponent: Accepts prop, proceeds as normal
    else Validation fails
        VueComponent-->>ParentComponent: Emits Vue warning/error
    end

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 85e257e0e9a293340c6224974c6c59a063f16ba8 and 2fc6199c607695dc02ece83f144b9c8b002493e4.

📒 Files selected for processing (1)

• kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: All file linting
• GitHub Check: Frontend tests
• GitHub Check: Build WHL file / Build WHL

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[Abhishek-Punhani]

@nucleogenesis @rtibbles , Will this PR be merged after #13315 is resolved or not? I have made other requested changes and have updated the PR. Please check at your convenience

[MisRob]

I'm sorry for delay @Abhishek-Punhani, we will follow-up with you.

[Abhishek-Punhani]

@nucleogenesis , Yes, I completely agree! Once #13315 is finalised, we can clear all the tech debt and update the implementation to use the consolidated contentNodeSpec for all contentNodeValidations. I would like to work on the implementation of #13315

[MisRob]

Hi @Abhishek-Punhani, thanks a lot for the offer to work on #13315. Looking at the conversation there, it still needs some decisions and I am rather unsure if / when those can be done. Meanwhile, if it's interesting for you, you're welcome to keep an eye on https://github.com/learningequality/studio/issues/5060 where I am adding new issues on weekly basis specifically for our community, and this work has generally higher priority and so we are able to follow-up on everything. I am glad to have you there particularly for more complex issues - you already have lots of experience in our codebases and I've enjoyed collaborating with you.

[Abhishek-Punhani]

Sure @MisRob , thanks for the heads-up! I'll definitely keep an eye on learningequality/studio#5060 and start working on the open issues

[MisRob]

Can this be merged @nucleogenesis?