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:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user