Remember latest tab when toggling the details pane

app/assets/javascripts/angular/routing.js

@@ -38,7 +38,21 @@ angular.module('openproject')
       url: '{projectPath:.*}/work_packages?query_id',
       abstract: true,
       templateUrl: "/templates/work_packages.html",
-      controller: 'WorkPackagesController'
+      controller: 'WorkPackagesController',
+      resolve: {
+        latestTab: function($state) {
+          var stateName = 'work-packages.list.details.overview'; // the default tab
+
+          return {
+            getStateName: function() {
+              return stateName;
+            },
+            registerState: function() {
+              stateName = $state.current.name;
+            }
+          };
+        }
+      }
     })
     .state('work-packages.list', {
       url: "",

app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js

@@ -37,6 +37,7 @@ angular.module('openproject.workPackages.controllers')
 
 .controller('WorkPackageDetailsController', [
   '$scope',
+  'latestTab',
   'workPackage',
   'I18n',
   'DEFAULT_WORK_PACKAGE_PROPERTIES',
@@ -46,7 +47,11 @@ angular.module('openproject.workPackages.controllers')
   'UserService',
   '$q',
   'ConfigurationService',
-  function($scope, workPackage, I18n, DEFAULT_WORK_PACKAGE_PROPERTIES, USER_TYPE, WorkPackagesHelper, PathHelper, UserService, $q, ConfigurationService) {
+  function($scope, latestTab, workPackage, I18n, DEFAULT_WORK_PACKAGE_PROPERTIES, USER_TYPE, WorkPackagesHelper, PathHelper, UserService, $q, ConfigurationService) {
+
+    $scope.$on('$stateChangeSuccess', function(event, toState){
+      latestTab.registerState(toState.name);
+    });
 
     // initialization
     $scope.I18n = I18n;

app/assets/javascripts/angular/work_packages/controllers/work-packages-list-controller.js

@@ -35,6 +35,7 @@ angular.module('openproject.workPackages.controllers')
     '$location',
     '$stateParams',
     '$state',
+    'latestTab',
     'I18n',
     'WorkPackagesTableService',
     'WorkPackageService',
@@ -46,7 +47,7 @@ angular.module('openproject.workPackages.controllers')
     'HALAPIResource',
     'INITIALLY_SELECTED_COLUMNS',
     'OPERATORS_AND_LABELS_BY_FILTER_TYPE',
-    function($scope, $rootScope, $q, $location, $stateParams, $state,
+    function($scope, $rootScope, $q, $location, $stateParams, $state, latestTab,
       I18n, WorkPackagesTableService,
       WorkPackageService, ProjectService, QueryService, PaginationService,
       AuthorisationService, WorkPackageLoadingHelper, HALAPIResource, INITIALLY_SELECTED_COLUMNS,
@@ -206,4 +207,9 @@ angular.module('openproject.workPackages.controllers')
   $scope.$watch(QueryService.getQueryName, function(queryName){
     $scope.selectedTitle = queryName || I18n.t('js.toolbar.unselected_title');
   });
+
+  $scope.openLatestTab = function() {
+    $state.go(latestTab.getStateName(), { workPackageId: $scope.preselectedWorkPackageId });
+  };
+
 }]);

karma/tests/controllers/work-package-details-controller-test.js

@@ -60,6 +60,7 @@ describe('WorkPackageDetailsController', function() {
       ctrl = $controller("WorkPackageDetailsController", {
         $scope:  scope,
         $stateParams: { workPackageId: workPackageId },
+        latestTab: {},
         I18n: I18n,
         ConfigurationService: {
           commentsSortedInDescendingOrder: function() {

karma/tests/controllers/work-packages-list-controller-test.js

@@ -137,7 +137,8 @@ describe('WorkPackagesListController', function() {
         PaginationService:  testPaginationService,
         WorkPackageService: testWorkPackageService,
         $stateParams:       testParams,
-        $state:             testState
+        $state:             testState,
+        latestTab: {}
       });
     };
 

public/templates/work_packages.list.html

@@ -35,7 +35,7 @@
           <li feature-flag="detailsView">
             <button class="button"
                     ng-class="{ active: $state.includes('work-packages.list.details') }"
-                    ui-sref="work-packages.list.details.overview({workPackageId: preselectedWorkPackageId})">
+                    ng-click="openLatestTab()">
               <i class="icon-table-detail-view icon-buttons"></i>
             </button>
           </li>