Azure / Azure/azure-sdk-tools

[APIView UI] Redesign Home Page

Open
#13,276 0 comments 0 reactions 0 assignees View on GitHub
APIView
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.