Merge branch 'feature/41113/unselect-cards-team-planner' into dev

frontend/src/app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.html

@@ -36,6 +36,7 @@
       <ng-container *ngFor="let wp of currentWorkPackages$ | async">
         <wp-single-card
           [workPackage]="wp"
+          [selectedWhenOpen]="true"
           [showInfoButton]="true"
           [disabledInfo]="showDisabledText(wp)"
           [attr.data-drag-helper-id]="wp.id"

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html

@@ -87,6 +87,7 @@
     <ng-template #eventContent let-event="event">
       <wp-single-card
         [workPackage]="event.extendedProps.workPackage"
+        [selectedWhenOpen]="true"
         [orientation]="'horizontal'"
         [highlightingMode]="'type'"
         [showInfoButton]="true"

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.html

@@ -2,7 +2,7 @@
   class="op-wp-single-card"
   data-qa-selector="op-wp-single-card"
   [attr.data-qa-draggable]="draggable || undefined"
-  [attr.data-qa-checked]="isSelected(workPackage) || undefined"
+  [attr.data-qa-selected]="selected || undefined"
   [ngClass]="cardClasses()"
   [title]="cardTitle()"
   (click)="cardClicked.emit({ workPackageId: workPackage.id, event: $event })"

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts

@@ -10,7 +10,10 @@ import {
 import { uiStateLinkClass } from 'core-app/features/work-packages/components/wp-fast-table/builders/ui-state-link-builder';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { Highlighting } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
-import { StateService } from '@uirouter/core';
+import {
+  StateService,
+  UIRouterGlobals,
+} from '@uirouter/core';
 import { WorkPackageViewSelectionService } from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-selection.service';
 import { WorkPackageCardViewService } from 'core-app/features/work-packages/components/wp-card-view/services/wp-card-view.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -23,6 +26,8 @@ import { isClickedWithModifier } from 'core-app/shared/helpers/link-handling/lin
 import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { StatusResource } from 'core-app/features/hal/resources/status-resource';
+import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'wp-single-card',
@@ -33,6 +38,8 @@ import { StatusResource } from 'core-app/features/hal/resources/status-resource'
 export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implements OnInit {
   @Input() public workPackage:WorkPackageResource;
 
+  @Input() public selectedWhenOpen = false;
+
   @Input() public showInfoButton = false;
 
   @Input() public showStatusButton = true;
@@ -65,6 +72,8 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
 
   public uiStateLinkClass:string = uiStateLinkClass;
 
+  public selected = false;
+
   public text = {
     removeCard: this.I18n.t('js.card.remove_from_list'),
     detailsView: this.I18n.t('js.button_open_details'),
@@ -76,6 +85,7 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
     readonly pathHelper:PathHelperService,
     readonly I18n:I18nService,
     readonly $state:StateService,
+    readonly uiRouterGlobals:UIRouterGlobals,
     readonly wpTableSelection:WorkPackageViewSelectionService,
     readonly wpTableFocus:WorkPackageViewFocusService,
     readonly cardView:WorkPackageCardViewService,
@@ -87,11 +97,22 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
 
   ngOnInit():void {
     // Update selection state
-    this.wpTableSelection.live$()
+    combineLatest([
+      this.wpTableSelection.live$(),
+      this.uiRouterGlobals.params$,
+    ])
       .pipe(
         this.untilDestroyed(),
+        map(() => {
+          if (this.selectedWhenOpen) {
+            return this.uiRouterGlobals.params.workPackageId === this.workPackage.id;
+          }
+
+          return this.wpTableSelection.isSelected(this.workPackage.id as string);
+        }),
       )
-      .subscribe(() => {
+      .subscribe((selected) => {
+        this.selected = selected;
         this.cdRef.detectChanges();
       });
   }
@@ -118,7 +139,7 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
     const base = 'op-wp-single-card';
 
     return {
-      [`${base}_checked`]: this.isSelected(this.workPackage),
+      [`${base}_selected`]: this.selected,
       [`${base}_draggable`]: this.draggable,
       [`${base}_new`]: isNewResource(this.workPackage),
       [`${base}_shrink`]: this.shrinkOnMobile,
@@ -210,10 +231,6 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
     return wp.bcfViewpoints && wp.bcfViewpoints.length > 0 ? `${wp.bcfViewpoints[0].href}/snapshot` : null;
   }
 
-  public isSelected(wp:WorkPackageResource):boolean {
-    return this.wpTableSelection.isSelected(wp.id!);
-  }
-
   private cardHighlighting(wp:WorkPackageResource):string {
     if (['status', 'priority', 'type'].includes(this.highlightingMode)) {
       return Highlighting.backgroundClass(this.highlightingMode, wp[this.highlightingMode].id);

modules/calendar/spec/features/query_handling_spec.rb

@@ -91,7 +91,7 @@ describe 'Calendar query handling', type: :feature, js: true do
 
     expect(page).to have_text saved_query.name
 
-    click_link saved_query.name
+    find('td.name a', text: saved_query.name).click
 
     loading_indicator_saveguard
 

modules/team_planner/spec/features/team_planner_split_view_spec.rb

@@ -71,11 +71,26 @@ describe 'Team planner split view navigation', type: :feature, js: true, with_ee
     expect(page).to have_no_current_path /team_planners\/new\/details\/#{work_package1.id}/
 
     # Open split view through info icon
-    team_planner.open_split_view_by_info_icon work_package1
+    split_view = team_planner.open_split_view_by_info_icon work_package1
     expect(page).to have_current_path /team_planners\/new\/details\/#{work_package1.id}/
 
+    card1 = ::Pages::WorkPackageCard.new work_package1
+    card1.expect_selected
+
     # now clicking on another card switches
     page.find('[data-qa-selector="op-wp-single-card--content-subject"]', text: work_package2.subject).click
     expect(page).to have_current_path /team_planners\/new\/details\/#{work_package2.id}/
+
+    card2 = ::Pages::WorkPackageCard.new work_package2
+    card2.expect_selected
+    card1.expect_selected selected: false
+
+    # Close the split view again
+    split_view.close
+    split_view.expect_closed
+
+    # Expect no card selected
+    card2.expect_selected selected: false
+    card1.expect_selected selected: false
   end
 end

spec/support/pages/work_packages/work_package_card.rb

@@ -45,8 +45,8 @@ module Pages
       ".op-wp-single-card-#{work_package.id}"
     end
 
-    def expect_selected
-      expect(page).to have_selector("#{card_selector}[data-qa-checked='true']")
+    def expect_selected(selected: true)
+      expect(page).to have_conditional_selector(selected, "#{card_selector}[data-qa-selected='true']")
     end
 
     def expect_type(name)

spec/support/pages/work_packages/work_package_cards.rb

@@ -133,7 +133,7 @@ module Pages
 
     def expect_work_package_selected(work_package, selected)
       selector = "wp-single-card[data-work-package-id='#{work_package.id}']"
-      checked_selector = "wp-single-card[data-work-package-id='#{work_package.id}'] [data-qa-checked='true']"
+      checked_selector = "wp-single-card[data-work-package-id='#{work_package.id}'] [data-qa-selected='true']"
 
       expect(page).to have_selector(selector)
       expect(page).to (selected ? have_selector(checked_selector) : have_no_selector(checked_selector))