Skip to content

Commit b3aecc9

Browse files
SteveDalaSteveDala
authored
Merge pull request #163 from 31Husain31/docs/inbox-migration
Documentation: Inbox migration investigation and full migration plan
2 parents 85a5729 + 52ca636 commit b3aecc9

File tree

2 files changed

+257
-0
lines changed

2 files changed

+257
-0
lines changed

‎src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_FULL_MIGRATION_PLAN.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: Full Angular Migration Plan - Inbox Component
3+
description: Complete migration plan for inbox component including parent dependency chain
4+
---
5+
6+
# Full Angular Migration Plan: Inbox Component
7+
8+
**Date:** January 14, 2026
9+
**By:** Husainuddin Mohammed, 223380186
10+
**Task:** Complete full Angular migration for units/tasks/inbox
11+
12+
---
13+
14+
## Component Dependency Chain
15+
16+
```
17+
units/index.coffee (Parent 1)
18+
↓
19+
Provides: unit, unitRole
20+
↓
21+
units/tasks/tasks.coffee (Parent 2)
22+
↓
23+
Provides: taskData object
24+
↓
25+
units/tasks/inbox/inbox.coffee (Child)
26+
↓
27+
Uses: unit, unitRole, taskData
28+
```
29+
30+
**The problem:** Inbox component needs data from two AngularJS parent states. Can't fully migrate
31+
inbox until parents are migrated.
32+
33+
---
34+
35+
## What Each Parent Provides
36+
37+
**Parent 1 (units/index.coffee):**
38+
39+
- Loads unit object from API
40+
- Resolves user's role for this unit
41+
- Handles permissions and redirects
42+
43+
**Parent 2 (units/tasks/tasks.coffee):**
44+
45+
- Creates taskData object structure
46+
- Manages task selection logic
47+
- Syncs URL with selected task
48+
49+
**Child (inbox.coffee):**
50+
51+
- Sets task source function
52+
- Renders Angular InboxComponent
53+
- Already migrated to Angular - just needs parent cleanup
54+
55+
---
56+
57+
## Migration Order: 3 PRs
58+
59+
### PR 1: Migrate units/index (START HERE)
60+
61+
**Status:** Already started - https://github.com/thoth-tech/doubtfire-web/pull/435
62+
63+
Migrate the root parent first. Replace AngularJS state with Angular resolvers that provide unit and
64+
unitRole data.
65+
66+
**Files to change:**
67+
68+
- Create Angular state in `doubtfire.states.ts`
69+
- Add resolvers for unit and unitRole
70+
- Delete `units/states/index/index.coffee`
71+
72+
**Why first:** Foundation for everything below it
73+
74+
---
75+
76+
### PR 2: Migrate units/tasks
77+
78+
Replace AngularJS state with Angular equivalent that manages taskData object.
79+
80+
**Files to change:**
81+
82+
- Create state or service for taskData management
83+
- Update `doubtfire.states.ts`
84+
- Delete `units/states/tasks/tasks.coffee`
85+
86+
**Why second:** Depends on PR 1 providing unit/unitRole
87+
88+
---
89+
90+
### PR 3: Complete inbox migration
91+
92+
Remove remaining AngularJS files now that parents provide data through Angular.
93+
94+
**Files to delete:**
95+
96+
- `units/states/tasks/inbox/inbox.coffee`
97+
- `units/states/tasks/inbox/inbox.tpl.html`
98+
99+
**Why last:** Depends on both parent PRs
100+
101+
---
102+
103+
## Visual Flow
104+
105+
```
106+
Current State:
107+
AngularJS State → AngularJS State → AngularJS wrapper → Angular Component
108+
(units/index) (units/tasks) (inbox.coffee) (InboxComponent)
109+
110+
After PR 1:
111+
Angular State → AngularJS State → AngularJS wrapper → Angular Component
112+
✓
113+
114+
After PR 2:
115+
Angular State → Angular State → AngularJS wrapper → Angular Component
116+
✓ ✓
117+
118+
After PR 3:
119+
Angular State → Angular State → Angular Component
120+
✓ ✓ ✓ (fully migrated)
121+
```
122+
123+
---
124+
125+
## Testing Strategy
126+
127+
Each PR needs to verify:
128+
129+
- Unit loads correctly with proper permissions
130+
- Task selection and navigation works
131+
- URL syncing functions properly
132+
- Inbox displays tasks and allows interaction
133+
- No console errors
134+
135+
---
136+
137+
## Key Principle
138+
139+
**Bottom-up migration:** Start at the root (units/index), work down to the child (inbox). Each PR is
140+
independently testable and valuable even if later ones are delayed.

‎src/content/docs/Products/OnTrack/Documentation/Front End Migration/Migration/INBOX_MIGRATION_INVESTIGATION.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
title: Inbox Migration Investigation Report
3+
description: Investigation report for the inbox component migration from AngularJS to Angular
4+
---
5+
6+
# Inbox Migration Investigation Report
7+
8+
**Date:** January 08, 2026
9+
**By:** Husainuddin Mohammed, 223380186
10+
**Task:** Investigate inbox component migration from AngularJS to Angular
11+
12+
---
13+
14+
## What I Found
15+
16+
The inbox component has already been migrated to Angular (`InboxComponent`), but it can't work
17+
standalone because it depends on data from two AngularJS parent states.
18+
19+
**Component dependency diagram:**
20+
21+
```
22+
units/index (AngularJS parent)
23+
↓ provides: unit, unitRole
24+
units/tasks (AngularJS parent)
25+
↓ provides: taskData
26+
inbox (Angular component - already exists)
27+
↓ needs all the above data
28+
```
29+
30+
The Angular component exists, but the parents feeding it data are still AngularJS.
31+
32+
---
33+
34+
## Current State
35+
36+
**What works:**
37+
38+
- Angular InboxComponent exists (`.component.ts`, `.html`, `.scss`)
39+
- Old AngularJS files still present (`.coffee`, `.tpl.html`)
40+
- App loads via AngularJS route → renders Angular component with scope data
41+
42+
**What doesn't work:**
43+
44+
- Can't create standalone Angular route
45+
- Component expects `@Input()` data that comes from AngularJS parent scopes
46+
- Creating Angular state without parents causes component to break
47+
48+
---
49+
50+
## The Problem
51+
52+
InboxComponent requires these inputs:
53+
54+
- `unit: Unit` (from units/index parent)
55+
- `unitRole: UnitRole` (from units/index parent)
56+
- `taskData` object (from units/tasks parent)
57+
58+
Without the parent data, the component has nothing to display.
59+
60+
---
61+
62+
## Two Approaches
63+
64+
### Approach 1: Keep Parents (Partial Migration)
65+
66+
**What:** Keep AngularJS parents, only migrate inbox routing **Pros:** Quick, minimal changes
67+
**Cons:** Still dependent on AngularJS, need to revisit later **Files to remove:** Just
68+
`inbox.coffee` and `.tpl.html`
69+
70+
### Approach 2: Migrate Everything (Complete Migration)
71+
72+
**What:** Migrate both parent states first, then inbox **Pros:** Clean, fully Angular, no AngularJS
73+
dependencies **Cons:** More work, needs parent migration first **Files to remove:** All inbox
74+
AngularJS files after parents done
75+
76+
---
77+
78+
## Recommended Path
79+
80+
**Approach 2** is the right solution. Here's why:
81+
82+
Both parent states (`units/index` and `units/tasks`) need migration anyway. If we do partial
83+
migration now, we'll have to come back and redo work later when parents are migrated.
84+
85+
**Migration order:**
86+
87+
1. Migrate units/index parent
88+
2. Migrate units/tasks parent
89+
3. Clean up inbox (just delete old files)
90+
91+
This is detailed in the full migration plan document.
92+
93+
---
94+
95+
## Current Files
96+
97+
**Angular (keep):**
98+
99+
- `inbox.component.ts`
100+
- `inbox.component.html`
101+
- `inbox.component.scss`
102+
- `inbox.component.spec.ts`
103+
104+
**AngularJS (delete after parent migration):**
105+
106+
- `inbox.coffee`
107+
- `inbox.tpl.html`
108+
- `inbox.scss` (old version)
109+
110+
---
111+
112+
## Key Insight
113+
114+
The inbox isn't really blocked by its own complexity - it's blocked by parent dependencies. Once
115+
parents are migrated to Angular, finishing inbox is just cleanup (delete old files).
116+
117+
The real work is in the parent migrations, which is covered in the full migration plan.

0 commit comments

Comments
 (0)