refactor: migrate units/index parent state to Angular

[31Husain31]

Description
Parent Migration (PR 1 of 3): First PR in the 3-part inbox migration. Migrates the units/index parent state from AngularJS to Angular by adapting the existing UnitRootState. This parent provides unit and unitRole data to all child states (tasks, edit, students, etc.) while maintaining compatibility with existing AngularJS children.

What Changed:

• Renamed state from 'unit-root-state' to 'units/index'
• Changed URL from /units2/:unitId to /units/:unitId
• Split data resolvers: unit$ and unitRole$ for cleaner separation
• Added loading state UI matching old template behavior
• Updated to use default ui-view instead of named unitView
• Removed old AngularJS files (index.coffee, index.tpl.html)

Part of: T3 2025 - Investigate partial migration for tasks/inbox
Related PRs: PR 2/3 (units/tasks) and PR 3/3 (inbox) to follow
Migration Plan: INBOX_FULL_MIGRATION_PLAN.md

Type of change

• Refactor (non-breaking change which improves code structure)

How Has This Been Tested?
Manual testing required for:

• Unit loading at /units/:unitId route
• Permission checks for different roles (Tutor, Convenor, Admin, Auditor)
• Admin/Auditor special access logic
• Loading state display
• Child state compatibility (units/tasks, units/edit, etc.)
• Redirect behavior on invalid unit or no access

Testing Checklist:

[ ] Tested in latest Chrome
[ ] Tested in latest Safari
[ ] Tested in latest Firefox

Checklist:

[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[ ] I have commented my code in hard-to-understand areas (code is straightforward refactor)
[ ] I have made corresponding changes to the documentation (none required for internal refactor)
[x] My changes generate no new warnings
[x] I have requested a review from my team

[31Husain31]

My colleague reviewed and pointed out an issue.

this has been fixed! I removed the stale import from doubtfire-angularjs.module.ts (line 83).

The import was referencing build/src/app/units/states/index/index.js which no longer exists after the migration. The dev server should now start correctly.

Thanks for catching this! Ready for review ^^

[mannat2634]

Hi @31Husain31, I was checking your changes locally but I encountered few issues.

Please do check if you are also facing similar or is it just happening in my device.

When I click on a unit from homepage (as a student), I am redirected to project2 url. And I see this:

And when I go to a project from the dropdown menu, I see this:

This PR breaks child states that still use AngularJS. The problem is scope inheritance.

The old parent state had a controller that set $scope.unit and $scope.unitRole. Child states like units/tasks, units/edit, units/students-list, etc. depend on these properties being available in scope.

Your new component uses async pipes (unit$ | async) which don't populate the AngularJS scope. So when AngularJS child state controllers run and try to access $scope.unit, it's undefined.

That's why the pages show blank - all the child controllers are failing silently because they can't find the unit data.

The hybrid app still needs the old scope-based pattern to work while CoffeeScript states exist as children.

Could you investigate this issue?

[31Husain31]

Thanks for the detailed review and catching this scope inheritance issue! @mannat2634

I've pushed a fix that:

• Subscribes to unit$ and unitRole$ observables in ngOnInit
• Stores values as component properties (for Angular template)
• Sets values on $rootScope (for AngularJS child states to access)
• Uses $applyAsync() to trigger the AngularJS digest cycle
• Properly cleans up subscriptions on destroy

The hybrid approach now works: Angular parent provides data that AngularJS children can access via $rootScope.unit and $rootScope.unitRole.

Could you test again and let me know if this resolves the page issue?

[JeffySam]

Hi @31Husain31, I tested this PR locally and ran into an issue — could you please check if you’re seeing the same on your end?

Issue

Clicking a unit from the homepage (student view) redirects to the project2 URL and shows a blank page.

Opening a project via the dropdown results in the same blank screen.

Same issue was also reported by another reviewer, so this doesn’t seem environment-specific.

Likely Cause (Hybrid Angular / AngularJS)

This PR breaks AngularJS child states due to scope inheritance.

Previously, the parent AngularJS controller populated:

$scope.unit

$scope.unitRole

Child states (units/tasks, units/edit, units/students-list, etc.) still rely on these values.

The new Angular parent uses observables + async pipes (unit$ | async), which don’t populate the AngularJS $scope. As a result, child controllers receive undefined and fail silently, causing the blank pages.

Suggestion

Until all child states are migrated:

Bridge unit / unitRole back onto $scope, or

Delay converting this parent state until AngularJS children are removed

Let me know — happy to help test a fix.