bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-28 10:33:31 +00:00
Code Issues Releases Wiki Activity

Merge branch 'auth/pm-19877/notification-processing' into auth/pm-23620/auth-request-answering-service

Browse Source
This commit is contained in:
Patrick Pimentel
2025-08-11 10:54:23 -04:00
parent 7484433604 a3bc3e7975
commit a61bd546b2
86 changed files with 869 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/angular/src/services/jslib-services.module.ts
View File

@@ -204,22 +204,20 @@ import { SubjectMessageSender } from "@bitwarden/common/platform/messaging/inter
import { devFlagEnabled } from "@bitwarden/common/platform/misc/flags";
import { Account } from "@bitwarden/common/platform/models/domain/account";
import { GlobalState } from "@bitwarden/common/platform/models/domain/global-state";
import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
// eslint-disable-next-line no-restricted-imports -- Needed for service creation
import {
DefaultServerNotificationsService,
UnsupportedServerNotificationsService,
SignalRConnectionService,
UnsupportedWebPushConnectionService,
WebPushConnectionService,
WebPushNotificationsApiService,
} from "@bitwarden/common/platform/notifications/internal";
import { SystemNotificationsService } from "@bitwarden/common/platform/notifications/system-notifications.service";
import { UnsupportedSystemNotificationsService } from "@bitwarden/common/platform/notifications/unsupported-system-notifications.service";
import {
DefaultTaskSchedulerService,
TaskSchedulerService,
} from "@bitwarden/common/platform/scheduling";
import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
// eslint-disable-next-line no-restricted-imports -- Needed for service creation
import {
DefaultServerNotificationsService,
NoopServerNotificationsService,
SignalRConnectionService,
UnsupportedWebPushConnectionService,
WebPushConnectionService,
WebPushNotificationsApiService,
} from "@bitwarden/common/platform/server-notifications/internal";
import { AppIdService } from "@bitwarden/common/platform/services/app-id.service";
import { ConfigApiService } from "@bitwarden/common/platform/services/config/config-api.service";
import { DefaultConfigService } from "@bitwarden/common/platform/services/config/default-config.service";
@@ -256,6 +254,8 @@ import { StateEventRunnerService } from "@bitwarden/common/platform/state/state-
import { SyncService } from "@bitwarden/common/platform/sync";
// eslint-disable-next-line no-restricted-imports -- Needed for DI
import { DefaultSyncService } from "@bitwarden/common/platform/sync/internal";
import { SystemNotificationsService } from "@bitwarden/common/platform/system-notifications/system-notifications.service";
import { UnsupportedSystemNotificationsService } from "@bitwarden/common/platform/system-notifications/unsupported-system-notifications.service";
import {
DefaultThemeStateService,
ThemeStateService,
@@ -978,7 +978,7 @@ const safeProviders: SafeProvider[] = [
safeProvider({
provide: ServerNotificationsService,
useClass: devFlagEnabled("noopNotifications")
? UnsupportedServerNotificationsService
? NoopServerNotificationsService
: DefaultServerNotificationsService,
deps: [
LogService,

57
libs/angular/src/vault/components/icon.component.html
View File

@@ -1,19 +1,44 @@
<div class="tw-flex tw-justify-center tw-items-center" aria-hidden="true">
<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
<div
class="tw-flex tw-justify-center tw-items-center"
[ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
aria-hidden="true"
>
<ng-container *ngIf="data$ | async as data">
<img
[src]="data.image"
*ngIf="data.imageEnabled && data.image"
class="tw-size-6 tw-rounded-md"
alt=""
decoding="async"
loading="lazy"
[ngClass]="{ 'tw-invisible tw-absolute': !imageLoaded() }"
(load)="imageLoaded.set(true)"
(error)="imageLoaded.set(false)"
/>
<i
class="tw-w-6 tw-text-muted bwi bwi-lg {{ data.icon }}"
*ngIf="!data.imageEnabled || !data.image || !imageLoaded()"
></i>
@if (data.imageEnabled && data.image) {
<img
[src]="data.image"
class="tw-rounded-md"
alt=""
decoding="async"
loading="lazy"
[ngClass]="{
'tw-invisible tw-absolute': !imageLoaded(),
'tw-size-6': !coloredIcon(),
}"
[ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
(load)="imageLoaded.set(true)"
(error)="imageLoaded.set(false)"
/>
}
@if (!data.imageEnabled || !data.image || !imageLoaded()) {
<div
[ngClass]="{
'tw-flex tw-items-center tw-justify-center': coloredIcon(),
'tw-bg-illustration-bg-primary tw-rounded-full':
data.icon?.startsWith('bwi-') && coloredIcon(),
}"
[ngStyle]="coloredIcon() ? { width: '36px', height: '36px' } : {}"
>
<i
class="tw-text-muted bwi bwi-lg {{ data.icon }}"
[ngStyle]="{
color: coloredIcon() ? 'rgb(var(--color-illustration-outline))' : null,
width: data.icon?.startsWith('credit-card') && coloredIcon() ? '36px' : null,
height: data.icon?.startsWith('credit-card') && coloredIcon() ? '30px' : null,
}"
></i>
</div>
}
</ng-container>
</div>

5
libs/angular/src/vault/components/icon.component.ts
View File

@@ -27,6 +27,11 @@ export class IconComponent {
*/
cipher = input.required<CipherViewLike>();
/**
* coloredIcon will adjust the size of favicons and the colors of the text icon when user is in the item details view.
*/
coloredIcon = input<boolean>(false);
imageLoaded = signal(false);
protected data$: Observable<CipherIconDetails>;

2
libs/auth/src/angular/login/login-component.service.ts
View File

@@ -23,7 +23,7 @@ export abstract class LoginComponentService {
* Gets the organization policies if there is an organization invite.
* - Used by: Web
*/
getOrgPoliciesFromOrgInvite?: () => Promise<PasswordPolicies | null>;
getOrgPoliciesFromOrgInvite?: (email: string) => Promise<PasswordPolicies | null>;
/**
* Indicates whether login with passkey is supported on the given client

37
libs/auth/src/angular/login/login.component.ts
View File

@@ -80,6 +80,7 @@ export class LoginComponent implements OnInit, OnDestroy {
clientType: ClientType;
ClientType = ClientType;
orgPoliciesFromInvite: PasswordPolicies | null = null;
LoginUiState = LoginUiState;
isKnownDevice = false;
loginUiState: LoginUiState = LoginUiState.EMAIL_ENTRY;
@@ -232,11 +233,12 @@ export class LoginComponent implements OnInit, OnDestroy {
// Try to retrieve any org policies from an org invite now so we can send it to the
// login strategies. Since it is optional and we only want to be doing this on the
// web we will only send in content in the right context.
const orgPoliciesFromInvite = this.loginComponentService.getOrgPoliciesFromOrgInvite
? await this.loginComponentService.getOrgPoliciesFromOrgInvite()
this.orgPoliciesFromInvite = this.loginComponentService.getOrgPoliciesFromOrgInvite
? await this.loginComponentService.getOrgPoliciesFromOrgInvite(email)
: null;
const orgMasterPasswordPolicyOptions = orgPoliciesFromInvite?.enforcedPasswordPolicyOptions;
const orgMasterPasswordPolicyOptions =
this.orgPoliciesFromInvite?.enforcedPasswordPolicyOptions;
const credentials = new PasswordLoginCredentials(
email,
@@ -327,25 +329,18 @@ export class LoginComponent implements OnInit, OnDestroy {
// TODO: PM-18269 - evaluate if we can combine this with the
// password evaluation done in the password login strategy.
// If there's an existing org invite, use it to get the org's password policies
// so we can evaluate the MP against the org policies
if (this.loginComponentService.getOrgPoliciesFromOrgInvite) {
const orgPolicies: PasswordPolicies | null =
await this.loginComponentService.getOrgPoliciesFromOrgInvite();
if (this.orgPoliciesFromInvite) {
// Since we have retrieved the policies, we can go ahead and set them into state for future use
// e.g., the change-password page currently only references state for policy data and
// doesn't fallback to pulling them from the server like it should if they are null.
await this.setPoliciesIntoState(authResult.userId, this.orgPoliciesFromInvite.policies);
if (orgPolicies) {
// Since we have retrieved the policies, we can go ahead and set them into state for future use
// e.g., the change-password page currently only references state for policy data and
// doesn't fallback to pulling them from the server like it should if they are null.
await this.setPoliciesIntoState(authResult.userId, orgPolicies.policies);
const isPasswordChangeRequired = await this.isPasswordChangeRequiredByOrgPolicy(
orgPolicies.enforcedPasswordPolicyOptions,
);
if (isPasswordChangeRequired) {
await this.router.navigate(["change-password"]);
return;
}
const isPasswordChangeRequired = await this.isPasswordChangeRequiredByOrgPolicy(
this.orgPoliciesFromInvite.enforcedPasswordPolicyOptions,
);
if (isPasswordChangeRequired) {
await this.router.navigate(["change-password"]);
return;
}
}

4
libs/auth/src/common/abstractions/auth-request.service.abstraction.ts
View File

@@ -109,9 +109,9 @@ export abstract class AuthRequestServiceAbstraction {
): Promise<{ masterKey: MasterKey; masterKeyHash: string }>;
/**
* Handles incoming auth request push notifications.
* Handles incoming auth request push server notifications.
* @param notification push notification.
* @remark We should only be receiving approved push notifications to prevent enumeration.
* @remark We should only be receiving approved push server notifications to prevent enumeration.
*/
abstract sendAuthRequestPushNotification(notification: AuthRequestPushNotification): void;

2
libs/auth/src/common/services/auth-request/auth-request-api.service.ts
View File

@@ -63,7 +63,7 @@ export class DefaultAuthRequestApiService implements AuthRequestApiServiceAbstra
try {
// Submit the current device identifier in the header as well as in the POST body.
// The value in the header will be used to build the request context and ensure that the resulting
// notifications have the current device as a source.
// server notifications have the current device as a source.
const response = await this.apiService.send(
"POST",
"/auth-requests/",

2
libs/common/src/auth/abstractions/auth-request-answering/auth-request-answering.service.abstraction.ts
View File

@@ -1,4 +1,4 @@
import { SystemNotificationEvent } from "@bitwarden/common/platform/notifications/system-notifications.service";
import { SystemNotificationEvent } from "@bitwarden/common/platform/system-notifications/system-notifications.service";
import { UserId } from "@bitwarden/user-core";
export abstract class AuthRequestAnsweringServiceAbstraction {

2
libs/common/src/auth/services/auth-request-answering/auth-request-answering.service.ts
View File

@@ -12,7 +12,7 @@ import {
ButtonLocation,
SystemNotificationEvent,
SystemNotificationsService,
} from "@bitwarden/common/platform/notifications/system-notifications.service";
} from "@bitwarden/common/platform/system-notifications/system-notifications.service";
import { UserId } from "@bitwarden/user-core";
import { AuthRequestAnsweringServiceAbstraction } from "../../abstractions/auth-request-answering/auth-request-answering.service.abstraction";

4
libs/common/src/enums/push-technology.enum.ts
View File

@@ -5,11 +5,11 @@
// eslint-disable-next-line @bitwarden/platform/no-enums
export enum PushTechnology {
/**
* Indicates that we should use SignalR over web sockets to receive push notifications from the server.
* Indicates that we should use SignalR over web sockets to receive push server notifications from the server.
*/
SignalR = 0,
/**
* Indicatates that we should use WebPush to receive push notifications from the server.
* Indicates that we should use WebPush to receive push server notifications from the server.
*/
WebPush = 1,
}

2
libs/common/src/platform/abstractions/config/config-api.service.abstraction.ts
View File

@@ -5,5 +5,5 @@ export abstract class ConfigApiServiceAbstraction {
/**
* Fetches the server configuration for the given user. If no user is provided, the configuration will not contain user-specific context.
*/
abstract get(userId: UserId | undefined): Promise<ServerConfigResponse>;
abstract get(userId: UserId | null): Promise<ServerConfigResponse>;
}

11
libs/common/src/platform/abstractions/environment.service.ts
View File

@@ -95,6 +95,13 @@ export interface Environment {
*/
export abstract class EnvironmentService {
abstract environment$: Observable<Environment>;
/**
* The environment stored in global state, when a user signs in the state stored here will become
* their user environment.
*/
abstract globalEnvironment$: Observable<Environment>;
abstract cloudWebVaultUrl$: Observable<string>;
/**
@@ -125,12 +132,12 @@ export abstract class EnvironmentService {
* @param userId - The user id to set the cloud web vault app URL for. If null or undefined the global environment is set.
* @param region - The region of the cloud web vault app.
*/
abstract setCloudRegion(userId: UserId, region: Region): Promise<void>;
abstract setCloudRegion(userId: UserId | null, region: Region): Promise<void>;
/**
* Get the environment from state. Useful if you need to get the environment for another user.
*/
abstract getEnvironment$(userId: UserId): Observable<Environment | undefined>;
abstract getEnvironment$(userId: UserId): Observable<Environment>;
/**
* @deprecated Use {@link getEnvironment$} instead.

2
libs/common/src/platform/actions/README.md
View File

@@ -28,7 +28,7 @@ The `openPopup()` method has limitations in some environments due to browser-spe
- **Safari**: Only works when `openPopup()` is triggered from a window context. Attempts from background service workers fail.
- **Firefox**: Does not appear to support `openPopup()` in either context.
- **Chrome**: Fully functional in both contexts.
- **Chrome**: Fully functional in both contexts, but only on Mac. Windows it does not work in.
- **Edge**: Behavior has not been tested.
- **Vivaldi**: `openPopup()` results in an error that _might_ be related to running in a background context, but the cause is currently unclear.
- **Opera**: Works from window context. Background calls fail silently with no error message.

0
libs/common/src/platform/notifications/index.ts → libs/common/src/platform/server-notifications/index.ts
View File

8
libs/common/src/platform/notifications/internal/default-notifications.service.spec.ts → libs/common/src/platform/server-notifications/internal/default-notifications.service.spec.ts
View File

@@ -137,7 +137,7 @@ describe("NotificationsService", () => {
expect(actualNotification.type).toBe(expectedType);
};
it("emits notifications through WebPush when supported", async () => {
it("emits server notifications through WebPush when supported", async () => {
const notificationsPromise = firstValueFrom(sut.notifications$.pipe(bufferCount(2)));
emitActiveUser(mockUser1);
@@ -230,7 +230,7 @@ describe("NotificationsService", () => {
});
it.each([
// Temporarily rolling back notifications being connected while locked
// Temporarily rolling back server notifications being connected while locked
// { initialStatus: AuthenticationStatus.Locked, updatedStatus: AuthenticationStatus.Unlocked },
// { initialStatus: AuthenticationStatus.Unlocked, updatedStatus: AuthenticationStatus.Locked },
// { initialStatus: AuthenticationStatus.Locked, updatedStatus: AuthenticationStatus.Locked },
@@ -259,7 +259,7 @@ describe("NotificationsService", () => {
);
it.each([
// Temporarily disabling notifications connecting while in a locked state
// Temporarily disabling server notifications connecting while in a locked state
// AuthenticationStatus.Locked,
AuthenticationStatus.Unlocked,
])(
@@ -285,7 +285,7 @@ describe("NotificationsService", () => {
},
);
it("does not connect to any notification stream when notifications are disabled through special url", () => {
it("does not connect to any notification stream when server notifications are disabled through special url", () => {
const subscription = sut.notifications$.subscribe();
emitActiveUser(mockUser1);
emitNotificationUrl(DISABLED_NOTIFICATIONS_URL);

13
libs/common/src/platform/notifications/internal/default-server-notifications.service.ts → libs/common/src/platform/server-notifications/internal/default-server-notifications.service.ts
View File

@@ -63,7 +63,7 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
distinctUntilChanged(),
switchMap((activeAccountId) => {
if (activeAccountId == null) {
// We don't emit notifications for inactive accounts currently
// We don't emit server-notifications for inactive accounts currently
return EMPTY;
}
@@ -76,8 +76,8 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
}
/**
* Retrieves a stream of push notifications for the given user.
* @param userId The user id of the user to get the push notifications for.
* Retrieves a stream of push server notifications for the given user.
* @param userId The user id of the user to get the push server notifications for.
*/
private userNotifications$(userId: UserId) {
return this.environmentService.environment$.pipe(
@@ -111,7 +111,7 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
}),
supportSwitch({
supported: (service) => {
this.logService.info("Using WebPush for notifications");
this.logService.info("Using WebPush for server notifications");
return service.notifications$.pipe(
catchError((err: unknown) => {
this.logService.warning("Issue with web push, falling back to SignalR", err);
@@ -120,7 +120,7 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
);
},
notSupported: () => {
this.logService.info("Using SignalR for notifications");
this.logService.info("Using SignalR for server notifications");
return this.connectSignalR$(userId, notificationsUrl);
},
}),
@@ -240,7 +240,8 @@ export class DefaultServerNotificationsService implements ServerNotificationsSer
mergeMap(async ([notification, userId]) => this.processNotification(notification, userId)),
)
.subscribe({
error: (e: unknown) => this.logService.warning("Error in notifications$ observable", e),
error: (e: unknown) =>
this.logService.warning("Error in server notifications$ observable", e),
});
}

2
libs/common/src/platform/notifications/internal/index.ts → libs/common/src/platform/server-notifications/internal/index.ts
View File

@@ -1,7 +1,7 @@
export * from "./worker-webpush-connection.service";
export * from "./signalr-connection.service";
export * from "./default-server-notifications.service";
export * from "./unsupported-server-notifications.service";
export * from "./noop-server-notifications.service";
export * from "./unsupported-webpush-connection.service";
export * from "./webpush-connection.service";
export * from "./websocket-webpush-connection.service";

4
libs/common/src/platform/notifications/internal/unsupported-server-notifications.service.ts → libs/common/src/platform/server-notifications/internal/noop-server-notifications.service.ts
View File

@@ -6,14 +6,14 @@ import { UserId } from "@bitwarden/common/types/guid";
import { LogService } from "../../abstractions/log.service";
import { ServerNotificationsService } from "../server-notifications.service";
export class UnsupportedServerNotificationsService implements ServerNotificationsService {
export class NoopServerNotificationsService implements ServerNotificationsService {
notifications$: Observable<readonly [NotificationResponse, UserId]> = new Subject();
constructor(private logService: LogService) {}
startListening(): Subscription {
this.logService.info(
"Initializing no-op notification service, no push notifications will be received",
"Initializing no-op notification service, no push server notifications will be received",
);
return Subscription.EMPTY;
}

0
libs/common/src/platform/notifications/internal/signalr-connection.service.ts → libs/common/src/platform/server-notifications/internal/signalr-connection.service.ts
View File

0
libs/common/src/platform/notifications/internal/unsupported-webpush-connection.service.ts → libs/common/src/platform/server-notifications/internal/unsupported-webpush-connection.service.ts
View File

2
libs/common/src/platform/notifications/internal/web-push-notifications-api.service.ts → libs/common/src/platform/server-notifications/internal/web-push-notifications-api.service.ts
View File

@@ -10,7 +10,7 @@ export class WebPushNotificationsApiService {
) {}
/**
* Posts a device-user association to the server and ensures it's installed for push notifications
* Posts a device-user association to the server and ensures it's installed for push server notifications
*/
async putSubscription(pushSubscription: PushSubscriptionJSON): Promise<void> {
const request = WebPushRequest.from(pushSubscription);

0
libs/common/src/platform/notifications/internal/web-push.request.ts → libs/common/src/platform/server-notifications/internal/web-push.request.ts
View File

0
libs/common/src/platform/notifications/internal/webpush-connection.service.ts → libs/common/src/platform/server-notifications/internal/webpush-connection.service.ts
View File

0
libs/common/src/platform/notifications/internal/websocket-webpush-connection.service.ts → libs/common/src/platform/server-notifications/internal/websocket-webpush-connection.service.ts
View File

0
libs/common/src/platform/notifications/internal/worker-webpush-connection.service.spec.ts → libs/common/src/platform/server-notifications/internal/worker-webpush-connection.service.spec.ts
View File

4
libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts → libs/common/src/platform/server-notifications/internal/worker-webpush-connection.service.ts
View File

@@ -40,7 +40,7 @@ interface PushEvent {
}
/**
* An implementation for connecting to web push based notifications running in a Worker.
* An implementation for connecting to web push based server notifications running in a Worker.
*/
export class WorkerWebPushConnectionService implements WebPushConnectionService {
private pushEvent = new Subject<PushEvent>();
@@ -75,7 +75,7 @@ export class WorkerWebPushConnectionService implements WebPushConnectionService
}
supportStatus$(userId: UserId): Observable<SupportStatus<WebPushConnector>> {
// Check the server config to see if it supports sending WebPush notifications
// Check the server config to see if it supports sending WebPush server notifications
// FIXME: get config of server for the specified userId, once ConfigService supports it
return this.configService.serverConfig$.pipe(
map((config) =>

4
libs/common/src/platform/notifications/server-notifications.service.ts → libs/common/src/platform/server-notifications/server-notifications.service.ts
View File

@@ -13,11 +13,11 @@ export abstract class ServerNotificationsService {
/**
* @deprecated This method should not be consumed, an observable to listen to server
* notifications will be available one day but it is not ready to be consumed generally.
* Please add code reacting to notifications in {@link DefaultServerNotificationsService.processNotification}
* Please add code reacting to server notifications in {@link DefaultServerNotificationsService.processNotification}
*/
abstract notifications$: Observable<readonly [NotificationResponse, UserId]>;
/**
* Starts automatic listening and processing of notifications, should only be called once per application,
* Starts automatic listening and processing of server notifications, should only be called once per application,
* or you will risk notifications being processed multiple times.
*/
abstract startListening(): Subscription;

2
libs/common/src/platform/services/config/config-api.service.ts
View File

@@ -10,7 +10,7 @@ export class ConfigApiService implements ConfigApiServiceAbstraction {
private tokenService: TokenService,
) {}
async get(userId: UserId | undefined): Promise<ServerConfigResponse> {
async get(userId: UserId | null): Promise<ServerConfigResponse> {
// Authentication adds extra context to config responses, if the user has an access token, we want to use it
// We don't particularly care about ensuring the token is valid and not expired, just that it exists
const authed: boolean =

32
libs/common/src/platform/services/config/config.service.spec.ts
View File

@@ -10,9 +10,9 @@ import {
FakeGlobalState,
FakeSingleUserState,
FakeStateProvider,
awaitAsync,
mockAccountServiceWith,
} from "../../../../spec";
import { Matrix } from "../../../../spec/matrix";
import { subscribeTo } from "../../../../spec/observable-tracker";
import { AuthService } from "../../../auth/abstractions/auth.service";
import { AuthenticationStatus } from "../../../auth/enums/authentication-status";
@@ -74,7 +74,8 @@ describe("ConfigService", () => {
});
beforeEach(() => {
environmentService.environment$ = environmentSubject;
Matrix.autoMockMethod(environmentService.getEnvironment$, () => environmentSubject);
environmentService.globalEnvironment$ = environmentSubject;
sut = new DefaultConfigService(
configApiService,
environmentService,
@@ -98,9 +99,12 @@ describe("ConfigService", () => {
: serverConfigFactory(activeApiUrl + userId, tooOld);
const globalStored =
configStateDescription === "missing"
? {}
? {
[activeApiUrl]: null,
}
: {
[activeApiUrl]: serverConfigFactory(activeApiUrl, tooOld),
[activeApiUrl + "0"]: serverConfigFactory(activeApiUrl + userId, tooOld),
};
beforeEach(() => {
@@ -108,11 +112,6 @@ describe("ConfigService", () => {
userState.nextState(userStored);
});
// sanity check
test("authed and unauthorized state are different", () => {
expect(globalStored[activeApiUrl]).not.toEqual(userStored);
});
describe("fail to fetch", () => {
beforeEach(() => {
configApiService.get.mockRejectedValue(new Error("Unable to fetch"));
@@ -178,6 +177,7 @@ describe("ConfigService", () => {
beforeEach(() => {
globalState.stateSubject.next(globalStored);
userState.nextState(userStored);
Matrix.autoMockMethod(environmentService.getEnvironment$, () => environmentSubject);
});
it("does not fetch from server", async () => {
await firstValueFrom(sut.serverConfig$);
@@ -189,21 +189,13 @@ describe("ConfigService", () => {
const actual = await firstValueFrom(sut.serverConfig$);
expect(actual).toEqual(activeUserId ? userStored : globalStored[activeApiUrl]);
});
it("does not complete after emit", async () => {
const emissions = [];
const subscription = sut.serverConfig$.subscribe((v) => emissions.push(v));
await awaitAsync();
expect(emissions.length).toBe(1);
expect(subscription.closed).toBe(false);
});
});
});
});
it("gets global config when there is an locked active user", async () => {
await accountService.switchAccount(userId);
environmentService.environment$ = of(environmentFactory(activeApiUrl));
environmentService.globalEnvironment$ = of(environmentFactory(activeApiUrl));
globalState.stateSubject.next({
[activeApiUrl]: serverConfigFactory(activeApiUrl + "global"),
@@ -236,7 +228,8 @@ describe("ConfigService", () => {
beforeEach(() => {
environmentSubject = new Subject<Environment>();
environmentService.environment$ = environmentSubject;
environmentService.globalEnvironment$ = environmentSubject;
Matrix.autoMockMethod(environmentService.getEnvironment$, () => environmentSubject);
sut = new DefaultConfigService(
configApiService,
environmentService,
@@ -327,7 +320,8 @@ describe("ConfigService", () => {
beforeEach(async () => {
const config = serverConfigFactory("existing-data", tooOld);
environmentService.environment$ = environmentSubject;
environmentService.globalEnvironment$ = environmentSubject;
Matrix.autoMockMethod(environmentService.getEnvironment$, () => environmentSubject);
globalState.stateSubject.next({ [apiUrl(0)]: config });
userState.stateSubject.next({

99
libs/common/src/platform/services/config/default-config.service.ts
View File

@@ -1,17 +1,18 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import {
combineLatest,
distinctUntilChanged,
firstValueFrom,
map,
mergeWith,
NEVER,
Observable,
of,
shareReplay,
ReplaySubject,
share,
Subject,
switchMap,
tap,
timer,
} from "rxjs";
import { SemVer } from "semver";
@@ -50,11 +51,15 @@ export const GLOBAL_SERVER_CONFIGURATIONS = KeyDefinition.record<ServerConfig, A
},
);
const environmentComparer = (previous: Environment, current: Environment) => {
return previous.getApiUrl() === current.getApiUrl();
};
// FIXME: currently we are limited to api requests for active users. Update to accept a UserId and APIUrl once ApiService supports it.
export class DefaultConfigService implements ConfigService {
private failedFetchFallbackSubject = new Subject<ServerConfig>();
private failedFetchFallbackSubject = new Subject<ServerConfig | null>();
serverConfig$: Observable<ServerConfig>;
serverConfig$: Observable<ServerConfig | null>;
serverSettings$: Observable<ServerSettings>;
@@ -67,32 +72,61 @@ export class DefaultConfigService implements ConfigService {
private stateProvider: StateProvider,
private authService: AuthService,
) {
const userId$ = this.stateProvider.activeUserId$;
const authStatus$ = userId$.pipe(
switchMap((userId) => (userId == null ? of(null) : this.authService.authStatusFor$(userId))),
const globalConfig$ = this.environmentService.globalEnvironment$.pipe(
distinctUntilChanged(environmentComparer),
switchMap((environment) =>
this.globalConfigFor$(environment.getApiUrl()).pipe(
map((config) => {
return [config, null as UserId | null, environment, config] as const;
}),
),
),
);
this.serverConfig$ = combineLatest([
userId$,
this.environmentService.environment$,
authStatus$,
]).pipe(
switchMap(([userId, environment, authStatus]) => {
if (userId == null || authStatus !== AuthenticationStatus.Unlocked) {
return this.globalConfigFor$(environment.getApiUrl()).pipe(
map((config) => [config, null, environment] as const),
);
this.serverConfig$ = this.stateProvider.activeUserId$.pipe(
distinctUntilChanged(),
switchMap((userId) => {
if (userId == null) {
// Global
return globalConfig$;
}
return this.userConfigFor$(userId).pipe(
map((config) => [config, userId, environment] as const),
return this.authService.authStatusFor$(userId).pipe(
map((authStatus) => authStatus === AuthenticationStatus.Unlocked),
distinctUntilChanged(),
switchMap((isUnlocked) => {
if (!isUnlocked) {
return globalConfig$;
}
return combineLatest([
this.environmentService
.getEnvironment$(userId)
.pipe(distinctUntilChanged(environmentComparer)),
this.userConfigFor$(userId),
]).pipe(
switchMap(([environment, config]) => {
if (config == null) {
// If the user doesn't have any config yet, use the global config for that url as the fallback
return this.globalConfigFor$(environment.getApiUrl()).pipe(
map(
(globalConfig) =>
[null as ServerConfig | null, userId, environment, globalConfig] as const,
),
);
}
return of([config, userId, environment, config] as const);
}),
);
}),
);
}),
tap(async (rec) => {
const [existingConfig, userId, environment] = rec;
const [existingConfig, userId, environment, fallbackConfig] = rec;
// Grab new config if older retrieval interval
if (!existingConfig || this.olderThanRetrievalInterval(existingConfig.utcDate)) {
await this.renewConfig(existingConfig, userId, environment);
await this.renewConfig(existingConfig, userId, environment, fallbackConfig);
}
}),
switchMap(([existingConfig]) => {
@@ -106,7 +140,7 @@ export class DefaultConfigService implements ConfigService {
}),
// If fetch fails, we'll emit on this subject to fallback to the existing config
mergeWith(this.failedFetchFallbackSubject),
shareReplay({ refCount: true, bufferSize: 1 }),
share({ connector: () => new ReplaySubject(1), resetOnRefCountZero: () => timer(1000) }),
);
this.cloudRegion$ = this.serverConfig$.pipe(
@@ -155,19 +189,18 @@ export class DefaultConfigService implements ConfigService {
// Updates the on-disk configuration with a newly retrieved configuration
private async renewConfig(
existingConfig: ServerConfig,
userId: UserId,
existingConfig: ServerConfig | null,
userId: UserId | null,
environment: Environment,
fallbackConfig: ServerConfig | null,
): Promise<void> {
try {
// Feature flags often have a big impact on user experience, lets ensure we return some value
// somewhat quickly even though it may not be accurate, we won't cancel the HTTP request
// though so that hopefully it can have finished and hydrated a more accurate value.
const handle = setTimeout(() => {
this.logService.info(
"Self-host environment did not respond in time, emitting previous config.",
);
this.failedFetchFallbackSubject.next(existingConfig);
this.logService.info("Environment did not respond in time, emitting previous config.");
this.failedFetchFallbackSubject.next(fallbackConfig);
}, SLOW_EMISSION_GUARD);
const response = await this.configApiService.get(userId);
clearTimeout(handle);
@@ -195,17 +228,17 @@ export class DefaultConfigService implements ConfigService {
// mutate error to be handled by catchError
this.logService.error(`Unable to fetch ServerConfig from ${environment.getApiUrl()}`, e);
// Emit the existing config
this.failedFetchFallbackSubject.next(existingConfig);
this.failedFetchFallbackSubject.next(fallbackConfig);
}
}
private globalConfigFor$(apiUrl: string): Observable<ServerConfig> {
private globalConfigFor$(apiUrl: string): Observable<ServerConfig | null> {
return this.stateProvider
.getGlobal(GLOBAL_SERVER_CONFIGURATIONS)
.state$.pipe(map((configs) => configs?.[apiUrl]));
.state$.pipe(map((configs) => configs?.[apiUrl] ?? null));
}
private userConfigFor$(userId: UserId): Observable<ServerConfig> {
private userConfigFor$(userId: UserId): Observable<ServerConfig | null> {
return this.stateProvider.getUser(userId, USER_SERVER_CONFIG).state$;
}
}

9
libs/common/src/platform/services/default-environment.service.ts
View File

@@ -133,6 +133,7 @@ export class DefaultEnvironmentService implements EnvironmentService {
);
environment$: Observable<Environment>;
globalEnvironment$: Observable<Environment>;
cloudWebVaultUrl$: Observable<string>;
constructor(
@@ -148,6 +149,10 @@ export class DefaultEnvironmentService implements EnvironmentService {
distinctUntilChanged((oldUserId: UserId, newUserId: UserId) => oldUserId == newUserId),
);
this.globalEnvironment$ = this.stateProvider
.getGlobal(GLOBAL_ENVIRONMENT_KEY)
.state$.pipe(map((state) => this.buildEnvironment(state?.region, state?.urls)));
this.environment$ = account$.pipe(
switchMap((userId) => {
const t = userId
@@ -263,7 +268,7 @@ export class DefaultEnvironmentService implements EnvironmentService {
return new SelfHostedEnvironment(urls);
}
async setCloudRegion(userId: UserId, region: CloudRegion) {
async setCloudRegion(userId: UserId | null, region: CloudRegion) {
if (userId == null) {
await this.globalCloudRegionState.update(() => region);
} else {
@@ -271,7 +276,7 @@ export class DefaultEnvironmentService implements EnvironmentService {
}
}
getEnvironment$(userId: UserId): Observable<Environment | undefined> {
getEnvironment$(userId: UserId): Observable<Environment> {
return this.stateProvider.getUser(userId, USER_ENVIRONMENT_KEY).state$.pipe(
map((state) => {
return this.buildEnvironment(state?.region, state?.urls);

2
libs/common/src/platform/sync/core-sync.service.ts
View File

@@ -230,7 +230,7 @@ export abstract class CoreSyncService implements SyncService {
}),
),
);
// Process only notifications for currently active user when user is not logged out
// Process only server notifications for currently active user when user is not logged out
// TODO: once send service allows data manipulation of non-active users, this should process any received notification
if (activeUserId === notification.userId && status !== AuthenticationStatus.LoggedOut) {
try {

1
libs/common/src/platform/system-notifications/index.ts Normal file
View File

@@ -0,0 +1 @@
export { SystemNotificationsService } from "./system-notifications.service";

6
libs/common/src/platform/notifications/system-notifications.service.ts → libs/common/src/platform/system-notifications/system-notifications.service.ts
View File

@@ -32,7 +32,7 @@ export type SystemNotificationEvent = {
};
/**
* A service responsible for displaying operating system level notifications.
* A service responsible for displaying operating system level server notifications.
*/
export abstract class SystemNotificationsService {
abstract notificationClicked$: Observable<SystemNotificationEvent>;
@@ -43,7 +43,7 @@ export abstract class SystemNotificationsService {
* @returns If a notification is successfully created it will respond back with an
* id that refers to a notification.
*/
abstract create(createInfo: SystemNotificationCreateInfo): Promise<string | undefined>;
abstract create(createInfo: SystemNotificationCreateInfo): Promise<string>;
/**
* Clears a notification.
@@ -52,7 +52,7 @@ export abstract class SystemNotificationsService {
abstract clear(clearInfo: SystemNotificationClearInfo): Promise<void>;
/**
* Used to know if a given platform supports notifications.
* Used to know if a given platform supports server notifications.
*/
abstract isSupported(): boolean;
}

2
libs/common/src/platform/notifications/unsupported-system-notifications.service.ts → libs/common/src/platform/system-notifications/unsupported-system-notifications.service.ts
View File

@@ -9,7 +9,7 @@ import {
export class UnsupportedSystemNotificationsService implements SystemNotificationsService {
notificationClicked$ = throwError(() => new Error("Notification clicked is not supported."));
async create(createInfo: SystemNotificationCreateInfo): Promise<undefined> {
async create(createInfo: SystemNotificationCreateInfo): Promise<string> {
throw new Error("Create OS Notification unsupported.");
}

14
libs/common/src/vault/notifications/services/default-end-user-notification.service.spec.ts
View File

@@ -4,7 +4,7 @@ import { firstValueFrom, of } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
import { StateProvider } from "@bitwarden/common/platform/state";
import { NotificationId, UserId } from "@bitwarden/common/types/guid";
@@ -48,7 +48,7 @@ describe("End User Notification Center Service", () => {
});
describe("notifications$", () => {
it("should return notifications from state when not null", async () => {
it("should return server notifications from state when not null", async () => {
fakeStateProvider.singleUser.mockFor("user-id" as UserId, NOTIFICATIONS, [
{
id: "notification-id" as NotificationId,
@@ -62,7 +62,7 @@ describe("End User Notification Center Service", () => {
expect(mockLogService.warning).not.toHaveBeenCalled();
});
it("should return notifications API when state is null", async () => {
it("should return server notifications API when state is null", async () => {
mockApiService.send.mockResolvedValue({
data: [
{
@@ -86,7 +86,7 @@ describe("End User Notification Center Service", () => {
expect(mockLogService.warning).not.toHaveBeenCalled();
});
it("should log a warning if there are more notifications available", async () => {
it("should log a warning if there are more server notifications available", async () => {
mockApiService.send.mockResolvedValue({
data: [
...new Array(DEFAULT_NOTIFICATION_PAGE_SIZE + 1).fill({ id: "notification-id" }),
@@ -120,7 +120,7 @@ describe("End User Notification Center Service", () => {
});
describe("unreadNotifications$", () => {
it("should return unread notifications from state when read value is null", async () => {
it("should return unread server notifications from state when read value is null", async () => {
fakeStateProvider.singleUser.mockFor("user-id" as UserId, NOTIFICATIONS, [
{
id: "notification-id" as NotificationId,
@@ -136,7 +136,7 @@ describe("End User Notification Center Service", () => {
});
describe("getNotifications", () => {
it("should call getNotifications returning notifications from API", async () => {
it("should call getNotifications returning server notifications from API", async () => {
mockApiService.send.mockResolvedValue({
data: [
{
@@ -156,7 +156,7 @@ describe("End User Notification Center Service", () => {
);
});
it("should update local state when notifications are updated", async () => {
it("should update local state when server notifications are updated", async () => {
mockApiService.send.mockResolvedValue({
data: [
{

2
libs/common/src/vault/notifications/services/default-end-user-notification.service.ts
View File

@@ -6,7 +6,7 @@ import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authenticatio
import { NotificationType } from "@bitwarden/common/enums";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
import { StateProvider } from "@bitwarden/common/platform/state";
import { NotificationId, UserId } from "@bitwarden/common/types/guid";
import {

2
libs/common/src/vault/tasks/services/default-task.service.spec.ts
View File

@@ -8,7 +8,7 @@ import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authenticatio
import { NotificationType } from "@bitwarden/common/enums";
import { NotificationResponse } from "@bitwarden/common/models/response/notification.response";
import { Message, MessageListener } from "@bitwarden/common/platform/messaging";
import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
import { SecurityTaskId, UserId } from "@bitwarden/common/types/guid";
import { FakeStateProvider, mockAccountServiceWith } from "../../../../spec";

4
libs/common/src/vault/tasks/services/default-task.service.ts
View File

@@ -17,7 +17,7 @@ import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authenticatio
import { NotificationType } from "@bitwarden/common/enums";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { MessageListener } from "@bitwarden/common/platform/messaging";
import { ServerNotificationsService } from "@bitwarden/common/platform/notifications";
import { ServerNotificationsService } from "@bitwarden/common/platform/server-notifications";
import { StateProvider } from "@bitwarden/common/platform/state";
import { SecurityTaskId, UserId } from "@bitwarden/common/types/guid";
import {
@@ -171,7 +171,7 @@ export class DefaultTaskService implements TaskService {
}
/**
* Creates a subscription for pending security task notifications or completed syncs for unlocked users.
* Creates a subscription for pending security task server notifications or completed syncs for unlocked users.
*/
listenForTaskNotifications(): Subscription {
return this.authService.authStatuses$

92
libs/eslint/platform/required-using.spec.mjs
View File

@@ -34,14 +34,14 @@ ruleTester.run("required-using", rule.default, {
using client = rc.take();
`,
},
{
name: "Function reference with `using`",
code: `
${setup}
const t = rc.take;
using client = t();
`,
},
// {
// name: "Function reference with `using`",
// code: `
// ${setup}
// const t = rc.take;
// using client = t();
// `,
// },
],
invalid: [
{
@@ -56,43 +56,43 @@ ruleTester.run("required-using", rule.default, {
},
],
},
{
name: "Assignment without `using`",
code: `
${setup}
let client;
client = rc.take();
`,
errors: [
{
message: errorMessage,
},
],
},
{
name: "Function reference without `using`",
code: `
${setup}
const t = rc.take;
const client = t();
`,
errors: [
{
message: errorMessage,
},
],
},
{
name: "Destructuring without `using`",
code: `
${setup}
const { value } = rc.take();
`,
errors: [
{
message: errorMessage,
},
],
},
// {
// name: "Assignment without `using`",
// code: `
// ${setup}
// let client;
// client = rc.take();
// `,
// errors: [
// {
// message: errorMessage,
// },
// ],
// },
// {
// name: "Function reference without `using`",
// code: `
// ${setup}
// const t = rc.take;
// const client = t();
// `,
// errors: [
// {
// message: errorMessage,
// },
// ],
// },
// {
// name: "Destructuring without `using`",
// code: `
// ${setup}
// const { value } = rc.take();
// `,
// errors: [
// {
// message: errorMessage,
// },
// ],
// },
],
});

2
libs/key-management-ui/src/lock/components/lock.component.ts
View File

@@ -625,7 +625,7 @@ export class LockComponent implements OnInit, OnDestroy {
}
}
// Vault can be de-synced since notifications get ignored while locked. Need to check whether sync is required using the sync service.
// Vault can be de-synced since server notifications get ignored while locked. Need to check whether sync is required using the sync service.
const startSync = new Date().getTime();
// TODO: This should probably not be blocking
await this.syncService.fullSync(false);

151
libs/vault/src/cipher-view/item-details/item-details-v2.component.html
View File

@@ -1,83 +1,86 @@
<section class="tw-mb-5 bit-compact:tw-mb-4">
<bit-section-header>
<h2 bitTypography="h6">{{ "itemDetails" | i18n }}</h2>
</bit-section-header>
<bit-card>
<bit-form-field
[disableMargin]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
[disableReadOnlyBorder]="!cipher.collectionIds?.length && !showOwnership && !cipher.folderId"
<div
class="tw-flex tw-place-items-center"
[ngClass]="{
'tw-mb-2': allItems.length > 0,
}"
>
<bit-label [appTextDrag]="cipher.name">
{{ "itemName" | i18n }}
</bit-label>
<input
readonly
id="itemName"
bitInput
type="text"
[value]="cipher.name"
aria-readonly="true"
data-testid="item-name"
/>
</bit-form-field>
<ul
[attr.aria-label]="'itemLocation' | i18n"
*ngIf="cipher.collectionIds?.length || showOwnership || cipher.folderId"
class="tw-mb-0 tw-pl-0"
>
<li
*ngIf="showOwnership && organization"
class="tw-flex tw-items-center tw-list-none"
[ngClass]="{ 'tw-mb-3': cipher.collectionIds }"
bitTypography="body2"
[attr.aria-label]="('owner' | i18n) + organization.name"
data-testid="owner"
>
<i
appOrgIcon
[tierType]="organization.productTierType"
[size]="'large'"
[title]="'owner' | i18n"
></i>
<span aria-hidden="true" class="tw-pl-1.5">
{{ organization.name }}
</span>
</li>
<li
class="tw-list-none"
*ngIf="cipher.collectionIds && collections"
[attr.aria-label]="'collection' | i18n"
>
<ul data-testid="collections" [ngClass]="{ 'tw-mb-0': !cipher.folderId }" class="tw-pl-0">
<li
*ngFor="let collection of collections; let last = last"
class="tw-flex tw-items-center tw-list-none"
<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
<div class="tw-flex tw-items-center tw-justify-center" style="width: 40px; height: 40px">
<app-vault-icon [cipher]="cipher()" [coloredIcon]="true"></app-vault-icon>
</div>
<h2 bitTypography="h4" class="tw-ml-2 tw-mt-2" data-testid="item-name">
{{ cipher().name }}
</h2>
</div>
<ng-container>
<div class="tw-flex tw-flex-col tw-mt-2 md:tw-flex-row md:tw-flex-wrap">
@for (item of showItems(); track item.id; let last = $last) {
<span
class="tw-flex tw-items-center tw-mt-2 tw-mr-4"
bitTypography="body2"
[ngClass]="{ 'tw-mb-3': last && cipher.folderId }"
[attr.aria-label]="collection.name"
[attr.aria-label]="getAriaLabel(item)"
[ngClass]="{ 'tw-mb-2': last && hasSmallScreen() }"
data-testid="item-details-list"
>
<i
class="bwi bwi-collection-shared bwi-lg"
aria-hidden="true"
[title]="'collection' | i18n"
></i>
@if (isOrgIcon(item)) {
<i
appOrgIcon
[tierType]="organization().productTierType"
[size]="'large'"
[title]="'owner' | i18n"
></i>
} @else {
<i
class="bwi bwi-lg"
[ngClass]="getIconClass(item)"
aria-hidden="true"
[title]="getItemTitle(item)"
></i>
}
<span aria-hidden="true" class="tw-pl-1.5">
{{ collection.name }}
{{ item.name }}
</span>
</li>
</ul>
</li>
<li
*ngIf="cipher.folderId && folder"
bitTypography="body2"
class="tw-flex tw-items-center tw-list-none"
[attr.aria-label]="('folder' | i18n) + folder.name"
data-testid="folder"
>
<i class="bwi bwi-folder bwi-lg" aria-hidden="true" [title]="'folder' | i18n"></i>
<span aria-hidden="true" class="tw-pl-1.5">{{ folder.name }} </span>
</li>
</ul>
</span>
}
@if (allItems().length === 0) {
<span
class="tw-flex tw-items-center tw-mt-2 tw-mr-4"
bitTypography="body2"
[attr.aria-label]="'noneFolder' | i18n"
>
<i class="bwi bwi-folder bwi-lg" aria-hidden="true" [title]="'folder' | i18n"></i>
<span aria-hidden="true" class="tw-pl-1.5">
{{ "noneFolder" | i18n }}
</span>
</span>
}
@if (hasSmallScreen() && allItems().length > 2 && cipher().collectionIds.length > 1) {
<button
bitTypography="body2"
type="button"
bitLink
linkType="primary"
class="tw-mt-1.5"
(click)="toggleShowMore()"
*ngIf="!showAllDetails()"
>
{{ "showMore" | i18n }}
</button>
<button
bitTypography="body2"
type="button"
bitLink
linkType="primary"
class="tw-mt-1.5"
(click)="toggleShowMore()"
*ngIf="showAllDetails()"
>
{{ "showLess" | i18n }}
</button>
}
</div>
</ng-container>
</bit-card>
</section>

48
libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
View File

@@ -1,11 +1,17 @@
import { ComponentRef } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { of } from "rxjs";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
// eslint-disable-next-line no-restricted-imports
import { CollectionView } from "@bitwarden/admin-console/common";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
@@ -14,6 +20,7 @@ import { ItemDetailsV2Component } from "./item-details-v2.component";
describe("ItemDetailsV2Component", () => {
let component: ItemDetailsV2Component;
let fixture: ComponentFixture<ItemDetailsV2Component>;
let componentRef: ComponentRef<ItemDetailsV2Component>;
const cipher = {
id: "cipher1",
@@ -46,37 +53,46 @@ describe("ItemDetailsV2Component", () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ItemDetailsV2Component],
providers: [{ provide: I18nService, useValue: { t: (key: string) => key } }],
providers: [
{ provide: I18nService, useValue: { t: (key: string) => key } },
{ provide: PlatformUtilsService, useValue: { getClientType: () => ClientType.Web } },
{
provide: EnvironmentService,
useValue: { environment$: of({ getIconsUrl: () => "https://icons.example.com" }) },
},
{ provide: DomainSettingsService, useValue: { showFavicons$: of(true) } },
],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ItemDetailsV2Component);
component = fixture.componentInstance;
component.cipher = cipher;
component.organization = organization;
component.collections = [collection, collection2];
component.folder = folder;
componentRef = fixture.componentRef;
componentRef.setInput("cipher", cipher);
componentRef.setInput("organization", organization);
componentRef.setInput("collections", [collection, collection2]);
componentRef.setInput("folder", folder);
jest.spyOn(component, "hasSmallScreen").mockReturnValue(false); // Mocking small screen check
fixture.detectChanges();
});
it("displays all available fields", () => {
const itemName = fixture.debugElement.query(By.css('[data-testid="item-name"]'));
const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));
const collections = fixture.debugElement.queryAll(By.css('[data-testid="collections"] li'));
const folderElement = fixture.debugElement.query(By.css('[data-testid="folder"]'));
const itemDetailsList = fixture.debugElement.queryAll(
By.css('[data-testid="item-details-list"]'),
);
expect(itemName.nativeElement.value).toBe(cipher.name);
expect(owner.nativeElement.textContent.trim()).toBe(organization.name);
expect(collections.map((c) => c.nativeElement.textContent.trim())).toEqual([
collection.name,
collection2.name,
]);
expect(folderElement.nativeElement.textContent.trim()).toBe(folder.name);
expect(itemName.nativeElement.textContent.trim()).toEqual(cipher.name);
expect(itemDetailsList.length).toBe(4); // Organization, Collection, Collection2, Folder
expect(itemDetailsList[0].nativeElement.textContent.trim()).toContain(organization.name);
expect(itemDetailsList[1].nativeElement.textContent.trim()).toContain(collection.name);
expect(itemDetailsList[2].nativeElement.textContent.trim()).toContain(collection2.name);
expect(itemDetailsList[3].nativeElement.textContent.trim()).toContain(folder.name);
});
it("does not render owner when `hideOwner` is true", () => {
component.hideOwner = true;
componentRef.setInput("hideOwner", true);
fixture.detectChanges();
const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));

101
libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
View File

@@ -1,19 +1,22 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { Component, computed, input, signal } from "@angular/core";
// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
import { toSignal } from "@angular/core/rxjs-interop";
import { fromEvent, map, startWith } from "rxjs";
// eslint-disable-next-line no-restricted-imports
import { CollectionView } from "@bitwarden/admin-console/common";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
import {
ButtonLinkDirective,
CardComponent,
FormFieldModule,
SectionHeaderComponent,
TypographyModule,
} from "@bitwarden/components";
@@ -26,20 +29,96 @@ import { OrgIconDirective } from "../../components/org-icon.directive";
CommonModule,
JslibModule,
CardComponent,
SectionHeaderComponent,
TypographyModule,
OrgIconDirective,
FormFieldModule,
ButtonLinkDirective,
],
})
export class ItemDetailsV2Component {
@Input() cipher: CipherView;
@Input() organization?: Organization;
@Input() collections?: CollectionView[];
@Input() folder?: FolderView;
@Input() hideOwner?: boolean = false;
hideOwner = input<boolean>(false);
cipher = input.required<CipherView>();
organization = input<Organization | undefined>();
folder = input<FolderView | undefined>();
collections = input<CollectionView[] | undefined>();
showAllDetails = signal(false);
get showOwnership() {
return this.cipher.organizationId && this.organization && !this.hideOwner;
showOwnership = computed(() => {
return this.cipher().organizationId && this.organization() && !this.hideOwner();
});
hasSmallScreen = toSignal(
fromEvent(window, "resize").pipe(
map(() => window.innerWidth),
startWith(window.innerWidth),
map((width) => width < 681),
),
);
// Array to hold all details of item. Organization, Collections, and Folder
allItems = computed(() => {
let items: any[] = [];
if (this.showOwnership() && this.organization()) {
items.push(this.organization());
}
if (this.cipher().collectionIds?.length > 0 && this.collections()) {
items = [...items, ...this.collections()];
}
if (this.cipher().folderId && this.folder()) {
items.push(this.folder());
}
return items;
});
showItems = computed(() => {
if (
this.hasSmallScreen() &&
this.allItems().length > 2 &&
!this.showAllDetails() &&
this.cipher().collectionIds?.length > 1
) {
return this.allItems().slice(0, 2);
} else {
return this.allItems();
}
});
constructor(private i18nService: I18nService) {}
toggleShowMore() {
this.showAllDetails.update((value) => !value);
}
getAriaLabel(item: Organization | CollectionView | FolderView): string {
if (item instanceof Organization) {
return this.i18nService.t("owner") + item.name;
} else if (item instanceof CollectionView) {
return this.i18nService.t("collection") + item.name;
} else if (item instanceof FolderView) {
return this.i18nService.t("folder") + item.name;
}
return "";
}
getIconClass(item: Organization | CollectionView | FolderView): string {
if (item instanceof CollectionView) {
return "bwi-collection-shared";
} else if (item instanceof FolderView) {
return "bwi-folder";
}
return "";
}
getItemTitle(item: Organization | CollectionView | FolderView): string {
if (item instanceof CollectionView) {
return this.i18nService.t("collection");
} else if (item instanceof FolderView) {
return this.i18nService.t("folder");
}
return "";
}
isOrgIcon(item: Organization | CollectionView | FolderView): boolean {
return item instanceof Organization;
}
}