From d2d9a6ad67dcdafd5cdb4c8f8a64f7c045881499 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 12 Mar 2023 23:15:03 +0900 Subject: [PATCH 01/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 22 +- .../views/rooms/_DecryptionFailureBar.pcss | 83 ++-- .../views/rooms/DecryptionFailureBar.tsx | 56 ++- .../DecryptionFailureBar-test.tsx.snap | 462 +++++++++--------- 4 files changed, 319 insertions(+), 304 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 15b437d6211..72330a5b361 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -114,7 +114,7 @@ describe("Decryption Failure Bar", () => { .then(() => { cy.botSendMessage(bot, roomId, "test"); cy.contains( - ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline", + ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", "Verify this device to access all messages", ); @@ -125,8 +125,10 @@ describe("Decryption Failure Bar", () => { }, ); - cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); - cy.contains(".mx_DecryptionFailureBar_button", "Verify").click(); + cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").should( + "not.exist", + ); + cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Verify").click(); const verificationRequestPromise = waitForVerificationRequest(otherDevice); cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click(); @@ -146,7 +148,7 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist"); cy.contains(".mx_AccessibleButton", "Got it").click(); - cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should( + cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline").should( "have.text", "Open another device to load encrypted messages", ); @@ -159,9 +161,9 @@ describe("Decryption Failure Bar", () => { ); 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__header__buttons__button", "Resend key requests").click(); cy.wait("@keyRequest"); - cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist"); + cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").should("not.exist"); cy.get(".mx_DecryptionFailureBar").percySnapshotElement( "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button", @@ -184,7 +186,7 @@ describe("Decryption Failure Bar", () => { cy.botSendMessage(bot, roomId, "test"); cy.contains( - ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline", + ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", "Reset your keys to prevent future decryption errors", ); @@ -192,7 +194,7 @@ describe("Decryption Failure Bar", () => { widths: [320, 640], }); - cy.contains(".mx_DecryptionFailureBar_button", "Reset").click(); + cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Reset").click(); // Set up key backup cy.get(".mx_Dialog").within(() => { @@ -204,7 +206,7 @@ describe("Decryption Failure Bar", () => { cy.contains("Done").click(); }); - cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should( + cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline").should( "have.text", "Some messages could not be decrypted", ); @@ -235,7 +237,7 @@ describe("Decryption Failure Bar", () => { cy.wait(5000); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist"); - cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon").should("exist"); + cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar__icon").should("exist"); cy.get(".mx_RoomView_messagePanel").scrollTo("top"); cy.get(".mx_DecryptionFailureBar").should("not.exist"); diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 1369d599e3a..e24c005bc80 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -15,46 +15,63 @@ limitations under the License. */ .mx_DecryptionFailureBar { + --gap: $spacing-8 $spacing-12; + + display: grid; + grid-template-areas: + "icon header header" + ". message message"; /* Empty grid item under grid-area "icon" */ + grid-template-columns: min-content auto auto; + align-items: start; + background-color: $system; padding: $spacing-12; - margin-left: $spacing-16; - margin-right: $spacing-16; + margin-inline: $spacing-16; border-radius: 4px; - display: flex; - align-items: flex-start; - gap: $spacing-12; -} + gap: var(--gap); -.mx_DecryptionFailureBar_icon { - width: 24px; - height: 24px; - 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__icon, + .mx_Spinner { + align-self: start; + } -.mx_DecryptionFailureBar_icon, -.mx_DecryptionFailureBar .mx_Spinner { - flex-shrink: 0; - flex-grow: 0; -} + .mx_DecryptionFailureBar__icon { + --size: 24px; -.mx_DecryptionFailureBar_message { - flex-grow: 1; -} + grid-area: icon; -.mx_DecryptionFailureBar_message_headline { - font-weight: $font-semi-bold; - font-size: $font-16px; - margin-bottom: $spacing-4; -} + width: var(--size); + height: var(--size); + 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_message_body { - color: $secondary-content; -} + .mx_DecryptionFailureBar__header { + grid-area: header; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: var(--gap); + + .mx_DecryptionFailureBar__header__headline { + font-weight: $font-semi-bold; + font-size: $font-16px; + } + + .mx_DecryptionFailureBar__header__buttons { + display: flex; + flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ + gap: var(--gap); + } + } + + .mx_DecryptionFailureBar__message { + grid-area: message; -.mx_DecryptionFailureBar_button { - flex-shrink: 0; + color: $secondary-content; + } } diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 7849f638533..f5276aa2c40 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -145,14 +145,14 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { store.resetConfirm(); }; - const statusIndicator = waiting ? :
; + const statusIndicator = waiting ? :
; let headline: JSX.Element; - let body: JSX.Element; + let message: JSX.Element; let button = ; if (waiting) { headline = {_t("Decrypting messages…")}; - body = ( + message = ( {_t("Please wait as we try to decrypt your messages. This may take a few moments.")} @@ -160,19 +160,23 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } else if (needsVerification) { if (hasOtherVerifiedDevices || hasKeyBackup) { headline = {_t("Verify this device to access all messages")}; - body = ( + message = ( {_t("This device was unable to decrypt some messages because it has not been verified yet.")} ); button = ( - + {_t("Verify")} ); } else { headline = {_t("Reset your keys to prevent future decryption errors")}; - body = ( + message = ( {_t( "You will not be able to access old undecryptable messages, " + @@ -181,14 +185,18 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( - + {_t("Reset")} ); } } else if (hasOtherVerifiedDevices) { headline = {_t("Open another device to load encrypted messages")}; - body = ( + message = ( {_t( "This device is requesting decryption keys from your other devices. " + @@ -197,13 +205,17 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( - + {_t("View your device list")} ); } else { headline = {_t("Some messages could not be decrypted")}; - body = ( + message = ( {_t( "Unfortunately, there are no other verified devices to request decryption keys from. " + @@ -216,23 +228,27 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { let keyRequestButton = ; if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { keyRequestButton = ( -
- - {_t("Resend key requests")} - -
+ + {_t("Resend key requests")} + ); } return (
{statusIndicator} -
-
{headline}
-
{body}
+
+
{headline}
+
+ {button} + {keyRequestButton} +
-
{button}
- {keyRequestButton} +
{message}
); }; diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index 76adfef8b58..8377f6fdefd 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -5,25 +5,25 @@ exports[` Displays a general error message if there are class="mx_DecryptionFailureBar" >
Some messages could not be decrypted
- 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. -
+ class="mx_DecryptionFailureBar__header__buttons" + />
+ class="mx_DecryptionFailureBar__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. +
`; @@ -43,22 +43,22 @@ exports[` Displays a loading spinner 1`] = ` />
Decrypting messages…
- Please wait as we try to decrypt your messages. This may take a few moments. -
+ class="mx_DecryptionFailureBar__header__buttons" + />
+ class="mx_DecryptionFailureBar__message" + > + Please wait as we try to decrypt your messages. This may take a few moments. +
`; @@ -67,43 +67,39 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. -
-
-
-
- View your device list +
+ View your device list +
+
+ Resend key requests +
-
- Resend key requests -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -113,32 +109,32 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+ View your device list +
-
- View your device list -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -148,43 +144,39 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. -
-
-
-
- View your device list +
+ View your device list +
+
+ Resend key requests +
-
- Resend key requests -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -194,32 +186,32 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+ View your device list +
-
- View your device list -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -229,43 +221,39 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+ View your device list +
+
+ Resend key requests +
-
- View your device list -
-
-
-
- Resend key requests -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -275,32 +263,32 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+ View your device list +
-
- View your device list -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -310,32 +298,32 @@ exports[` Does not display a button to send key requests class="mx_DecryptionFailureBar" >
Verify this device to access all messages
- This device was unable to decrypt some messages because it has not been verified yet. +
+ Verify +
-
- Verify -
+ This device was unable to decrypt some messages because it has not been verified yet.
`; @@ -345,32 +333,32 @@ exports[` Handles device updates 1`] = ` class="mx_DecryptionFailureBar" >
Verify this device to access all messages
- This device was unable to decrypt some messages because it has not been verified yet. +
+ Verify +
-
- Verify -
+ This device was unable to decrypt some messages because it has not been verified yet.
`; @@ -380,43 +368,39 @@ exports[` Handles device updates 2`] = ` class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. -
-
-
-
- View your device list +
+ View your device list +
+
+ Resend key requests +
-
- Resend key requests -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; @@ -426,32 +410,32 @@ exports[` Prompts the user to reset if they have no othe class="mx_DecryptionFailureBar" >
Reset your keys to prevent future decryption errors
- You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages. +
+ Reset +
-
- Reset -
+ You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.
`; @@ -461,32 +445,32 @@ exports[` Prompts the user to verify if they have backup class="mx_DecryptionFailureBar" >
Verify this device to access all messages
- This device was unable to decrypt some messages because it has not been verified yet. +
+ Verify +
-
- Verify -
+ This device was unable to decrypt some messages because it has not been verified yet.
`; @@ -496,32 +480,32 @@ exports[` Prompts the user to verify if they have other class="mx_DecryptionFailureBar" >
Verify this device to access all messages
- This device was unable to decrypt some messages because it has not been verified yet. +
+ Verify +
-
- Verify -
+ This device was unable to decrypt some messages because it has not been verified yet.
`; @@ -531,43 +515,39 @@ exports[` Recommends opening other devices if there are class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
- This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. -
-
-
-
- View your device list +
+ View your device list +
+
+ Resend key requests +
-
- Resend key requests -
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.
`; From 86407842afe844cdad0ed277d26a9bc87e1dc803 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 13 Mar 2023 02:30:21 +0900 Subject: [PATCH 02/18] Unset height of spinner Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_DecryptionFailureBar.pcss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index e24c005bc80..3f4a688f23d 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -35,6 +35,10 @@ limitations under the License. align-self: start; } + .mx_Spinner { + height: unset; /* Unset height: 100% */ + } + .mx_DecryptionFailureBar__icon { --size: 24px; From 2758b150ba656d0e31e8622fe6e06c3c9f9660d5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 13 Mar 2023 03:09:19 +0900 Subject: [PATCH 03/18] Break lines at newline characters with white-space: pre-line Signed-off-by: Suguru Hirahara --- .../views/rooms/_DecryptionFailureBar.pcss | 1 + .../views/rooms/DecryptionFailureBar.tsx | 6 ++-- src/i18n/strings/en_EN.json | 6 ++-- .../DecryptionFailureBar-test.tsx.snap | 30 ++++++++++++------- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 3f4a688f23d..9b7fb5b277d 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -76,6 +76,7 @@ limitations under the License. .mx_DecryptionFailureBar__message { grid-area: message; + white-space: pre-line; /* Break lines at newline characters */ color: $secondary-content; } } diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index f5276aa2c40..62d299cf5b4 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -179,7 +179,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { message = ( {_t( - "You will not be able to access old undecryptable messages, " + + "You will not be able to access old undecryptable messages,\n" + "but resetting your keys will allow you to receive new messages.", )} @@ -199,7 +199,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { message = ( {_t( - "This device is requesting decryption keys from your other devices. " + + "This device is requesting decryption keys from your other devices.\n" + "Opening one of your other devices may speed this up.", )} @@ -218,7 +218,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { message = ( {_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.\n" + "Signing in and verifying other devices may help avoid this situation in the future.", )} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7fd40936e99..195aac41add 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1885,12 +1885,12 @@ "Verify this device to access all messages": "Verify this device to access all messages", "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.", "Reset your keys to prevent future decryption errors": "Reset your keys to prevent future decryption errors", - "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.", + "You will not be able to access old undecryptable messages,\nbut resetting your keys will allow you to receive new messages.": "You will not be able to access old undecryptable messages,\nbut resetting your keys will allow you to receive new messages.", "Open another device to load encrypted messages": "Open another device to load encrypted messages", - "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.", + "This device is requesting decryption keys from your other devices.\nOpening one of your other devices may speed this up.": "This device is requesting decryption keys from your other devices.\nOpening one of your other devices may speed this up.", "View your device list": "View your device list", "Some messages could not be decrypted": "Some messages could not be decrypted", - "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.", + "Unfortunately, there are no other verified devices to request decryption keys from.\nSigning 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.\nSigning in and verifying other devices may help avoid this situation in the future.", "Resend key requests": "Resend key requests", "This user has not verified all of their sessions.": "This user has not verified all of their sessions.", "You have not verified this user.": "You have not verified this user.", diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index 8377f6fdefd..ffd2aa6ee68 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -22,7 +22,8 @@ exports[` Displays a general error message if there are
- 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.
`; @@ -99,7 +100,8 @@ exports[` Displays button to resend key requests if we a
- 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.
`; @@ -134,7 +136,8 @@ exports[` Displays button to resend key requests if we a
- 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.
`; @@ -176,7 +179,8 @@ exports[` Displays the button to resend key requests onl
- 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.
`; @@ -211,7 +215,8 @@ exports[` Displays the button to resend key requests onl
- 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.
`; @@ -253,7 +258,8 @@ exports[` Displays the button to resend key requests onl
- 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.
`; @@ -288,7 +294,8 @@ exports[` Displays the button to resend key requests onl
- 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.
`; @@ -400,7 +407,8 @@ exports[` Handles device updates 2`] = `
- 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.
`; @@ -435,7 +443,8 @@ exports[` Prompts the user to reset if they have no othe
- 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.
`; @@ -547,7 +556,8 @@ exports[` Recommends opening other devices if there are
- 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.
`; From cc671b1a65b9d5eb5008328583a5fe193cc2d574 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 13 Mar 2023 05:17:49 +0900 Subject: [PATCH 04/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 38 ++++ .../views/rooms/_DecryptionFailureBar.pcss | 22 +-- .../views/rooms/DecryptionFailureBar.tsx | 8 +- .../DecryptionFailureBar-test.tsx.snap | 163 ++++++++++++++---- 4 files changed, 185 insertions(+), 46 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 72330a5b361..e821a09ed7b 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -57,6 +57,28 @@ const handleVerificationRequest = (request: VerificationRequest): Chainable { + 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_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", () => { let homeserver: HomeserverInstance | undefined; let testUser: UserCredentials | undefined; @@ -113,11 +135,14 @@ describe("Decryption Failure Bar", () => { }) .then(() => { cy.botSendMessage(bot, roomId, "test"); + cy.contains( ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", "Verify this device to access all messages", ); + checkTimelineNarrow(); + cy.get(".mx_DecryptionFailureBar").percySnapshotElement( "DecryptionFailureBar prompts user to verify", { @@ -153,6 +178,8 @@ describe("Decryption Failure Bar", () => { "Open another device to load encrypted messages", ); + checkTimelineNarrow(); + cy.get(".mx_DecryptionFailureBar").percySnapshotElement( "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button", { @@ -164,6 +191,9 @@ describe("Decryption Failure Bar", () => { cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").click(); cy.wait("@keyRequest"); cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").should("not.exist"); + cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "View your device list").should("exist"); + + checkTimelineNarrow(); cy.get(".mx_DecryptionFailureBar").percySnapshotElement( "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button", @@ -190,6 +220,8 @@ describe("Decryption Failure Bar", () => { "Reset your keys to prevent future decryption errors", ); + checkTimelineNarrow(); + cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", { widths: [320, 640], }); @@ -211,6 +243,8 @@ describe("Decryption Failure Bar", () => { "Some messages could not be decrypted", ); + checkTimelineNarrow(false); // button should not be rendered here + cy.get(".mx_DecryptionFailureBar").percySnapshotElement( "DecryptionFailureBar displays general message with no call to action", { @@ -230,6 +264,8 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_DecryptionFailureBar").should("exist"); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("exist"); + checkTimelineNarrow(); + cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar displays loading spinner", { allowSpinners: true, widths: [320, 640], @@ -247,5 +283,7 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_RoomView_messagePanel").scrollTo("bottom"); cy.get(".mx_DecryptionFailureBar").should("exist"); + + checkTimelineNarrow(); }); }); diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 9b7fb5b277d..35c2d1e371f 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -19,8 +19,8 @@ limitations under the License. display: grid; grid-template-areas: - "icon header header" - ". message message"; /* Empty grid item under grid-area "icon" */ + "indicator header header" + ". message message"; /* Empty grid item under grid-area "indicator" */ grid-template-columns: min-content auto auto; align-items: start; @@ -30,20 +30,22 @@ limitations under the License. border-radius: 4px; gap: var(--gap); - .mx_DecryptionFailureBar__icon, - .mx_Spinner { - align-self: start; - } + .mx_DecryptionFailureBar__indicator { + grid-area: indicator; + + .mx_Spinner, + .mx_DecryptionFailureBar__icon { + align-self: start; + } - .mx_Spinner { - height: unset; /* Unset height: 100% */ + .mx_Spinner { + height: unset; /* Unset height: 100% */ + } } .mx_DecryptionFailureBar__icon { --size: 24px; - grid-area: icon; - width: var(--size); height: var(--size); mask-image: url("$(res)/img/e2e/decryption-failure.svg"); diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 62d299cf5b4..8d1555fa7d2 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -170,6 +170,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { className="mx_DecryptionFailureBar__header__buttons__button" kind="primary" onClick={onVerifyClick} + data-testid="decryption-failure-bar-button" > {_t("Verify")} @@ -189,6 +190,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { className="mx_DecryptionFailureBar__header__buttons__button" kind="primary" onClick={onResetClick} + data-testid="decryption-failure-bar-button" > {_t("Reset")} @@ -209,6 +211,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { className="mx_DecryptionFailureBar__header__buttons__button" kind="primary_outline" onClick={onDeviceListClick} + data-testid="decryption-failure-bar-button" > {_t("View your device list")} @@ -232,6 +235,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { className="mx_DecryptionFailureBar__header__buttons__button" kind="primary" onClick={sendKeyRequests} + data-testid="decryption-failure-bar-button" > {_t("Resend key requests")} @@ -240,7 +244,9 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { return (
- {statusIndicator} +
+ {statusIndicator} +
{headline}
diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index ffd2aa6ee68..49ecc24d715 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -5,8 +5,13 @@ exports[` Displays a general error message if there are class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -33,15 +38,20 @@ exports[` Displays a loading spinner 1`] = ` class="mx_DecryptionFailureBar" >
+ class="mx_Spinner" + > +
+
Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -83,6 +98,7 @@ exports[` Displays button to resend key requests if we a >
@@ -90,6 +106,7 @@ exports[` Displays button to resend key requests if we a
@@ -111,8 +128,13 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -126,6 +148,7 @@ exports[` Displays button to resend key requests if we a >
@@ -147,8 +170,13 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -162,6 +190,7 @@ exports[` Displays the button to resend key requests onl >
@@ -169,6 +198,7 @@ exports[` Displays the button to resend key requests onl
@@ -190,8 +220,13 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -205,6 +240,7 @@ exports[` Displays the button to resend key requests onl >
@@ -226,8 +262,13 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -241,6 +282,7 @@ exports[` Displays the button to resend key requests onl >
@@ -248,6 +290,7 @@ exports[` Displays the button to resend key requests onl
@@ -269,8 +312,13 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -284,6 +332,7 @@ exports[` Displays the button to resend key requests onl >
@@ -305,8 +354,13 @@ exports[` Does not display a button to send key requests class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -320,6 +374,7 @@ exports[` Does not display a button to send key requests >
@@ -340,8 +395,13 @@ exports[` Handles device updates 1`] = ` class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -355,6 +415,7 @@ exports[` Handles device updates 1`] = ` >
@@ -375,8 +436,13 @@ exports[` Handles device updates 2`] = ` class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -390,6 +456,7 @@ exports[` Handles device updates 2`] = ` >
@@ -397,6 +464,7 @@ exports[` Handles device updates 2`] = `
@@ -418,8 +486,13 @@ exports[` Prompts the user to reset if they have no othe class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -433,6 +506,7 @@ exports[` Prompts the user to reset if they have no othe >
@@ -454,8 +528,13 @@ exports[` Prompts the user to verify if they have backup class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -469,6 +548,7 @@ exports[` Prompts the user to verify if they have backup >
@@ -489,8 +569,13 @@ exports[` Prompts the user to verify if they have other class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -504,6 +589,7 @@ exports[` Prompts the user to verify if they have other >
@@ -524,8 +610,13 @@ exports[` Recommends opening other devices if there are class="mx_DecryptionFailureBar" >
+ class="mx_DecryptionFailureBar__indicator" + data-testid="decryption-failure-bar-indicator" + > +
+
@@ -539,6 +630,7 @@ exports[` Recommends opening other devices if there are >
@@ -546,6 +638,7 @@ exports[` Recommends opening other devices if there are
From 6d7b8c635a5c1af6844d2728f593c8167ff26457 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 14 Mar 2023 05:18:49 +0900 Subject: [PATCH 05/18] Remove a line Signed-off-by: Suguru Hirahara --- cypress/e2e/crypto/decryption-failure.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index e821a09ed7b..1ee6e0aee64 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -135,7 +135,6 @@ describe("Decryption Failure Bar", () => { }) .then(() => { cy.botSendMessage(bot, roomId, "test"); - cy.contains( ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", "Verify this device to access all messages", From 2a343d57836577e7fc16e3045115837226e0b157 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 14 Mar 2023 15:27:21 +0900 Subject: [PATCH 06/18] Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body Signed-off-by: Suguru Hirahara --- cypress/e2e/crypto/decryption-failure.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 1ee6e0aee64..0fb8aa4c027 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -64,7 +64,7 @@ const checkTimelineNarrow = (button = true) => { cy.get(".mx_BaseCard").should("exist"); // Ensure the failure bar does not cover the timeline - cy.get(".mx_EventTile.mx_EventTile_last").should("be.visible"); + 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"); From 45572ff28fd87f255641db4e6dae53ddfa16c957 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Mar 2023 14:27:12 +0900 Subject: [PATCH 07/18] Fix double underscores Signed-off-by: Suguru Hirahara --- .../views/rooms/DecryptionFailureBar.tsx | 20 +- .../DecryptionFailureBar-test.tsx.snap | 214 +++++++++--------- 2 files changed, 117 insertions(+), 117 deletions(-) diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 8d1555fa7d2..94c019a1497 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -145,7 +145,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { store.resetConfirm(); }; - const statusIndicator = waiting ? :
; + const statusIndicator = waiting ? :
; let headline: JSX.Element; let message: JSX.Element; @@ -167,7 +167,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( = ({ failures }) => { ); button = ( = ({ failures }) => { ); button = ( = ({ failures }) => { if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { keyRequestButton = ( = ({ failures }) => { return (
-
+
{statusIndicator}
-
-
{headline}
-
+
+
{headline}
+
{button} {keyRequestButton}
-
{message}
+
{message}
); }; diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index 49ecc24d715..e33a085ebaf 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -5,27 +5,27 @@ exports[` Displays a general error message if there are class="mx_DecryptionFailureBar" >
Some messages could not be decrypted
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. @@ -38,7 +38,7 @@ exports[` Displays a loading spinner 1`] = ` class="mx_DecryptionFailureBar" >
Displays a loading spinner 1`] = `
Decrypting messages…
Please wait as we try to decrypt your messages. This may take a few moments.
@@ -78,26 +78,26 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays button to resend key requests if we a View your device list
Displays button to resend key requests if we a
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -128,26 +128,26 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays button to resend key requests if we a
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -170,26 +170,26 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays the button to resend key requests onl View your device list
Displays the button to resend key requests onl
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -220,26 +220,26 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays the button to resend key requests onl
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -262,26 +262,26 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays the button to resend key requests onl View your device list
Displays the button to resend key requests onl
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -312,26 +312,26 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Displays the button to resend key requests onl
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -354,26 +354,26 @@ exports[` Does not display a button to send key requests class="mx_DecryptionFailureBar" >
Verify this device to access all messages
Does not display a button to send key requests
This device was unable to decrypt some messages because it has not been verified yet.
@@ -395,26 +395,26 @@ exports[` Handles device updates 1`] = ` class="mx_DecryptionFailureBar" >
Verify this device to access all messages
Handles device updates 1`] = `
This device was unable to decrypt some messages because it has not been verified yet.
@@ -436,26 +436,26 @@ exports[` Handles device updates 2`] = ` class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Handles device updates 2`] = ` View your device list
Handles device updates 2`] = `
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. @@ -486,26 +486,26 @@ exports[` Prompts the user to reset if they have no othe class="mx_DecryptionFailureBar" >
Reset your keys to prevent future decryption errors
Prompts the user to reset if they have no othe
You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages. @@ -528,26 +528,26 @@ exports[` Prompts the user to verify if they have backup class="mx_DecryptionFailureBar" >
Verify this device to access all messages
Prompts the user to verify if they have backup
This device was unable to decrypt some messages because it has not been verified yet.
@@ -569,26 +569,26 @@ exports[` Prompts the user to verify if they have other class="mx_DecryptionFailureBar" >
Verify this device to access all messages
Prompts the user to verify if they have other
This device was unable to decrypt some messages because it has not been verified yet.
@@ -610,26 +610,26 @@ exports[` Recommends opening other devices if there are class="mx_DecryptionFailureBar" >
Open another device to load encrypted messages
Recommends opening other devices if there are View your device list
Recommends opening other devices if there are
This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. From 981b60131ffbc5a4881cd55fe8b63a87e21b1f10 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Mar 2023 14:36:56 +0900 Subject: [PATCH 08/18] Fix double underscores - pcss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_DecryptionFailureBar.pcss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 35c2d1e371f..c89789ce716 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -30,11 +30,11 @@ limitations under the License. border-radius: 4px; gap: var(--gap); - .mx_DecryptionFailureBar__indicator { + .mx_DecryptionFailureBar_indicator { grid-area: indicator; .mx_Spinner, - .mx_DecryptionFailureBar__icon { + .mx_DecryptionFailureBar_icon { align-self: start; } @@ -43,7 +43,7 @@ limitations under the License. } } - .mx_DecryptionFailureBar__icon { + .mx_DecryptionFailureBar_icon { --size: 24px; width: var(--size); @@ -55,7 +55,7 @@ limitations under the License. mask-size: contain; } - .mx_DecryptionFailureBar__header { + .mx_DecryptionFailureBar_header { grid-area: header; display: flex; @@ -63,19 +63,19 @@ limitations under the License. justify-content: space-between; gap: var(--gap); - .mx_DecryptionFailureBar__header__headline { + .mx_DecryptionFailureBar_header_headline { font-weight: $font-semi-bold; font-size: $font-16px; } - .mx_DecryptionFailureBar__header__buttons { + .mx_DecryptionFailureBar_header_buttons { display: flex; flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ gap: var(--gap); } } - .mx_DecryptionFailureBar__message { + .mx_DecryptionFailureBar_message { grid-area: message; white-space: pre-line; /* Break lines at newline characters */ From eb6d902cb7ff61b594173435993cc017f00fa541 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 15 Mar 2023 14:47:22 +0900 Subject: [PATCH 09/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 36 +- res/css/_common.pcss | 10 +- .../views/rooms/_DecryptionFailureBar.pcss | 93 +-- .../views/rooms/DecryptionFailureBar.tsx | 50 +- src/i18n/strings/en_EN.json | 6 +- .../DecryptionFailureBar-test.tsx.snap | 771 ++++++++++-------- 6 files changed, 526 insertions(+), 440 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 0fb8aa4c027..dbcb6aca6a9 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -135,10 +135,7 @@ describe("Decryption Failure Bar", () => { }) .then(() => { cy.botSendMessage(bot, roomId, "test"); - cy.contains( - ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", - "Verify this device to access all messages", - ); + cy.get("[data-testid='decryption-failure-bar-headline-verify']").should("exist"); checkTimelineNarrow(); @@ -149,10 +146,8 @@ describe("Decryption Failure Bar", () => { }, ); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").should( - "not.exist", - ); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Verify").click(); + cy.get("[data-testid-button='decryption-failure-bar-button-resend']").should("not.exist"); + cy.get("[data-testid-button='decryption-failure-bar-button-verify']").click(); const verificationRequestPromise = waitForVerificationRequest(otherDevice); cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click(); @@ -172,10 +167,7 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist"); cy.contains(".mx_AccessibleButton", "Got it").click(); - cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline").should( - "have.text", - "Open another device to load encrypted messages", - ); + cy.get("[data-testid='decryption-failure-bar-headline-devicelist']").should("exist"); checkTimelineNarrow(); @@ -187,10 +179,10 @@ describe("Decryption Failure Bar", () => { ); cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest"); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").click(); + cy.get("[data-testid-button='decryption-failure-bar-button-resend']").click(); cy.wait("@keyRequest"); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Resend key requests").should("not.exist"); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "View your device list").should("exist"); + cy.get("[data-testid-button='decryption-failure-bar-button-resend']").should("not.exist"); + cy.get("[data-testid-button='decryption-failure-bar-button-devicelist']").should("exist"); checkTimelineNarrow(); @@ -214,10 +206,7 @@ describe("Decryption Failure Bar", () => { ); cy.botSendMessage(bot, roomId, "test"); - cy.contains( - ".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline", - "Reset your keys to prevent future decryption errors", - ); + cy.get("[data-testid='decryption-failure-bar-headline-reset']").should("exist"); checkTimelineNarrow(); @@ -225,7 +214,7 @@ describe("Decryption Failure Bar", () => { widths: [320, 640], }); - cy.contains(".mx_DecryptionFailureBar__header__buttons__button", "Reset").click(); + cy.get("[data-testid-button='decryption-failure-bar-button-reset']").click(); // Set up key backup cy.get(".mx_Dialog").within(() => { @@ -237,10 +226,7 @@ describe("Decryption Failure Bar", () => { cy.contains("Done").click(); }); - cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar__header__headline").should( - "have.text", - "Some messages could not be decrypted", - ); + cy.get("[data-testid='decryption-failure-bar-headline-error']").should("exist"); checkTimelineNarrow(false); // button should not be rendered here @@ -272,7 +258,7 @@ describe("Decryption Failure Bar", () => { cy.wait(5000); 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("exist"); cy.get(".mx_RoomView_messagePanel").scrollTo("top"); cy.get(".mx_DecryptionFailureBar").should("not.exist"); diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 7b0d4c8d87c..274df9d0343 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -42,6 +42,8 @@ $timeline-image-border-radius: 8px; --transition-short: 0.1s; --transition-standard: 0.3s; + --buttons-dialog-gap-row: 5px; + --buttons-dialog-gap-column: $spacing-8; } @media (prefers-reduced-motion) { @@ -516,8 +518,8 @@ legend { margin-inline-start: auto; /* default gap among elements */ - column-gap: $spacing-8; /* See margin-right below inside the button style */ - row-gap: 5px; /* See margin-bottom below inside the button style */ + column-gap: var(--buttons-dialog-gap-column); /* See margin-right below inside the button style */ + row-gap: var(--buttons-dialog-gap-row); /* See margin-bottom below inside the button style */ button { margin: 0 !important; /* override the margin settings */ @@ -539,8 +541,8 @@ legend { .mx_Dialog_buttons input[type="submit"] { @mixin mx_DialogButton; margin-left: 0px; - margin-right: 8px; - margin-bottom: 5px; + margin-right: var(--buttons-dialog-gap-column); + margin-bottom: var(--buttons-dialog-gap-row); /* flip colours for the secondary ones */ font-weight: 600; diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index c89789ce716..1ad3430bcfc 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -15,70 +15,71 @@ limitations under the License. */ .mx_DecryptionFailureBar { - --gap: $spacing-8 $spacing-12; - - display: grid; - grid-template-areas: - "indicator header header" - ". message message"; /* Empty grid item under grid-area "indicator" */ - grid-template-columns: min-content auto auto; - align-items: start; + --gap-row: $spacing-8; + --gap-column: $spacing-12; + --gap: var(--gap-row) var(--gap-column); + --size-icon: 24px; background-color: $system; padding: $spacing-12; margin-inline: $spacing-16; border-radius: 4px; - gap: var(--gap); - - .mx_DecryptionFailureBar_indicator { - grid-area: indicator; - .mx_Spinner, - .mx_DecryptionFailureBar_icon { - align-self: start; - } + display: flex; + flex-flow: wrap; + align-items: flex-start; + justify-content: space-between; + row-gap: var(--gap-row); - .mx_Spinner { - height: unset; /* Unset height: 100% */ - } - } + .mx_DecryptionFailureBar_start { + display: grid; + gap: var(--gap); + grid-template-areas: + "status headline" + ". message"; + grid-template-columns: var(--size-icon) auto; - .mx_DecryptionFailureBar_icon { - --size: 24px; + .mx_DecryptionFailureBar_start_status { + grid-area: status; - width: var(--size); - height: var(--size); - mask-image: url("$(res)/img/e2e/decryption-failure.svg"); - background-color: $e2e-warning-color; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - } + display: flex; + align-items: center; + gap: var(--gap); - .mx_DecryptionFailureBar_header { - grid-area: header; + .mx_Spinner { + 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; + } + } - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: var(--gap); + .mx_DecryptionFailureBar_start_headline { + grid-area: headline; - .mx_DecryptionFailureBar_header_headline { font-weight: $font-semi-bold; font-size: $font-16px; + align-self: center; } - .mx_DecryptionFailureBar_header_buttons { - display: flex; - flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ - gap: var(--gap); + .mx_DecryptionFailureBar_start_message { + grid-area: message; + + color: $secondary-content; } } - .mx_DecryptionFailureBar_message { - grid-area: message; - - white-space: pre-line; /* Break lines at newline characters */ - color: $secondary-content; + .mx_DecryptionFailureBar_end--buttons { + display: flex; + flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ + 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 */ } } diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 94c019a1497..f6b1d19bd4b 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -145,11 +145,17 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { store.resetConfirm(); }; - const statusIndicator = waiting ? :
; + const statusIndicator = waiting ? ( + + ) : ( +
+ ); let headline: JSX.Element; + let headline_testid; let message: JSX.Element; let button = ; + let button_testid; if (waiting) { headline = {_t("Decrypting messages…")}; message = ( @@ -160,6 +166,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } else if (needsVerification) { if (hasOtherVerifiedDevices || hasKeyBackup) { headline = {_t("Verify this device to access all messages")}; + headline_testid = "decryption-failure-bar-headline-verify"; message = ( {_t("This device was unable to decrypt some messages because it has not been verified yet.")} @@ -167,30 +174,33 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( {_t("Verify")} ); } else { headline = {_t("Reset your keys to prevent future decryption errors")}; + headline_testid = "decryption-failure-bar-headline-reset"; message = ( {_t( - "You will not be able to access old undecryptable messages,\n" + + "You will not be able to access old undecryptable messages, " + "but resetting your keys will allow you to receive new messages.", )} ); button = ( {_t("Reset")} @@ -198,30 +208,33 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } } else if (hasOtherVerifiedDevices) { headline = {_t("Open another device to load encrypted messages")}; + headline_testid = "decryption-failure-bar-headline-devicelist"; message = ( {_t( - "This device is requesting decryption keys from your other devices.\n" + + "This device is requesting decryption keys from your other devices. " + "Opening one of your other devices may speed this up.", )} ); button = ( {_t("View your device list")} ); } else { headline = {_t("Some messages could not be decrypted")}; + headline_testid = "decryption-failure-bar-headline-error"; message = ( {_t( - "Unfortunately, there are no other verified devices to request decryption keys from.\n" + + "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.", )} @@ -232,10 +245,11 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { keyRequestButton = ( {_t("Resend key requests")} @@ -244,17 +258,19 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { return (
-
- {statusIndicator} -
-
-
{headline}
-
- {button} - {keyRequestButton} +
+
+
{statusIndicator}
+
+ {headline} +
+
{message}
+
+
+ {button} + {keyRequestButton}
-
{message}
); }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 66a55cd53df..0828b7b6d71 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1888,12 +1888,12 @@ "Verify this device to access all messages": "Verify this device to access all messages", "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.", "Reset your keys to prevent future decryption errors": "Reset your keys to prevent future decryption errors", - "You will not be able to access old undecryptable messages,\nbut resetting your keys will allow you to receive new messages.": "You will not be able to access old undecryptable messages,\nbut 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.": "You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.", "Open another device to load encrypted messages": "Open another device to load encrypted messages", - "This device is requesting decryption keys from your other devices.\nOpening one of your other devices may speed this up.": "This device is requesting decryption keys from your other devices.\nOpening 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.": "This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.", "View your device list": "View your device list", "Some messages could not be decrypted": "Some messages could not be decrypted", - "Unfortunately, there are no other verified devices to request decryption keys from.\nSigning 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.\nSigning 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.": "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.", "Resend key requests": "Resend key requests", "This user has not verified all of their sessions.": "This user has not verified all of their sessions.", "You have not verified this user.": "You have not verified this user.", diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index e33a085ebaf..d4f00b148e6 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -5,31 +5,35 @@ exports[` Displays a general error message if there are class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Some messages could not be decrypted
+ 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. -
+ class="mx_DecryptionFailureBar_end--buttons" + />
`; @@ -38,38 +42,41 @@ exports[` Displays a loading spinner 1`] = ` class="mx_DecryptionFailureBar" >
+ data-testid="decryption-failure-bar-indicator" + > +
+
+
+
-
-
Decrypting messages…
+ 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. -
+ class="mx_DecryptionFailureBar_end--buttons" + />
`; @@ -78,47 +85,53 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
-
- Resend key requests -
+ 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. +
+ View your device list +
+
+ Resend key requests +
`; @@ -128,39 +141,44 @@ exports[` Displays button to resend key requests if we a class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
+ 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. +
+ View your device list +
`; @@ -170,47 +188,53 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
-
- Resend key requests -
+ 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. +
+ View your device list +
+
+ Resend key requests +
`; @@ -220,39 +244,44 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
+ 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. +
+ View your device list +
`; @@ -262,47 +291,53 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
-
- Resend key requests -
+ 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. +
+ View your device list +
+
+ Resend key requests +
`; @@ -312,39 +347,44 @@ exports[` Displays the button to resend key requests onl class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
+ 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. +
+ View your device list +
`; @@ -354,38 +394,44 @@ exports[` Does not display a button to send key requests class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Verify this device to access all messages
-
- Verify -
+ 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. +
+ Verify +
`; @@ -395,38 +441,44 @@ exports[` Handles device updates 1`] = ` class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Verify this device to access all messages
-
- Verify -
+ 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. +
+ Verify +
`; @@ -436,47 +488,53 @@ exports[` Handles device updates 2`] = ` class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
-
- Resend key requests -
+ 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. +
+ View your device list +
+
+ Resend key requests +
`; @@ -486,39 +544,44 @@ exports[` Prompts the user to reset if they have no othe class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Reset your keys to prevent future decryption errors
-
- Reset -
+ 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. +
+ Reset +
`; @@ -528,38 +591,44 @@ exports[` Prompts the user to verify if they have backup class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Verify this device to access all messages
-
- Verify -
+ 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. +
+ Verify +
`; @@ -569,38 +638,44 @@ exports[` Prompts the user to verify if they have other class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Verify this device to access all messages
-
- Verify -
+ 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. +
+ Verify +
`; @@ -610,47 +685,53 @@ exports[` Recommends opening other devices if there are class="mx_DecryptionFailureBar" >
-
-
+ class="mx_DecryptionFailureBar_start_status" + > +
+
+
+
Open another device to load encrypted messages
-
- View your device list -
-
- Resend key requests -
+ 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. +
+ View your device list +
+
+ Resend key requests +
`; From 228c195c1c01c036547596023bcc6adee184b12b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 18 Mar 2023 17:27:30 +0900 Subject: [PATCH 10/18] Check waiting headline as well Signed-off-by: Suguru Hirahara --- cypress/e2e/crypto/decryption-failure.spec.ts | 1 + src/components/views/rooms/DecryptionFailureBar.tsx | 1 + .../views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap | 1 + 3 files changed, 3 insertions(+) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index dbcb6aca6a9..96e98d3d8a5 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -135,6 +135,7 @@ describe("Decryption Failure Bar", () => { }) .then(() => { cy.botSendMessage(bot, roomId, "test"); + cy.get("[data-testid='decryption-failure-bar-headline-waiting']").should("exist"); cy.get("[data-testid='decryption-failure-bar-headline-verify']").should("exist"); checkTimelineNarrow(); diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index f6b1d19bd4b..51233b6116c 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -158,6 +158,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { let button_testid; if (waiting) { headline = {_t("Decrypting messages…")}; + headline_testid = "decryption-failure-bar-headline-waiting"; message = ( {_t("Please wait as we try to decrypt your messages. This may take a few moments.")} diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index d4f00b148e6..fa7c1d396bd 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -65,6 +65,7 @@ exports[` Displays a loading spinner 1`] = `
Decrypting messages…
From 06f9dd91d2d69aea87acfdf2eff3c9727e9768c4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 18 Mar 2023 18:24:32 +0900 Subject: [PATCH 11/18] Increase spacing between the message and the buttons Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_DecryptionFailureBar.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 1ad3430bcfc..9f3303595ad 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -29,7 +29,7 @@ limitations under the License. flex-flow: wrap; align-items: flex-start; justify-content: space-between; - row-gap: var(--gap-row); + row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */ .mx_DecryptionFailureBar_start { display: grid; From d1e272dd83faa1b171fe5921ad6d7385de8e14fd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 18 Mar 2023 19:05:28 +0900 Subject: [PATCH 12/18] lint Signed-off-by: Suguru Hirahara --- .../views/rooms/DecryptionFailureBar.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 51233b6116c..0d3f4688a1b 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -152,13 +152,12 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); let headline: JSX.Element; - let headline_testid; + let headlineTestId; let message: JSX.Element; let button = ; - let button_testid; if (waiting) { headline = {_t("Decrypting messages…")}; - headline_testid = "decryption-failure-bar-headline-waiting"; + headlineTestId = "decryption-failure-bar-headline-waiting"; message = ( {_t("Please wait as we try to decrypt your messages. This may take a few moments.")} @@ -167,7 +166,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } else if (needsVerification) { if (hasOtherVerifiedDevices || hasKeyBackup) { headline = {_t("Verify this device to access all messages")}; - headline_testid = "decryption-failure-bar-headline-verify"; + headlineTestId = "decryption-failure-bar-headline-verify"; message = ( {_t("This device was unable to decrypt some messages because it has not been verified yet.")} @@ -186,7 +185,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); } else { headline = {_t("Reset your keys to prevent future decryption errors")}; - headline_testid = "decryption-failure-bar-headline-reset"; + headlineTestId = "decryption-failure-bar-headline-reset"; message = ( {_t( @@ -209,7 +208,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } } else if (hasOtherVerifiedDevices) { headline = {_t("Open another device to load encrypted messages")}; - headline_testid = "decryption-failure-bar-headline-devicelist"; + headlineTestId = "decryption-failure-bar-headline-devicelist"; message = ( {_t( @@ -231,7 +230,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); } else { headline = {_t("Some messages could not be decrypted")}; - headline_testid = "decryption-failure-bar-headline-error"; + headlineTestId = "decryption-failure-bar-headline-error"; message = ( {_t( @@ -263,7 +262,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => {
{statusIndicator}
-
+
{headline}
{message}
From 626b808f8fe453ee6635892553ffebcff9c5c982 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 21 Mar 2023 02:47:44 +0900 Subject: [PATCH 13/18] Increase block gap between wrapped buttons for clickability Apply 8px between wrapped buttons Signed-off-by: Suguru Hirahara --- res/css/_common.pcss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 274df9d0343..256d4153e65 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -42,7 +42,7 @@ $timeline-image-border-radius: 8px; --transition-short: 0.1s; --transition-standard: 0.3s; - --buttons-dialog-gap-row: 5px; + --buttons-dialog-gap-row: $spacing-8; --buttons-dialog-gap-column: $spacing-8; } @@ -518,8 +518,8 @@ legend { margin-inline-start: auto; /* default gap among elements */ - column-gap: var(--buttons-dialog-gap-column); /* See margin-right below inside the button style */ - row-gap: var(--buttons-dialog-gap-row); /* See margin-bottom below inside the button style */ + column-gap: var(--buttons-dialog-gap-column); + row-gap: var(--buttons-dialog-gap-row); button { margin: 0 !important; /* override the margin settings */ From af1177b504dde4e1d3334339769fd7c4c57c7a3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 22 Mar 2023 10:34:33 +0900 Subject: [PATCH 14/18] Revert bottom margin of buttons which are not expected to be wrapped Signed-off-by: Suguru Hirahara --- res/css/_common.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 4a735bfa90e..1ca9c00c55f 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -543,7 +543,7 @@ legend { @mixin mx_DialogButton; margin-left: 0px; margin-right: var(--buttons-dialog-gap-column); - margin-bottom: var(--buttons-dialog-gap-row); + margin-bottom: 5px; /* flip colours for the secondary ones */ font-weight: 600; From 04ad0a8e6dc190e4755bbd4b447341763ae45ef4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 17:05:33 +0900 Subject: [PATCH 15/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 41 +++++++++++++------ .../views/rooms/DecryptionFailureBar.tsx | 14 +------ 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 96e98d3d8a5..5777461bcd9 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -135,8 +135,11 @@ describe("Decryption Failure Bar", () => { }) .then(() => { cy.botSendMessage(bot, roomId, "test"); - cy.get("[data-testid='decryption-failure-bar-headline-waiting']").should("exist"); - cy.get("[data-testid='decryption-failure-bar-headline-verify']").should("exist"); + cy.contains(".mx_DecryptionFailureBar_start_headline", "Decrypting messages…").should("be.visible"); + cy.contains( + ".mx_DecryptionFailureBar_start_headline", + "Verify this device to access all messages", + ).should("be.visible"); checkTimelineNarrow(); @@ -147,12 +150,14 @@ describe("Decryption Failure Bar", () => { }, ); - cy.get("[data-testid-button='decryption-failure-bar-button-resend']").should("not.exist"); - cy.get("[data-testid-button='decryption-failure-bar-button-verify']").click(); + cy.contains(".mx_DecryptionFailureBar_end--buttons", "Resend key requests").should("not.exist"); + cy.contains(".mx_DecryptionFailureBar_end--buttons", "Verify").should("be.visible").click(); const verificationRequestPromise = waitForVerificationRequest(otherDevice); 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(verificationRequest.accept()); handleVerificationRequest(verificationRequest).then((emojis) => { @@ -168,7 +173,10 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist"); cy.contains(".mx_AccessibleButton", "Got it").click(); - cy.get("[data-testid='decryption-failure-bar-headline-devicelist']").should("exist"); + cy.contains( + ".mx_DecryptionFailureBar_start_headline", + "Open another device to load encrypted messages", + ).should("be.visible"); checkTimelineNarrow(); @@ -180,10 +188,12 @@ describe("Decryption Failure Bar", () => { ); cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest"); - cy.get("[data-testid-button='decryption-failure-bar-button-resend']").click(); + cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Resend key requests") + .should("be.visible") + .click(); cy.wait("@keyRequest"); - cy.get("[data-testid-button='decryption-failure-bar-button-resend']").should("not.exist"); - cy.get("[data-testid-button='decryption-failure-bar-button-devicelist']").should("exist"); + cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Resend key requests").should("not.be.visible"); + cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "View your device list").should("be.visible"); checkTimelineNarrow(); @@ -207,7 +217,10 @@ describe("Decryption Failure Bar", () => { ); cy.botSendMessage(bot, roomId, "test"); - cy.get("[data-testid='decryption-failure-bar-headline-reset']").should("exist"); + cy.contains( + ".mx_DecryptionFailureBar_start_headline", + "Reset your keys to prevent future decryption errors", + ).should("be.visible"); checkTimelineNarrow(); @@ -215,7 +228,7 @@ describe("Decryption Failure Bar", () => { widths: [320, 640], }); - cy.get("[data-testid-button='decryption-failure-bar-button-reset']").click(); + cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Reset").should("be.visible").click(); // Set up key backup cy.get(".mx_Dialog").within(() => { @@ -227,7 +240,9 @@ describe("Decryption Failure Bar", () => { cy.contains("Done").click(); }); - cy.get("[data-testid='decryption-failure-bar-headline-error']").should("exist"); + cy.contains(".mx_DecryptionFailureBar_start_headline", "Some messages could not be decrypted").should( + "be.visible", + ); checkTimelineNarrow(false); // button should not be rendered here @@ -259,7 +274,7 @@ describe("Decryption Failure Bar", () => { cy.wait(5000); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist"); - cy.get("[data-testid='decryption-failure-bar-icon']").should("exist"); + cy.get("[data-testid='decryption-failure-bar-icon']").should("be.visible"); cy.get(".mx_RoomView_messagePanel").scrollTo("top"); cy.get(".mx_DecryptionFailureBar").should("not.exist"); diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 0d3f4688a1b..488d66bc741 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -152,12 +152,10 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); let headline: JSX.Element; - let headlineTestId; let message: JSX.Element; let button = ; if (waiting) { headline = {_t("Decrypting messages…")}; - headlineTestId = "decryption-failure-bar-headline-waiting"; message = ( {_t("Please wait as we try to decrypt your messages. This may take a few moments.")} @@ -166,7 +164,6 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } else if (needsVerification) { if (hasOtherVerifiedDevices || hasKeyBackup) { headline = {_t("Verify this device to access all messages")}; - headlineTestId = "decryption-failure-bar-headline-verify"; message = ( {_t("This device was unable to decrypt some messages because it has not been verified yet.")} @@ -178,14 +175,12 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { kind="primary" onClick={onVerifyClick} data-testid="decryption-failure-bar-button" - data-testid-button="decryption-failure-bar-button-verify" > {_t("Verify")} ); } else { headline = {_t("Reset your keys to prevent future decryption errors")}; - headlineTestId = "decryption-failure-bar-headline-reset"; message = ( {_t( @@ -200,7 +195,6 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { kind="primary" onClick={onResetClick} data-testid="decryption-failure-bar-button" - data-testid-button="decryption-failure-bar-button-reset" > {_t("Reset")} @@ -208,7 +202,6 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { } } else if (hasOtherVerifiedDevices) { headline = {_t("Open another device to load encrypted messages")}; - headlineTestId = "decryption-failure-bar-headline-devicelist"; message = ( {_t( @@ -223,14 +216,12 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { kind="primary_outline" onClick={onDeviceListClick} data-testid="decryption-failure-bar-button" - data-testid-button="decryption-failure-bar-button-devicelist" > {_t("View your device list")} ); } else { headline = {_t("Some messages could not be decrypted")}; - headlineTestId = "decryption-failure-bar-headline-error"; message = ( {_t( @@ -249,7 +240,6 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { kind="primary" onClick={sendKeyRequests} data-testid="decryption-failure-bar-button" - data-testid-button="decryption-failure-bar-button-resend" > {_t("Resend key requests")} @@ -262,9 +252,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => {
{statusIndicator}
-
- {headline} -
+
{headline}
{message}
From 02b4249bb37bc39a4055f3895a52d6a9401e68f6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 18:47:02 +0900 Subject: [PATCH 16/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 12 +- .../views/rooms/_DecryptionFailureBar.pcss | 26 ++-- .../views/rooms/DecryptionFailureBar.tsx | 19 ++- .../DecryptionFailureBar-test.tsx.snap | 125 +++++++----------- 4 files changed, 79 insertions(+), 103 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index 5777461bcd9..cb4873d4d66 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -150,8 +150,8 @@ describe("Decryption Failure Bar", () => { }, ); - cy.contains(".mx_DecryptionFailureBar_end--buttons", "Resend key requests").should("not.exist"); - cy.contains(".mx_DecryptionFailureBar_end--buttons", "Verify").should("be.visible").click(); + cy.contains(".mx_DecryptionFailureBar_end", "Resend key requests").should("not.exist"); + cy.contains(".mx_DecryptionFailureBar_end", "Verify").should("be.visible").click(); const verificationRequestPromise = waitForVerificationRequest(otherDevice); cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click(); @@ -188,12 +188,12 @@ describe("Decryption Failure Bar", () => { ); cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest"); - cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Resend key requests") + cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests") .should("be.visible") .click(); cy.wait("@keyRequest"); - cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Resend key requests").should("not.be.visible"); - cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "View your device list").should("be.visible"); + 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(); @@ -228,7 +228,7 @@ describe("Decryption Failure Bar", () => { widths: [320, 640], }); - cy.contains(".mx_DecryptionFailureBar_end--buttons_button", "Reset").should("be.visible").click(); + cy.contains(".mx_DecryptionFailureBar_end_button", "Reset").should("be.visible").click(); // Set up key backup cy.get(".mx_Dialog").within(() => { diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss index 9f3303595ad..57dc71b7311 100644 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -25,11 +25,20 @@ limitations under the License. margin-inline: $spacing-16; border-radius: 4px; - display: flex; - flex-flow: wrap; - align-items: flex-start; - justify-content: space-between; - row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */ + &.mx_DecryptionFailureBar--withEnd { + display: flex; + flex-flow: wrap; + align-items: flex-start; + justify-content: space-between; + row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */ + + .mx_DecryptionFailureBar_end { + display: flex; + flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ + 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_start { display: grid; @@ -75,11 +84,4 @@ limitations under the License. color: $secondary-content; } } - - .mx_DecryptionFailureBar_end--buttons { - display: flex; - flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ - 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 */ - } } diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx index 488d66bc741..94cf02d8a65 100644 --- a/src/components/views/rooms/DecryptionFailureBar.tsx +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -151,10 +151,12 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => {
); + let className; let headline: JSX.Element; let message: JSX.Element; let button = ; if (waiting) { + className = "mx_DecryptionFailureBar"; headline = {_t("Decrypting messages…")}; message = ( @@ -163,6 +165,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); } else if (needsVerification) { if (hasOtherVerifiedDevices || hasKeyBackup) { + className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"; headline = {_t("Verify this device to access all messages")}; message = ( @@ -171,7 +174,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( = ({ failures }) => { ); } else { + className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"; headline = {_t("Reset your keys to prevent future decryption errors")}; message = ( @@ -191,7 +195,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( = ({ failures }) => { ); } } else if (hasOtherVerifiedDevices) { + className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"; headline = {_t("Open another device to load encrypted messages")}; message = ( @@ -212,7 +217,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { ); button = ( = ({ failures }) => { ); } else { + className = "mx_DecryptionFailureBar"; headline = {_t("Some messages could not be decrypted")}; message = ( @@ -234,9 +240,10 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => { let keyRequestButton = ; if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { + className = "mx_DecryptionFailureBar mx_DecryptionFailureBar--withEnd"; keyRequestButton = ( = ({ failures }) => { } return ( -
+
{statusIndicator}
@@ -255,7 +262,7 @@ export const DecryptionFailureBar: React.FC = ({ failures }) => {
{headline}
{message}
-
+
{button} {keyRequestButton}
diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap index fa7c1d396bd..35b95a37f46 100644 --- a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -21,7 +21,6 @@ exports[` Displays a general error message if there are
Some messages could not be decrypted
@@ -32,7 +31,7 @@ exports[` Displays a general error message if there are
`; @@ -65,7 +64,6 @@ exports[` Displays a loading spinner 1`] = `
Decrypting messages…
@@ -76,14 +74,14 @@ exports[` Displays a loading spinner 1`] = `
`; exports[` Displays button to resend key requests if we are verified 1`] = `
Displays button to resend key requests if we a
Open another device to load encrypted messages
@@ -113,21 +110,19 @@ exports[` Displays button to resend key requests if we a
View your device list
@@ -139,7 +134,7 @@ exports[` Displays button to resend key requests if we a exports[` Displays button to resend key requests if we are verified 2`] = `
Displays button to resend key requests if we a
Open another device to load encrypted messages
@@ -169,12 +163,11 @@ exports[` Displays button to resend key requests if we a
@@ -186,7 +179,7 @@ exports[` Displays button to resend key requests if we a exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 1`] = `
Displays the button to resend key requests onl
Open another device to load encrypted messages
@@ -216,21 +208,19 @@ exports[` Displays the button to resend key requests onl
View your device list
@@ -242,7 +232,7 @@ exports[` Displays the button to resend key requests onl exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 2`] = `
Displays the button to resend key requests onl
Open another device to load encrypted messages
@@ -272,12 +261,11 @@ exports[` Displays the button to resend key requests onl
@@ -289,7 +277,7 @@ exports[` Displays the button to resend key requests onl exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 3`] = `
Displays the button to resend key requests onl
Open another device to load encrypted messages
@@ -319,21 +306,19 @@ exports[` Displays the button to resend key requests onl
View your device list
@@ -345,7 +330,7 @@ exports[` Displays the button to resend key requests onl exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 4`] = `
Displays the button to resend key requests onl
Open another device to load encrypted messages
@@ -375,12 +359,11 @@ exports[` Displays the button to resend key requests onl
@@ -392,7 +375,7 @@ exports[` Displays the button to resend key requests onl exports[` Does not display a button to send key requests if we are unverified 1`] = `
Does not display a button to send key requests
Verify this device to access all messages
@@ -422,12 +404,11 @@ exports[` Does not display a button to send key requests
@@ -439,7 +420,7 @@ exports[` Does not display a button to send key requests exports[` Handles device updates 1`] = `
Handles device updates 1`] = `
Verify this device to access all messages
@@ -469,12 +449,11 @@ exports[` Handles device updates 1`] = `
@@ -486,7 +465,7 @@ exports[` Handles device updates 1`] = ` exports[` Handles device updates 2`] = `
Handles device updates 2`] = `
Open another device to load encrypted messages
@@ -516,21 +494,19 @@ exports[` Handles device updates 2`] = `
View your device list
@@ -542,7 +518,7 @@ exports[` Handles device updates 2`] = ` exports[` Prompts the user to reset if they have no other verified devices and no backups 1`] = `
Prompts the user to reset if they have no othe
Reset your keys to prevent future decryption errors
@@ -572,12 +547,11 @@ exports[` Prompts the user to reset if they have no othe
@@ -589,7 +563,7 @@ exports[` Prompts the user to reset if they have no othe exports[` Prompts the user to verify if they have backups 1`] = `
Prompts the user to verify if they have backup
Verify this device to access all messages
@@ -619,12 +592,11 @@ exports[` Prompts the user to verify if they have backup
@@ -636,7 +608,7 @@ exports[` Prompts the user to verify if they have backup exports[` Prompts the user to verify if they have other devices 1`] = `
Prompts the user to verify if they have other
Verify this device to access all messages
@@ -666,12 +637,11 @@ exports[` Prompts the user to verify if they have other
@@ -683,7 +653,7 @@ exports[` Prompts the user to verify if they have other exports[` Recommends opening other devices if there are other verified devices 1`] = `
Recommends opening other devices if there are
Open another device to load encrypted messages
@@ -713,21 +682,19 @@ exports[` Recommends opening other devices if there are
View your device list
From 02afe5511d69cc4ad78a4c2526a51aceed33a205 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 27 Mar 2023 18:59:39 +0900 Subject: [PATCH 17/18] lint - prettier Signed-off-by: Suguru Hirahara --- cypress/e2e/crypto/decryption-failure.spec.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index cb4873d4d66..adadcaadcd7 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -188,9 +188,7 @@ describe("Decryption Failure Bar", () => { ); cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest"); - cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests") - .should("be.visible") - .click(); + cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests").should("be.visible").click(); cy.wait("@keyRequest"); 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"); From ab39b657b9d88b76643b6c42dcc8ec666ec219a6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Mar 2023 15:44:58 +0900 Subject: [PATCH 18/18] 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 --- cypress/e2e/crypto/decryption-failure.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts index adadcaadcd7..15837526869 100644 --- a/cypress/e2e/crypto/decryption-failure.spec.ts +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -263,13 +263,13 @@ describe("Decryption Failure Bar", () => { cy.get(".mx_DecryptionFailureBar").should("exist"); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("exist"); - checkTimelineNarrow(); - cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar displays loading spinner", { allowSpinners: true, widths: [320, 640], }); + checkTimelineNarrow(); + cy.wait(5000); cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist"); cy.get("[data-testid='decryption-failure-bar-icon']").should("be.visible");