feat(schema): URL reflects the selected instance so entry views are shareable

Old behaviour: selectInstance(dbId) mutated component state only -- the
URL stayed on /content/schema/:className so an entry view couldn't be
linked, bookmarked, or recovered via browser back.

Add a nested route /content/schema/:className/instance/:dbId pointing at
the same SchemaComponent. The single route.params subscription now keeps
both selectedClass and selectedInstanceId in sync; a dbId in the URL
forces the Entries tab so deep links render the instance browser instead
of the Properties view. selectInstance / clearSelectedInstance /
onInstanceLinkClick all router.navigate now so the URL is the single
source of truth.

Note: clicking a link inside an instance to another object can land us
on a URL whose :className segment doesn't match the loaded instance's
actual schema class. We don't fix the className up after-the-fact yet --
the per-instance "Referrals" section that needs the same load-then-
recompute work is blocked on a new ContentService endpoint (filed
separately).

Author: adamjohnwright

projects/website-angular/src/app/app.routes.ts

@@ -169,6 +169,14 @@ export const routes: Routes = [
       ),
     pathMatch: 'full',
   },
+  {
+    path: 'content/schema/:className/instance/:dbId',
+    loadComponent: () =>
+      import('./content/schema/schema.component').then(
+        (m) => m.SchemaComponent
+      ),
+    pathMatch: 'full',
+  },
 
   //Detail Pages
   {

projects/website-angular/src/app/content/schema/schema.component.ts

@@ -84,12 +84,25 @@ export class SchemaComponent implements OnInit, OnDestroy {
         this.rebuildFlatTree();
         this.loading = false;
 
-        // Listen for route changes
+        // Listen for route changes. The path can be either
+        //   /content/schema/:className
+        // or
+        //   /content/schema/:className/instance/:dbId
+        // so a single subscription has to keep both selectedClass and
+        // selectedInstanceId in sync with the URL.
         this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
           const className = params['className'] || 'DatabaseObject';
           if (className !== this.selectedClass) {
             this.selectClass(className);
           }
+          const dbIdParam = params['dbId'];
+          const dbId = dbIdParam != null ? Number(dbIdParam) : null;
+          if (dbId !== this.selectedInstanceId) {
+            this.selectedInstanceId = dbId;
+            // If we deep-linked into an instance, make sure we're on the
+            // Entries tab so the <app-instance-browser> renders.
+            if (dbId != null) this.activeTab = 'entries';
+          }
         });
       },
       error: () => {
@@ -364,14 +377,25 @@ export class SchemaComponent implements OnInit, OnDestroy {
   }
 
   selectInstance(dbId: number) {
-    this.selectedInstanceId = dbId;
+    this.router.navigate(
+      ['/content/schema', this.selectedClass, 'instance', dbId],
+      { queryParams: { tab: 'entries' }, queryParamsHandling: 'merge' },
+    );
   }
 
   clearSelectedInstance() {
-    this.selectedInstanceId = null;
+    this.router.navigate(['/content/schema', this.selectedClass], {
+      queryParams: { tab: 'entries' },
+    });
   }
 
   onInstanceLinkClick(dbId: number) {
-    this.selectedInstanceId = dbId;
+    // Followed-from links inside the instance browser may point to objects
+    // of a different schema class; we'll fix the className segment after
+    // the instance loads and reveals its real class.
+    this.router.navigate(
+      ['/content/schema', this.selectedClass, 'instance', dbId],
+      { queryParams: { tab: 'entries' }, queryParamsHandling: 'merge' },
+    );
   }
 }