From 0b3482b7d8b3adac722a2d3b93e49db18d2a131e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 11 Oct 2023 14:42:06 +0100 Subject: [PATCH 01/10] Use Compound tooltips on MessageTimestamp to improve UX of date time discovery Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/messages/MessageTimestamp.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx index 6bfb67f3b7d..09f49ebea0f 100644 --- a/src/components/views/messages/MessageTimestamp.tsx +++ b/src/components/views/messages/MessageTimestamp.tsx @@ -16,6 +16,7 @@ limitations under the License. */ import React from "react"; +import { Tooltip } from "@vector-im/compound-web"; import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils"; @@ -42,14 +43,11 @@ export default class MessageTimestamp extends React.Component { } return ( - - {timestamp} - + + + {timestamp} + + ); } } From 42867a8e3c16a3ce8c22b9f78d207725b815a3a0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 11 Oct 2023 15:03:42 +0100 Subject: [PATCH 02/10] Show io.element.late_event in MessageTimestamp when known Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/messages/MessageTimestamp.tsx | 24 +++++++++++++++++-- src/components/views/rooms/EventTile.tsx | 1 + src/i18n/strings/en_EN.json | 2 ++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx index 09f49ebea0f..9755059d077 100644 --- a/src/components/views/messages/MessageTimestamp.tsx +++ b/src/components/views/messages/MessageTimestamp.tsx @@ -15,13 +15,18 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactChild } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils"; +import { _t } from "../../../languageHandler"; interface IProps { ts: number; + /** + * If specified will render both the sent-at and received-at timestamps in the tooltip + */ + receivedTs?: number; showTwelveHour?: boolean; showFullDate?: boolean; showSeconds?: boolean; @@ -42,8 +47,23 @@ export default class MessageTimestamp extends React.Component { timestamp = formatTime(date, this.props.showTwelveHour); } + let label: ReactChild = formatFullDate(date, this.props.showTwelveHour); + if (this.props.receivedTs !== undefined) { + const receivedDate = new Date(this.props.receivedTs); + label = ( +
+
{_t("timeline|message_timestamp_sent_at", { dateTime: label })}
+
+ {_t("timeline|message_timestamp_received_at", { + dateTime: formatFullDate(receivedDate, this.props.showTwelveHour), + })} +
+
+ ); + } + return ( - + {timestamp} diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 8961b5b0139..f5166f0c071 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1126,6 +1126,7 @@ export class UnwrappedEventTile extends React.Component showRelative={this.context.timelineRenderingType === TimelineRenderingType.ThreadsList} showTwelveHour={this.props.isTwelveHour} ts={ts} + receivedTs={this.props.mxEvent.getUnsigned()["io.element.late_event"]?.received_at} /> ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 58440cda411..3e14c2cbefb 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3417,6 +3417,8 @@ "label": "Message Actions", "view_in_room": "View in room" }, + "message_timestamp_received_at": "Recovered at: %(dateTime)s", + "message_timestamp_sent_at": "Sent at: %(dateTime)s", "mjolnir": { "changed_rule_glob": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s", "changed_rule_rooms": "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s", From 84ed907b4c23b0e2068d7ce13227b772269a27fc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 11 Oct 2023 15:08:45 +0100 Subject: [PATCH 03/10] Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 6a450a59a4a..e400c73bd63 100644 --- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -66,7 +66,7 @@ exports[`HTMLExport should export 1`] = `

-
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • +
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • From 5e6d845ebedb9999fbe44ee8066aac0a2c6e6284 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 11 Oct 2023 15:45:32 +0100 Subject: [PATCH 04/10] Avoid needing new Compound changes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/messages/MessageTimestamp.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx index 9755059d077..e5e3b36045d 100644 --- a/src/components/views/messages/MessageTimestamp.tsx +++ b/src/components/views/messages/MessageTimestamp.tsx @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactChild } from "react"; +import React from "react"; import { Tooltip } from "@vector-im/compound-web"; import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils"; @@ -47,23 +47,18 @@ export default class MessageTimestamp extends React.Component { timestamp = formatTime(date, this.props.showTwelveHour); } - let label: ReactChild = formatFullDate(date, this.props.showTwelveHour); + let line1 = formatFullDate(date, this.props.showTwelveHour); + let line2: string | undefined; if (this.props.receivedTs !== undefined) { + line1 = _t("timeline|message_timestamp_sent_at", { dateTime: line1 }); const receivedDate = new Date(this.props.receivedTs); - label = ( -
    -
    {_t("timeline|message_timestamp_sent_at", { dateTime: label })}
    -
    - {_t("timeline|message_timestamp_received_at", { - dateTime: formatFullDate(receivedDate, this.props.showTwelveHour), - })} -
    -
    - ); + line2 = _t("timeline|message_timestamp_received_at", { + dateTime: formatFullDate(receivedDate, this.props.showTwelveHour), + }); } return ( - + {timestamp} From 3be8ec658b5411492ce05812917f3f0c0c5ba7d0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 12 Oct 2023 13:47:06 +0100 Subject: [PATCH 05/10] Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index e400c73bd63..2a81c508d55 100644 --- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
    - ! + !
    @@ -60,13 +60,13 @@ exports[`HTMLExport should export 1`] = ` role="list" >
    - ! + !

    !myroom:example.org

    created this room.

    This is the start of export of !myroom:example.org. Exported by @userId:matrix.org at 11/17/2022.


    -
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • +
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
  • From 70cc2b9502c3a85a2eb79fdbaf5e2f437e8c05ec Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 Oct 2023 14:47:21 +0100 Subject: [PATCH 06/10] Update compound-web Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- yarn.lock | 57 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/yarn.lock b/yarn.lock index e66a6581365..455909709b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1278,13 +1278,20 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8" integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.13.10": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" + integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.21.0": version "7.23.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d" @@ -1528,9 +1535,9 @@ "@floating-ui/dom" "^1.5.1" "@floating-ui/utils@^0.1.3": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d" - integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA== + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== "@humanwhocodes/config-array@^0.11.10": version "0.11.10" @@ -2275,10 +2282,10 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-dismissable-layer@1.0.4": - version "1.0.4" - resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978" - integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg== +"@radix-ui/react-dismissable-layer@1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4" + integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/primitive" "1.0.1" @@ -2316,10 +2323,10 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-popper@1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9" - integrity sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg== +"@radix-ui/react-popper@1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42" + integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w== dependencies: "@babel/runtime" "^7.13.10" "@floating-ui/react-dom" "^2.0.0" @@ -2333,10 +2340,10 @@ "@radix-ui/react-use-size" "1.0.1" "@radix-ui/rect" "1.0.1" -"@radix-ui/react-portal@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1" - integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA== +"@radix-ui/react-portal@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15" + integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" @@ -2367,18 +2374,18 @@ "@radix-ui/react-compose-refs" "1.0.1" "@radix-ui/react-tooltip@^1.0.6": - version "1.0.6" - resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz#87a7786cd9f2b4de957ac645afae1575339c58b0" - integrity sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg== + version "1.0.7" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e" + integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/primitive" "1.0.1" "@radix-ui/react-compose-refs" "1.0.1" "@radix-ui/react-context" "1.0.1" - "@radix-ui/react-dismissable-layer" "1.0.4" + "@radix-ui/react-dismissable-layer" "1.0.5" "@radix-ui/react-id" "1.0.1" - "@radix-ui/react-popper" "1.1.2" - "@radix-ui/react-portal" "1.0.3" + "@radix-ui/react-popper" "1.1.3" + "@radix-ui/react-portal" "1.0.4" "@radix-ui/react-presence" "1.0.1" "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-slot" "1.0.2" @@ -3084,9 +3091,9 @@ svg2vectordrawable "^2.9.1" "@vector-im/compound-web@^0.5.0": - version "0.5.3" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.5.3.tgz#5d0e22c6cf277a605151099d3850ddc74290078c" - integrity sha512-h8xIrMHTQklan2W7ImoFUnvMvcNcNaromcS0QffkttwLZmOjX2EXmPhlq5JhTm+ZRr4+WN7Hjok1F1vF08RStA== + version "0.5.4" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.5.4.tgz#a99b346fe8de34a6f8bcbf9e1040ce1d79615dbc" + integrity sha512-w4Nwzid5Y89Dt9GaxKO+kWPTjSitLpkmoAjMYHVUajNMCfUxluzu4eOgjPRCpubPH5lZUB6/95y43wOI+pEC1Q== dependencies: "@radix-ui/react-form" "^0.0.3" "@radix-ui/react-tooltip" "^1.0.6" From a12e22ccb8f12812dbcc2cdeb1456ff8ed7f612e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 Oct 2023 14:51:33 +0100 Subject: [PATCH 07/10] Update identifiers Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/messages/MessageTimestamp.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/messages/MessageTimestamp.tsx b/src/components/views/messages/MessageTimestamp.tsx index e5e3b36045d..fba6db726b9 100644 --- a/src/components/views/messages/MessageTimestamp.tsx +++ b/src/components/views/messages/MessageTimestamp.tsx @@ -47,18 +47,18 @@ export default class MessageTimestamp extends React.Component { timestamp = formatTime(date, this.props.showTwelveHour); } - let line1 = formatFullDate(date, this.props.showTwelveHour); - let line2: string | undefined; + let label = formatFullDate(date, this.props.showTwelveHour); + let caption: string | undefined; if (this.props.receivedTs !== undefined) { - line1 = _t("timeline|message_timestamp_sent_at", { dateTime: line1 }); + label = _t("timeline|message_timestamp_sent_at", { dateTime: label }); const receivedDate = new Date(this.props.receivedTs); - line2 = _t("timeline|message_timestamp_received_at", { + caption = _t("timeline|message_timestamp_received_at", { dateTime: formatFullDate(receivedDate, this.props.showTwelveHour), }); } return ( - + {timestamp} From 688b83abc48132f01491e606280ef8a07a71a6bc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 Oct 2023 16:42:42 +0100 Subject: [PATCH 08/10] Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/messages/MessageTimestamp-test.tsx | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 test/components/views/messages/MessageTimestamp-test.tsx diff --git a/test/components/views/messages/MessageTimestamp-test.tsx b/test/components/views/messages/MessageTimestamp-test.tsx new file mode 100644 index 00000000000..0c2c991f42f --- /dev/null +++ b/test/components/views/messages/MessageTimestamp-test.tsx @@ -0,0 +1,63 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; + +import MessageTimestamp from "../../../../src/components/views/messages/MessageTimestamp"; + +jest.mock("../../../../src/settings/SettingsStore"); + +describe("MessageTimestamp", () => { + // Friday Dec 17 2021, 9:09am + const nowDate = new Date("2021-12-17T08:09:00.000Z"); + + const HOUR_MS = 3600000; + const DAY_MS = HOUR_MS * 24; + + it("should render HH:MM", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchInlineSnapshot(` + + + + `); + }); + + it("should show full date & time on hover", async () => { + const { container } = render(); + await userEvent.hover(container.querySelector(".mx_MessageTimestamp")); + await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent("Fri, Dec 17, 2021, 08:09:00"); + }); + + it("should show sent & received time on hover if passed", async () => { + const { container } = render( + , + ); + await userEvent.hover(container.querySelector(".mx_MessageTimestamp")); + await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent( + "Sent at: Fri, Dec 17, 2021, 08:09:00\nRecovered at: Fri, Dec 18, 2021, 08:09:00", + ); + }); +}); From 651d650a634e3f808890403c2f568ba4933998d2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 Oct 2023 17:04:17 +0100 Subject: [PATCH 09/10] Fix types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/components/views/messages/MessageTimestamp-test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/views/messages/MessageTimestamp-test.tsx b/test/components/views/messages/MessageTimestamp-test.tsx index 0c2c991f42f..2835cbe41d1 100644 --- a/test/components/views/messages/MessageTimestamp-test.tsx +++ b/test/components/views/messages/MessageTimestamp-test.tsx @@ -47,7 +47,7 @@ describe("MessageTimestamp", () => { it("should show full date & time on hover", async () => { const { container } = render(); - await userEvent.hover(container.querySelector(".mx_MessageTimestamp")); + await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent("Fri, Dec 17, 2021, 08:09:00"); }); @@ -55,7 +55,7 @@ describe("MessageTimestamp", () => { const { container } = render( , ); - await userEvent.hover(container.querySelector(".mx_MessageTimestamp")); + await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent( "Sent at: Fri, Dec 17, 2021, 08:09:00\nRecovered at: Fri, Dec 18, 2021, 08:09:00", ); From 9e9c7ee2e47572db40789faf81caec6d16a7433d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 13 Oct 2023 17:39:22 +0100 Subject: [PATCH 10/10] Switch to snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/components/views/messages/MessageTimestamp-test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/components/views/messages/MessageTimestamp-test.tsx b/test/components/views/messages/MessageTimestamp-test.tsx index 2835cbe41d1..a636e6f3e60 100644 --- a/test/components/views/messages/MessageTimestamp-test.tsx +++ b/test/components/views/messages/MessageTimestamp-test.tsx @@ -48,7 +48,7 @@ describe("MessageTimestamp", () => { it("should show full date & time on hover", async () => { const { container } = render(); await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); - await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent("Fri, Dec 17, 2021, 08:09:00"); + expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`); }); it("should show sent & received time on hover if passed", async () => { @@ -56,8 +56,8 @@ describe("MessageTimestamp", () => { , ); await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!); - await expect(screen.findByRole("tooltip")).resolves.toHaveTextContent( - "Sent at: Fri, Dec 17, 2021, 08:09:00\nRecovered at: Fri, Dec 18, 2021, 08:09:00", + expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot( + `"Sent at: Fri, Dec 17, 2021, 08:09:00Recovered at: Sat, Dec 18, 2021, 08:09:00"`, ); }); });