imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix decryption failure bar covering the timeline (#10360)

Browse source 
* Use grid layout instead

- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Unset height of spinner

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Break lines at newline characters with white-space: pre-line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit tests to check decryption failure bars on narrow timeline

- checkTimelineNarrow() looks for buttons by default
- Test indicator as well

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix double underscores

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix double underscores - pcss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Iterate - buttons at the bottom

- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check waiting headline as well

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Increase spacing between the message and the buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* lint

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Increase block gap between wrapped buttons for clickability

Apply 8px between wrapped buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Revert bottom margin of buttons which are not expected to be wrapped

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Check visibility instead of existence

This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge

This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element  currently includes the button(s) only.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* lint - prettier

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()

The loading spinner is likely to disappear while checking the bar on the narrow timeline.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
This commit is contained in:
Suguru Hirahara 2023-03-30 18:11:16 +09:00 • committed by GitHub
parent bebfbacded
commit 232daaff68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 471 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

73
cypress/e2e/crypto/decryption-failure.spec.ts
View file

@ -57,6 +57,28 @@ const handleVerificationRequest = (request: VerificationRequest): Chainable<Emoj
); );
}; };
const checkTimelineNarrow = (button = true) => {
cy.viewport(800, 600); // SVGA
cy.get(".mx_LeftPanel_minimized").should("exist"); // Wait until the left panel is minimized
cy.get(".mx_RightPanel_roomSummaryButton").click(); // Open the right panel to make the timeline narrow
cy.get(".mx_BaseCard").should("exist");
// Ensure the failure bar does not cover the timeline
cy.get(".mx_RoomView_body .mx_EventTile.mx_EventTile_last").should("be.visible");
// Ensure the indicator does not overflow the timeline
cy.get("[data-testid='decryption-failure-bar-indicator']").should("be.visible");
if (button) {
// Ensure the button does not overflow the timeline
cy.get("[data-testid='decryption-failure-bar-button']:last-of-type").should("be.visible");
}
cy.get(".mx_RightPanel_roomSummaryButton").click(); // Close the right panel
cy.get(".mx_BaseCard").should("not.exist");
cy.viewport(1000, 660); // Reset to the default size
};
describe("Decryption Failure Bar", () => { describe("Decryption Failure Bar", () => {
let homeserver: HomeserverInstance | undefined; let homeserver: HomeserverInstance | undefined;
let testUser: UserCredentials | undefined; let testUser: UserCredentials | undefined;
@ -113,10 +135,13 @@ describe("Decryption Failure Bar", () => {
}) })
.then(() => { .then(() => {
cy.botSendMessage(bot, roomId, "test"); cy.botSendMessage(bot, roomId, "test");
cy.contains(".mx_DecryptionFailureBar_start_headline", "Decrypting messages…").should("be.visible");
cy.contains( cy.contains(
".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline", ".mx_DecryptionFailureBar_start_headline",
"Verify this device to access all messages", "Verify this device to access all messages",
); ).should("be.visible");
checkTimelineNarrow();
cy.get(".mx_DecryptionFailureBar").percySnapshotElement( cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
"DecryptionFailureBar prompts user to verify", "DecryptionFailureBar prompts user to verify",
@ -125,12 +150,14 @@ describe("Decryption Failure Bar", () => {
}, },
); );
cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); cy.contains(".mx_DecryptionFailureBar_end", "Resend key requests").should("not.exist");
cy.contains(".mx_DecryptionFailureBar_button", "Verify").click(); cy.contains(".mx_DecryptionFailureBar_end", "Verify").should("be.visible").click();
const verificationRequestPromise = waitForVerificationRequest(otherDevice); const verificationRequestPromise = waitForVerificationRequest(otherDevice);
cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click(); cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click();
cy.contains("To proceed, please accept the verification request on your other device."); cy.contains("To proceed, please accept the verification request on your other device.").should(
"be.visible",
);
cy.wrap(verificationRequestPromise).then((verificationRequest: VerificationRequest) => { cy.wrap(verificationRequestPromise).then((verificationRequest: VerificationRequest) => {
cy.wrap(verificationRequest.accept()); cy.wrap(verificationRequest.accept());
handleVerificationRequest(verificationRequest).then((emojis) => { handleVerificationRequest(verificationRequest).then((emojis) => {
@ -146,10 +173,12 @@ describe("Decryption Failure Bar", () => {
cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist"); cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist");
cy.contains(".mx_AccessibleButton", "Got it").click(); cy.contains(".mx_AccessibleButton", "Got it").click();
cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should( cy.contains(
"have.text", ".mx_DecryptionFailureBar_start_headline",
"Open another device to load encrypted messages", "Open another device to load encrypted messages",
); ).should("be.visible");
checkTimelineNarrow();
cy.get(".mx_DecryptionFailureBar").percySnapshotElement( cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
"DecryptionFailureBar prompts user to open another device, with Resend Key Requests button", "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button",
@ -159,9 +188,12 @@ describe("Decryption Failure Bar", () => {
); );
cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest"); cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest");
cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").click(); cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests").should("be.visible").click();
cy.wait("@keyRequest"); cy.wait("@keyRequest");
cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests").should("not.exist");
cy.contains(".mx_DecryptionFailureBar_end_button", "View your device list").should("be.visible");
checkTimelineNarrow();
cy.get(".mx_DecryptionFailureBar").percySnapshotElement( cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
"DecryptionFailureBar prompts user to open another device, without Resend Key Requests button", "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button",
@ -184,15 +216,17 @@ describe("Decryption Failure Bar", () => {
cy.botSendMessage(bot, roomId, "test"); cy.botSendMessage(bot, roomId, "test");
cy.contains( cy.contains(
".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline", ".mx_DecryptionFailureBar_start_headline",
"Reset your keys to prevent future decryption errors", "Reset your keys to prevent future decryption errors",
); ).should("be.visible");
checkTimelineNarrow();
cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", { cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", {
widths: [320, 640], widths: [320, 640],
}); });
cy.contains(".mx_DecryptionFailureBar_button", "Reset").click(); cy.contains(".mx_DecryptionFailureBar_end_button", "Reset").should("be.visible").click();
// Set up key backup // Set up key backup
cy.get(".mx_Dialog").within(() => { cy.get(".mx_Dialog").within(() => {
@ -204,11 +238,12 @@ describe("Decryption Failure Bar", () => {
cy.contains("Done").click(); cy.contains("Done").click();
}); });
cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should( cy.contains(".mx_DecryptionFailureBar_start_headline", "Some messages could not be decrypted").should(
"have.text", "be.visible",
"Some messages could not be decrypted",
); );
checkTimelineNarrow(false); // button should not be rendered here
cy.get(".mx_DecryptionFailureBar").percySnapshotElement( cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
"DecryptionFailureBar displays general message with no call to action", "DecryptionFailureBar displays general message with no call to action",
{ {
@ -233,9 +268,11 @@ describe("Decryption Failure Bar", () => {
widths: [320, 640], widths: [320, 640],
}); });
checkTimelineNarrow();
cy.wait(5000); cy.wait(5000);
cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist"); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist");
cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon").should("exist"); cy.get("[data-testid='decryption-failure-bar-icon']").should("be.visible");
cy.get(".mx_RoomView_messagePanel").scrollTo("top"); cy.get(".mx_RoomView_messagePanel").scrollTo("top");
cy.get(".mx_DecryptionFailureBar").should("not.exist"); cy.get(".mx_DecryptionFailureBar").should("not.exist");
@ -245,5 +282,7 @@ describe("Decryption Failure Bar", () => {
cy.get(".mx_RoomView_messagePanel").scrollTo("bottom"); cy.get(".mx_RoomView_messagePanel").scrollTo("bottom");
cy.get(".mx_DecryptionFailureBar").should("exist"); cy.get(".mx_DecryptionFailureBar").should("exist");
checkTimelineNarrow();
}); });
}); });

8
res/css/_common.pcss
View file

@ -43,6 +43,8 @@ $timeline-image-border-radius: 8px;
--transition-short: 0.1s; --transition-short: 0.1s;
--transition-standard: 0.3s; --transition-standard: 0.3s;
--MessageTimestamp-width: $MessageTimestamp_width; --MessageTimestamp-width: $MessageTimestamp_width;
--buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8;
} }
@media only percy { @media only percy {
@ -525,8 +527,8 @@ legend {
margin-inline-start: auto; margin-inline-start: auto;
/* default gap among elements */ /* default gap among elements */
column-gap: $spacing-8; /* See margin-right below inside the button style */ column-gap: var(--buttons-dialog-gap-column);
row-gap: 5px; /* See margin-bottom below inside the button style */ row-gap: var(--buttons-dialog-gap-row);
button { button {
margin: 0 !important; /* override the margin settings */ margin: 0 !important; /* override the margin settings */
@ -548,7 +550,7 @@ legend {
.mx_Dialog_buttons input[type="submit"] { .mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton; @mixin mx_DialogButton;
margin-left: 0px; margin-left: 0px;
margin-right: 8px; margin-right: var(--buttons-dialog-gap-column);
margin-bottom: 5px; margin-bottom: 5px;
/* flip colours for the secondary ones */ /* flip colours for the secondary ones */

93
res/css/views/rooms/_DecryptionFailureBar.pcss
View file

@ -15,46 +15,73 @@ limitations under the License.
*/ */
.mx_DecryptionFailureBar { .mx_DecryptionFailureBar {
--gap-row: $spacing-8;
--gap-column: $spacing-12;
--gap: var(--gap-row) var(--gap-column);
--size-icon: 24px;
background-color: $system; background-color: $system;
padding: $spacing-12; padding: $spacing-12;
margin-left: $spacing-16; margin-inline: $spacing-16;
margin-right: $spacing-16;
border-radius: 4px; border-radius: 4px;
display: flex;
align-items: flex-start;
gap: $spacing-12;
}
.mx_DecryptionFailureBar_icon { &.mx_DecryptionFailureBar--withEnd {
width: 24px; display: flex;
height: 24px; flex-flow: wrap;
mask-image: url("$(res)/img/e2e/decryption-failure.svg"); align-items: flex-start;
background-color: $e2e-warning-color; justify-content: space-between;
mask-repeat: no-repeat; row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
mask-position: center;
mask-size: contain;
}
.mx_DecryptionFailureBar_icon, .mx_DecryptionFailureBar_end {
.mx_DecryptionFailureBar .mx_Spinner { display: flex;
flex-shrink: 0; flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
flex-grow: 0; gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
} margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
}
}
.mx_DecryptionFailureBar_message { .mx_DecryptionFailureBar_start {
flex-grow: 1; display: grid;
} gap: var(--gap);
grid-template-areas:
"status headline"
". message";
grid-template-columns: var(--size-icon) auto;
.mx_DecryptionFailureBar_message_headline { .mx_DecryptionFailureBar_start_status {
font-weight: $font-semi-bold; grid-area: status;
font-size: $font-16px;
margin-bottom: $spacing-4;
}
.mx_DecryptionFailureBar_message_body { display: flex;
color: $secondary-content; align-items: center;
} gap: var(--gap);
.mx_DecryptionFailureBar_button { .mx_Spinner {
flex-shrink: 0; height: unset; /* Unset height: 100% */
}
.mx_DecryptionFailureBar_start_status_icon {
min-width: var(--size-icon);
height: var(--size-icon);
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
background-color: $e2e-warning-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: $font-semi-bold;
font-size: $font-16px;
align-self: center;
}
.mx_DecryptionFailureBar_start_message {
grid-area: message;
color: $secondary-content;
}
}
} }

77
src/components/views/rooms/DecryptionFailureBar.tsx
View file

@ -145,34 +145,47 @@ export const DecryptionFailureBar: React.FC<IProps> = ({ failures }) => {
store.resetConfirm(); store.resetConfirm();
}; };
const statusIndicator = waiting ? <Spinner /> : <div className="mx_DecryptionFailureBar_icon" />; const statusIndicator = waiting ? (
<Spinner w={24} h={24} />
) : (
<div className="mx_DecryptionFailureBar_start_status_icon" data-testid="decryption-failure-bar-icon" />
);
let className;
let headline: JSX.Element; let headline: JSX.Element;
let body: JSX.Element; let message: JSX.Element;
let button = <React.Fragment />; let button = <React.Fragment />;
if (waiting) { if (waiting) {
className = "mx_DecryptionFailureBar";
headline = <React.Fragment>{_t("Decrypting messages…")}</React.Fragment>; headline = <React.Fragment>{_t("Decrypting messages…")}</React.Fragment>;
body = ( message = (
<React.Fragment> <React.Fragment>
{_t("Please wait as we try to decrypt your messages. This may take a few moments.")} {_t("Please wait as we try to decrypt your messages. This may take a few moments.")}
</React.Fragment> </React.Fragment>
); );
} else if (needsVerification) { } else if (needsVerification) {
if (hasOtherVerifiedDevices || hasKeyBackup) { if (hasOtherVerifiedDevices || hasKeyBackup) {
className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd";
headline = <React.Fragment>{_t("Verify this device to access all messages")}</React.Fragment>; headline = <React.Fragment>{_t("Verify this device to access all messages")}</React.Fragment>;
body = ( message = (
<React.Fragment> <React.Fragment>
{_t("This device was unable to decrypt some messages because it has not been verified yet.")} {_t("This device was unable to decrypt some messages because it has not been verified yet.")}
</React.Fragment> </React.Fragment>
); );
button = ( button = (
<AccessibleButton kind="primary" onClick={onVerifyClick}> <AccessibleButton
className="mx_DecryptionFailureBar_end_button"
kind="primary"
onClick={onVerifyClick}
data-testid="decryption-failure-bar-button"
>
{_t("Verify")} {_t("Verify")}
</AccessibleButton> </AccessibleButton>
); );
} else { } else {
className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd";
headline = <React.Fragment>{_t("Reset your keys to prevent future decryption errors")}</React.Fragment>; headline = <React.Fragment>{_t("Reset your keys to prevent future decryption errors")}</React.Fragment>;
body = ( message = (
<React.Fragment> <React.Fragment>
{_t( {_t(
"You will not be able to access old undecryptable messages, " + "You will not be able to access old undecryptable messages, " +
@ -181,14 +194,20 @@ export const DecryptionFailureBar: React.FC<IProps> = ({ failures }) => {
</React.Fragment> </React.Fragment>
); );
button = ( button = (
<AccessibleButton kind="primary" onClick={onResetClick}> <AccessibleButton
className="mx_DecryptionFailureBar_end_button"
kind="primary"
onClick={onResetClick}
data-testid="decryption-failure-bar-button"
>
{_t("Reset")} {_t("Reset")}
</AccessibleButton> </AccessibleButton>
); );
} }
} else if (hasOtherVerifiedDevices) { } else if (hasOtherVerifiedDevices) {
className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd";
headline = <React.Fragment>{_t("Open another device to load encrypted messages")}</React.Fragment>; headline = <React.Fragment>{_t("Open another device to load encrypted messages")}</React.Fragment>;
body = ( message = (
<React.Fragment> <React.Fragment>
{_t( {_t(
"This device is requesting decryption keys from your other devices. " + "This device is requesting decryption keys from your other devices. " +
@ -197,13 +216,19 @@ export const DecryptionFailureBar: React.FC<IProps> = ({ failures }) => {
</React.Fragment> </React.Fragment>
); );
button = ( button = (
<AccessibleButton kind="primary_outline" onClick={onDeviceListClick}> <AccessibleButton
className="mx_DecryptionFailureBar_end_button"
kind="primary_outline"
onClick={onDeviceListClick}
data-testid="decryption-failure-bar-button"
>
{_t("View your device list")} {_t("View your device list")}
</AccessibleButton> </AccessibleButton>
); );
} else { } else {
className = "mx_DecryptionFailureBar";
headline = <React.Fragment>{_t("Some messages could not be decrypted")}</React.Fragment>; headline = <React.Fragment>{_t("Some messages could not be decrypted")}</React.Fragment>;
body = ( message = (
<React.Fragment> <React.Fragment>
{_t( {_t(
"Unfortunately, there are no other verified devices to request decryption keys from. " + "Unfortunately, there are no other verified devices to request decryption keys from. " +
@ -215,24 +240,32 @@ export const DecryptionFailureBar: React.FC<IProps> = ({ failures }) => {
let keyRequestButton = <React.Fragment />; let keyRequestButton = <React.Fragment />;
if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) {
className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd";
keyRequestButton = ( keyRequestButton = (
<div className="mx_DecryptionFailureBar_button"> <AccessibleButton
<AccessibleButton kind="primary" onClick={sendKeyRequests}> className="mx_DecryptionFailureBar_end_button"
{_t("Resend key requests")} kind="primary"
</AccessibleButton> onClick={sendKeyRequests}
</div> data-testid="decryption-failure-bar-button"
>
{_t("Resend key requests")}
</AccessibleButton>
); );
} }
return ( return (
<div className="mx_DecryptionFailureBar"> <div className={className}>
{statusIndicator} <div className="mx_DecryptionFailureBar_start">
<div className="mx_DecryptionFailureBar_message"> <div className="mx_DecryptionFailureBar_start_status">
<div className="mx_DecryptionFailureBar_message_headline">{headline}</div> <div data-testid="decryption-failure-bar-indicator">{statusIndicator}</div>
<div className="mx_DecryptionFailureBar_message_body">{body}</div> </div>
<div className="mx_DecryptionFailureBar_start_headline">{headline}</div>
<div className="mx_DecryptionFailureBar_start_message">{message}</div>
</div>
<div className="mx_DecryptionFailureBar_end">
{button}
{keyRequestButton}
</div> </div>
<div className="mx_DecryptionFailureBar_button">{button}</div>
{keyRequestButton}
</div> </div>
); );
}; };

458
test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap
View file

@ -5,24 +5,33 @@ exports[`<DecryptionFailureBar /> Displays a general error message if there are
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Some messages could not be decrypted Some messages could not be decrypted
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
Unfortunately, there are no other verified devices to request decryption keys from. Signing in and verifying other devices may help avoid this situation in the future. Unfortunately, there are no other verified devices to request decryption keys from. Signing in and verifying other devices may help avoid this situation in the future.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
/> />
</div> </div>
`; `;
@ -32,73 +41,88 @@ exports[`<DecryptionFailureBar /> Displays a loading spinner 1`] = `
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar"
> >
<div <div
class="mx_Spinner" class="mx_DecryptionFailureBar_start"
> >
<div <div
aria-label="Loading…" class="mx_DecryptionFailureBar_start_status"
class="mx_Spinner_icon" >
data-testid="spinner" <div
role="progressbar" data-testid="decryption-failure-bar-indicator"
style="width: 32px; height: 32px;" >
/> <div
</div> class="mx_Spinner"
<div >
class="mx_DecryptionFailureBar_message" <div
> aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 24px; height: 24px;"
/>
</div>
</div>
</div>
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_headline"
> >
Decrypting messages… Decrypting messages…
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
Please wait as we try to decrypt your messages. This may take a few moments. Please wait as we try to decrypt your messages. This may take a few moments.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
/> />
</div> </div>
`; `;
exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 1`] = ` exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
View your device list View your device list
</div> </div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -110,30 +134,40 @@ exports[`<DecryptionFailureBar /> Displays button to resend key requests if we a
exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 2`] = ` exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 2`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -145,41 +179,48 @@ exports[`<DecryptionFailureBar /> Displays button to resend key requests if we a
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 1`] = ` exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
View your device list View your device list
</div> </div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -191,30 +232,40 @@ exports[`<DecryptionFailureBar /> Displays the button to resend key requests onl
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 2`] = ` exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 2`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -226,41 +277,48 @@ exports[`<DecryptionFailureBar /> Displays the button to resend key requests onl
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 3`] = ` exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 3`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
View your device list View your device list
</div> </div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -272,30 +330,40 @@ exports[`<DecryptionFailureBar /> Displays the button to resend key requests onl
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 4`] = ` exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 4`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -307,30 +375,40 @@ exports[`<DecryptionFailureBar /> Displays the button to resend key requests onl
exports[`<DecryptionFailureBar /> Does not display a button to send key requests if we are unverified 1`] = ` exports[`<DecryptionFailureBar /> Does not display a button to send key requests if we are unverified 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Verify this device to access all messages Verify this device to access all messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device was unable to decrypt some messages because it has not been verified yet. This device was unable to decrypt some messages because it has not been verified yet.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -342,30 +420,40 @@ exports[`<DecryptionFailureBar /> Does not display a button to send key requests
exports[`<DecryptionFailureBar /> Handles device updates 1`] = ` exports[`<DecryptionFailureBar /> Handles device updates 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Verify this device to access all messages Verify this device to access all messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device was unable to decrypt some messages because it has not been verified yet. This device was unable to decrypt some messages because it has not been verified yet.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -377,41 +465,48 @@ exports[`<DecryptionFailureBar /> Handles device updates 1`] = `
exports[`<DecryptionFailureBar /> Handles device updates 2`] = ` exports[`<DecryptionFailureBar /> Handles device updates 2`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
View your device list View your device list
</div> </div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -423,30 +518,40 @@ exports[`<DecryptionFailureBar /> Handles device updates 2`] = `
exports[`<DecryptionFailureBar /> Prompts the user to reset if they have no other verified devices and no backups 1`] = ` exports[`<DecryptionFailureBar /> Prompts the user to reset if they have no other verified devices and no backups 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Reset your keys to prevent future decryption errors Reset your keys to prevent future decryption errors
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages. You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -458,30 +563,40 @@ exports[`<DecryptionFailureBar /> Prompts the user to reset if they have no othe
exports[`<DecryptionFailureBar /> Prompts the user to verify if they have backups 1`] = ` exports[`<DecryptionFailureBar /> Prompts the user to verify if they have backups 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Verify this device to access all messages Verify this device to access all messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device was unable to decrypt some messages because it has not been verified yet. This device was unable to decrypt some messages because it has not been verified yet.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -493,30 +608,40 @@ exports[`<DecryptionFailureBar /> Prompts the user to verify if they have backup
exports[`<DecryptionFailureBar /> Prompts the user to verify if they have other devices 1`] = ` exports[`<DecryptionFailureBar /> Prompts the user to verify if they have other devices 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Verify this device to access all messages Verify this device to access all messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device was unable to decrypt some messages because it has not been verified yet. This device was unable to decrypt some messages because it has not been verified yet.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -528,41 +653,48 @@ exports[`<DecryptionFailureBar /> Prompts the user to verify if they have other
exports[`<DecryptionFailureBar /> Recommends opening other devices if there are other verified devices 1`] = ` exports[`<DecryptionFailureBar /> Recommends opening other devices if there are other verified devices 1`] = `
<div <div
class="mx_DecryptionFailureBar" class="mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"
> >
<div <div
class="mx_DecryptionFailureBar_icon" class="mx_DecryptionFailureBar_start"
/>
<div
class="mx_DecryptionFailureBar_message"
> >
<div <div
class="mx_DecryptionFailureBar_message_headline" class="mx_DecryptionFailureBar_start_status"
>
<div
data-testid="decryption-failure-bar-indicator"
>
<div
class="mx_DecryptionFailureBar_start_status_icon"
data-testid="decryption-failure-bar-icon"
/>
</div>
</div>
<div
class="mx_DecryptionFailureBar_start_headline"
> >
Open another device to load encrypted messages Open another device to load encrypted messages
</div> </div>
<div <div
class="mx_DecryptionFailureBar_message_body" class="mx_DecryptionFailureBar_start_message"
> >
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div> </div>
</div> </div>
<div <div
class="mx_DecryptionFailureBar_button" class="mx_DecryptionFailureBar_end"
> >
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >
View your device list View your device list
</div> </div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div <div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary" class="mx_AccessibleButton mx_DecryptionFailureBar_end_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
data-testid="decryption-failure-bar-button"
role="button" role="button"
tabindex="0" tabindex="0"
> >