Move relations into main area

app/assets/stylesheets/content/work_packages/tabs/_relations.sass

@@ -95,9 +95,6 @@
 .wp-relations-controls-section.-expanded .wp-relations--description-icon
   color: $content-icon-link-pressed-color
 
-.wp-relations-create
-  margin-top: 1.5em
-
 .wp-relations-create-button
   margin: 0.25rem 0
   line-height: 1.5

frontend/app/components/routing/ui-router.config.ts

@@ -72,14 +72,6 @@ const panels = {
 
     return activity;
   },
-
-  get relations() {
-    return {
-      url: '/relations',
-      reloadOnSearch: false,
-      component: WorkPackageRelationsTabComponent
-    };
-  }
 };
 
 openprojectModule
@@ -141,7 +133,10 @@ openprojectModule
       })
       .state('work-packages.show.activity', panels.activity)
       .state('work-packages.show.activity.details', panels.activityDetails)
-      .state('work-packages.show.relations', panels.relations)
+      .state('work-packages.show.relations', {
+        url: '/relations',
+        redirectTo: 'work-packages.show.activity'
+      })
       .state('work-packages.show.watchers', panels.watchers)
 
       .state('work-packages.list', {
@@ -188,7 +183,10 @@ openprojectModule
       .state('work-packages.list.details.overview', panels.overview)
       .state('work-packages.list.details.activity', panels.activity)
       .state('work-packages.list.details.activity.details', panels.activityDetails)
-      .state('work-packages.list.details.relations', panels.relations)
+      .state('work-packages.list.details.relations', {
+        url: '/relations',
+        redirectTo: 'work-packages.list.details.overview'
+      })
       .state('work-packages.list.details.watchers', panels.watchers);
   })
 

frontend/app/components/routing/wp-full-view/wp-full-view.html

@@ -69,12 +69,6 @@
                   uiSrefActive="selected">
                 <a href="" [textContent]="text.tabs.activity"></a>
               </li>
-              <li uiSref="work-packages.show.relations"
-                  [uiParams]="{workPackageId: workPackage.id}"
-                  uiSrefActive="selected">
-                <a href="" [textContent]="text.tabs.relations"></a>
-                <wp-relations-count [wpId]="workPackage.id"></wp-relations-count>
-              </li>
               <li *ngIf="canViewWorkPackageWatchers()"
                   uiSref="work-packages.show.watchers"
                   [uiParams]="{workPackageId: workPackage.id}"

frontend/app/components/routing/wp-split-view/wp-split-view.html

@@ -13,11 +13,6 @@
             uiSrefActive="selected">
           <a href="" [textContent]="text.tabs.activity"></a>
         </li>
-        <li uiSref="work-packages.list.details.relations"
-            uiSrefActive="selected">
-          <a href="" [textContent]="text.tabs.relations"></a>
-          <wp-relations-count [wpId]="workPackage.id"></wp-relations-count>
-        </li>
         <li ng-if="canViewWorkPackageWatchers()"
             uiSref="work-packages.list.details.watchers"
             uiSrefActive="selected">

frontend/app/components/work-packages/wp-single-view/wp-single-view.html

@@ -156,6 +156,8 @@
   </div>
 </div>
 
+<wp-relations-tab [workPackageId]="workPackage.id"></wp-relations-tab>
+
 <div class="work-packages--attachments attributes-group">
   <div class="work-packages--atachments-container">
     <div class="attributes-group--header"

frontend/app/components/wp-relations/wp-relations-parent/wp-relations-parent.component.ts

@@ -16,6 +16,7 @@ export class WpRelationParentComponent implements OnInit, OnDestroy {
   public showEditForm:boolean = false;
   public canModifyHierarchy:boolean = false;
   public selectedWpId:string|null = null;
+  public isSaving = false;
 
   constructor(readonly elementRef:ElementRef,
               readonly wpRelationsHierarchyService:WorkPackageRelationsHierarchyService,
@@ -58,12 +59,16 @@ export class WpRelationParentComponent implements OnInit, OnDestroy {
     const newParentId = this.selectedWpId;
     this.showEditForm = false;
     this.selectedWpId = null;
+    this.isSaving = true;
 
     this.wpRelationsHierarchyService.changeParent(this.workPackage, newParentId)
       .then((updatedWp:WorkPackageResourceInterface) => {
-        setTimeout(() => angular.element('#hierarchy--parent').focus());
+        setTimeout(() =>  angular.element('#hierarchy--parent').focus());
       })
-      .catch((err:any) => this.wpNotificationsService.handleErrorResponse(err, this.workPackage));
+      .catch((err:any) => {
+        this.wpNotificationsService.handleErrorResponse(err, this.workPackage);
+      })
+      .then(() => this.isSaving = false) // Behaves as .finally()
   }
 
   public get relationReady() {

frontend/app/components/wp-relations/wp-relations-parent/wp-relations-parent.html

@@ -42,7 +42,7 @@
       <div class="wp-relations-create-button -full-width"
            *ngIf="!showEditForm">
         <div class="grid-block">
-          <div class="grid-content collapse hide-when-print">
+          <div class="grid-content collapse hide-when-print wp-inline-create-button">
             <a class="wp-inline-create--add-link relation-create"
                (click)="showEditForm = true"
                role="button"
@@ -68,7 +68,7 @@
           <div class="grid-content medium-2 collapse wp-relations-controls-section relation-row">
             <accessible-by-keyboard
               linkClass="wp-create-relation--save"
-              [isDisabled]="isDisabled"
+              [isDisabled]="!selectedWpId || isSaving"
               (execute)="changeParent()"
               aria-hidden="false">
               <op-icon icon-classes="icon-checkmark" [icon-title]="text.save"></op-icon>

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

@@ -38,6 +38,7 @@ import {StateService} from '@uirouter/core';
 
 export class WorkPackageRelationsController {
   public relationGroups:RelatedWorkPackagesGroup;
+  public relationsPresent:boolean = false;
   public workPackage:WorkPackageResourceInterface;
   public canAddRelation:boolean;
 
@@ -45,6 +46,10 @@ export class WorkPackageRelationsController {
   public groupByWorkPackageType = false;
   public currentRelations:RelationResourceInterface[] = [];
 
+  public text = {
+    relations_header: this.I18n.t('js.work_packages.tabs.relations')
+  };
+
   constructor(protected $scope:ng.IScope,
               protected $q:ng.IQService,
               protected $state:StateService,
@@ -108,6 +113,7 @@ export class WorkPackageRelationsController {
           return this.I18n.t('js.relation_labels.' + normalizedType);
         }
       });
+    this.relationsPresent = _.size(this.relationGroups) > 0;
   }
 
   protected loadedRelations(stateValues:RelationsStateValue):void {

frontend/app/components/wp-relations/wp-relations.template.html

@@ -1,5 +1,18 @@
 <div class="loading-indicator--location"
      data-indicator-name="relation-groups">
+
+    <div class="wp-relations-hierarchy-section"
+         ng-if="!$ctrl.relationsPresent">
+        <div class="attributes-group--header">
+            <div class="attributes-group--header-container">
+                <h3 class="attributes-group--header-text"
+                    ng-bind="$ctrl.text.relations_header">
+                </h3>
+            </div>
+        </div>
+    </div>
+
+
     <div ng-repeat="(type, relatedWorkPackages) in $ctrl.relationGroups">
     <wp-relations-group header="type"
                         group-by-work-package-type="$ctrl.groupByWorkPackageType"

frontend/app/components/wp-single-view-tabs/relations-tab/relations-tab.component.ts

@@ -28,7 +28,7 @@
 
 import {Transition} from '@uirouter/core';
 import {WorkPackageCacheService} from 'core-components/work-packages/work-package-cache.service';
-import {Component, Inject, OnDestroy} from '@angular/core';
+import {Component, Inject, Input, OnDestroy} from '@angular/core';
 import {I18nToken} from '../../../angular4-transition-utils';
 import {WorkPackageResourceInterface} from 'core-components/api/api-v3/hal-resources/work-package-resource.service';
 import {componentDestroyed} from 'ng2-rx-componentdestroyed';
@@ -38,18 +38,21 @@ import {componentDestroyed} from 'ng2-rx-componentdestroyed';
   selector: 'wp-relations-tab',
 })
 export class WorkPackageRelationsTabComponent implements OnDestroy {
-  public workPackageId:string;
+  @Input() public workPackageId?:string;
   public workPackage:WorkPackageResourceInterface;
 
   public constructor(@Inject(I18nToken) readonly I18n:op.I18n,
                      readonly $transition:Transition,
                      readonly wpCacheService:WorkPackageCacheService) {
 
-    this.workPackageId = this.$transition.params('to').workPackageId;
-    wpCacheService.loadWorkPackage(this.workPackageId)
+    const wpId = this.workPackageId || this.$transition.params('to').workPackageId;
+    wpCacheService.loadWorkPackage(wpId)
       .values$()
       .takeUntil(componentDestroyed(this))
-      .subscribe((wp) => this.workPackage = wp);
+      .subscribe((wp) => {
+        this.workPackageId = wp.id;
+        this.workPackage = wp;
+      });
   }
 
   ngOnDestroy() {