element-web-Github/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap
Faye Duxovni 4724506320
Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544)
* Improve decryption error UI by consolidating error messages and providing instructions when possible

* Fix TS strict errors

* Rename .scss to .pcss

* Avoid accessing clipboard, Cypress doesn't like it

* Display DecryptionFailureBar alongside other AuxPanel bars

* Add comments

* Add small margin off-screen for visible decryption failures

* Fix some more TS strict errors

* Add unit tests for DecryptionFailureBar

* Add button to resend key requests manually

* Remove references to matrix-js-sdk crypto internals

* Add hysteresis to visible decryption failures

* Add comment

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Add comment

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Don't create empty div if we're not showing resend requests button

* cancel updateSessions on unmount

* Update unit tests

* Fix lint and implicit any

* Simplify visible event bounds checking

* Adjust cypress test descriptions

* Add percy snapshots

* Update src/components/structures/TimelinePanel.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Add comments on TimelinePanel IState

* comment

* Add names to percy snapshots

* Show Resend Key Requests button when there are sessions that haven't already been requested via this bar

* We no longer request keys from senders

* update i18n

* update expected text in cypress test

* don't download keys ourselves, update device info in response to updates from client

* fix ts strict errors

* visibledecryptionfailures undefined handling

* Fix implicitAny errors

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-12-15 17:24:33 +00:00

574 lines
14 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DecryptionFailureBar /> Displays a general error message if there are no other verified devices 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Some messages could not be decrypted
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
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
class="mx_DecryptionFailureBar_button"
/>
</div>
`;
exports[`<DecryptionFailureBar /> Displays a loading spinner 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading..."
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Decrypting messages...
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
Please wait as we try to decrypt your messages. This may take a few moments.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
/>
</div>
`;
exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Resend key requests
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Displays button to resend key requests if we are verified 2`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Resend key requests
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 2`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 3`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Resend key requests
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Displays the button to resend key requests only if there are sessions we haven't already requested 4`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Does not display a button to send key requests if we are unverified 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Verify this device to access all messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device was unable to decrypt some messages because it has not been verified yet.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Handles device updates 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Verify this device to access all messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device was unable to decrypt some messages because it has not been verified yet.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Handles device updates 2`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Resend key requests
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Prompts the user to reset if they have no other verified devices and no backups 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Reset your keys to prevent future decryption errors
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Reset
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Prompts the user to verify if they have backups 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Verify this device to access all messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device was unable to decrypt some messages because it has not been verified yet.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Prompts the user to verify if they have other devices 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Verify this device to access all messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device was unable to decrypt some messages because it has not been verified yet.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify
</div>
</div>
</div>
`;
exports[`<DecryptionFailureBar /> Recommends opening other devices if there are other verified devices 1`] = `
<div
class="mx_DecryptionFailureBar"
>
<div
class="mx_DecryptionFailureBar_icon"
/>
<div
class="mx_DecryptionFailureBar_message"
>
<div
class="mx_DecryptionFailureBar_message_headline"
>
Open another device to load encrypted messages
</div>
<div
class="mx_DecryptionFailureBar_message_body"
>
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
View your device list
</div>
</div>
<div
class="mx_DecryptionFailureBar_button"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Resend key requests
</div>
</div>
</div>
`;