1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00

[PM-25616] Refactor app-table-row-scrollable component to use openApplication (#16523)

This commit is contained in:
Alex
2025-09-29 10:28:55 -04:00
committed by GitHub
parent fc53eae4c5
commit 3da89ee4e3
6 changed files with 60 additions and 70 deletions

View File

@@ -64,33 +64,33 @@
</dirt-card> </dirt-card>
</button> </button>
</div> </div>
} <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
<div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4"> <bit-search
<bit-search [placeholder]="'searchApps' | i18n"
[placeholder]="'searchApps' | i18n" class="tw-grow"
class="tw-grow" [formControl]="searchControl"
[formControl]="searchControl" ></bit-search>
></bit-search> <button
<button type="button"
type="button" [buttonType]="'primary'"
[buttonType]="'primary'" bitButton
bitButton [disabled]="!selectedUrls.size"
[disabled]="!selectedUrls.size" [loading]="markingAsCritical"
[loading]="markingAsCritical" (click)="markAppsAsCritical()"
(click)="markAppsAsCritical()" >
> <i class="bwi tw-mr-2" [ngClass]="selectedUrls.size ? 'bwi-star-f' : 'bwi-star'"></i>
<i class="bwi tw-mr-2" [ngClass]="selectedUrls.size ? 'bwi-star-f' : 'bwi-star'"></i> {{ "markAppAsCritical" | i18n }}
{{ "markAppAsCritical" | i18n }} </button>
</button> </div>
</div>
<app-table-row-scrollable <app-table-row-scrollable
[dataSource]="dataSource" [dataSource]="dataSource"
[showRowCheckBox]="true" [showRowCheckBox]="true"
[showRowMenuForCriticalApps]="false" [showRowMenuForCriticalApps]="false"
[selectedUrls]="selectedUrls" [selectedUrls]="selectedUrls"
[isDrawerIsOpenForThisRecord]="isDrawerOpenForTableRow" [openApplication]="drawerDetails.invokerId || ''"
[checkboxChange]="onCheckboxChange" [checkboxChange]="onCheckboxChange"
[showAppAtRiskMembers]="showAppAtRiskMembers" [showAppAtRiskMembers]="showAppAtRiskMembers"
></app-table-row-scrollable> ></app-table-row-scrollable>
}
</div> </div>

View File

@@ -218,10 +218,4 @@ export class AllApplicationsComponent implements OnInit {
this.selectedUrls.delete(applicationName); this.selectedUrls.delete(applicationName);
} }
}; };
isDrawerOpenForTableRow = (applicationName: string): boolean => {
// Note: This function will be replaced by PR #16523 with openApplication binding
// Using private access to BehaviorSubject value for backward compatibility
return (this.dataService as any).drawerDetailsSubject?.value?.invokerId === applicationName;
};
} }

View File

@@ -15,7 +15,7 @@
<td <td
bitCell bitCell
*ngIf="showRowCheckBox" *ngIf="showRowCheckBox"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
appStopProp appStopProp
> >
<input <input
@@ -30,14 +30,14 @@
<td <td
bitCell bitCell
*ngIf="!showRowCheckBox" *ngIf="!showRowCheckBox"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
> >
<i class="bwi bwi-star-f" *ngIf="row.isMarkedAsCritical"></i> <i class="bwi bwi-star-f" *ngIf="row.isMarkedAsCritical"></i>
</td> </td>
<td <td
bitCell bitCell
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)" (click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)" (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)" (keydown.space)="showAppAtRiskMembers(row.applicationName)"
@@ -49,18 +49,20 @@
</td> </td>
<td <td
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)"
role="button"
tabindex="0"
[attr.aria-label]="'viewItem' | i18n" [attr.aria-label]="'viewItem' | i18n"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }"
bitCell
> >
<button type="button" tabindex="0" (click)="showAppAtRiskMembers(row.applicationName)"> <span>{{ row.applicationName }}</span>
<span>{{ row.applicationName }}</span>
</button>
</td> </td>
<td <td
bitCell bitCell
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)" (click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)" (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)" (keydown.space)="showAppAtRiskMembers(row.applicationName)"
@@ -75,7 +77,7 @@
<td <td
bitCell bitCell
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)" (click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)" (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)" (keydown.space)="showAppAtRiskMembers(row.applicationName)"
@@ -90,7 +92,7 @@
<td <td
bitCell bitCell
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)" (click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)" (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)" (keydown.space)="showAppAtRiskMembers(row.applicationName)"
@@ -106,7 +108,7 @@
bitCell bitCell
data-testid="total-membership" data-testid="total-membership"
class="tw-cursor-pointer" class="tw-cursor-pointer"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
(click)="showAppAtRiskMembers(row.applicationName)" (click)="showAppAtRiskMembers(row.applicationName)"
(keydown.enter)="showAppAtRiskMembers(row.applicationName)" (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
(keydown.space)="showAppAtRiskMembers(row.applicationName)" (keydown.space)="showAppAtRiskMembers(row.applicationName)"
@@ -119,7 +121,7 @@
<td <td
bitCell bitCell
*ngIf="showRowMenuForCriticalApps" *ngIf="showRowMenuForCriticalApps"
[ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }" [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
appStopProp appStopProp
> >
<button <button

View File

@@ -18,7 +18,7 @@ export class AppTableRowScrollableComponent {
@Input() showRowMenuForCriticalApps: boolean = false; @Input() showRowMenuForCriticalApps: boolean = false;
@Input() showRowCheckBox: boolean = false; @Input() showRowCheckBox: boolean = false;
@Input() selectedUrls: Set<string> = new Set<string>(); @Input() selectedUrls: Set<string> = new Set<string>();
@Input() isDrawerIsOpenForThisRecord!: (applicationName: string) => boolean; @Input() openApplication: string = "";
@Input() showAppAtRiskMembers!: (applicationName: string) => void; @Input() showAppAtRiskMembers!: (applicationName: string) => void;
@Input() unmarkAsCritical!: (applicationName: string) => void; @Input() unmarkAsCritical!: (applicationName: string) => void;
@Input() checkboxChange!: (applicationName: string, $event: Event) => void; @Input() checkboxChange!: (applicationName: string, $event: Event) => void;

View File

@@ -82,21 +82,21 @@
</dirt-card> </dirt-card>
</button> </button>
</div> </div>
} <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
<div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4"> <bit-search
<bit-search [placeholder]="'searchApps' | i18n"
[placeholder]="'searchApps' | i18n" class="tw-grow"
class="tw-grow" [formControl]="searchControl"
[formControl]="searchControl" ></bit-search>
></bit-search> </div>
</div>
<app-table-row-scrollable <app-table-row-scrollable
[dataSource]="dataSource" [dataSource]="dataSource"
[showRowCheckBox]="false" [showRowCheckBox]="false"
[showRowMenuForCriticalApps]="true" [showRowMenuForCriticalApps]="true"
[isDrawerIsOpenForThisRecord]="isDrawerOpenForTableRow" [openApplication]="drawerDetails.invokerId || ''"
[showAppAtRiskMembers]="showAppAtRiskMembers" [showAppAtRiskMembers]="showAppAtRiskMembers"
[unmarkAsCritical]="unmarkAsCritical" [unmarkAsCritical]="unmarkAsCritical"
></app-table-row-scrollable> ></app-table-row-scrollable>
}
</div> </div>

View File

@@ -201,10 +201,4 @@ export class CriticalApplicationsComponent implements OnInit {
const data = this.reportService.generateAtRiskApplicationList(this.dataSource.data); const data = this.reportService.generateAtRiskApplicationList(this.dataSource.data);
this.dataService.setDrawerForOrgAtRiskApps(data, invokerId); this.dataService.setDrawerForOrgAtRiskApps(data, invokerId);
}; };
isDrawerOpenForTableRow = (applicationName: string) => {
// Note: This function will be replaced by PR #16523 with openApplication binding
// Using private access to BehaviorSubject value for backward compatibility
return (this.dataService as any).drawerDetailsSubject?.value?.invokerId === applicationName;
};
} }