diff --git a/.github/workflows/layered-build.yaml b/.github/workflows/layered-build.yaml index c9d7e89a75..c8717667d7 100644 --- a/.github/workflows/layered-build.yaml +++ b/.github/workflows/layered-build.yaml @@ -5,6 +5,8 @@ on: jobs: build: runs-on: ubuntu-latest + env: + PR_NUMBER: ${{github.event.number}} steps: - uses: actions/checkout@v2 - name: Build diff --git a/.github/workflows/typecheck.yaml b/.github/workflows/typecheck.yaml index 2e08418cf6..f6ab643958 100644 --- a/.github/workflows/typecheck.yaml +++ b/.github/workflows/typecheck.yaml @@ -5,6 +5,8 @@ on: jobs: build: runs-on: ubuntu-latest + env: + PR_NUMBER: ${{github.event.number}} steps: - uses: actions/checkout@v2 - uses: c-hive/gha-yarn-cache@v2 diff --git a/CHANGELOG.md b/CHANGELOG.md index 42e186220f..9a445a4041 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,70 @@ +Changes in [3.30.0](https://github.com/vector-im/element-desktop/releases/tag/v3.30.0) (2021-09-14) +=================================================================================================== + +## ✨ Features + * Add bubble highlight styling ([\#6582](https://github.com/matrix-org/matrix-react-sdk/pull/6582)). Fixes vector-im/element-web#18295 and vector-im/element-web#18295. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * [Release] Add config option to turn on in-room event sending timing metrics ([\#6773](https://github.com/matrix-org/matrix-react-sdk/pull/6773)). + * Create narrow mode for Composer ([\#6682](https://github.com/matrix-org/matrix-react-sdk/pull/6682)). Fixes vector-im/element-web#18533 and vector-im/element-web#18533. + * Prefer matrix.to alias links over room id in spaces & share ([\#6745](https://github.com/matrix-org/matrix-react-sdk/pull/6745)). Fixes vector-im/element-web#18796 and vector-im/element-web#18796. + * Stop automatic playback of voice messages if a non-voice message is encountered ([\#6728](https://github.com/matrix-org/matrix-react-sdk/pull/6728)). Fixes vector-im/element-web#18850 and vector-im/element-web#18850. + * Show call length during a call ([\#6700](https://github.com/matrix-org/matrix-react-sdk/pull/6700)). Fixes vector-im/element-web#18566 and vector-im/element-web#18566. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Serialize and retry mass-leave when leaving space ([\#6737](https://github.com/matrix-org/matrix-react-sdk/pull/6737)). Fixes vector-im/element-web#18789 and vector-im/element-web#18789. + * Improve form handling in and around space creation ([\#6739](https://github.com/matrix-org/matrix-react-sdk/pull/6739)). Fixes vector-im/element-web#18775 and vector-im/element-web#18775. + * Split autoplay GIFs and videos into different settings ([\#6726](https://github.com/matrix-org/matrix-react-sdk/pull/6726)). Fixes vector-im/element-web#5771 and vector-im/element-web#5771. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Add autoplay for voice messages ([\#6710](https://github.com/matrix-org/matrix-react-sdk/pull/6710)). Fixes vector-im/element-web#18804, vector-im/element-web#18715, vector-im/element-web#18714 vector-im/element-web#17961 and vector-im/element-web#18804. + * Allow to use basic html to format invite messages ([\#6703](https://github.com/matrix-org/matrix-react-sdk/pull/6703)). Fixes vector-im/element-web#15738 and vector-im/element-web#15738. Contributed by [skolmer](https://github.com/skolmer). + * Allow widgets, when eligible, to interact with more rooms as per MSC2762 ([\#6684](https://github.com/matrix-org/matrix-react-sdk/pull/6684)). + * Remove arbitrary limits from send/receive events for widgets ([\#6719](https://github.com/matrix-org/matrix-react-sdk/pull/6719)). Fixes vector-im/element-web#17994 and vector-im/element-web#17994. + * Reload suggested rooms if we see the state change down /sync ([\#6715](https://github.com/matrix-org/matrix-react-sdk/pull/6715)). Fixes vector-im/element-web#18761 and vector-im/element-web#18761. + * When creating private spaces, make the initial rooms restricted if supported ([\#6721](https://github.com/matrix-org/matrix-react-sdk/pull/6721)). Fixes vector-im/element-web#18722 and vector-im/element-web#18722. + * Threading exploration work ([\#6658](https://github.com/matrix-org/matrix-react-sdk/pull/6658)). Fixes vector-im/element-web#18532 and vector-im/element-web#18532. + * Default to `Don't leave any` when leaving a space ([\#6697](https://github.com/matrix-org/matrix-react-sdk/pull/6697)). Fixes vector-im/element-web#18592 and vector-im/element-web#18592. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Special case redaction event sending from widgets per MSC2762 ([\#6686](https://github.com/matrix-org/matrix-react-sdk/pull/6686)). Fixes vector-im/element-web#18573 and vector-im/element-web#18573. + * Add active speaker indicators ([\#6639](https://github.com/matrix-org/matrix-react-sdk/pull/6639)). Fixes vector-im/element-web#17627 and vector-im/element-web#17627. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Increase general app performance by optimizing layers ([\#6644](https://github.com/matrix-org/matrix-react-sdk/pull/6644)). Fixes vector-im/element-web#18730 and vector-im/element-web#18730. Contributed by [Palid](https://github.com/Palid). + +## 🐛 Bug Fixes + * Fix autocomplete not having y-scroll ([\#6802](https://github.com/matrix-org/matrix-react-sdk/pull/6802)). + * Fix emoji picker and stickerpicker not appearing correctly when opened ([\#6801](https://github.com/matrix-org/matrix-react-sdk/pull/6801)). + * Debounce read marker update on scroll ([\#6774](https://github.com/matrix-org/matrix-react-sdk/pull/6774)). + * Fix Space creation wizard go to my first room button behaviour ([\#6748](https://github.com/matrix-org/matrix-react-sdk/pull/6748)). Fixes vector-im/element-web#18764 and vector-im/element-web#18764. + * Fix scroll being stuck at bottom ([\#6751](https://github.com/matrix-org/matrix-react-sdk/pull/6751)). Fixes vector-im/element-web#18903 and vector-im/element-web#18903. + * Fix widgets not remembering identity verification when asked to. ([\#6742](https://github.com/matrix-org/matrix-react-sdk/pull/6742)). Fixes vector-im/element-web#15631 and vector-im/element-web#15631. + * Add missing pluralisation i18n strings for Spaces ([\#6738](https://github.com/matrix-org/matrix-react-sdk/pull/6738)). Fixes vector-im/element-web#18780 and vector-im/element-web#18780. + * Make ForgotPassword UX slightly more user friendly ([\#6636](https://github.com/matrix-org/matrix-react-sdk/pull/6636)). Fixes vector-im/element-web#11531 and vector-im/element-web#11531. Contributed by [Palid](https://github.com/Palid). + * Don't context switch room on SpaceStore ready as it can break permalinks ([\#6730](https://github.com/matrix-org/matrix-react-sdk/pull/6730)). Fixes vector-im/element-web#17974 and vector-im/element-web#17974. + * Fix explore rooms button not working during space creation wizard ([\#6729](https://github.com/matrix-org/matrix-react-sdk/pull/6729)). Fixes vector-im/element-web#18762 and vector-im/element-web#18762. + * Fix bug where one party's media would sometimes not be shown ([\#6731](https://github.com/matrix-org/matrix-react-sdk/pull/6731)). + * Only make the initial space rooms suggested by default ([\#6714](https://github.com/matrix-org/matrix-react-sdk/pull/6714)). Fixes vector-im/element-web#18760 and vector-im/element-web#18760. + * Replace fake username in EventTilePreview with a proper loading state ([\#6702](https://github.com/matrix-org/matrix-react-sdk/pull/6702)). Fixes vector-im/element-web#15897 and vector-im/element-web#15897. Contributed by [skolmer](https://github.com/skolmer). + * Don't send prehistorical events to widgets during decryption at startup ([\#6695](https://github.com/matrix-org/matrix-react-sdk/pull/6695)). Fixes vector-im/element-web#18060 and vector-im/element-web#18060. + * When creating subspaces properly set restricted join rule ([\#6725](https://github.com/matrix-org/matrix-react-sdk/pull/6725)). Fixes vector-im/element-web#18797 and vector-im/element-web#18797. + * Fix the Image View not openning for some pinned messages ([\#6723](https://github.com/matrix-org/matrix-react-sdk/pull/6723)). Fixes vector-im/element-web#18422 and vector-im/element-web#18422. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Show autocomplete sections vertically ([\#6722](https://github.com/matrix-org/matrix-react-sdk/pull/6722)). Fixes vector-im/element-web#18860 and vector-im/element-web#18860. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Fix EmojiPicker filtering to lower case emojibase data strings ([\#6717](https://github.com/matrix-org/matrix-react-sdk/pull/6717)). Fixes vector-im/element-web#18686 and vector-im/element-web#18686. + * Clear currentRoomId when viewing home page, fixing document title ([\#6716](https://github.com/matrix-org/matrix-react-sdk/pull/6716)). Fixes vector-im/element-web#18668 and vector-im/element-web#18668. + * Fix membership updates to Spaces not applying in real-time ([\#6713](https://github.com/matrix-org/matrix-react-sdk/pull/6713)). Fixes vector-im/element-web#18737 and vector-im/element-web#18737. + * Don't show a double stacked invite modals when inviting to Spaces ([\#6698](https://github.com/matrix-org/matrix-react-sdk/pull/6698)). Fixes vector-im/element-web#18745 and vector-im/element-web#18745. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Remove non-functional DuckDuckGo Autocomplete Provider ([\#6712](https://github.com/matrix-org/matrix-react-sdk/pull/6712)). Fixes vector-im/element-web#18778 and vector-im/element-web#18778. + * Filter members on `MemberList` load ([\#6708](https://github.com/matrix-org/matrix-react-sdk/pull/6708)). Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Fix improper voice messages being produced in Firefox and sometimes other browsers. ([\#6696](https://github.com/matrix-org/matrix-react-sdk/pull/6696)). Fixes vector-im/element-web#18587 and vector-im/element-web#18587. + * Fix client forgetting which capabilities a widget was approved for ([\#6685](https://github.com/matrix-org/matrix-react-sdk/pull/6685)). Fixes vector-im/element-web#18786 and vector-im/element-web#18786. + * Fix left panel widgets not remembering collapsed state ([\#6687](https://github.com/matrix-org/matrix-react-sdk/pull/6687)). Fixes vector-im/element-web#17803 and vector-im/element-web#17803. + * Fix changelog link colour back to blue ([\#6692](https://github.com/matrix-org/matrix-react-sdk/pull/6692)). Fixes vector-im/element-web#18726 and vector-im/element-web#18726. + * Soften codeblock border color ([\#6564](https://github.com/matrix-org/matrix-react-sdk/pull/6564)). Fixes vector-im/element-web#18367 and vector-im/element-web#18367. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Pause ringing more aggressively ([\#6691](https://github.com/matrix-org/matrix-react-sdk/pull/6691)). Fixes vector-im/element-web#18588 and vector-im/element-web#18588. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Fix command autocomplete ([\#6680](https://github.com/matrix-org/matrix-react-sdk/pull/6680)). Fixes vector-im/element-web#18670 and vector-im/element-web#18670. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Don't re-sort the room-list based on profile/status changes ([\#6595](https://github.com/matrix-org/matrix-react-sdk/pull/6595)). Fixes vector-im/element-web#110 and vector-im/element-web#110. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Fix codeblock formatting with syntax highlighting on ([\#6681](https://github.com/matrix-org/matrix-react-sdk/pull/6681)). Fixes vector-im/element-web#18739 vector-im/element-web#18365 and vector-im/element-web#18739. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + * Add padding to the Add button in the notification settings ([\#6665](https://github.com/matrix-org/matrix-react-sdk/pull/6665)). Fixes vector-im/element-web#18706 and vector-im/element-web#18706. Contributed by [SimonBrandner](https://github.com/SimonBrandner). + +Changes in [3.29.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.29.1) (2021-09-13) +=================================================================================================== + +## 🔒 SECURITY FIXES + * Fix a security issue with message key sharing. See https://matrix.org/blog/2021/09/13/vulnerability-disclosure-key-sharing + for details. + Changes in [3.29.0](https://github.com/vector-im/element-desktop/releases/tag/v3.29.0) (2021-08-31) =================================================================================================== diff --git a/package.json b/package.json index 9798503e9e..3e3d9383c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.29.0", + "version": "3.30.0", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -93,10 +93,10 @@ "prop-types": "^15.7.2", "qrcode": "^1.4.4", "re-resizable": "^6.9.0", - "react": "^17.0.2", + "react": "17.0.2", "react-beautiful-dnd": "^13.1.0", "react-blurhash": "^0.1.3", - "react-dom": "^17.0.2", + "react-dom": "17.0.2", "react-focus-lock": "^2.5.0", "react-transition-group": "^4.4.1", "resize-observer-polyfill": "^1.5.1", @@ -142,9 +142,9 @@ "@types/pako": "^1.0.1", "@types/parse5": "^6.0.0", "@types/qrcode": "^1.3.5", - "@types/react": "^17.0.2", + "@types/react": "17.0.14", "@types/react-beautiful-dnd": "^13.0.0", - "@types/react-dom": "^17.0.2", + "@types/react-dom": "17.0.9", "@types/react-transition-group": "^4.4.0", "@types/sanitize-html": "^2.3.1", "@types/zxcvbn": "^4.4.0", @@ -175,9 +175,12 @@ "stylelint": "^13.9.0", "stylelint-config-standard": "^20.0.0", "stylelint-scss": "^3.18.0", - "typescript": "^4.1.3", + "typescript": "4.3.5", "walk": "^2.3.14" }, + "resolutions": { + "@types/react": "17.0.14" + }, "jest": { "testEnvironment": "./__test-utils__/environment.js", "testMatch": [ diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss index cc0e760031..ceea20ed79 100644 --- a/res/css/structures/_GroupFilterPanel.scss +++ b/res/css/structures/_GroupFilterPanel.scss @@ -73,12 +73,6 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation .mx_GroupFilterPanel .mx_TagTile { // opacity: 0.5; position: relative; - - .mx_BetaDot { - position: absolute; - right: -13px; - top: -11px; - } } .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype { diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index fb0f7d10e1..b6219da9e4 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -183,3 +183,40 @@ limitations under the License. padding: 0; } } + +@media screen and (max-width: 700px) { + .mx_RoomDirectory_roomMemberCount { + padding: 0px; + } + + .mx_AccessibleButton_kind_secondary { + padding: 0px !important; + } + + .mx_RoomDirectory_join { + margin-left: 0px; + } + + .mx_RoomDirectory_alias { + margin-top: 10px; + margin-bottom: 10px; + } + + .mx_RoomDirectory_roomDescription { + padding-bottom: 0px; + } + + .mx_RoomDirectory_name { + margin-bottom: 5px; + } + + .mx_RoomDirectory_roomAvatar { + margin-top: 10px; + } + + .mx_RoomDirectory_table { + grid-template-columns: auto; + row-gap: 14px; + margin-top: 5px; + } +} diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index bbb1867f16..30d421a351 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -103,6 +103,16 @@ $activeBorderColor: $secondary-content; } } + .mx_SpaceItem_new { + position: relative; + + .mx_BetaDot { + position: absolute; + left: 33px; + top: -5px; + } + } + .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { margin-left: $gutterSize; min-width: 40px; @@ -139,7 +149,6 @@ $activeBorderColor: $secondary-content; &:not(.mx_SpaceButton_narrow) { .mx_SpaceButton_selectionWrapper { width: 100%; - padding-right: 16px; overflow: hidden; } } @@ -151,7 +160,6 @@ $activeBorderColor: $secondary-content; display: block; text-overflow: ellipsis; overflow: hidden; - padding-right: 8px; font-size: $font-14px; line-height: $font-18px; } @@ -196,22 +204,17 @@ $activeBorderColor: $secondary-content; } &.mx_SpaceButton_new .mx_SpaceButton_icon { - background-color: $accent-color; - transition: all .1s ease-in-out; // TODO transition + background-color: $roomlist-button-bg-color; &::before { - background-color: #ffffff; + background-color: $primary-content; mask-image: url('$(res)/img/element-icons/plus.svg'); transition: all .2s ease-in-out; // TODO transition } } - &.mx_SpaceButton_newCancel .mx_SpaceButton_icon { - background-color: $icon-button-color; - - &::before { - transform: rotate(45deg); - } + &.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before { + transform: rotate(45deg); } .mx_BaseAvatar_image { @@ -225,8 +228,7 @@ $activeBorderColor: $secondary-content; margin-top: auto; margin-bottom: auto; display: none; - position: absolute; - right: 4px; + position: relative; &::before { top: 2px; @@ -245,8 +247,6 @@ $activeBorderColor: $secondary-content; } .mx_SpacePanel_badgeContainer { - position: absolute; - // Create a flexbox to make aligning dot badges easier display: flex; align-items: center; @@ -264,6 +264,7 @@ $activeBorderColor: $secondary-content; &.collapsed { .mx_SpaceButton { .mx_SpacePanel_badgeContainer { + position: absolute; right: 0; top: 0; @@ -293,19 +294,12 @@ $activeBorderColor: $secondary-content; } &:not(.collapsed) { - .mx_SpacePanel_badgeContainer { - position: absolute; - right: 4px; - } - .mx_SpaceButton:hover, .mx_SpaceButton:focus-within, .mx_SpaceButton_hasMenuOpen { &:not(.mx_SpaceButton_invite) { // Hide the badge container on hover because it'll be a menu button .mx_SpacePanel_badgeContainer { - width: 0; - height: 0; display: none; } diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss index 39eabe2e07..812b6dcea9 100644 --- a/res/css/structures/_SpaceRoomView.scss +++ b/res/css/structures/_SpaceRoomView.scss @@ -215,9 +215,10 @@ $SpaceRoomViewInnerWidth: 428px; } } - > .mx_BaseAvatar_image, - > .mx_BaseAvatar > .mx_BaseAvatar_image { - border-radius: 12px; + > .mx_RoomAvatar_isSpaceRoom { + &.mx_BaseAvatar_image, .mx_BaseAvatar_image { + border-radius: 12px; + } } h1.mx_SpaceRoomView_preview_name { diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index ff6910852c..a6b61d3ead 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -113,6 +113,7 @@ $dot-size: 12px; animation: mx_Beta_bluePulse 2s infinite; animation-iteration-count: 20; position: relative; + pointer-events: none; &::after { content: ""; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index d74c985d4c..71d37a015d 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -98,14 +98,14 @@ limitations under the License. transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s, - top 0.25s ease-out 0.1s, + transform 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s; color: $primary-content; background-color: transparent; font-size: $font-14px; + transform: translateY(0); position: absolute; left: 0px; - top: 0px; margin: 7px 8px; padding: 2px; pointer-events: none; // Allow clicks to fall through to the input @@ -124,10 +124,10 @@ limitations under the License. transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, - top 0.25s ease-out 0s, + transform 0.25s ease-out 0s, background-color 0.25s ease-out 0s; font-size: $font-10px; - top: -13px; + transform: translateY(-13px); padding: 0 2px; background-color: $field-focused-label-bg-color; pointer-events: initial; diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 8d2b338d9d..fcdab37f5a 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -7,7 +7,6 @@ background: $background; border-bottom: none; border-radius: 8px 8px 0 0; - max-height: 35vh; overflow: clip; display: flex; flex-direction: column; @@ -64,6 +63,7 @@ margin: 12px; height: 100%; overflow-y: scroll; + max-height: 35vh; } .mx_Autocomplete_Completion_container_truncate { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 41c9dad394..389a5c9706 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -23,11 +23,11 @@ limitations under the License. } .mx_EventTile[data-layout=bubble] { - position: relative; margin-top: var(--gutterSize); - margin-left: 50px; + margin-left: 49px; margin-right: 100px; + font-size: $font-14px; &.mx_EventTile_continuation { margin-top: 2px; @@ -77,10 +77,11 @@ limitations under the License. max-width: 70%; } - .mx_SenderProfile { + > .mx_SenderProfile { position: relative; top: -2px; left: 2px; + font-size: $font-15px; } &[data-self=false] { @@ -113,8 +114,6 @@ limitations under the License. .mx_ReplyTile .mx_SenderProfile { display: block; - top: unset; - left: unset; } .mx_ReactionsRow { @@ -287,6 +286,8 @@ limitations under the License. .mx_EventTile_line, .mx_EventTile_info { min-width: 100%; + // Preserve alignment with left edge of text in bubbles + margin: 0; } .mx_EventTile_e2eIcon { @@ -294,9 +295,10 @@ limitations under the License. } .mx_EventTile_line > a { + // Align timestamps with those of normal bubble tiles right: auto; - top: -15px; - left: -68px; + top: -11px; + left: -95px; } } @@ -326,11 +328,10 @@ limitations under the License. } .mx_EventTile_line { - margin: 0 5px; + margin: 0; > a { - left: auto; - right: 0; - transform: translateX(calc(100% + 5px)); + // Align timestamps with those of normal bubble tiles + left: -76px; } } @@ -340,7 +341,8 @@ limitations under the License. } .mx_EventListSummary[data-expanded=false][data-layout=bubble] { - padding: 0 34px; + // Align with left edge of bubble tiles + padding: 0 49px; } /* events that do not require bubble layout */ diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 3fffbfd64c..6db2185dd5 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -172,14 +172,12 @@ limitations under the License. } } - // In the general case, we leave height of headers alone even if sticky, so - // that the sublists below them do not jump. However, that leaves a gap - // when scrolled to the top above the first sublist (whose header can only - // ever stick to top), so we force height to 0 for only that first header. - // See also https://github.com/vector-im/element-web/issues/14429. - &:first-child .mx_RoomSublist_headerContainer { - height: 0; - padding-bottom: 4px; + // In the general case, we reserve space for each sublist header to prevent + // scroll jumps when they become sticky. However, that leaves a gap when + // scrolled to the top above the first sublist (whose header can only ever + // stick to top), so we make sure to exclude the first visible sublist. + &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer { + height: 24px; } .mx_RoomSublist_resizeBox { diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss index d1076205ad..16f607c95f 100644 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss @@ -21,6 +21,17 @@ limitations under the License. .mx_SettingsTab_section { margin-bottom: 30px; + + > details { + > summary { + cursor: pointer; + color: $primary-content; + } + + & + .mx_SettingsFlag { + margin-top: 20px; + } + } } .mx_PreferencesUserSettingsTab_CommunityMigrator { diff --git a/res/img/betas/.gitkeep b/res/img/betas/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/res/img/betas/spaces.png b/res/img/betas/spaces.png deleted file mode 100644 index f4cfa90b4e..0000000000 Binary files a/res/img/betas/spaces.png and /dev/null differ diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 4a6db5dd55..0bc61d438d 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -184,6 +184,9 @@ $visual-bell-bg-color: #800; $room-warning-bg-color: $header-panel-bg-color; +$authpage-body-bg-color: $background; +$authpage-primary-color: $primary-content; + $dark-panel-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index f4685fe8fa..455798a556 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -82,6 +82,8 @@ $tab-label-fg-color: var(--timeline-text-color); // was #4e5054 $authpage-lang-color: var(--timeline-text-color); $roomheader-color: var(--timeline-text-color); +// was #232f32 +$authpage-primary-color: var(--timeline-text-color); // --roomlist-text-secondary-color $roomtile-preview-color: var(--roomlist-text-secondary-color); $roomlist-header-color: var(--roomlist-text-secondary-color); diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts index e48fd52cb1..5f5aeb389f 100644 --- a/src/Lifecycle.ts +++ b/src/Lifecycle.ts @@ -574,11 +574,12 @@ async function doSetLoggedIn( await abortLogin(); } - PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId); - Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl); MatrixClientPeg.replaceUsingCreds(credentials); + + PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId); + const client = MatrixClientPeg.get(); if (credentials.freshLogin && SettingsStore.getValue("feature_dehydration")) { diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 073f24523d..154f167745 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -17,8 +17,8 @@ limitations under the License. import SettingsStore from "./settings/SettingsStore"; import { SettingLevel } from "./settings/SettingLevel"; -import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix"; import EventEmitter from 'events'; +import { MatrixClientPeg } from "./MatrixClientPeg"; // XXX: MediaDeviceKind is a union type, so we make our own enum export enum MediaDeviceKindEnum { @@ -74,8 +74,8 @@ export default class MediaDeviceHandler extends EventEmitter { const audioDeviceId = SettingsStore.getValue("webrtc_audioinput"); const videoDeviceId = SettingsStore.getValue("webrtc_videoinput"); - setMatrixCallAudioInput(audioDeviceId); - setMatrixCallVideoInput(videoDeviceId); + MatrixClientPeg.get().getMediaHandler().setAudioInput(audioDeviceId); + MatrixClientPeg.get().getMediaHandler().setVideoInput(videoDeviceId); } public setAudioOutput(deviceId: string): void { @@ -90,7 +90,7 @@ export default class MediaDeviceHandler extends EventEmitter { */ public setAudioInput(deviceId: string): void { SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallAudioInput(deviceId); + MatrixClientPeg.get().getMediaHandler().setAudioInput(deviceId); } /** @@ -100,7 +100,7 @@ export default class MediaDeviceHandler extends EventEmitter { */ public setVideoInput(deviceId: string): void { SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId); - setMatrixCallVideoInput(deviceId); + MatrixClientPeg.get().getMediaHandler().setVideoInput(deviceId); } public setDevice(deviceId: string, kind: MediaDeviceKindEnum): void { diff --git a/src/PosthogAnalytics.ts b/src/PosthogAnalytics.ts index 860a155aff..c6e351b91a 100644 --- a/src/PosthogAnalytics.ts +++ b/src/PosthogAnalytics.ts @@ -18,6 +18,8 @@ import posthog, { PostHog } from 'posthog-js'; import PlatformPeg from './PlatformPeg'; import SdkConfig from './SdkConfig'; import SettingsStore from './settings/SettingsStore'; +import { MatrixClientPeg } from "./MatrixClientPeg"; +import { MatrixClient } from "matrix-js-sdk/src/client"; /* Posthog analytics tracking. * @@ -27,10 +29,11 @@ import SettingsStore from './settings/SettingsStore'; * - If [Do Not Track](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/doNotTrack) is * enabled, events are not sent (this detection is built into posthog and turned on via the * `respect_dnt` flag being passed to `posthog.init`). - * - If the `feature_pseudonymous_analytics_opt_in` labs flag is `true`, track pseudonomously, i.e. - * hash all matrix identifiers in tracking events (user IDs, room IDs etc) using SHA-256. - * - Otherwise, if the existing `analyticsOptIn` flag is `true`, track anonymously, i.e. - * redact all matrix identifiers in tracking events. + * - If the `feature_pseudonymous_analytics_opt_in` labs flag is `true`, track pseudonomously by maintaining + * a randomised analytics ID in account_data for that user (shared between devices) and sending it to posthog to + identify the user. + * - Otherwise, if the existing `analyticsOptIn` flag is `true`, track anonymously, i.e. do not identify the user + using any identifier that would be consistent across devices. * - If both flags are false or not set, events are not sent. */ @@ -71,12 +74,6 @@ interface IPageView extends IAnonymousEvent { }; } -const hashHex = async (input: string): Promise => { - const buf = new TextEncoder().encode(input); - const digestBuf = await window.crypto.subtle.digest("sha-256", buf); - return [...new Uint8Array(digestBuf)].map((b: number) => b.toString(16).padStart(2, "0")).join(""); -}; - const whitelistedScreens = new Set([ "register", "login", "forgot_password", "soft_logout", "new", "settings", "welcome", "home", "start", "directory", "start_sso", "start_cas", "groups", "complete_security", "post_registration", "room", "user", "group", @@ -89,7 +86,6 @@ export async function getRedactedCurrentLocation( anonymity: Anonymity, ): Promise { // Redact PII from the current location. - // If anonymous is true, redact entirely, if false, substitute it with a hash. // For known screens, assumes a URL structure of //might/be/pii if (origin.startsWith('file://')) { pathname = "//"; @@ -99,17 +95,13 @@ export async function getRedactedCurrentLocation( if (hash == "") { hashStr = ""; } else { - let [beforeFirstSlash, screen, ...parts] = hash.split("/"); + let [beforeFirstSlash, screen] = hash.split("/"); if (!whitelistedScreens.has(screen)) { screen = ""; } - for (let i = 0; i < parts.length; i++) { - parts[i] = anonymity === Anonymity.Anonymous ? `` : await hashHex(parts[i]); - } - - hashStr = `${beforeFirstSlash}/${screen}/${parts.join("/")}`; + hashStr = `${beforeFirstSlash}/${screen}/`; } return origin + pathname + hashStr; } @@ -123,15 +115,15 @@ export class PosthogAnalytics { /* Wrapper for Posthog analytics. * 3 modes of anonymity are supported, governed by this.anonymity * - Anonymity.Disabled means *no data* is passed to posthog - * - Anonymity.Anonymous means all identifers will be redacted before being passed to posthog - * - Anonymity.Pseudonymous means all identifiers will be hashed via SHA-256 before being passed - * to Posthog + * - Anonymity.Anonymous means no identifier is passed to posthog + * - Anonymity.Pseudonymous means an analytics ID stored in account_data and shared between devices + * is passed to posthog. * * To update anonymity, call updateAnonymityFromSettings() or you can set it directly via setAnonymity(). * * To pass an event to Posthog: * - * 1. Declare a type for the event, extending IAnonymousEvent, IPseudonymousEvent or IRoomEvent. + * 1. Declare a type for the event, extending IAnonymousEvent or IPseudonymousEvent. * 2. Call the appropriate track*() method. Pseudonymous events will be dropped when anonymity is * Anonymous or Disabled; Anonymous events will be dropped when anonymity is Disabled. */ @@ -141,6 +133,7 @@ export class PosthogAnalytics { private enabled = false; private static _instance = null; private platformSuperProperties = {}; + private static ANALYTICS_ID_EVENT_TYPE = "im.vector.web.analytics_id"; public static get instance(): PosthogAnalytics { if (!this._instance) { @@ -274,9 +267,32 @@ export class PosthogAnalytics { this.anonymity = anonymity; } - public async identifyUser(userId: string): Promise { + private static getRandomAnalyticsId(): string { + return [...crypto.getRandomValues(new Uint8Array(16))].map((c) => c.toString(16)).join(''); + } + + public async identifyUser(client: MatrixClient, analyticsIdGenerator: () => string): Promise { if (this.anonymity == Anonymity.Pseudonymous) { - this.posthog.identify(await hashHex(userId)); + // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows + // different devices to send the same ID. + try { + const accountData = await client.getAccountDataFromServer(PosthogAnalytics.ANALYTICS_ID_EVENT_TYPE); + let analyticsID = accountData?.id; + if (!analyticsID) { + // Couldn't retrieve an analytics ID from user settings, so create one and set it on the server. + // Note there's a race condition here - if two devices do these steps at the same time, last write + // wins, and the first writer will send tracking with an ID that doesn't match the one on the server + // until the next time account data is refreshed and this function is called (most likely on next + // page load). This will happen pretty infrequently, so we can tolerate the possibility. + analyticsID = analyticsIdGenerator(); + await client.setAccountData("im.vector.web.analytics_id", { id: analyticsID }); + } + this.posthog.identify(analyticsID); + } catch (e) { + // The above could fail due to network requests, but not essential to starting the application, + // so swallow it. + console.log("Unable to identify user for tracking" + e.toString()); + } } } @@ -307,18 +323,6 @@ export class PosthogAnalytics { await this.capture(eventName, properties); } - public async trackRoomEvent( - eventName: E["eventName"], - roomId: string, - properties: Omit, - ): Promise { - const updatedProperties = { - ...properties, - hashedRoomId: roomId ? await hashHex(roomId) : null, - }; - await this.trackPseudonymousEvent(eventName, updatedProperties); - } - public async trackPageView(durationMs: number): Promise { const hash = window.location.hash; @@ -349,7 +353,7 @@ export class PosthogAnalytics { // Identify the user (via hashed user ID) to posthog if anonymity is pseudonmyous this.setAnonymity(PosthogAnalytics.getAnonymityFromSettings()); if (userId && this.getAnonymity() == Anonymity.Pseudonymous) { - await this.identifyUser(userId); + await this.identifyUser(MatrixClientPeg.get(), PosthogAnalytics.getRandomAnalyticsId); } } } diff --git a/src/Resend.ts b/src/Resend.ts index 38b84a28e0..be9fb9550b 100644 --- a/src/Resend.ts +++ b/src/Resend.ts @@ -48,11 +48,6 @@ export default class Resend { // XXX: temporary logging to try to diagnose // https://github.com/vector-im/element-web/issues/3148 console.log('Resend got send failure: ' + err.name + '(' + err + ')'); - - dis.dispatch({ - action: 'message_send_failed', - event: event, - }); }); } diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index 2748fda35a..ac7875b920 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -26,10 +26,9 @@ import { SettingLevel } from "../../../../settings/SettingLevel"; import Field from '../../../../components/views/elements/Field'; import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import DialogButtons from "../../../../components/views/elements/DialogButtons"; +import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps"; -interface IProps { - onFinished: (confirmed: boolean) => void; -} +interface IProps extends IDialogProps {} interface IState { eventIndexSize: number; diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 332b6cd318..d65f8e3a10 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -322,10 +322,16 @@ export class ContextMenu extends React.PureComponent { const menuClasses = classNames({ 'mx_ContextualMenu': true, - 'mx_ContextualMenu_left': !hasChevron && position.left, - 'mx_ContextualMenu_right': !hasChevron && position.right, - 'mx_ContextualMenu_top': !hasChevron && position.top, - 'mx_ContextualMenu_bottom': !hasChevron && position.bottom, + /** + * In some cases we may get the number of 0, which still means that we're supposed to properly + * add the specific position class, but as it was falsy things didn't work as intended. + * In addition, defensively check for counter cases where we may get more than one value, + * even if we shouldn't. + */ + 'mx_ContextualMenu_left': !hasChevron && position.left !== undefined && !position.right, + 'mx_ContextualMenu_right': !hasChevron && position.right !== undefined && !position.left, + 'mx_ContextualMenu_top': !hasChevron && position.top !== undefined && !position.bottom, + 'mx_ContextualMenu_bottom': !hasChevron && position.bottom !== undefined && !position.top, 'mx_ContextualMenu_withChevron_left': chevronFace === ChevronFace.Left, 'mx_ContextualMenu_withChevron_right': chevronFace === ChevronFace.Right, 'mx_ContextualMenu_withChevron_top': chevronFace === ChevronFace.Top, @@ -404,17 +410,27 @@ export class ContextMenu extends React.PureComponent { } } +export type ToRightOf = { + left: number; + top: number; + chevronOffset: number; +}; + // Placement method for to position context menu to right of elementRect with chevronOffset -export const toRightOf = (elementRect: Pick, chevronOffset = 12) => { +export const toRightOf = (elementRect: Pick, chevronOffset = 12): ToRightOf => { const left = elementRect.right + window.pageXOffset + 3; let top = elementRect.top + (elementRect.height / 2) + window.pageYOffset; top -= chevronOffset + 8; // where 8 is half the height of the chevron return { left, top, chevronOffset }; }; +export type AboveLeftOf = IPosition & { + chevronFace: ChevronFace; +}; + // Placement method for to position context menu right-aligned and flowing to the left of elementRect, // and either above or below: wherever there is more space (maybe this should be aboveOrBelowLeftOf?) -export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None, vPadding = 0) => { +export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None, vPadding = 0): AboveLeftOf => { const menuOptions: IPosition & { chevronFace: ChevronFace } = { chevronFace }; const buttonRight = elementRect.right + window.pageXOffset; diff --git a/src/components/structures/EmbeddedPage.js b/src/components/structures/EmbeddedPage.tsx similarity index 74% rename from src/components/structures/EmbeddedPage.js rename to src/components/structures/EmbeddedPage.tsx index 037a0eba2a..ec37eab254 100644 --- a/src/components/structures/EmbeddedPage.js +++ b/src/components/structures/EmbeddedPage.tsx @@ -17,7 +17,6 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import request from 'browser-request'; import { _t } from '../../languageHandler'; import sanitizeHtml from 'sanitize-html'; @@ -26,38 +25,43 @@ import { MatrixClientPeg } from '../../MatrixClientPeg'; import classnames from 'classnames'; import MatrixClientContext from "../../contexts/MatrixClientContext"; import AutoHideScrollbar from "./AutoHideScrollbar"; +import { ActionPayload } from "../../dispatcher/payloads"; -export default class EmbeddedPage extends React.PureComponent { - static propTypes = { - // URL to request embedded page content from - url: PropTypes.string, - // Class name prefix to apply for a given instance - className: PropTypes.string, - // Whether to wrap the page in a scrollbar - scrollbar: PropTypes.bool, - // Map of keys to replace with values, e.g {$placeholder: "value"} - replaceMap: PropTypes.object, - }; +interface IProps { + // URL to request embedded page content from + url?: string; + // Class name prefix to apply for a given instance + className?: string; + // Whether to wrap the page in a scrollbar + scrollbar?: boolean; + // Map of keys to replace with values, e.g {$placeholder: "value"} + replaceMap?: Map; +} - static contextType = MatrixClientContext; +interface IState { + page: string; +} - constructor(props, context) { +export default class EmbeddedPage extends React.PureComponent { + public static contextType = MatrixClientContext; + private unmounted = false; + private dispatcherRef: string = null; + + constructor(props: IProps, context: typeof MatrixClientContext) { super(props, context); - this._dispatcherRef = null; - this.state = { page: '', }; } - translate(s) { + protected translate(s: string): string { // default implementation - skins may wish to extend this return sanitizeHtml(_t(s)); } - componentDidMount() { - this._unmounted = false; + public componentDidMount(): void { + this.unmounted = false; if (!this.props.url) { return; @@ -70,7 +74,7 @@ export default class EmbeddedPage extends React.PureComponent { request( { method: "GET", url: this.props.url }, (err, response, body) => { - if (this._unmounted) { + if (this.unmounted) { return; } @@ -92,22 +96,22 @@ export default class EmbeddedPage extends React.PureComponent { }, ); - this._dispatcherRef = dis.register(this.onAction); + this.dispatcherRef = dis.register(this.onAction); } - componentWillUnmount() { - this._unmounted = true; - if (this._dispatcherRef !== null) dis.unregister(this._dispatcherRef); + public componentWillUnmount(): void { + this.unmounted = true; + if (this.dispatcherRef !== null) dis.unregister(this.dispatcherRef); } - onAction = (payload) => { + private onAction = (payload: ActionPayload): void => { // HACK: Workaround for the context's MatrixClient not being set up at render time. if (payload.action === 'client_started') { this.forceUpdate(); } }; - render() { + public render(): JSX.Element { // HACK: Workaround for the context's MatrixClient not updating. const client = this.context || MatrixClientPeg.get(); const isGuest = client ? client.isGuest() : true; diff --git a/src/components/structures/GenericErrorPage.js b/src/components/structures/GenericErrorPage.tsx similarity index 84% rename from src/components/structures/GenericErrorPage.js rename to src/components/structures/GenericErrorPage.tsx index 017d365273..d124c7111a 100644 --- a/src/components/structures/GenericErrorPage.js +++ b/src/components/structures/GenericErrorPage.tsx @@ -15,16 +15,15 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { replaceableComponent } from "../../utils/replaceableComponent"; -@replaceableComponent("structures.GenericErrorPage") -export default class GenericErrorPage extends React.PureComponent { - static propTypes = { - title: PropTypes.object.isRequired, // jsx for title - message: PropTypes.object.isRequired, // jsx to display - }; +interface IProps { + title: React.ReactNode; + message: React.ReactNode; +} +@replaceableComponent("structures.GenericErrorPage") +export default class GenericErrorPage extends React.PureComponent { render() { return
diff --git a/src/components/structures/GroupFilterPanel.tsx b/src/components/structures/GroupFilterPanel.tsx index 3e7c6e9b17..b6d05efa87 100644 --- a/src/components/structures/GroupFilterPanel.tsx +++ b/src/components/structures/GroupFilterPanel.tsx @@ -146,19 +146,13 @@ class GroupFilterPanel extends React.Component; - } - let createButton = ( - { betaDot } - + className="mx_TagTile mx_TagTile_plus" + /> ); if (SettingsStore.getValue("feature_communities_v2_prototypes")) { diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.tsx similarity index 54% rename from src/components/structures/IndicatorScrollbar.js rename to src/components/structures/IndicatorScrollbar.tsx index 3e1940955b..85de659481 100644 --- a/src/components/structures/IndicatorScrollbar.js +++ b/src/components/structures/IndicatorScrollbar.tsx @@ -14,34 +14,39 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; -import PropTypes from "prop-types"; +import React, { createRef } from "react"; import AutoHideScrollbar from "./AutoHideScrollbar"; import { replaceableComponent } from "../../utils/replaceableComponent"; +interface IProps { + // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator + // and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning + // by the parent element. + trackHorizontalOverflow?: boolean; + + // If true, when the user tries to use their mouse wheel in the component it will + // scroll horizontally rather than vertically. This should only be used on components + // with no vertical scroll opportunity. + verticalScrollsHorizontally?: boolean; + + children: React.ReactNode; + className: string; +} + +interface IState { + leftIndicatorOffset: number | string; + rightIndicatorOffset: number | string; +} + @replaceableComponent("structures.IndicatorScrollbar") -export default class IndicatorScrollbar extends React.Component { - static propTypes = { - // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator - // and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning - // by the parent element. - trackHorizontalOverflow: PropTypes.bool, +export default class IndicatorScrollbar extends React.Component { + private autoHideScrollbar = createRef(); + private scrollElement: HTMLDivElement; + private likelyTrackpadUser: boolean = null; + private checkAgainForTrackpad = 0; // ts in milliseconds to recheck this._likelyTrackpadUser - // If true, when the user tries to use their mouse wheel in the component it will - // scroll horizontally rather than vertically. This should only be used on components - // with no vertical scroll opportunity. - verticalScrollsHorizontally: PropTypes.bool, - }; - - constructor(props) { + constructor(props: IProps) { super(props); - this._collectScroller = this._collectScroller.bind(this); - this._collectScrollerComponent = this._collectScrollerComponent.bind(this); - this.checkOverflow = this.checkOverflow.bind(this); - this._scrollElement = null; - this._autoHideScrollbar = null; - this._likelyTrackpadUser = null; - this._checkAgainForTrackpad = 0; // ts in milliseconds to recheck this._likelyTrackpadUser this.state = { leftIndicatorOffset: 0, @@ -49,30 +54,19 @@ export default class IndicatorScrollbar extends React.Component { }; } - moveToOrigin() { - if (!this._scrollElement) return; - - this._scrollElement.scrollLeft = 0; - this._scrollElement.scrollTop = 0; - } - - _collectScroller(scroller) { - if (scroller && !this._scrollElement) { - this._scrollElement = scroller; + private collectScroller = (scroller: HTMLDivElement): void => { + if (scroller && !this.scrollElement) { + this.scrollElement = scroller; // Using the passive option to not block the main thread // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners - this._scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true }); + this.scrollElement.addEventListener("scroll", this.checkOverflow, { passive: true }); this.checkOverflow(); } - } + }; - _collectScrollerComponent(autoHideScrollbar) { - this._autoHideScrollbar = autoHideScrollbar; - } - - componentDidUpdate(prevProps) { - const prevLen = prevProps && prevProps.children && prevProps.children.length || 0; - const curLen = this.props.children && this.props.children.length || 0; + public componentDidUpdate(prevProps: IProps): void { + const prevLen = React.Children.count(prevProps.children); + const curLen = React.Children.count(this.props.children); // check overflow only if amount of children changes. // if we don't guard here, we end up with an infinite // render > componentDidUpdate > checkOverflow > setState > render loop @@ -81,62 +75,58 @@ export default class IndicatorScrollbar extends React.Component { } } - componentDidMount() { + public componentDidMount(): void { this.checkOverflow(); } - checkOverflow() { - const hasTopOverflow = this._scrollElement.scrollTop > 0; - const hasBottomOverflow = this._scrollElement.scrollHeight > - (this._scrollElement.scrollTop + this._scrollElement.clientHeight); - const hasLeftOverflow = this._scrollElement.scrollLeft > 0; - const hasRightOverflow = this._scrollElement.scrollWidth > - (this._scrollElement.scrollLeft + this._scrollElement.clientWidth); + private checkOverflow = (): void => { + const hasTopOverflow = this.scrollElement.scrollTop > 0; + const hasBottomOverflow = this.scrollElement.scrollHeight > + (this.scrollElement.scrollTop + this.scrollElement.clientHeight); + const hasLeftOverflow = this.scrollElement.scrollLeft > 0; + const hasRightOverflow = this.scrollElement.scrollWidth > + (this.scrollElement.scrollLeft + this.scrollElement.clientWidth); if (hasTopOverflow) { - this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow"); + this.scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow"); } else { - this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow"); + this.scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow"); } if (hasBottomOverflow) { - this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow"); + this.scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow"); } else { - this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow"); + this.scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow"); } if (hasLeftOverflow) { - this._scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow"); + this.scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow"); } else { - this._scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow"); + this.scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow"); } if (hasRightOverflow) { - this._scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow"); + this.scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow"); } else { - this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow"); + this.scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow"); } if (this.props.trackHorizontalOverflow) { this.setState({ // Offset from absolute position of the container - leftIndicatorOffset: hasLeftOverflow ? `${this._scrollElement.scrollLeft}px` : '0', + leftIndicatorOffset: hasLeftOverflow ? `${this.scrollElement.scrollLeft}px` : '0', // Negative because we're coming from the right - rightIndicatorOffset: hasRightOverflow ? `-${this._scrollElement.scrollLeft}px` : '0', + rightIndicatorOffset: hasRightOverflow ? `-${this.scrollElement.scrollLeft}px` : '0', }); } - } + }; - getScrollTop() { - return this._autoHideScrollbar.getScrollTop(); - } - - componentWillUnmount() { - if (this._scrollElement) { - this._scrollElement.removeEventListener("scroll", this.checkOverflow); + public componentWillUnmount(): void { + if (this.scrollElement) { + this.scrollElement.removeEventListener("scroll", this.checkOverflow); } } - onMouseWheel = (e) => { - if (this.props.verticalScrollsHorizontally && this._scrollElement) { + private onMouseWheel = (e: React.WheelEvent): void => { + if (this.props.verticalScrollsHorizontally && this.scrollElement) { // xyThreshold is the amount of horizontal motion required for the component to // ignore the vertical delta in a scroll. Used to stop trackpads from acting in // strange ways. Should be positive. @@ -150,19 +140,19 @@ export default class IndicatorScrollbar extends React.Component { // for at least the next 1 minute. const now = new Date().getTime(); if (Math.abs(e.deltaX) > 0) { - this._likelyTrackpadUser = true; - this._checkAgainForTrackpad = now + (1 * 60 * 1000); + this.likelyTrackpadUser = true; + this.checkAgainForTrackpad = now + (1 * 60 * 1000); } else { // if we haven't seen any horizontal scrolling for a while, assume // the user might have plugged in a mousewheel - if (this._likelyTrackpadUser && now >= this._checkAgainForTrackpad) { - this._likelyTrackpadUser = false; + if (this.likelyTrackpadUser && now >= this.checkAgainForTrackpad) { + this.likelyTrackpadUser = false; } } // don't mess with the horizontal scroll for trackpad users // See https://github.com/vector-im/element-web/issues/10005 - if (this._likelyTrackpadUser) { + if (this.likelyTrackpadUser) { return; } @@ -178,13 +168,13 @@ export default class IndicatorScrollbar extends React.Component { // noinspection JSSuspiciousNameCombination const val = Math.abs(e.deltaY) < 25 ? (e.deltaY + additionalScroll) : e.deltaY; - this._scrollElement.scrollLeft += val * yRetention; + this.scrollElement.scrollLeft += val * yRetention; } } }; - render() { - // eslint-disable-next-line no-unused-vars + public render(): JSX.Element { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props; const leftIndicatorStyle = { left: this.state.leftIndicatorOffset }; @@ -195,8 +185,8 @@ export default class IndicatorScrollbar extends React.Component { ?
: null; return ( diff --git a/src/components/structures/LeftPanelWidget.tsx b/src/components/structures/LeftPanelWidget.tsx index 331e428355..6b91acb5f8 100644 --- a/src/components/structures/LeftPanelWidget.tsx +++ b/src/components/structures/LeftPanelWidget.tsx @@ -76,7 +76,6 @@ const LeftPanelWidget: React.FC = () => { { + defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Preferences, + }); +}; + +// XXX: temporary community migration component, reuses SpaceRoomView & SpacePreview classes for simplicity +const LegacyCommunityPreview = ({ groupId }: IProps) => { + const cli = useContext(MatrixClientContext); + + const groupSummary = useAsyncMemo(() => cli.getGroupSummary(groupId), [cli, groupId]); + + if (!groupSummary) { + return
+
+
+ +
+
+
; + } + + let visibilitySection: JSX.Element; + if (groupSummary.profile.is_public) { + visibilitySection = + { _t("Public community") } + ; + } else { + visibilitySection = + { _t("Private community") } + ; + } + + return
+ +
+
+ +

+ { groupSummary.profile.name } +

+
+ { visibilitySection } +
+
e && linkifyElement(e)}> + { groupSummary.profile.short_description } +
+
+ { groupSummary.user?.membership === "join" + ? _t("To view %(communityName)s, swap to communities in your preferences", { + communityName: groupSummary.profile.name, + }, { + a: sub => ( + { sub } + ), + }) + : _t("To join %(communityName)s, swap to communities in your preferences", { + communityName: groupSummary.profile.name, + }, { + a: sub => ( + { sub } + ), + }) + } +
+
+
+
+
; +}; + +export default LegacyCommunityPreview; diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index bbe0e42a0a..84e0b446f5 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -69,6 +69,7 @@ import classNames from 'classnames'; import GroupFilterPanel from './GroupFilterPanel'; import CustomRoomTagPanel from './CustomRoomTagPanel'; import { mediaFromMxc } from "../../customisations/Media"; +import LegacyCommunityPreview from "./LegacyCommunityPreview"; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -629,11 +630,15 @@ class LoggedInView extends React.Component { pageElement = ; break; case PageTypes.GroupView: - pageElement = ; + if (SpaceStore.spacesEnabled) { + pageElement = ; + } else { + pageElement = ; + } break; } diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.tsx similarity index 68% rename from src/components/structures/MainSplit.js rename to src/components/structures/MainSplit.tsx index 69d3bd0b51..af7645767d 100644 --- a/src/components/structures/MainSplit.js +++ b/src/components/structures/MainSplit.tsx @@ -16,25 +16,35 @@ limitations under the License. */ import React from 'react'; -import { Resizable } from 're-resizable'; +import { NumberSize, Resizable } from 're-resizable'; import { replaceableComponent } from "../../utils/replaceableComponent"; +import ResizeNotifier from "../../utils/ResizeNotifier"; +import { Direction } from "re-resizable/lib/resizer"; + +interface IProps { + resizeNotifier: ResizeNotifier; + collapsedRhs?: boolean; + panel?: JSX.Element; +} @replaceableComponent("structures.MainSplit") -export default class MainSplit extends React.Component { - _onResizeStart = () => { +export default class MainSplit extends React.Component { + private onResizeStart = (): void => { this.props.resizeNotifier.startResizing(); }; - _onResize = () => { + private onResize = (): void => { this.props.resizeNotifier.notifyRightHandleResized(); }; - _onResizeStop = (event, direction, refToElement, delta) => { + private onResizeStop = ( + event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize, + ): void => { this.props.resizeNotifier.stopResizing(); - window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width); + window.localStorage.setItem("mx_rhs_size", (this.loadSidePanelSize().width + delta.width).toString()); }; - _loadSidePanelSize() { + private loadSidePanelSize(): {height: string | number, width: number} { let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10); if (isNaN(rhsSize)) { @@ -47,7 +57,7 @@ export default class MainSplit extends React.Component { }; } - render() { + public render(): JSX.Element { const bodyView = React.Children.only(this.props.children); const panelView = this.props.panel; @@ -56,7 +66,7 @@ export default class MainSplit extends React.Component { let children; if (hasResizer) { children = diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 531dc9fbe9..2ab68998c3 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -143,7 +143,7 @@ export enum Views { SOFT_LOGOUT, } -const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas"]; +const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas", "welcome"]; // Actions that are redirected through the onboarding process prior to being // re-dispatched. NOTE: some actions are non-trivial and would require @@ -1800,11 +1800,6 @@ export default class MatrixChat extends React.PureComponent { subAction: params.action, }); } else if (screen.indexOf('group/') === 0) { - if (SpaceStore.spacesEnabled) { - dis.dispatch({ action: "view_home_page" }); - return; - } - const groupId = screen.substring(6); // TODO: Check valid group ID @@ -1897,15 +1892,10 @@ export default class MatrixChat extends React.PureComponent { onSendEvent(roomId: string, event: MatrixEvent) { const cli = MatrixClientPeg.get(); - if (!cli) { - dis.dispatch({ action: 'message_send_failed' }); - return; - } + if (!cli) return; cli.sendEvent(roomId, event.getType(), event.getContent()).then(() => { dis.dispatch({ action: 'message_sent' }); - }, (err) => { - dis.dispatch({ action: 'message_send_failed' }); }); } diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 589947af73..74f281405c 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -448,7 +448,9 @@ export default class MessagePanel extends React.Component { // Always show highlighted event if (this.props.highlightedEventId === mxEv.getId()) return true; - if (mxEv.replyInThread + // Checking if the message has a "parentEventId" as we do not + // want to hide the root event of the thread + if (mxEv.replyInThread && mxEv.parentEventId && this.props.hideThreadedMessages && SettingsStore.getValue("feature_thread")) { return false; diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js index dab18c4161..2239325f1b 100644 --- a/src/components/structures/MyGroups.js +++ b/src/components/structures/MyGroups.js @@ -25,7 +25,6 @@ import AccessibleButton from '../views/elements/AccessibleButton'; import MatrixClientContext from "../../contexts/MatrixClientContext"; import AutoHideScrollbar from "./AutoHideScrollbar"; import { replaceableComponent } from "../../utils/replaceableComponent"; -import BetaCard from "../views/beta/BetaCard"; @replaceableComponent("structures.MyGroups") export default class MyGroups extends React.Component { @@ -138,7 +137,6 @@ export default class MyGroups extends React.Component {
*/ }
-
{ contentHeader } { content } diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.tsx similarity index 71% rename from src/components/structures/RoomStatusBar.js rename to src/components/structures/RoomStatusBar.tsx index 8b10c54cba..82f68bc435 100644 --- a/src/components/structures/RoomStatusBar.js +++ b/src/components/structures/RoomStatusBar.tsx @@ -15,95 +15,110 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { _t, _td } from '../../languageHandler'; -import { MatrixClientPeg } from '../../MatrixClientPeg'; import Resend from '../../Resend'; import dis from '../../dispatcher/dispatcher'; import { messageForResourceLimitError } from '../../utils/ErrorUtils'; import { Action } from "../../dispatcher/actions"; import { replaceableComponent } from "../../utils/replaceableComponent"; -import { EventStatus } from "matrix-js-sdk/src/models/event"; +import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event"; import NotificationBadge from "../views/rooms/NotificationBadge"; import { StaticNotificationState } from "../../stores/notifications/StaticNotificationState"; import AccessibleButton from "../views/elements/AccessibleButton"; import InlineSpinner from "../views/elements/InlineSpinner"; +import { SyncState } from "matrix-js-sdk/src/sync.api"; +import { ISyncStateData } from "matrix-js-sdk/src/sync"; +import { Room } from "matrix-js-sdk/src/models/room"; +import MatrixClientContext from "../../contexts/MatrixClientContext"; const STATUS_BAR_HIDDEN = 0; const STATUS_BAR_EXPANDED = 1; const STATUS_BAR_EXPANDED_LARGE = 2; -export function getUnsentMessages(room) { +export function getUnsentMessages(room: Room): MatrixEvent[] { if (!room) { return []; } return room.getPendingEvents().filter(function(ev) { return ev.status === EventStatus.NOT_SENT; }); } +interface IProps { + // the room this statusbar is representing. + room: Room; + + // true if the room is being peeked at. This affects components that shouldn't + // logically be shown when peeking, such as a prompt to invite people to a room. + isPeeking?: boolean; + // callback for when the user clicks on the 'resend all' button in the + // 'unsent messages' bar + onResendAllClick?: () => void; + + // callback for when the user clicks on the 'cancel all' button in the + // 'unsent messages' bar + onCancelAllClick?: () => void; + + // callback for when the user clicks on the 'invite others' button in the + // 'you are alone' bar + onInviteClick?: () => void; + + // callback for when we do something that changes the size of the + // status bar. This is used to trigger a re-layout in the parent + // component. + onResize?: () => void; + + // callback for when the status bar can be hidden from view, as it is + // not displaying anything + onHidden?: () => void; + + // callback for when the status bar is displaying something and should + // be visible + onVisible?: () => void; +} + +interface IState { + syncState: SyncState; + syncStateData: ISyncStateData; + unsentMessages: MatrixEvent[]; + isResending: boolean; +} + @replaceableComponent("structures.RoomStatusBar") -export default class RoomStatusBar extends React.PureComponent { - static propTypes = { - // the room this statusbar is representing. - room: PropTypes.object.isRequired, +export default class RoomStatusBar extends React.PureComponent { + public static contextType = MatrixClientContext; - // true if the room is being peeked at. This affects components that shouldn't - // logically be shown when peeking, such as a prompt to invite people to a room. - isPeeking: PropTypes.bool, + constructor(props: IProps, context: typeof MatrixClientContext) { + super(props, context); - // callback for when the user clicks on the 'resend all' button in the - // 'unsent messages' bar - onResendAllClick: PropTypes.func, - - // callback for when the user clicks on the 'cancel all' button in the - // 'unsent messages' bar - onCancelAllClick: PropTypes.func, - - // callback for when the user clicks on the 'invite others' button in the - // 'you are alone' bar - onInviteClick: PropTypes.func, - - // callback for when we do something that changes the size of the - // status bar. This is used to trigger a re-layout in the parent - // component. - onResize: PropTypes.func, - - // callback for when the status bar can be hidden from view, as it is - // not displaying anything - onHidden: PropTypes.func, - - // callback for when the status bar is displaying something and should - // be visible - onVisible: PropTypes.func, - }; - - state = { - syncState: MatrixClientPeg.get().getSyncState(), - syncStateData: MatrixClientPeg.get().getSyncStateData(), - unsentMessages: getUnsentMessages(this.props.room), - isResending: false, - }; - - componentDidMount() { - MatrixClientPeg.get().on("sync", this.onSyncStateChange); - MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated); - - this._checkSize(); + this.state = { + syncState: this.context.getSyncState(), + syncStateData: this.context.getSyncStateData(), + unsentMessages: getUnsentMessages(this.props.room), + isResending: false, + }; } - componentDidUpdate() { - this._checkSize(); + public componentDidMount(): void { + const client = this.context; + client.on("sync", this.onSyncStateChange); + client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); + + this.checkSize(); } - componentWillUnmount() { + public componentDidUpdate(): void { + this.checkSize(); + } + + public componentWillUnmount(): void { // we may have entirely lost our client as we're logging out before clicking login on the guest bar... - const client = MatrixClientPeg.get(); + const client = this.context; if (client) { client.removeListener("sync", this.onSyncStateChange); - client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated); + client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); } } - onSyncStateChange = (state, prevState, data) => { + private onSyncStateChange = (state: SyncState, prevState: SyncState, data: ISyncStateData): void => { if (state === "SYNCING" && prevState === "SYNCING") { return; } @@ -113,7 +128,7 @@ export default class RoomStatusBar extends React.PureComponent { }); }; - _onResendAllClick = () => { + private onResendAllClick = (): void => { Resend.resendUnsentEvents(this.props.room).then(() => { this.setState({ isResending: false }); }); @@ -121,12 +136,12 @@ export default class RoomStatusBar extends React.PureComponent { dis.fire(Action.FocusSendMessageComposer); }; - _onCancelAllClick = () => { + private onCancelAllClick = (): void => { Resend.cancelUnsentEvents(this.props.room); dis.fire(Action.FocusSendMessageComposer); }; - _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => { + private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { if (room.roomId !== this.props.room.roomId) return; const messages = getUnsentMessages(this.props.room); this.setState({ @@ -136,8 +151,8 @@ export default class RoomStatusBar extends React.PureComponent { }; // Check whether current size is greater than 0, if yes call props.onVisible - _checkSize() { - if (this._getSize()) { + private checkSize(): void { + if (this.getSize()) { if (this.props.onVisible) this.props.onVisible(); } else { if (this.props.onHidden) this.props.onHidden(); @@ -147,8 +162,8 @@ export default class RoomStatusBar extends React.PureComponent { // We don't need the actual height - just whether it is likely to have // changed - so we use '0' to indicate normal size, and other values to // indicate other sizes. - _getSize() { - if (this._shouldShowConnectionError()) { + private getSize(): number { + if (this.shouldShowConnectionError()) { return STATUS_BAR_EXPANDED; } else if (this.state.unsentMessages.length > 0 || this.state.isResending) { return STATUS_BAR_EXPANDED_LARGE; @@ -156,7 +171,7 @@ export default class RoomStatusBar extends React.PureComponent { return STATUS_BAR_HIDDEN; } - _shouldShowConnectionError() { + private shouldShowConnectionError(): boolean { // no conn bar trumps the "some not sent" msg since you can't resend without // a connection! // There's one situation in which we don't show this 'no connection' bar, and that's @@ -164,12 +179,12 @@ export default class RoomStatusBar extends React.PureComponent { const errorIsMauError = Boolean( this.state.syncStateData && this.state.syncStateData.error && - this.state.syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED', + this.state.syncStateData.error.name === 'M_RESOURCE_LIMIT_EXCEEDED', ); return this.state.syncState === "ERROR" && !errorIsMauError; } - _getUnsentMessageContent() { + private getUnsentMessageContent(): JSX.Element { const unsentMessages = this.state.unsentMessages; let title; @@ -221,10 +236,10 @@ export default class RoomStatusBar extends React.PureComponent { } let buttonRow = <> - + { _t("Delete all") } - + { _t("Retry all") } ; @@ -260,8 +275,8 @@ export default class RoomStatusBar extends React.PureComponent { ; } - render() { - if (this._shouldShowConnectionError()) { + public render(): JSX.Element { + if (this.shouldShowConnectionError()) { return (
@@ -287,7 +302,7 @@ export default class RoomStatusBar extends React.PureComponent { } if (this.state.unsentMessages.length > 0 || this.state.isResending) { - return this._getUnsentMessageContent(); + return this.getUnsentMessageContent(); } return null; diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.tsx similarity index 62% rename from src/components/structures/SearchBox.js rename to src/components/structures/SearchBox.tsx index 6d310662e3..82fe689022 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.tsx @@ -16,7 +16,6 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { Key } from '../../Keyboard'; import dis from '../../dispatcher/dispatcher'; import { throttle } from 'lodash'; @@ -24,106 +23,116 @@ import AccessibleButton from '../../components/views/elements/AccessibleButton'; import classNames from 'classnames'; import { replaceableComponent } from "../../utils/replaceableComponent"; +interface IProps { + onSearch?: (query: string) => void; + onCleared?: (source?: string) => void; + onKeyDown?: (ev: React.KeyboardEvent) => void; + onFocus?: (ev: React.FocusEvent) => void; + onBlur?: (ev: React.FocusEvent) => void; + className?: string; + placeholder: string; + blurredPlaceholder?: string; + autoFocus?: boolean; + initialValue?: string; + collapsed?: boolean; + + // If true, the search box will focus and clear itself + // on room search focus action (it would be nicer to take + // this functionality out, but not obvious how that would work) + enableRoomSearchFocus?: boolean; +} + +interface IState { + searchTerm: string; + blurred: boolean; +} + @replaceableComponent("structures.SearchBox") -export default class SearchBox extends React.Component { - static propTypes = { - onSearch: PropTypes.func, - onCleared: PropTypes.func, - onKeyDown: PropTypes.func, - className: PropTypes.string, - placeholder: PropTypes.string.isRequired, - autoFocus: PropTypes.bool, - initialValue: PropTypes.string, +export default class SearchBox extends React.Component { + private dispatcherRef: string; + private search = createRef(); - // If true, the search box will focus and clear itself - // on room search focus action (it would be nicer to take - // this functionality out, but not obvious how that would work) - enableRoomSearchFocus: PropTypes.bool, - }; - - static defaultProps = { + static defaultProps: Partial = { enableRoomSearchFocus: false, }; - constructor(props) { + constructor(props: IProps) { super(props); - this._search = createRef(); - this.state = { - searchTerm: this.props.initialValue || "", + searchTerm: props.initialValue || "", blurred: true, }; } - componentDidMount() { + public componentDidMount(): void { this.dispatcherRef = dis.register(this.onAction); } - componentWillUnmount() { + public componentWillUnmount(): void { dis.unregister(this.dispatcherRef); } - onAction = payload => { + private onAction = (payload): void => { if (!this.props.enableRoomSearchFocus) return; switch (payload.action) { case 'view_room': - if (this._search.current && payload.clear_search) { - this._clearSearch(); + if (this.search.current && payload.clear_search) { + this.clearSearch(); } break; case 'focus_room_filter': - if (this._search.current) { - this._search.current.focus(); + if (this.search.current) { + this.search.current.focus(); } break; } }; - onChange = () => { - if (!this._search.current) return; - this.setState({ searchTerm: this._search.current.value }); + private onChange = (): void => { + if (!this.search.current) return; + this.setState({ searchTerm: this.search.current.value }); this.onSearch(); }; - onSearch = throttle(() => { - this.props.onSearch(this._search.current.value); + private onSearch = throttle((): void => { + this.props.onSearch(this.search.current.value); }, 200, { trailing: true, leading: true }); - _onKeyDown = ev => { + private onKeyDown = (ev: React.KeyboardEvent): void => { switch (ev.key) { case Key.ESCAPE: - this._clearSearch("keyboard"); + this.clearSearch("keyboard"); break; } if (this.props.onKeyDown) this.props.onKeyDown(ev); }; - _onFocus = ev => { + private onFocus = (ev: React.FocusEvent): void => { this.setState({ blurred: false }); - ev.target.select(); + (ev.target as HTMLInputElement).select(); if (this.props.onFocus) { this.props.onFocus(ev); } }; - _onBlur = ev => { + private onBlur = (ev: React.FocusEvent): void => { this.setState({ blurred: true }); if (this.props.onBlur) { this.props.onBlur(ev); } }; - _clearSearch(source) { - this._search.current.value = ""; + private clearSearch(source?: string): void { + this.search.current.value = ""; this.onChange(); if (this.props.onCleared) { this.props.onCleared(source); } } - render() { + public render(): JSX.Element { // check for collapsed here and // not at parent so we keep // searchTerm in our state @@ -136,7 +145,7 @@ export default class SearchBox extends React.Component { key="button" tabIndex={-1} className="mx_SearchBox_closeButton" - onClick={() => {this._clearSearch("button"); }} + onClick={() => {this.clearSearch("button"); }} />) : undefined; // show a shorter placeholder when blurred, if requested @@ -151,13 +160,13 @@ export default class SearchBox extends React.Component { = ({ }) => { const cli = useContext(MatrixClientContext); const joinedRoom = cli.getRoom(room.room_id)?.getMyMembership() === "join" ? cli.getRoom(room.room_id) : null; - const name = joinedRoom?.name || room.name || room.canonical_alias || room.aliases?.[0] + const joinedRoomName = useEventEmitterState(joinedRoom, "Room.name", room => room?.name); + const name = joinedRoomName || room.name || room.canonical_alias || room.aliases?.[0] || (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room")); const [showChildren, toggleShowChildren] = useStateToggle(true); @@ -96,12 +105,12 @@ const Tile: React.FC = ({ const onPreviewClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); - onViewRoomClick(false); + onViewRoomClick(false, room.room_type as RoomType); }; const onJoinClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); - onViewRoomClick(true); + onViewRoomClick(true, room.room_type as RoomType); }; let button; @@ -278,7 +287,13 @@ const Tile: React.FC = ({ ; }; -export const showRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: string, autoJoin = false) => { +export const showRoom = ( + cli: MatrixClient, + hierarchy: RoomHierarchy, + roomId: string, + autoJoin = false, + roomType?: RoomType, +) => { const room = hierarchy.roomMap.get(roomId); // Don't let the user view a room they won't be able to either peek or join: @@ -303,7 +318,8 @@ export const showRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: st avatarUrl: room.avatar_url, // XXX: This logic is duplicated from the JS SDK which would normally decide what the name is. name: room.name || roomAlias || _t("Unnamed room"), - }, + roomType, + } as IOOBData, }); }; @@ -313,7 +329,7 @@ interface IHierarchyLevelProps { hierarchy: RoomHierarchy; parents: Set; selectedMap?: Map>; - onViewRoomClick(roomId: string, autoJoin: boolean): void; + onViewRoomClick(roomId: string, autoJoin: boolean, roomType?: RoomType): void; onToggleClick?(parentId: string, childId: string): void; } @@ -351,8 +367,8 @@ export const HierarchyLevel = ({ room={room} suggested={hierarchy.isSuggested(root.room_id, room.room_id)} selected={selectedMap?.get(root.room_id)?.has(room.room_id)} - onViewRoomClick={(autoJoin) => { - onViewRoomClick(room.room_id, autoJoin); + onViewRoomClick={(autoJoin, roomType) => { + onViewRoomClick(room.room_id, autoJoin, roomType); }} hasPermissions={hasPermissions} onToggleClick={onToggleClick ? () => onToggleClick(root.room_id, room.room_id) : undefined} @@ -371,8 +387,8 @@ export const HierarchyLevel = ({ }).length} suggested={hierarchy.isSuggested(root.room_id, space.room_id)} selected={selectedMap?.get(root.room_id)?.has(space.room_id)} - onViewRoomClick={(autoJoin) => { - onViewRoomClick(space.room_id, autoJoin); + onViewRoomClick={(autoJoin, roomType) => { + onViewRoomClick(space.room_id, autoJoin, roomType); }} hasPermissions={hasPermissions} onToggleClick={onToggleClick ? () => onToggleClick(root.room_id, space.room_id) : undefined} @@ -574,7 +590,7 @@ const SpaceHierarchy = ({ const { loading, rooms, hierarchy, loadMore } = useSpaceSummary(space); const filteredRoomSet = useMemo>(() => { - if (!rooms.length) return new Set(); + if (!rooms?.length) return new Set(); const lcQuery = query.toLowerCase().trim(); if (!lcQuery) return new Set(rooms); @@ -650,8 +666,8 @@ const SpaceHierarchy = ({ parents={new Set()} selectedMap={selected} onToggleClick={hasPermissions ? onToggleClick : undefined} - onViewRoomClick={(roomId, autoJoin) => { - showRoom(cli, hierarchy, roomId, autoJoin); + onViewRoomClick={(roomId, autoJoin, roomType) => { + showRoom(cli, hierarchy, roomId, autoJoin, roomType); }} /> ; diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 6bb0433448..4dfb1ddad8 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -78,6 +78,7 @@ import { CreateEventField, IGroupSummary } from "../views/dialogs/CreateSpaceFro import { useAsyncMemo } from "../../hooks/useAsyncMemo"; import Spinner from "../views/elements/Spinner"; import GroupAvatar from "../views/avatars/GroupAvatar"; +import { useDispatcher } from "../../hooks/useDispatcher"; interface IProps { space: Room; @@ -155,10 +156,10 @@ const SpaceInfo = ({ space }) => {
; }; -const onBetaClick = () => { +const onPreferencesClick = () => { defaultDispatcher.dispatch({ action: Action.ViewUserSettings, - initialTabId: UserTab.Labs, + initialTabId: UserTab.Preferences, }); }; @@ -191,6 +192,11 @@ interface ISpacePreviewProps { const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISpacePreviewProps) => { const cli = useContext(MatrixClientContext); const myMembership = useMyRoomMembership(space); + useDispatcher(defaultDispatcher, payload => { + if (payload.action === Action.JoinRoomError && payload.roomId === space.roomId) { + setBusy(false); // stop the spinner, join failed + } + }); const [busy, setBusy] = useState(false); @@ -280,15 +286,11 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp if (!spacesEnabled) { footer =
{ myMembership === "join" - ? _t("To view %(spaceName)s, turn on the Spaces beta", { - spaceName: space.name, - }, { - a: sub => { sub }, + ? _t("To view this Space, hide communities in your preferences", {}, { + a: sub => { sub }, }) - : _t("To join %(spaceName)s, turn on the Spaces beta", { - spaceName: space.name, - }, { - a: sub => { sub }, + : _t("To join this Space, hide communities in your preferences", {}, { + a: sub => { sub }, }) }
; @@ -725,7 +727,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
- + { _t("This is an experimental feature. For now, " + "new users receiving an invite will have to open the invite on to actually join.", {}, { b: sub => { sub }, diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index a0bccfdce9..ccf9d9d416 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from 'react'; import { MatrixEvent, Room } from 'matrix-js-sdk/src'; -import { Thread } from 'matrix-js-sdk/src/models/thread'; +import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; import BaseCard from "../views/right_panel/BaseCard"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; @@ -46,13 +46,13 @@ export default class ThreadPanel extends React.Component { } public componentDidMount(): void { - this.room.on("Thread.update", this.onThreadEventReceived); - this.room.on("Thread.ready", this.onThreadEventReceived); + this.room.on(ThreadEvent.Update, this.onThreadEventReceived); + this.room.on(ThreadEvent.Ready, this.onThreadEventReceived); } public componentWillUnmount(): void { - this.room.removeListener("Thread.update", this.onThreadEventReceived); - this.room.removeListener("Thread.ready", this.onThreadEventReceived); + this.room.removeListener(ThreadEvent.Update, this.onThreadEventReceived); + this.room.removeListener(ThreadEvent.Ready, this.onThreadEventReceived); } private onThreadEventReceived = () => this.updateThreads(); diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index 614d3c9f4b..dda4c06417 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -16,7 +16,7 @@ limitations under the License. import React from 'react'; import { MatrixEvent, Room } from 'matrix-js-sdk/src'; -import { Thread } from 'matrix-js-sdk/src/models/thread'; +import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; import BaseCard from "../views/right_panel/BaseCard"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; @@ -99,15 +99,15 @@ export default class ThreadView extends React.Component { thread = new Thread([mxEv], this.props.room, client); mxEv.setThread(thread); } - thread.on("Thread.update", this.updateThread); - thread.once("Thread.ready", this.updateThread); + thread.on(ThreadEvent.Update, this.updateThread); + thread.once(ThreadEvent.Ready, this.updateThread); this.updateThread(thread); }; private teardownThread = () => { if (this.state.thread) { - this.state.thread.removeListener("Thread.update", this.updateThread); - this.state.thread.removeListener("Thread.ready", this.updateThread); + this.state.thread.removeListener(ThreadEvent.Update, this.updateThread); + this.state.thread.removeListener(ThreadEvent.Ready, this.updateThread); } }; diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.tsx similarity index 72% rename from src/components/structures/UserView.js rename to src/components/structures/UserView.tsx index eb839be7be..0b686995fd 100644 --- a/src/components/structures/UserView.js +++ b/src/components/structures/UserView.tsx @@ -16,52 +16,60 @@ limitations under the License. */ import React from "react"; -import PropTypes from "prop-types"; import { MatrixClientPeg } from "../../MatrixClientPeg"; -import * as sdk from "../../index"; import Modal from '../../Modal'; import { _t } from '../../languageHandler'; import HomePage from "./HomePage"; import { replaceableComponent } from "../../utils/replaceableComponent"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import ErrorDialog from "../views/dialogs/ErrorDialog"; +import MainSplit from "./MainSplit"; +import RightPanel from "./RightPanel"; +import Spinner from "../views/elements/Spinner"; +import ResizeNotifier from "../../utils/ResizeNotifier"; + +interface IProps { + userId?: string; + resizeNotifier: ResizeNotifier; +} + +interface IState { + loading: boolean; + member?: RoomMember; +} @replaceableComponent("structures.UserView") -export default class UserView extends React.Component { - static get propTypes() { - return { - userId: PropTypes.string, +export default class UserView extends React.Component { + constructor(props: IProps) { + super(props); + this.state = { + loading: true, }; } - constructor(props) { - super(props); - this.state = {}; - } - - componentDidMount() { + public componentDidMount(): void { if (this.props.userId) { - this._loadProfileInfo(); + this.loadProfileInfo(); } } - componentDidUpdate(prevProps) { + public componentDidUpdate(prevProps: IProps): void { // XXX: We shouldn't need to null check the userId here, but we declare // it as optional and MatrixChat sometimes fires in a way which results // in an NPE when we try to update the profile info. if (prevProps.userId !== this.props.userId && this.props.userId) { - this._loadProfileInfo(); + this.loadProfileInfo(); } } - async _loadProfileInfo() { + private async loadProfileInfo(): Promise { const cli = MatrixClientPeg.get(); this.setState({ loading: true }); let profileInfo; try { profileInfo = await cli.getProfileInfo(this.props.userId); } catch (err) { - const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); Modal.createTrackedDialog(_t('Could not load user profile'), '', ErrorDialog, { title: _t('Could not load user profile'), description: ((err && err.message) ? err.message : _t("Operation failed")), @@ -75,14 +83,11 @@ export default class UserView extends React.Component { this.setState({ member, loading: false }); } - render() { + public render(): JSX.Element { if (this.state.loading) { - const Spinner = sdk.getComponent("elements.Spinner"); return ; - } else if (this.state.member) { - const RightPanel = sdk.getComponent('structures.RightPanel'); - const MainSplit = sdk.getComponent('structures.MainSplit'); - const panel = ; + } else if (this.state.member?.user) { + const panel = ; return ( ); diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.tsx similarity index 90% rename from src/components/structures/ViewSource.js rename to src/components/structures/ViewSource.tsx index 2bfa20e892..20bbece755 100644 --- a/src/components/structures/ViewSource.js +++ b/src/components/structures/ViewSource.tsx @@ -17,24 +17,28 @@ limitations under the License. */ import React from "react"; -import PropTypes from "prop-types"; import SyntaxHighlight from "../views/elements/SyntaxHighlight"; import { _t } from "../../languageHandler"; -import * as sdk from "../../index"; import MatrixClientContext from "../../contexts/MatrixClientContext"; import { SendCustomEvent } from "../views/dialogs/DevtoolsDialog"; import { canEditContent } from "../../utils/EventUtils"; import { MatrixClientPeg } from '../../MatrixClientPeg'; import { replaceableComponent } from "../../utils/replaceableComponent"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { IDialogProps } from "../views/dialogs/IDialogProps"; +import BaseDialog from "../views/dialogs/BaseDialog"; + +interface IProps extends IDialogProps { + mxEvent: MatrixEvent; // the MatrixEvent associated with the context menu +} + +interface IState { + isEditing: boolean; +} @replaceableComponent("structures.ViewSource") -export default class ViewSource extends React.Component { - static propTypes = { - onFinished: PropTypes.func.isRequired, - mxEvent: PropTypes.object.isRequired, // the MatrixEvent associated with the context menu - }; - - constructor(props) { +export default class ViewSource extends React.Component { + constructor(props: IProps) { super(props); this.state = { @@ -42,19 +46,20 @@ export default class ViewSource extends React.Component { }; } - onBack() { + private onBack(): void { // TODO: refresh the "Event ID:" modal header this.setState({ isEditing: false }); } - onEdit() { + private onEdit(): void { this.setState({ isEditing: true }); } // returns the dialog body for viewing the event source - viewSourceContent() { + private viewSourceContent(): JSX.Element { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isEncrypted = mxEvent.isEncrypted(); + // @ts-ignore const decryptedEventSource = mxEvent.clearEvent; // FIXME: clearEvent is private const originalEventSource = mxEvent.event; @@ -86,7 +91,7 @@ export default class ViewSource extends React.Component { } // returns the id of the initial message, not the id of the previous edit - getBaseEventId() { + private getBaseEventId(): string { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isEncrypted = mxEvent.isEncrypted(); const baseMxEvent = this.props.mxEvent; @@ -100,7 +105,7 @@ export default class ViewSource extends React.Component { } // returns the SendCustomEvent component prefilled with the correct details - editSourceContent() { + private editSourceContent(): JSX.Element { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isStateEvent = mxEvent.isState(); @@ -159,14 +164,13 @@ export default class ViewSource extends React.Component { } } - canSendStateEvent(mxEvent) { + private canSendStateEvent(mxEvent: MatrixEvent): boolean { const cli = MatrixClientPeg.get(); const room = cli.getRoom(mxEvent.getRoomId()); return room.currentState.mayClientSendStateEvent(mxEvent.getType(), cli); } - render() { - const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog"); + public render(): JSX.Element { const mxEvent = this.props.mxEvent.replacingEvent() || this.props.mxEvent; // show the replacing event, not the original, if it is an edit const isEditing = this.state.isEditing; diff --git a/src/components/views/avatars/MemberStatusMessageAvatar.js b/src/components/views/avatars/MemberStatusMessageAvatar.tsx similarity index 76% rename from src/components/views/avatars/MemberStatusMessageAvatar.js rename to src/components/views/avatars/MemberStatusMessageAvatar.tsx index 82b7b8e400..8c703b3b32 100644 --- a/src/components/views/avatars/MemberStatusMessageAvatar.js +++ b/src/components/views/avatars/MemberStatusMessageAvatar.tsx @@ -15,43 +15,48 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { _t } from "../../../languageHandler"; import MemberAvatar from '../avatars/MemberAvatar'; import classNames from 'classnames'; import StatusMessageContextMenu from "../context_menus/StatusMessageContextMenu"; import SettingsStore from "../../../settings/SettingsStore"; -import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu"; +import { ChevronFace, ContextMenu, ContextMenuButton } from "../../structures/ContextMenu"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { RoomMember } from "matrix-js-sdk/src/models/room-member"; +import { ResizeMethod } from "matrix-js-sdk/src/@types/partials"; + +interface IProps { + member: RoomMember; + width?: number; + height?: number; + resizeMethod?: ResizeMethod; +} + +interface IState { + hasStatus: boolean; + menuDisplayed: boolean; +} @replaceableComponent("views.avatars.MemberStatusMessageAvatar") -export default class MemberStatusMessageAvatar extends React.Component { - static propTypes = { - member: PropTypes.object.isRequired, - width: PropTypes.number, - height: PropTypes.number, - resizeMethod: PropTypes.string, - }; - - static defaultProps = { +export default class MemberStatusMessageAvatar extends React.Component { + public static defaultProps: Partial = { width: 40, height: 40, resizeMethod: 'crop', }; + private button = createRef(); - constructor(props) { + constructor(props: IProps) { super(props); this.state = { hasStatus: this.hasStatus, menuDisplayed: false, }; - - this._button = createRef(); } - componentDidMount() { + public componentDidMount(): void { if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) { throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user"); } @@ -62,44 +67,44 @@ export default class MemberStatusMessageAvatar extends React.Component { if (!user) { return; } - user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); } - componentWillUnmount() { + public componentWillUnmount(): void { const { user } = this.props.member; if (!user) { return; } user.removeListener( "User._unstable_statusMessage", - this._onStatusMessageCommitted, + this.onStatusMessageCommitted, ); } - get hasStatus() { + private get hasStatus(): boolean { const { user } = this.props.member; if (!user) { return false; } - return !!user._unstable_statusMessage; + return !!user.unstable_statusMessage; } - _onStatusMessageCommitted = () => { + private onStatusMessageCommitted = (): void => { // The `User` object has observed a status message change. this.setState({ hasStatus: this.hasStatus, }); }; - openMenu = () => { + private openMenu = (): void => { this.setState({ menuDisplayed: true }); }; - closeMenu = () => { + private closeMenu = (): void => { this.setState({ menuDisplayed: false }); }; - render() { + public render(): JSX.Element { const avatar = - + ); } @@ -140,7 +145,7 @@ export default class MemberStatusMessageAvatar extends React.Component { return void; +} + +/** * This component can be used to display generic HTML content in a contextual * menu. */ - @replaceableComponent("views.context_menus.GenericElementContextMenu") -export default class GenericElementContextMenu extends React.Component { - static propTypes = { - element: PropTypes.element.isRequired, - // Function to be called when the parent window is resized - // This can be used to reposition or close the menu on resize and - // ensure that it is not displayed in a stale position. - onResize: PropTypes.func, - }; - - constructor(props) { +export default class GenericElementContextMenu extends React.Component { + constructor(props: IProps) { super(props); - this.resize = this.resize.bind(this); } - componentDidMount() { - this.resize = this.resize.bind(this); + public componentDidMount(): void { window.addEventListener("resize", this.resize); } - componentWillUnmount() { + public componentWillUnmount(): void { window.removeEventListener("resize", this.resize); } - resize() { + private resize = (): void => { if (this.props.onResize) { this.props.onResize(); } - } + }; - render() { + public render(): JSX.Element { return
{ this.props.element }
; } } diff --git a/src/components/views/context_menus/GenericTextContextMenu.js b/src/components/views/context_menus/GenericTextContextMenu.tsx similarity index 86% rename from src/components/views/context_menus/GenericTextContextMenu.js rename to src/components/views/context_menus/GenericTextContextMenu.tsx index 474732e88b..3ca158dd02 100644 --- a/src/components/views/context_menus/GenericTextContextMenu.js +++ b/src/components/views/context_menus/GenericTextContextMenu.tsx @@ -15,16 +15,15 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { replaceableComponent } from "../../../utils/replaceableComponent"; -@replaceableComponent("views.context_menus.GenericTextContextMenu") -export default class GenericTextContextMenu extends React.Component { - static propTypes = { - message: PropTypes.string.isRequired, - }; +interface IProps { + message: string; +} - render() { +@replaceableComponent("views.context_menus.GenericTextContextMenu") +export default class GenericTextContextMenu extends React.Component { + public render(): JSX.Element { return
{ this.props.message }
; } } diff --git a/src/components/views/context_menus/StatusMessageContextMenu.js b/src/components/views/context_menus/StatusMessageContextMenu.tsx similarity index 71% rename from src/components/views/context_menus/StatusMessageContextMenu.js rename to src/components/views/context_menus/StatusMessageContextMenu.tsx index e05b05116c..954dc3f5c0 100644 --- a/src/components/views/context_menus/StatusMessageContextMenu.js +++ b/src/components/views/context_menus/StatusMessageContextMenu.tsx @@ -14,53 +14,59 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { ChangeEvent } from 'react'; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; -import * as sdk from '../../../index'; -import AccessibleButton from '../elements/AccessibleButton'; +import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { User } from "matrix-js-sdk/src/models/user"; +import Spinner from "../elements/Spinner"; + +interface IProps { + // js-sdk User object. Not required because it might not exist. + user?: User; +} + +interface IState { + message: string; + waiting: boolean; +} @replaceableComponent("views.context_menus.StatusMessageContextMenu") -export default class StatusMessageContextMenu extends React.Component { - static propTypes = { - // js-sdk User object. Not required because it might not exist. - user: PropTypes.object, - }; - - constructor(props) { +export default class StatusMessageContextMenu extends React.Component { + constructor(props: IProps) { super(props); this.state = { message: this.comittedStatusMessage, + waiting: false, }; } - componentDidMount() { + public componentDidMount(): void { const { user } = this.props; if (!user) { return; } - user.on("User._unstable_statusMessage", this._onStatusMessageCommitted); + user.on("User._unstable_statusMessage", this.onStatusMessageCommitted); } - componentWillUnmount() { + public componentWillUnmount(): void { const { user } = this.props; if (!user) { return; } user.removeListener( "User._unstable_statusMessage", - this._onStatusMessageCommitted, + this.onStatusMessageCommitted, ); } - get comittedStatusMessage() { - return this.props.user ? this.props.user._unstable_statusMessage : ""; + get comittedStatusMessage(): string { + return this.props.user ? this.props.user.unstable_statusMessage : ""; } - _onStatusMessageCommitted = () => { + private onStatusMessageCommitted = (): void => { // The `User` object has observed a status message change. this.setState({ message: this.comittedStatusMessage, @@ -68,14 +74,14 @@ export default class StatusMessageContextMenu extends React.Component { }); }; - _onClearClick = (e) => { + private onClearClick = (): void=> { MatrixClientPeg.get()._unstable_setStatusMessage(""); this.setState({ waiting: true, }); }; - _onSubmit = (e) => { + private onSubmit = (e: ButtonEvent): void => { e.preventDefault(); MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message); this.setState({ @@ -83,27 +89,25 @@ export default class StatusMessageContextMenu extends React.Component { }); }; - _onStatusChange = (e) => { + private onStatusChange = (e: ChangeEvent): void => { // The input field's value was changed. this.setState({ - message: e.target.value, + message: (e.target as HTMLInputElement).value, }); }; - render() { - const Spinner = sdk.getComponent('views.elements.Spinner'); - + public render(): JSX.Element { let actionButton; if (this.comittedStatusMessage) { if (this.state.message === this.comittedStatusMessage) { actionButton = { _t("Clear status") } ; } else { actionButton = { _t("Update status") } ; @@ -112,7 +116,7 @@ export default class StatusMessageContextMenu extends React.Component { actionButton = { _t("Set status") } ; @@ -120,13 +124,13 @@ export default class StatusMessageContextMenu extends React.Component { let spinner = null; if (this.state.waiting) { - spinner = ; + spinner = ; } const form =
{ actionButton } diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index cf4f369d09..01a767bf14 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -258,7 +258,6 @@ export const AddExistingToSpace: React.FC = ({ className="mx_textinput_icon mx_textinput_search" placeholder={filterPlaceholder} onSearch={setQuery} - autoComplete={true} autoFocus={true} /> diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx index d03b668cd9..3bb78233ea 100644 --- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx +++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx @@ -23,10 +23,9 @@ import Modal from '../../../Modal'; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; import QuestionDialog from "./QuestionDialog"; +import { IDialogProps } from "./IDialogProps"; -interface IProps { - onFinished: (success: boolean) => void; -} +interface IProps extends IDialogProps {} const CryptoStoreTooNewDialog: React.FC = (props: IProps) => { const brand = SdkConfig.get().brand; diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 77e2b6ae0c..7f08a3eb58 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -243,7 +243,6 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr className="mx_textinput_icon mx_textinput_search" placeholder={_t("Search for rooms or people")} onSearch={setQuery} - autoComplete={true} autoFocus={true} /> diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx index 3a8cd53945..94ae71f1c9 100644 --- a/src/components/views/dialogs/LeaveSpaceDialog.tsx +++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx @@ -57,7 +57,6 @@ const SpaceChildPicker = ({ filterPlaceholder, rooms, selected, onChange }) => { className="mx_textinput_icon mx_textinput_search" placeholder={filterPlaceholder} onSearch={setQuery} - autoComplete={true} autoFocus={true} /> @@ -98,13 +97,13 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave definitions={[ { value: RoomsToLeave.None, - label: _t("Don't leave any"), + label: _t("Don't leave any rooms"), }, { value: RoomsToLeave.All, - label: _t("Leave all rooms and spaces"), + label: _t("Leave all rooms"), }, { value: RoomsToLeave.Specific, - label: _t("Leave specific rooms and spaces"), + label: _t("Leave some rooms"), }, ]} /> @@ -167,11 +166,13 @@ const LeaveSpaceDialog: React.FC = ({ space, onFinished }) => { >

- { _t("Are you sure you want to leave ?", {}, { + { _t("You are about to leave .", {}, { spaceName: () => { space.name }, }) }   { rejoinWarning } + { rejoinWarning && (<> ) } + { spaceChildren.length > 0 && _t("Would you like to leave the rooms in this space?") }

{ spaceChildren.length > 0 && = ({ room, selected = [], className="mx_textinput_icon mx_textinput_search" placeholder={_t("Search spaces")} onSearch={setQuery} - autoComplete={true} autoFocus={true} /> diff --git a/src/components/views/dialogs/UntrustedDeviceDialog.tsx b/src/components/views/dialogs/UntrustedDeviceDialog.tsx index 8389757347..8c503e340d 100644 --- a/src/components/views/dialogs/UntrustedDeviceDialog.tsx +++ b/src/components/views/dialogs/UntrustedDeviceDialog.tsx @@ -19,7 +19,7 @@ import { User } from "matrix-js-sdk/src/models/user"; import { _t } from "../../../languageHandler"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import E2EIcon from "../rooms/E2EIcon"; +import E2EIcon, { E2EState } from "../rooms/E2EIcon"; import AccessibleButton from "../elements/AccessibleButton"; import BaseDialog from "./BaseDialog"; import { IDialogProps } from "./IDialogProps"; @@ -47,7 +47,7 @@ const UntrustedDeviceDialog: React.FC = ({ device, user, onFinished }) = onFinished={onFinished} className="mx_UntrustedDeviceDialog" title={<> - + { _t("Not Trusted") } } > diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.tsx similarity index 74% rename from src/components/views/elements/AppTile.js rename to src/components/views/elements/AppTile.tsx index a02465d01e..9ab7a91788 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.tsx @@ -19,7 +19,6 @@ limitations under the License. import url from 'url'; import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import AccessibleButton from './AccessibleButton'; import { _t } from '../../../languageHandler'; @@ -39,33 +38,95 @@ import { MatrixCapabilities } from "matrix-widget-api"; import RoomWidgetContextMenu from "../context_menus/WidgetContextMenu"; import WidgetAvatar from "../avatars/WidgetAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { IApp } from "../../../stores/WidgetStore"; + +interface IProps { + app: IApp; + // If room is not specified then it is an account level widget + // which bypasses permission prompts as it was added explicitly by that user + room: Room; + // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer. + // This should be set to true when there is only one widget in the app drawer, otherwise it should be false. + fullWidth?: boolean; + // Optional. If set, renders a smaller view of the widget + miniMode?: boolean; + // UserId of the current user + userId: string; + // UserId of the entity that added / modified the widget + creatorUserId: string; + waitForIframeLoad: boolean; + showMenubar?: boolean; + // Optional onEditClickHandler (overrides default behaviour) + onEditClick?: () => void; + // Optional onDeleteClickHandler (overrides default behaviour) + onDeleteClick?: () => void; + // Optionally hide the tile title + showTitle?: boolean; + // Optionally handle minimise button pointer events (default false) + handleMinimisePointerEvents?: boolean; + // Optionally hide the popout widget icon + showPopout?: boolean; + // Is this an instance of a user widget + userWidget: boolean; + // sets the pointer-events property on the iframe + pointerEvents?: string; + widgetPageTitle?: string; +} + +interface IState { + initialising: boolean; // True while we are mangling the widget URL + // True while the iframe content is loading + loading: boolean; + // Assume that widget has permission to load if we are the user who + // added it to the room, or if explicitly granted by the user + hasPermissionToLoad: boolean; + error: Error; + menuDisplayed: boolean; + widgetPageTitle: string; +} @replaceableComponent("views.elements.AppTile") -export default class AppTile extends React.Component { - constructor(props) { +export default class AppTile extends React.Component { + public static defaultProps: Partial = { + waitForIframeLoad: true, + showMenubar: true, + showTitle: true, + showPopout: true, + handleMinimisePointerEvents: false, + userWidget: false, + miniMode: false, + }; + + private contextMenuButton = createRef(); + private iframe: HTMLIFrameElement; // ref to the iframe (callback style) + private allowedWidgetsWatchRef: string; + private persistKey: string; + private sgWidget: StopGapWidget; + private dispatcherRef: string; + + constructor(props: IProps) { super(props); // The key used for PersistedElement - this._persistKey = getPersistKey(this.props.app.id); + this.persistKey = getPersistKey(this.props.app.id); try { - this._sgWidget = new StopGapWidget(this.props); - this._sgWidget.on("preparing", this._onWidgetPrepared); - this._sgWidget.on("ready", this._onWidgetReady); + this.sgWidget = new StopGapWidget(this.props); + this.sgWidget.on("preparing", this.onWidgetPrepared); + this.sgWidget.on("ready", this.onWidgetReady); } catch (e) { console.log("Failed to construct widget", e); - this._sgWidget = null; + this.sgWidget = null; } - this.iframe = null; // ref to the iframe (callback style) - this.state = this._getNewState(props); - this._contextMenuButton = createRef(); + this.state = this.getNewState(props); - this._allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); + this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); } // This is a function to make the impact of calling SettingsStore slightly less - hasPermissionToLoad = (props) => { - if (this._usingLocalWidget()) return true; + private hasPermissionToLoad = (props: IProps): boolean => { + if (this.usingLocalWidget()) return true; if (!props.room) return true; // user widgets always have permissions const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", props.room.roomId); @@ -81,34 +142,34 @@ export default class AppTile extends React.Component { * @param {Object} newProps The new properties of the component * @return {Object} Updated component state to be set with setState */ - _getNewState(newProps) { + private getNewState(newProps: IProps): IState { return { initialising: true, // True while we are mangling the widget URL // True while the iframe content is loading - loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey), + loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey), // Assume that widget has permission to load if we are the user who // added it to the room, or if explicitly granted by the user hasPermissionToLoad: this.hasPermissionToLoad(newProps), error: null, - widgetPageTitle: newProps.widgetPageTitle, menuDisplayed: false, + widgetPageTitle: this.props.widgetPageTitle, }; } - onAllowedWidgetsChange = () => { + private onAllowedWidgetsChange = (): void => { const hasPermissionToLoad = this.hasPermissionToLoad(this.props); if (this.state.hasPermissionToLoad && !hasPermissionToLoad) { // Force the widget to be non-persistent (able to be deleted/forgotten) ActiveWidgetStore.destroyPersistentWidget(this.props.app.id); - PersistedElement.destroyElement(this._persistKey); - if (this._sgWidget) this._sgWidget.stop(); + PersistedElement.destroyElement(this.persistKey); + if (this.sgWidget) this.sgWidget.stop(); } this.setState({ hasPermissionToLoad }); }; - isMixedContent() { + private isMixedContent(): boolean { const parentContentProtocol = window.location.protocol; const u = url.parse(this.props.app.url); const childContentProtocol = u.protocol; @@ -120,69 +181,70 @@ export default class AppTile extends React.Component { return false; } - componentDidMount() { + public componentDidMount(): void { // Only fetch IM token on mount if we're showing and have permission to load - if (this._sgWidget && this.state.hasPermissionToLoad) { - this._startWidget(); + if (this.sgWidget && this.state.hasPermissionToLoad) { + this.startWidget(); } // Widget action listeners - this.dispatcherRef = dis.register(this._onAction); + this.dispatcherRef = dis.register(this.onAction); } - componentWillUnmount() { + public componentWillUnmount(): void { // Widget action listeners if (this.dispatcherRef) dis.unregister(this.dispatcherRef); // if it's not remaining on screen, get rid of the PersistedElement container if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) { ActiveWidgetStore.destroyPersistentWidget(this.props.app.id); - PersistedElement.destroyElement(this._persistKey); + PersistedElement.destroyElement(this.persistKey); } - if (this._sgWidget) { - this._sgWidget.stop(); + if (this.sgWidget) { + this.sgWidget.stop(); } - SettingsStore.unwatchSetting(this._allowedWidgetsWatchRef); + SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef); } - _resetWidget(newProps) { - if (this._sgWidget) { - this._sgWidget.stop(); + private resetWidget(newProps: IProps): void { + if (this.sgWidget) { + this.sgWidget.stop(); } try { - this._sgWidget = new StopGapWidget(newProps); - this._sgWidget.on("preparing", this._onWidgetPrepared); - this._sgWidget.on("ready", this._onWidgetReady); - this._startWidget(); + this.sgWidget = new StopGapWidget(newProps); + this.sgWidget.on("preparing", this.onWidgetPrepared); + this.sgWidget.on("ready", this.onWidgetReady); + this.startWidget(); } catch (e) { console.log("Failed to construct widget", e); - this._sgWidget = null; + this.sgWidget = null; } } - _startWidget() { - this._sgWidget.prepare().then(() => { + private startWidget(): void { + this.sgWidget.prepare().then(() => { this.setState({ initialising: false }); }); } - _iframeRefChange = (ref) => { + private iframeRefChange = (ref: HTMLIFrameElement): void => { this.iframe = ref; if (ref) { - if (this._sgWidget) this._sgWidget.start(ref); + if (this.sgWidget) this.sgWidget.start(ref); } else { - this._resetWidget(this.props); + this.resetWidget(this.props); } }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase + // eslint-disable-next-line @typescript-eslint/naming-convention + public UNSAFE_componentWillReceiveProps(nextProps: IProps): void { // eslint-disable-line camelcase if (nextProps.app.url !== this.props.app.url) { - this._getNewState(nextProps); + this.getNewState(nextProps); if (this.state.hasPermissionToLoad) { - this._resetWidget(nextProps); + this.resetWidget(nextProps); } } @@ -198,7 +260,7 @@ export default class AppTile extends React.Component { * @private * @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed. */ - async _endWidgetActions() { // widget migration dev note: async to maintain signature + private async endWidgetActions(): Promise { // widget migration dev note: async to maintain signature // HACK: This is a really dirty way to ensure that Jitsi cleans up // its hold on the webcam. Without this, the widget holds a media // stream open, even after death. See https://github.com/vector-im/element-web/issues/7351 @@ -217,27 +279,27 @@ export default class AppTile extends React.Component { } // Delete the widget from the persisted store for good measure. - PersistedElement.destroyElement(this._persistKey); + PersistedElement.destroyElement(this.persistKey); ActiveWidgetStore.destroyPersistentWidget(this.props.app.id); - if (this._sgWidget) this._sgWidget.stop({ forceDestroy: true }); + if (this.sgWidget) this.sgWidget.stop({ forceDestroy: true }); } - _onWidgetPrepared = () => { + private onWidgetPrepared = (): void => { this.setState({ loading: false }); }; - _onWidgetReady = () => { + private onWidgetReady = (): void => { if (WidgetType.JITSI.matches(this.props.app.type)) { - this._sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {}); + this.sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {}); } }; - _onAction = payload => { + private onAction = (payload): void => { if (payload.widgetId === this.props.app.id) { switch (payload.action) { case 'm.sticker': - if (this._sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) { + if (this.sgWidget.widgetApi.hasCapability(MatrixCapabilities.StickerSending)) { dis.dispatch({ action: 'post_sticker_message', data: payload.data }); dis.dispatch({ action: 'stickerpicker_close' }); } else { @@ -248,7 +310,7 @@ export default class AppTile extends React.Component { } }; - _grantWidgetPermission = () => { + private grantWidgetPermission = (): void => { const roomId = this.props.room.roomId; console.info("Granting permission for widget to load: " + this.props.app.eventId); const current = SettingsStore.getValue("allowedWidgets", roomId); @@ -258,14 +320,14 @@ export default class AppTile extends React.Component { this.setState({ hasPermissionToLoad: true }); // Fetch a token for the integration manager, now that we're allowed to - this._startWidget(); + this.startWidget(); }).catch(err => { console.error(err); // We don't really need to do anything about this - the user will just hit the button again. }); }; - formatAppTileName() { + private formatAppTileName(): string { let appTileName = "No name"; if (this.props.app.name && this.props.app.name.trim()) { appTileName = this.props.app.name.trim(); @@ -278,11 +340,11 @@ export default class AppTile extends React.Component { * actual widget URL * @returns {bool} true If using a local version of the widget */ - _usingLocalWidget() { + private usingLocalWidget(): boolean { return WidgetType.JITSI.matches(this.props.app.type); } - _getTileTitle() { + private getTileTitle(): JSX.Element { const name = this.formatAppTileName(); const titleSpacer =  - ; let title = ''; @@ -300,32 +362,32 @@ export default class AppTile extends React.Component { } // TODO replace with full screen interactions - _onPopoutWidgetClick = () => { + private onPopoutWidgetClick = (): void => { // Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop). if (WidgetType.JITSI.matches(this.props.app.type)) { - this._endWidgetActions().then(() => { + this.endWidgetActions().then(() => { if (this.iframe) { // Reload iframe - this.iframe.src = this._sgWidget.embedUrl; + this.iframe.src = this.sgWidget.embedUrl; } }); } // Using Object.assign workaround as the following opens in a new window instead of a new tab. // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes'); Object.assign(document.createElement('a'), - { target: '_blank', href: this._sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click(); + { target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click(); }; - _onContextMenuClick = () => { + private onContextMenuClick = (): void => { this.setState({ menuDisplayed: true }); }; - _closeContextMenu = () => { + private closeContextMenu = (): void => { this.setState({ menuDisplayed: false }); }; - render() { + public render(): JSX.Element { let appTileBody; // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin @@ -351,7 +413,7 @@ export default class AppTile extends React.Component {
); - if (this._sgWidget === null) { + if (this.sgWidget === null) { appTileBody = (
@@ -365,9 +427,9 @@ export default class AppTile extends React.Component {
); @@ -390,8 +452,8 @@ export default class AppTile extends React.Component { { this.state.loading && loadingElement }