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.

[Supun-VinodIT]

Hi Husain, I pulled the branch and tried to run it locally, but I’m hitting a couple of blockers that prevent me from reviewing the functionality.

1. Angular dev server fails to start
   The build is still trying to load a file that was removed during the migration:

build/src/app/units/states/index/index.js

This reference doesn’t appear anywhere in the repo, so it looks like something in the build pipeline (or a cached output) is still expecting it. Because of this, the Angular dev server won’t start, so I can’t load the webapp.

Could you remove or update the stale reference so the frontend can compile?

2. Unable to access /units/:unitId after login
   Once I bypass the build issue and try to test the routes:

The backend is seeded correctly (verified via SELECT id, name FROM units;)
Login works in Rails console using the same credentials
But the frontend login doesn’t connect, and I can’t open /units/1 or /units/2 after signing in

It looks like the Angular side isn’t hitting the API or isn’t receiving the session properly. This might be related to proxy config, auth setup, or a missing migration step.

Could you confirm whether any additional setup is required for the Angular login flow?

[rubalpreet-singh-123]

Hey @31Husain31, I pulled this branch and tested the changes locally on my system. The migration of the units/index parent state to Angular works as expected, and the routing update to /units/:unitId loads correctly in my testing.

I verified basic student navigation, including opening a unit from the homepage and accessing unit-related pages, and I didn’t encounter any blank screens or routing issues during these flows. The approach of keeping the child states in AngularJS while the parent is handled in Angular seems to function correctly in this setup.