feat(help): Simplify help component setup (#387)

* Help component now use normal routing vs. dynamically creating components by topic param
* No longer requires registering help topics.  They can be discovered via router config.
* UI updates to help component

src/app/core/help/getting-started/getting-started-help.component.html

@@ -22,7 +22,7 @@ <h4>Browser Recommendation</h4>
 	</p>
 </div>
 
-<div class="callout callout-info">
+<div class="callout callout-info mb-0">
 	<h4>Looking for help?</h4>
 	<p>
 		Help is also located throughout the app. Whenever you see this icon:
@@ -39,8 +39,8 @@ <h4>Looking for help?</h4>
 </div>
 
 @if (externalLinks().length > 0) {
-	<div>
-		<h2>External Resources</h2>
+	<div class="mt-3">
+		<h3>External Resources</h3>
 		<external-links [links]="externalLinks()"></external-links>
 	</div>
 }

src/app/core/help/help-routes.ts

@@ -1,12 +1,10 @@
-import { ActivatedRouteSnapshot, ResolveFn, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
 
-import { HelpTopicWrapperComponent } from './help-topic-wrapper.component';
-import { injectHelpTopicsMap } from './help-topic.component';
+import { EXAMPLE_HELP_ROUTES } from '../../site/example/example-help-routes';
+import { TEAMS_HELP_ROUTES } from '../teams/team-help-routes';
+import { GettingStartedHelpComponent } from './getting-started/getting-started-help.component';
 import { HelpComponent } from './help.component';
 
-const breadcrumbResolver: ResolveFn<string | null> = (route: ActivatedRouteSnapshot) =>
-	injectHelpTopicsMap().get(route.params['topic'])?.title ?? null;
-
 export const HELP_ROUTES: Routes = [
 	{
 		path: '',
@@ -21,12 +19,12 @@ export const HELP_ROUTES: Routes = [
 				pathMatch: 'full'
 			},
 			{
-				path: ':topic',
-				component: HelpTopicWrapperComponent,
-				resolve: {
-					breadcrumb: breadcrumbResolver
-				}
-			}
+				path: 'getting-started',
+				title: 'Getting Started',
+				component: GettingStartedHelpComponent
+			},
+			...TEAMS_HELP_ROUTES,
+			...EXAMPLE_HELP_ROUTES
 		]
 	}
 ];

src/app/core/help/help.component.html

@@ -1,26 +1,27 @@
-<div class="help-header">
-	<breadcrumb [homeBreadcrumb]="homeBreadcrumb"></breadcrumb>
-</div>
-
-<div class="help-content row">
-	<div class="col-lg-3 col-xl-2 help-menu" role="complementary">
-		<nav class="card nav">
-			@for (topic of helpTopics; track topic) {
-				<a
-					class="nav-link btn-link"
-					routerLinkActive="active"
-					[routerLink]="['/help/' + topic.id]"
-					>{{ topic.title }}</a
-				>
+<section class="page-header">
+	<h3>
+		Help
+		@if (childRoute(); as route) {
+			- {{ route.title ?? (route.path | titlecase) }}
+		}
+	</h3>
+</section>
+<section class="page-body anchored-page-body flex-row row h-100">
+	<div class="col-lg-3 col-xl-2 h-100" role="complementary">
+		<nav class="card nav h-100 overflow-auto align-items-stretch flex-nowrap">
+			@for (route of childRoutes; track route) {
+				<a class="nav-link" routerLinkActive="active" [routerLink]="['/help/', route.path]">
+					{{ route.title ?? (route.path | titlecase) }}
+				</a>
 			}
 		</nav>
 	</div>
 
-	<div class="col-lg-9 col-xl-10 help-main" role="main">
-		<section class="card">
-			<div class="card-body">
+	<div class="col-lg-9 col-xl-10 h-100" role="main">
+		<section class="card h-100">
+			<div class="card-body overflow-auto">
 				<router-outlet></router-outlet>
 			</div>
 		</section>
 	</div>
-</div>
+</section>

src/app/core/help/help.component.scss

@@ -1,6 +1,12 @@
 @import '../../../styles/shared';
 @import '../../../styles/bootstrap/shared';
 
+:host {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
 //=====================================
 //	Callouts
 //=====================================

src/app/core/help/help.component.ts

@@ -1,5 +1,6 @@
+import { JsonPipe, TitleCasePipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
 	ActivatedRoute,
 	NavigationEnd,
@@ -9,37 +10,22 @@ import {
 	RouterOutlet
 } from '@angular/router';
 
-import { filter } from 'rxjs/operators';
-
-import { BreadcrumbComponent } from '../../common/breadcrumb/breadcrumb.component';
-import { Breadcrumb, BreadcrumbService } from '../../common/breadcrumb/breadcrumb.service';
-import { injectHelpTopics } from './help-topic.component';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
 	templateUrl: 'help.component.html',
 	styleUrls: ['help.component.scss'],
 	standalone: true,
-	imports: [BreadcrumbComponent, RouterLinkActive, RouterLink, RouterOutlet]
+	imports: [RouterLinkActive, RouterLink, RouterOutlet, TitleCasePipe, JsonPipe]
 })
 export class HelpComponent {
 	readonly #route = inject(ActivatedRoute);
-	readonly #router = inject(Router);
-	readonly helpTopics = injectHelpTopics();
-
-	homeBreadcrumb: Breadcrumb = { label: 'Help', url: '/help' };
-
-	title = '';
-
-	protected readonly top = top;
+	readonly childRoute = toSignal(
+		inject(Router).events.pipe(
+			filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+			map((event) => this.#route.firstChild?.routeConfig)
+		)
+	);
 
-	constructor() {
-		this.#router.events
-			.pipe(
-				filter((event) => event instanceof NavigationEnd),
-				takeUntilDestroyed()
-			)
-			.subscribe(() => {
-				this.title = BreadcrumbService.getBreadcrumbLabel(this.#route.snapshot);
-			});
-	}
+	readonly childRoutes = (this.#route.routeConfig?.children ?? []).filter((route) => route.path);
 }

src/app/core/help/provider.ts

@@ -1,9 +1,6 @@
 import { InjectionToken, inject, makeEnvironmentProviders } from '@angular/core';
 import { ROUTES } from '@angular/router';
 
-import { GettingStartedHelpComponent } from './getting-started/getting-started-help.component';
-import { HELP_TOPICS } from './help-topic.component';
-
 export const APP_FEATURE_HELP = new InjectionToken<boolean>('APP_FEATURE_HELP');
 
 export function injectHelpEnabled() {
@@ -16,18 +13,6 @@ export function provideHelpFeature() {
 			provide: APP_FEATURE_HELP,
 			useValue: true
 		},
-		{
-			provide: HELP_TOPICS,
-			multi: true,
-			useValue: [
-				{
-					id: 'getting-started',
-					title: 'Getting Started',
-					ordinal: 0,
-					component: GettingStartedHelpComponent
-				}
-			]
-		},
 		{
 			provide: ROUTES,
 			multi: true,

src/app/core/teams/help/teams-help.component.html

@@ -17,13 +17,13 @@ <h2>Team Roles</h2>
 </p>
 
 <div class="mb-3 site-mb-3">
-	<label>Team Admin</label>
+	<h5>Team Admin</h5>
 	<p>
 		This role grants the user the ability to add/remove members of the team and to delete the
 		team itself. Team admins will receive access requests generated from within the UI.
 	</p>
 
-	<label>Team Editor</label>
+	<h5>Team Editor</h5>
 	<p>
 		This role grants the user the ability to create/edit/delete resources on behalf of the team.
 	</p>

src/app/core/teams/provider.ts

@@ -2,8 +2,6 @@ import { InjectionToken, inject, makeEnvironmentProviders } from '@angular/core'
 import { ROUTES, Routes } from '@angular/router';
 
 import { Topic } from '../../common/topic.model';
-import { HELP_TOPICS } from '../help/help-topic.component';
-import { TeamsHelpComponent } from './help/teams-help.component';
 import { TEAM_TOPICS } from './team-topic.model';
 
 export type AdditionalTeamsRoutes = {
@@ -23,11 +21,6 @@ export function provideTeamsFeature(additionalRoutes?: AdditionalTeamsRoutes) {
 			provide: APP_FEATURE_TEAM,
 			useValue: true
 		},
-		{
-			provide: HELP_TOPICS,
-			multi: true,
-			useValue: [{ id: 'teams', title: 'Teams', ordinal: 9, component: TeamsHelpComponent }]
-		},
 		{
 			provide: TEAM_TOPICS,
 			multi: true,

src/app/core/teams/team-help-routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { TeamsHelpComponent } from './help/teams-help.component';
+
+export const TEAMS_HELP_ROUTES: Routes = [
+	{
+		path: 'teams',
+		component: TeamsHelpComponent
+	}
+];

src/app/site/example/example-help-routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { ExampleHelpComponent } from './help/example-help.component';
+
+export const EXAMPLE_HELP_ROUTES: Routes = [
+	{
+		path: 'example',
+		component: ExampleHelpComponent
+	}
+];

src/app/site/example/provider.ts

@@ -2,9 +2,7 @@ import { makeEnvironmentProviders } from '@angular/core';
 import { ROUTES } from '@angular/router';
 
 import { ADMIN_TOPICS, NAVBAR_TOPICS } from '../../core';
-import { HELP_TOPICS } from '../../core/help/help-topic.component';
 import { EXAMPLE_ROUTES } from './example-routes';
-import { ExampleHelpComponent } from './help/example-help.component';
 
 export function provideExampleSiteFeature() {
 	return makeEnvironmentProviders([
@@ -20,15 +18,6 @@ export function provideExampleSiteFeature() {
 				}
 			]
 		},
-		{
-			provide: HELP_TOPICS,
-			multi: true,
-			useValue: {
-				id: 'example',
-				component: ExampleHelpComponent,
-				ordinal: 7
-			}
-		},
 		{
 			provide: NAVBAR_TOPICS,
 			multi: true,