[APIView UI] Redesign Home Page
- Dominant language
- C#
- Stars
- 135
- Forks
- 260
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 143
Description
This issue tracks the work that needs to be done to support the Project-based organization of APIViews described in #12595.
- Develop in Angular instead of Razor
- Display the notifications button (from #13266)
More items TBD once the UX is settled.
---
## Implementation Plan
### Problem
The Angular SPA's `IndexPageComponent` currently just redirects to the Razor page (`http://localhost:5000/`). The goal is to make the Angular SPA the **primary entry point** (port 4200) with a proper reviews-listing home page, instead of bouncing users back to the legacy Razor UI.
### Approach
Replace the redirect-stub `IndexPageComponent` with a full Angular home page that replicates the Razor `Assemblies/Index` page functionality. The SPA already has a `ReviewsListComponent` (PrimeNG virtual-scroll table) and `ReviewsService` that call the `GET /api/reviews` endpoint — the main gap is that the index page doesn't use them and instead redirects. No backend changes are needed.
### Tasks
- [ ] **1. Rewrite `IndexPageComponent` to render reviews inline** — Remove `window.location.href` redirect. Add `NavBarComponent` at the top, embed `` as the main content, fetch `userProfile` via `UserProfileService`, and wire `reviewEmitter` output to navigate within the SPA via Angular Router.
- Files: `index-page.component.ts`, `index-page.component.html`, `index-page.component.scss`
- [ ] **2. Update `ReviewsListComponent` navigation** — Inject `Router`, change `viewReview()` and `onRowSelect` to use `router.navigate(['/review', review.id])` instead of `window.open` to the Razor page.
- Files: `reviews-list.component.ts`
- [ ] **3. Add columns to match Razor table** — The Razor `_ReviewsPartial` shows Name, CreatedBy, Last Updated, and Delete. The Angular table only shows Language and Package Name. Add **CreatedBy** column, **Last Updated** column (with `ngx-timeago`), and optional **Delete** button for review owners. Add `createdBy` field to the `Review` TS model if missing.
- Files: `reviews-list.component.html`, `reviews-list.component.ts`, `review.ts`
- [ ] **4. Add "Create Review" upload dialog** — Replicate Razor upload modal with PrimeNG ``: language selector (use `getSupportedLanguages()`), optional package name picker (`GET /api/reviews/languages/{language}/packagenames`), file upload, optional file path input, optional label. On submit call `ReviewsService.createReview()` and navigate to the created review.
- Files: `index-page.component.html`, `index-page.component.ts`
- [ ] **5. Update `app.module.ts` imports** — Add `NavBarComponent`, `TimeagoModule`, and any additional PrimeNG modules (e.g., `DialogModule`, `FileUploadModule`) to `AppModule`.
- Files: `app.module.ts`
- [ ] **6. Update `openReviewPage` in `ReviewsService`** — Change or deprecate `openReviewPage()` to navigate within the SPA instead of `window.open` to Razor URL.
- Files: `reviews.service.ts`
- [ ] **7. Verify API data completeness** — Confirm `GET /api/reviews` returns `createdBy` and `lastUpdatedOn` in `ReviewListItemModel`. Update Angular `Review` model if fields are missing.
### Notes
- The existing `ReviewsListComponent` uses PrimeNG virtual scroll with lazy loading and server-side filtering/sorting — more capable than Razor's simple pagination. Keep this.
- `NavBarComponent` is standalone and already includes notifications (#13266). Just add `` to the template.
- The proxy config already forwards `/api` and `/hubs` to `localhost:5000`, so the Angular dev server at 4200 can talk to the .NET backend.
- The Razor sidebar filter panel (language, state, approval) is partially replicated in the Angular filter drawer. Sufficient for now.
- Consider the scenario in where reviews or projects are incorrectly constructed (missing parameters) and this should not break the loading of the home page
Contributor guide
Research direction
Start with index-page.component.ts/html/scss and the existing ReviewsListComponent, then review reviews.service.ts, review.ts, and app.module.ts. Replace the redirect with the Angular reviews home, navigation, columns, and upload dialog described in the tasks. Done means the SPA is the primary home page, reviews can be listed and opened within Angular, and a review can be created through the dialog.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100