Use the visible parent if the actual parent is not visible

In case a user sees the root node, but not an intermediate parent,
an error will be raised by the frontend trying to access `child.parent`
which is null in that case.

We can use the visible parent that it got deferred under to ensure it
can render successfully

frontend/src/app/components/wp-fast-table/builders/modes/hierarchy/hierarchy-render-pass.ts

@@ -152,7 +152,7 @@ export class HierarchyRenderPass extends PrimaryRenderPass {
     // If the work package has deferred children to render,
     // run them through the callback
     deferredChildren.forEach((child:WorkPackageResource) => {
-      this.insertUnderParent(this.getOrBuildRow(child), child.parent);
+      this.insertUnderParent(this.getOrBuildRow(child), child.parent || workPackage);
 
       // Descend into any children the child WP might have and callback
       this.renderAllDeferredChildren(child);

frontend/src/app/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.directive.ts

@@ -82,15 +82,14 @@ export class WorkPackageRelationsHierarchyComponent extends UntilDestroyedMixin
         this.workPackage = wp;
 
         let toLoad:string[] = [];
+        let parentId = this.workPackage.parent?.id?.toString();
 
-        if (this.workPackage.parent) {
+        if (parentId) {
-          toLoad.push(this.workPackage.parent.id.toString());
+          toLoad.push(parentId.toString());
 
-          this.wpCacheService.loadWorkPackage(this.workPackage.parent.id).values$()
+          this.wpCacheService
-            .pipe(
+            .require(parentId)
-              take(1)
+            .then((parent:WorkPackageResource) => {
-            )
-            .subscribe((parent:WorkPackageResource) => {
               this.workPackage.parent = parent;
             });
         }

frontend/src/app/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.service.ts

@@ -135,7 +135,10 @@ export class WorkPackageRelationsHierarchyService {
         },
         lockVersion: childWorkPackage.lockVersion
       }).then(wp => {
-        this.wpCacheService.loadWorkPackage(parentWorkPackage.id!, true);
+        if (parentWorkPackage) {
+          this.wpCacheService.require(parentWorkPackage.id!, true);
+        }
+
         this.wpCacheService.updateWorkPackage(wp);
       })
         .catch((error) => {

frontend/src/app/components/wp-table/drag-and-drop/actions/hierarchy-drag-action.service.ts

@@ -93,7 +93,7 @@ export class HierarchyDragActionService extends TableDragActionService {
   private loadParentOfWP(wpId:string):Promise<string|null> {
     return this.wpCacheService.require(wpId)
       .then((wp:WorkPackageResource) => {
-        return Promise.resolve(wp.parent.id);
+        return Promise.resolve(wp.parent?.id || null);
       });
   }
 }

frontend/src/app/modules/hal/resources/work-package-resource.ts

@@ -59,7 +59,7 @@ export interface WorkPackageResourceEmbedded {
   availableWatchers:HalResource|any;
   category:HalResource|any;
   children:WorkPackageResource[];
-  parent:HalResource|any;
+  parent:WorkPackageResource|null;
   priority:HalResource|any;
   project:HalResource|any;
   relations:CollectionResource;
@@ -237,7 +237,7 @@ export class WorkPackageBaseResource extends HalResource {
   }
 
   public isParentOf(otherWorkPackage:WorkPackageResource) {
-    return otherWorkPackage.parent.$links.self.$link.href === this.$links.self.$link.href;
+    return otherWorkPackage.parent?.$links.self.$link.href === this.$links.self.$link.href;
   }
 
   /**