Merge branch 'develop' of https://github.com/yaya-usman/matrix-react-sdk into patch/warn_onrefresh

Author: yaya-usman

.github/workflows/element-build-and-test.yaml

@@ -23,14 +23,23 @@ jobs:
           cache: 'yarn'
 
       - name: Fetch layered build
-        run: scripts/ci/layered.sh
+        id: layered_build
+        run: |
+          scripts/ci/layered.sh
+          JSSDK_SHA=$(git -C matrix-js-sdk rev-parse --short=12 HEAD)
+          REACT_SHA=$(git rev-parse --short=12 HEAD)
+          VECTOR_SHA=$(git -C element-web rev-parse --short=12 HEAD)
+          echo "::set-output name=VERSION::$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA"
 
       - name: Copy config
         run: cp element.io/develop/config.json config.json
         working-directory: ./element-web
 
       - name: Build
-        run: CI_PACKAGE=true yarn build
+        env:
+          CI_PACKAGE: true
+          VERSION: "${{ steps.layered_build.outputs.VERSION }}"
+        run: yarn build
         working-directory: ./element-web
 
       - name: Upload Artifact
@@ -61,6 +70,12 @@ jobs:
           # to run the tests, so use chrome.
           browser: chrome
           start: npx serve -p 8080 webapp
+          record: true
+        env:
+          # pass the Dashboard record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # pass GitHub token to allow accurately detecting a build vs a re-run build
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Artifact
         if: failure()

.github/workflows/netlify.yaml

@@ -7,26 +7,36 @@ on:
     types:
       - completed
 jobs:
-  build:
+  deploy:
     runs-on: ubuntu-latest
-    if: >
-      ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'
     steps:
       - name: "🔍 Read PR number"
         id: readctx
-        # we need to find the PR number that corresponds to the branch, which we do by
-        # searching the GH API
+        # We need to find the PR number that corresponds to the branch, which we do by searching the GH API
         # The workflow_run event includes a list of pull requests, but it doesn't get populated for
         # forked PRs: https://docs.github.com/en/rest/reference/checks#create-a-check-run
         run: |
           head_branch='${{github.event.workflow_run.head_repository.owner.login}}:${{github.event.workflow_run.head_branch}}'
-          echo "head branch: $head_branch"
+          echo "Head branch: $head_branch"
           pulls_uri="https://api.github.com/repos/${{ github.repository }}/pulls?head=$(jq -Rr '@uri' <<<$head_branch)"
           pr_number=$(curl -s -H 'Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' "$pulls_uri" |
                jq -r '.[] | .number')
           echo "PR number: $pr_number"
           echo "::set-output name=prnumber::$pr_number"
 
+      - name: Create Deployment ID
+        uses: altinukshini/[email protected]
+        id: deployment
+        with:
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}
+          transient_environment: true
+          environment: Netlify
+          initial_status: in_progress
+          ref: ${{ github.event.workflow_run.head_sha }}
+
       # There's a 'download artifact' action but it hasn't been updated for the
       # workflow_run action (https://github.com/actions/download-artifact/issues/60)
       # so instead we get this mess:
@@ -69,12 +79,25 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         timeout-minutes: 1
 
-      - name: Edit PR Description
-        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Update deployment status (success)
+        if: success()
+        uses: altinukshini/[email protected]
+        with:
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          environment_url: ${{ steps.netlify.outputs.deploy-url }}
+          state: "success"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}
+          description: |
+            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
+            Exercise caution. Use test accounts.
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: altinukshini/[email protected]
         with:
-          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-          description-message: |
-            Preview: ${{ steps.netlify.outputs.deploy-url }}
-            ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.
+          token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
+          state: "failure"
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+          pr: true
+          pr_id: ${{ steps.readctx.outputs.prnumber }}

cypress.json

@@ -1,4 +1,5 @@
 {
     "baseUrl": "http://localhost:8080",
-    "videoUploadOnPasses": false
+    "videoUploadOnPasses": false,
+    "projectId": "ppvnzg"
 }

res/css/_components.scss

@@ -14,6 +14,7 @@
 @import "./components/views/beacon/_OwnBeaconStatus.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
+@import "./components/views/location/_EnableLiveShare.scss";
 @import "./components/views/location/_LiveDurationDropdown.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";
@@ -263,6 +264,7 @@
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
+@import "./views/rooms/_ThreadSummary.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
 @import "./views/rooms/_VoiceRecordComposerTile.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";

res/css/components/views/location/_EnableLiveShare.scss

@@ -0,0 +1,48 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EnableLiveShare {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: $spacing-32 $spacing-16;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.mx_EnableLiveShare_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_EnableLiveShare_icon {
+    height: 58px;
+    width: 58px;
+}
+
+.mx_EnableLiveShare_description {
+    padding: 0 $spacing-24;
+    margin-bottom: $spacing-32;
+    line-height: $font-20px;
+}
+
+.mx_EnableLiveShare_button {
+    margin-top: $spacing-32;
+    height: 48px;
+    width: 100%;
+}

res/css/structures/_ViewSource.scss

@@ -44,3 +44,7 @@ limitations under the License.
 .mx_ViewSource_container {
     max-width: calc(100% - 24px);
 }
+
+.mx_ViewSource_container .mx_CopyableText_border {
+    width: 100%;
+}

res/css/views/right_panel/_ThreadPanel.scss

@@ -140,7 +140,7 @@ limitations under the License.
         // Account for scrollbar when hovering
         padding-top: 0;
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             position: relative;
             padding-right: 11px;
 
@@ -257,28 +257,14 @@ limitations under the License.
 
 .mx_ThreadPanel_replies {
     margin-top: 8px;
-}
+    display: flex;
+    align-items: center;
+    position: relative;
 
-.mx_ThreadPanel_repliesSummary {
-    &::before {
-        content: "";
-        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
-        mask-position: center;
-        display: inline-block;
-        height: 18px;
-        min-width: 18px;
-        background-color: currentColor;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        margin-right: 8px;
-        vertical-align: middle;
+    .mx_ThreadSummary_threads-amount {
+        color: $secondary-content;
+        font-size: $font-12px;
     }
-
-    color: $secondary-content;
-    font-weight: 600;
-    float: left;
-    margin-right: 12px;
-    font-size: $font-12px;
 }
 
 .mx_ThreadPanel_viewInRoom::before {

res/css/views/right_panel/_TimelineCard.scss

@@ -69,7 +69,7 @@ limitations under the License.
             margin-right: 8px;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             margin-left: 36px;
             margin-right: 0;
             max-width: min(calc(100% - 36px), 600px);

res/css/views/rooms/_EventBubbleTile.scss

@@ -37,7 +37,7 @@ limitations under the License.
     margin-left: 49px;
     font-size: $font-14px;
 
-    .mx_ThreadInfo {
+    .mx_ThreadSummary {
         clear: both;
         width: fit-content;
     }
@@ -172,7 +172,7 @@ limitations under the License.
             margin-right: 32px;
         }
 
-        .mx_ThreadInfo {
+        .mx_ThreadSummary {
             float: right;
             margin-right: calc(-1 * var(--gutterSize));
         }
@@ -449,8 +449,11 @@ limitations under the License.
 
     .mx_ReadReceiptGroup {
         position: absolute;
-        right: -78px; // as close to right gutter without clipping as possible
-        bottom: 0;
+        // as close to right gutter without clipping as possible
+        right: -78px;
+        // (EventTileLine.line-height - ReadReceiptGroup.height) / 2
+        // this centers the ReadReceiptGroup if we’ve got a single line
+        bottom: calc(($font-18px - 24px) / 2);
         top: auto;
     }
 
@@ -559,6 +562,17 @@ limitations under the License.
         padding-top: 0;
     }
 
+    .mx_EventTile {
+        &.mx_EventTile_info {
+            .mx_EventTile_line {
+                // Avoid overflow of event info by cancelling width settings
+                width: 100%;
+                min-width: 0;
+                max-width: 100%;
+            }
+        }
+    }
+
     &::after {
         content: "";
         clear: both;
@@ -582,11 +596,11 @@ limitations under the License.
         margin-right: 0;
 
         .mx_MessageActionBar {
-            right: 127px; // align with that of right-column bubbles
+            right: 48px; // align with that of right-column bubbles
         }
 
         .mx_ReadReceiptGroup {
-            right: -14px; // match alignment to RRs of chat bubbles
+            right: -18px; // match alignment to RRs of chat bubbles
         }
 
         &::before {