mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-09 13:28:29 +01:00
parent a32f12c8f3
commit 7921a6cbf8
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
104 changed files with 12169 additions and 11047 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
.eslintrc.js
View file

@ -1,85 +1,90 @@
module.exports = {
plugins: ["matrix-org"],
extends: [
"plugin:matrix-org/babel",
"plugin:matrix-org/react",
],
extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react"],
env: {
browser: true,
node: true,
},
rules: {
// Things we do that break the ideal style
"quotes": "off",
quotes: "off",
},
settings: {
react: {
version: 'detect',
version: "detect",
},
},
overrides: [{
files: [
"src/**/*.{ts,tsx}",
"test/**/*.{ts,tsx}",
"module_system/**/*.{ts,tsx}",
],
extends: [
"plugin:matrix-org/typescript",
"plugin:matrix-org/react",
],
// NOTE: These rules are frozen and new rules should not be added here.
// New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
overrides: [
{
files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "module_system/**/*.{ts,tsx}"],
extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
// NOTE: These rules are frozen and new rules should not be added here.
// New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
rules: {
// Things we do that break the ideal style
"prefer-promise-reject-errors": "off",
"quotes": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We're okay with assertion errors when we ask for them
"@typescript-eslint/no-non-null-assertion": "off",
// We disable this while we're transitioning
"@typescript-eslint/no-explicit-any": "off",
// We're okay with assertion errors when we ask for them
"@typescript-eslint/no-non-null-assertion": "off",
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
"no-restricted-imports": ["error", {
"paths": [{
"name": "matrix-js-sdk",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src/",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src/index",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-react-sdk",
"message": "Please use matrix-react-sdk/src/index instead",
}, {
"name": "matrix-react-sdk/",
"message": "Please use matrix-react-sdk/src/index instead",
}],
"patterns": [{
"group": ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
"message": "Please use matrix-js-sdk/src/* instead",
}, {
"group": ["matrix-react-sdk/lib", "matrix-react-sdk/lib/", "matrix-react-sdk/lib/**"],
"message": "Please use matrix-react-sdk/src/* instead",
}],
}],
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
"no-restricted-imports": [
"error",
{
paths: [
{
name: "matrix-js-sdk",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/index",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-react-sdk",
message: "Please use matrix-react-sdk/src/index instead",
},
{
name: "matrix-react-sdk/",
message: "Please use matrix-react-sdk/src/index instead",
},
],
patterns: [
{
group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
message: "Please use matrix-js-sdk/src/* instead",
},
{
group: ["matrix-react-sdk/lib", "matrix-react-sdk/lib/", "matrix-react-sdk/lib/**"],
message: "Please use matrix-react-sdk/src/* instead",
},
],
},
],
},
},
}, {
files: [
"test/**/*.{ts,tsx}",
],
rules: {
// We don't need super strict typing in test utilities
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-member-accessibility": "off",
{
files: ["test/**/*.{ts,tsx}"],
rules: {
// We don't need super strict typing in test utilities
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-member-accessibility": "off",
},
},
}],
],
};

140
.github/ISSUE_TEMPLATE/bug-desktop.yml vendored
View file

@ -2,75 +2,75 @@ name: Bug report for the Element desktop app (not in a browser)
description: File a bug report if you are using the desktop Element application.
labels: [T-Defect]
body:
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
Please report security issues by email to security@matrix.org
- type: textarea
id: reproduction-steps
attributes:
label: Steps to reproduce
description: Please attach screenshots, videos or logs if you can.
placeholder: Tell us what you see!
value: |
1. Where are you starting? What can you see?
2. What do you click?
3. More steps…
validations:
required: true
- type: textarea
id: result
attributes:
label: Outcome
placeholder: Tell us what went wrong
value: |
#### What did you expect?
Please report security issues by email to security@matrix.org
- type: textarea
id: reproduction-steps
attributes:
label: Steps to reproduce
description: Please attach screenshots, videos or logs if you can.
placeholder: Tell us what you see!
value: |
1. Where are you starting? What can you see?
2. What do you click?
3. More steps…
validations:
required: true
- type: textarea
id: result
attributes:
label: Outcome
placeholder: Tell us what went wrong
value: |
#### What did you expect?
#### What happened instead?
validations:
required: true
- type: input
id: os
attributes:
label: Operating system
placeholder: Windows, macOS, Ubuntu, Arch Linux…
validations:
required: false
- type: input
id: version
attributes:
label: Application version
description: You can find the version information in Settings -> Help & About.
placeholder: e.g. Element version 1.7.34, olm version 3.2.3
validations:
required: false
- type: input
id: source
attributes:
label: How did you install the app?
description: Where did you install the app from? Please give a link or a description.
placeholder: e.g. From https://element.io/get-started
validations:
required: false
- type: input
id: homeserver
attributes:
label: Homeserver
description: |
Which server is your account registered on? If it is a local or non-public homeserver, please tell us what is the homeserver implementation (ex: Synapse/Dendrite/etc.) and the version.
placeholder: e.g. matrix.org or Synapse 1.50.0rc1
validations:
required: false
- type: dropdown
id: rageshake
attributes:
label: Will you send logs?
description: |
Did you know that you can send a /rageshake command from your application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- 'Yes'
- 'No'
validations:
required: true
#### What happened instead?
validations:
required: true
- type: input
id: os
attributes:
label: Operating system
placeholder: Windows, macOS, Ubuntu, Arch Linux…
validations:
required: false
- type: input
id: version
attributes:
label: Application version
description: You can find the version information in Settings -> Help & About.
placeholder: e.g. Element version 1.7.34, olm version 3.2.3
validations:
required: false
- type: input
id: source
attributes:
label: How did you install the app?
description: Where did you install the app from? Please give a link or a description.
placeholder: e.g. From https://element.io/get-started
validations:
required: false
- type: input
id: homeserver
attributes:
label: Homeserver
description: |
Which server is your account registered on? If it is a local or non-public homeserver, please tell us what is the homeserver implementation (ex: Synapse/Dendrite/etc.) and the version.
placeholder: e.g. matrix.org or Synapse 1.50.0rc1
validations:
required: false
- type: dropdown
id: rageshake
attributes:
label: Will you send logs?
description: |
Did you know that you can send a /rageshake command from your application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- "Yes"
- "No"
validations:
required: true

156
.github/ISSUE_TEMPLATE/bug-web.yml vendored
View file

@ -2,83 +2,83 @@ name: Bug report for Element Web (in browser)
description: File a bug report if you are using Element in a web browser like Firefox, Chrome, Edge, and so on.
labels: [T-Defect]
body:
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
Please report security issues by email to security@matrix.org
- type: textarea
id: reproduction-steps
attributes:
label: Steps to reproduce
description: Please attach screenshots, videos or logs if you can.
placeholder: Tell us what you see!
value: |
1. Where are you starting? What can you see?
2. What do you click?
3. More steps…
validations:
required: true
- type: textarea
id: result
attributes:
label: Outcome
placeholder: Tell us what went wrong
value: |
#### What did you expect?
Please report security issues by email to security@matrix.org
- type: textarea
id: reproduction-steps
attributes:
label: Steps to reproduce
description: Please attach screenshots, videos or logs if you can.
placeholder: Tell us what you see!
value: |
1. Where are you starting? What can you see?
2. What do you click?
3. More steps…
validations:
required: true
- type: textarea
id: result
attributes:
label: Outcome
placeholder: Tell us what went wrong
value: |
#### What did you expect?
#### What happened instead?
validations:
required: true
- type: input
id: os
attributes:
label: Operating system
placeholder: Windows, macOS, Ubuntu, Arch Linux…
validations:
required: false
- type: input
id: browser
attributes:
label: Browser information
description: Which browser are you using? Which version?
placeholder: e.g. Chromium Version 92.0.4515.131
validations:
required: false
- type: input
id: webapp-url
attributes:
label: URL for webapp
description: Which URL are you using to access the webapp? If a private server, tell us what version of Element Web you are using.
placeholder: e.g. develop.element.io, app.element.io
validations:
required: false
- type: input
id: version
attributes:
label: Application version
description: You can find the version information in Settings -> Help & About.
placeholder: e.g. Element version 1.7.34, olm version 3.2.3
validations:
required: false
- type: input
id: homeserver
attributes:
label: Homeserver
description: |
Which server is your account registered on? If it is a local or non-public homeserver, please tell us what is the homeserver implementation (ex: Synapse/Dendrite/etc.) and the version.
placeholder: e.g. matrix.org or Synapse 1.50.0rc1
validations:
required: false
- type: dropdown
id: rageshake
attributes:
label: Will you send logs?
description: |
Did you know that you can send a /rageshake command from the web application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- 'Yes'
- 'No'
validations:
required: true
#### What happened instead?
validations:
required: true
- type: input
id: os
attributes:
label: Operating system
placeholder: Windows, macOS, Ubuntu, Arch Linux…
validations:
required: false
- type: input
id: browser
attributes:
label: Browser information
description: Which browser are you using? Which version?
placeholder: e.g. Chromium Version 92.0.4515.131
validations:
required: false
- type: input
id: webapp-url
attributes:
label: URL for webapp
description: Which URL are you using to access the webapp? If a private server, tell us what version of Element Web you are using.
placeholder: e.g. develop.element.io, app.element.io
validations:
required: false
- type: input
id: version
attributes:
label: Application version
description: You can find the version information in Settings -> Help & About.
placeholder: e.g. Element version 1.7.34, olm version 3.2.3
validations:
required: false
- type: input
id: homeserver
attributes:
label: Homeserver
description: |
Which server is your account registered on? If it is a local or non-public homeserver, please tell us what is the homeserver implementation (ex: Synapse/Dendrite/etc.) and the version.
placeholder: e.g. matrix.org or Synapse 1.50.0rc1
validations:
required: false
- type: dropdown
id: rageshake
attributes:
label: Will you send logs?
description: |
Did you know that you can send a /rageshake command from the web application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- "Yes"
- "No"
validations:
required: true

6
.github/ISSUE_TEMPLATE/config.yml vendored
View file

@ -1,5 +1,5 @@
blank_issues_enabled: false
contact_links:
- name: Questions & support
url: https://matrix.to/#/#element-web:matrix.org
about: Please ask and answer questions here.
- name: Questions & support
url: https://matrix.to/#/#element-web:matrix.org
about: Please ask and answer questions here.

60
.github/ISSUE_TEMPLATE/enhancement.yml vendored
View file

@ -2,35 +2,35 @@ name: Enhancement request
description: Do you have a suggestion or feature request?
labels: [T-Enhancement]
body:
- type: markdown
attributes:
value: |
Thank you for taking the time to propose an enhancement to an existing feature. If you would like to propose a new feature or a major cross-platform change, please [start a discussion here](https://github.com/vector-im/element-meta/discussions/new?category=ideas).
- type: textarea
id: usecase
attributes:
label: Your use case
description: What would you like to be able to do? Please feel welcome to include screenshots or mock ups.
placeholder: Tell us what you would like to do!
value: |
#### What would you like to do?
- type: markdown
attributes:
value: |
Thank you for taking the time to propose an enhancement to an existing feature. If you would like to propose a new feature or a major cross-platform change, please [start a discussion here](https://github.com/vector-im/element-meta/discussions/new?category=ideas).
- type: textarea
id: usecase
attributes:
label: Your use case
description: What would you like to be able to do? Please feel welcome to include screenshots or mock ups.
placeholder: Tell us what you would like to do!
value: |
#### What would you like to do?
#### Why would you like to do it?
#### Why would you like to do it?
#### How would you like to achieve it?
validations:
required: true
- type: textarea
id: alternative
attributes:
label: Have you considered any alternatives?
placeholder: A clear and concise description of any alternative solutions or features you've considered.
validations:
required: false
- type: textarea
id: additional-context
attributes:
label: Additional context
placeholder: Is there anything else you'd like to add?
validations:
required: false
#### How would you like to achieve it?
validations:
required: true
- type: textarea
id: alternative
attributes:
label: Have you considered any alternatives?
placeholder: A clear and concise description of any alternative solutions or features you've considered.
validations:
required: false
- type: textarea
id: additional-context
attributes:
label: Additional context
placeholder: Is there anything else you'd like to add?
validations:
required: false

6
.github/PULL_REQUEST_TEMPLATE.md vendored
View file

@ -2,9 +2,9 @@
## Checklist
* [ ] Tests written for new code (and old code if feasible)
* [ ] Linter and other CI checks pass
* [ ] Sign-off given on the changes (see [CONTRIBUTING.md](https://github.com/vector-im/element-web/blob/develop/CONTRIBUTING.md))
- [ ] Tests written for new code (and old code if feasible)
- [ ] Linter and other CI checks pass
- [ ] Sign-off given on the changes (see [CONTRIBUTING.md](https://github.com/vector-im/element-web/blob/develop/CONTRIBUTING.md))
<!--
If you would like to specify text for the changelog entry other than your PR title, add the following:

6
.github/renovate.json vendored
View file

@ -1,6 +1,4 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"github>matrix-org/renovate-config-element-web"
]
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["github>matrix-org/renovate-config-element-web"]
}

52
.github/workflows/backport.yml vendored
View file

@ -1,30 +1,30 @@
name: Backport
on:
pull_request_target:
types:
- closed
- labeled
branches:
- develop
pull_request_target:
types:
- closed
- labeled
branches:
- develop
jobs:
backport:
name: Backport
runs-on: ubuntu-latest
# Only react to merged PRs for security reasons.
# See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
if: >
github.event.pull_request.merged
&& (
github.event.action == 'closed'
|| (
github.event.action == 'labeled'
&& contains(github.event.label.name, 'backport')
)
)
steps:
- uses: tibdex/backport@v2
with:
labels_template: "<%= JSON.stringify([...labels, 'X-Release-Blocker']) %>"
# We can't use GITHUB_TOKEN here or CI won't run on the new PR
github_token: ${{ secrets.ELEMENT_BOT_TOKEN }}
backport:
name: Backport
runs-on: ubuntu-latest
# Only react to merged PRs for security reasons.
# See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
if: >
github.event.pull_request.merged
&& (
github.event.action == 'closed'
|| (
github.event.action == 'labeled'
&& contains(github.event.label.name, 'backport')
)
)
steps:
- uses: tibdex/backport@v2
with:
labels_template: "<%= JSON.stringify([...labels, 'X-Release-Blocker']) %>"
# We can't use GITHUB_TOKEN here or CI won't run on the new PR
github_token: ${{ secrets.ELEMENT_BOT_TOKEN }}

36
.github/workflows/build.yml vendored
View file

@ -1,26 +1,26 @@
name: Build
on:
pull_request: { }
push:
branches: [ master ]
pull_request: {}
push:
branches: [master]
# develop pushes and repository_dispatch handled in build_develop.yaml
env:
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
jobs:
build:
name: "Build"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
build:
name: "Build"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- uses: actions/setup-node@v3
with:
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Build
run: "yarn build"
- name: Build
run: "yarn build"

191
.github/workflows/build_develop.yml vendored
View file

@ -2,114 +2,113 @@
# environment secrets, largely similar to build.yaml.
name: Build and Deploy develop
on:
push:
branches: [ develop ]
repository_dispatch:
types: [ element-web-notify ]
push:
branches: [develop]
repository_dispatch:
types: [element-web-notify]
concurrency:
group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
cancel-in-progress: true
group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
cancel-in-progress: true
jobs:
build:
name: "Build & Deploy develop.element.io"
# Only respect triggers from our develop branch, ignore that of forks
if: github.repository == 'vector-im/element-web'
runs-on: ubuntu-latest
environment: develop
env:
R2_BUCKET: 'element-web-develop'
R2_URL: ${{ secrets.CF_R2_S3_API }}
R2_PUBLIC_URL: 'https://element-web-develop.element.io'
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Build, Package & Upload sourcemaps
run: "./scripts/ci_package.sh"
build:
name: "Build & Deploy develop.element.io"
# Only respect triggers from our develop branch, ignore that of forks
if: github.repository == 'vector-im/element-web'
runs-on: ubuntu-latest
environment: develop
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
SENTRY_URL: ${{ secrets.SENTRY_URL }}
SENTRY_ORG: element
SENTRY_PROJECT: riot-web
# We only deploy the latest bundles to Cloudflare Pages and use _redirects to fallback to R2 for
# older ones. This redirect means that 'self' is insufficient in the CSP,
# and we have to add the R2 URL.
# Once Cloudflare redirects support proxying mode we will be able to ditch this.
# See Proxying in support table at https://developers.cloudflare.com/pages/platform/redirects
CSP_EXTRA_SOURCE: ${{ env.R2_PUBLIC_URL }}
R2_BUCKET: "element-web-develop"
R2_URL: ${{ secrets.CF_R2_S3_API }}
R2_PUBLIC_URL: "https://element-web-develop.element.io"
steps:
- uses: actions/checkout@v3
- run: mv dist/element-*.tar.gz dist/develop.tar.gz
- uses: actions/setup-node@v3
with:
cache: "yarn"
- uses: actions/upload-artifact@v3
with:
name: webapp
path: dist/develop.tar.gz
retention-days: 1
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Extract webapp
run: |
mkdir _deploy
tar xf dist/develop.tar.gz -C _deploy --strip-components=1
- name: Build, Package & Upload sourcemaps
run: "./scripts/ci_package.sh"
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
SENTRY_URL: ${{ secrets.SENTRY_URL }}
SENTRY_ORG: element
SENTRY_PROJECT: riot-web
# We only deploy the latest bundles to Cloudflare Pages and use _redirects to fallback to R2 for
# older ones. This redirect means that 'self' is insufficient in the CSP,
# and we have to add the R2 URL.
# Once Cloudflare redirects support proxying mode we will be able to ditch this.
# See Proxying in support table at https://developers.cloudflare.com/pages/platform/redirects
CSP_EXTRA_SOURCE: ${{ env.R2_PUBLIC_URL }}
- name: Copy config
run: cp element.io/develop/config.json _deploy/config.json
- run: mv dist/element-*.tar.gz dist/develop.tar.gz
- name: Populate 404.html
run: echo "404 Not Found" > _deploy/404.html
- uses: actions/upload-artifact@v3
with:
name: webapp
path: dist/develop.tar.gz
retention-days: 1
- name: Populate _headers
run: cp .github/cfp_headers _deploy/_headers
- name: Extract webapp
run: |
mkdir _deploy
tar xf dist/develop.tar.gz -C _deploy --strip-components=1
# Redirect requests for the develop tarball and the historical bundles to R2
- name: Populate _redirects
run: |
{
echo "/develop.tar.gz $R2_PUBLIC_URL/develop.tar.gz 301"
for bundle in $(aws s3 ls s3://$R2_BUCKET/bundles/ --endpoint-url $R2_URL --region=auto | awk '{print $2}'); do
echo "/bundles/${bundle}* $R2_PUBLIC_URL/bundles/${bundle}:splat 301"
done
} | tee _deploy/_redirects
env:
AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
- name: Copy config
run: cp element.io/develop/config.json _deploy/config.json
- name: Wait for other steps to succeed
uses: lewagon/wait-on-check-action@v1.2.0
with:
ref: ${{ github.ref }}
running-workflow-name: 'Build & Deploy develop.element.io'
repo-token: ${{ secrets.GITHUB_TOKEN }}
wait-interval: 10
check-regexp: ^((?!SonarCloud|SonarQube|issues|board).)*$
- name: Populate 404.html
run: echo "404 Not Found" > _deploy/404.html
# We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
# as the expires after 24h and requires auth to download.
# Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
- name: Deploy to R2
run: |
aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto
aws s3 cp _deploy/bundles s3://$R2_BUCKET/bundles --recursive --endpoint-url $R2_URL --region=auto
env:
AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
- name: Populate _headers
run: cp .github/cfp_headers _deploy/_headers
- name: Deploy to Cloudflare Pages
id: cfp
uses: cloudflare/pages-action@1
with:
apiToken: ${{ secrets.CF_PAGES_TOKEN }}
accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
projectName: element-web-develop
directory: _deploy
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
# Redirect requests for the develop tarball and the historical bundles to R2
- name: Populate _redirects
run: |
{
echo "/develop.tar.gz $R2_PUBLIC_URL/develop.tar.gz 301"
for bundle in $(aws s3 ls s3://$R2_BUCKET/bundles/ --endpoint-url $R2_URL --region=auto | awk '{print $2}'); do
echo "/bundles/${bundle}* $R2_PUBLIC_URL/bundles/${bundle}:splat 301"
done
} | tee _deploy/_redirects
env:
AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
- run: |
echo "Deployed to ${{ steps.cfp.outputs.url }}" >> $GITHUB_STEP_SUMMARY
- name: Wait for other steps to succeed
uses: lewagon/wait-on-check-action@v1.2.0
with:
ref: ${{ github.ref }}
running-workflow-name: "Build & Deploy develop.element.io"
repo-token: ${{ secrets.GITHUB_TOKEN }}
wait-interval: 10
check-regexp: ^((?!SonarCloud|SonarQube|issues|board).)*$
# We keep the latest develop.tar.gz on R2 instead of relying on the github artifact uploaded earlier
# as the expires after 24h and requires auth to download.
# Element Desktop's fetch script uses this tarball to fetch latest develop to build Nightlies.
- name: Deploy to R2
run: |
aws s3 cp dist/develop.tar.gz s3://$R2_BUCKET/develop.tar.gz --endpoint-url $R2_URL --region=auto
aws s3 cp _deploy/bundles s3://$R2_BUCKET/bundles --recursive --endpoint-url $R2_URL --region=auto
env:
AWS_ACCESS_KEY_ID: ${{ secrets.CF_R2_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_R2_TOKEN }}
- name: Deploy to Cloudflare Pages
id: cfp
uses: cloudflare/pages-action@1
with:
apiToken: ${{ secrets.CF_PAGES_TOKEN }}
accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
projectName: element-web-develop
directory: _deploy
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
- run: |
echo "Deployed to ${{ steps.cfp.outputs.url }}" >> $GITHUB_STEP_SUMMARY

102
.github/workflows/dockerhub.yaml vendored
View file

@ -1,61 +1,61 @@
name: Dockerhub
on:
workflow_dispatch: { }
push:
tags: [ v* ]
schedule:
# This job can take a while, and we have usage limits, so just publish develop only twice a day
- cron: '0 7/12 * * *'
workflow_dispatch: {}
push:
tags: [v*]
schedule:
# This job can take a while, and we have usage limits, so just publish develop only twice a day
- cron: "0 7/12 * * *"
concurrency: ${{ github.ref_name }}
jobs:
buildx:
name: Docker Buildx
runs-on: ubuntu-latest
environment: dockerhub
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0 # needed for docker-package to be able to calculate the version
buildx:
name: Docker Buildx
runs-on: ubuntu-latest
environment: dockerhub
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0 # needed for docker-package to be able to calculate the version
- name: Set up QEMU
uses: docker/setup-qemu-action@v2
- name: Set up QEMU
uses: docker/setup-qemu-action@v2
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2
with:
install: true
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2
with:
install: true
- name: Login to Docker Hub
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Login to Docker Hub
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Docker meta
id: meta
uses: docker/metadata-action@v4
with:
images: |
vectorim/element-web
tags: |
type=ref,event=branch
type=ref,event=tag
flavor: |
latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
- name: Docker meta
id: meta
uses: docker/metadata-action@v4
with:
images: |
vectorim/element-web
tags: |
type=ref,event=branch
type=ref,event=tag
flavor: |
latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
- name: Build and push
uses: docker/build-push-action@v3
with:
context: .
push: true
platforms: linux/amd64,linux/arm64
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
- name: Build and push
uses: docker/build-push-action@v3
with:
context: .
push: true
platforms: linux/amd64,linux/arm64
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
- name: Update repo description
uses: peter-evans/dockerhub-description@v3
continue-on-error: true
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
repository: vectorim/element-web
- name: Update repo description
uses: peter-evans/dockerhub-description@v3
continue-on-error: true
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
repository: vectorim/element-web

278
.github/workflows/issue_closed.yml vendored
View file

@ -2,155 +2,155 @@
# For all closed (completed) issues, cascade the closure onto any referenced rageshakes
# For all closed (not planned) issues, comment on rageshakes to move them into the canonical issue if one exists
on:
issues:
types: [ closed ]
issues:
types: [closed]
jobs:
tidy:
name: Tidy closed issues
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@v6
id: main
with:
# PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
script: |
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
number: context.issue.number,
};
tidy:
name: Tidy closed issues
runs-on: ubuntu-latest
steps:
- uses: actions/github-script@v6
id: main
with:
# PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
script: |
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
number: context.issue.number,
};
const query = `query($owner:String!, $name:String!, $number:Int!) {
repository(owner: $owner, name: $name) {
issue(number: $number) {
stateReason,
timelineItems(first: 100, itemTypes: [MARKED_AS_DUPLICATE_EVENT, UNMARKED_AS_DUPLICATE_EVENT, CROSS_REFERENCED_EVENT]) {
edges {
node {
__typename
... on MarkedAsDuplicateEvent {
canonical {
... on Issue {
repository {
nameWithOwner
const query = `query($owner:String!, $name:String!, $number:Int!) {
repository(owner: $owner, name: $name) {
issue(number: $number) {
stateReason,
timelineItems(first: 100, itemTypes: [MARKED_AS_DUPLICATE_EVENT, UNMARKED_AS_DUPLICATE_EVENT, CROSS_REFERENCED_EVENT]) {
edges {
node {
__typename
... on MarkedAsDuplicateEvent {
canonical {
... on Issue {
repository {
nameWithOwner
}
number
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
}
... on UnmarkedAsDuplicateEvent {
canonical {
... on Issue {
repository {
nameWithOwner
}
number
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
}
... on CrossReferencedEvent {
source {
... on Issue {
repository {
nameWithOwner
}
number
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
}
}
}
number
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
}
... on UnmarkedAsDuplicateEvent {
canonical {
... on Issue {
repository {
nameWithOwner
}
number
}`;
const result = await github.graphql(query, variables);
const { stateReason, timelineItems: { edges } } = result.repository.issue;
const RAGESHAKE_OWNER = "matrix-org";
const RAGESHAKE_REPO = "element-web-rageshakes";
const rageshakes = new Set();
const duplicateOf = new Set();
console.log("Edges: ", JSON.stringify(edges));
for (const { node } of edges) {
switch(node.__typename) {
case "MarkedAsDuplicateEvent":
duplicateOf.add(node.canonical.repository.nameWithOwner + "#" + node.canonical.number);
break;
case "UnmarkedAsDuplicateEvent":
duplicateOf.remove(node.canonical.repository.nameWithOwner + "#" + node.canonical.number);
break;
case "CrossReferencedEvent":
if (node.source.repository.nameWithOwner === (RAGESHAKE_OWNER + "/" + RAGESHAKE_REPO)) {
rageshakes.add(node.source.number);
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
}
... on CrossReferencedEvent {
source {
... on Issue {
repository {
nameWithOwner
}
number
}
... on PullRequest {
repository {
nameWithOwner
}
number
}
}
break;
}
}
}
}
}
}
}`;
const result = await github.graphql(query, variables);
const { stateReason, timelineItems: { edges } } = result.repository.issue;
console.log("Duplicate of: ", duplicateOf);
console.log("Found rageshakes: ", rageshakes);
const RAGESHAKE_OWNER = "matrix-org";
const RAGESHAKE_REPO = "element-web-rageshakes";
const rageshakes = new Set();
const duplicateOf = new Set();
if (duplicateOf.size) {
const body = Array.from(duplicateOf).join("\n");
console.log("Edges: ", JSON.stringify(edges));
// Comment on all rageshakes to create relationship to the issue this was closed as duplicate of
for (const rageshake of rageshakes) {
github.rest.issues.createComment({
owner: RAGESHAKE_OWNER,
repo: RAGESHAKE_REPO,
issue_number: rageshake,
body,
});
}
for (const { node } of edges) {
switch(node.__typename) {
case "MarkedAsDuplicateEvent":
duplicateOf.add(node.canonical.repository.nameWithOwner + "#" + node.canonical.number);
break;
case "UnmarkedAsDuplicateEvent":
duplicateOf.remove(node.canonical.repository.nameWithOwner + "#" + node.canonical.number);
break;
case "CrossReferencedEvent":
if (node.source.repository.nameWithOwner === (RAGESHAKE_OWNER + "/" + RAGESHAKE_REPO)) {
rageshakes.add(node.source.number);
}
break;
}
}
console.log("Duplicate of: ", duplicateOf);
console.log("Found rageshakes: ", rageshakes);
if (duplicateOf.size) {
const body = Array.from(duplicateOf).join("\n");
// Comment on all rageshakes to create relationship to the issue this was closed as duplicate of
for (const rageshake of rageshakes) {
github.rest.issues.createComment({
owner: RAGESHAKE_OWNER,
repo: RAGESHAKE_REPO,
issue_number: rageshake,
body,
});
}
// Duplicate was closed with wrong reason, fix it
if (stateReason === "COMPLETED") {
core.setOutput("closeAsNotPlanned", "true");
}
} else {
// This issue was closed, close all related rageshakes
for (const rageshake of rageshakes) {
github.rest.issues.update({
owner: RAGESHAKE_OWNER,
repo: RAGESHAKE_REPO,
issue_number: rageshake,
state: "closed",
});
}
}
- uses: actions/github-script@v6
name: Close duplicate as Not Planned
if: steps.main.outputs.closeAsNotPlanned
with:
# We do this step separately, and with the default token so as to not re-trigger this workflow when re-closing
script: |
await github.graphql(`mutation($id:ID!) {
closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
clientMutationId
}
}`, {
id: context.payload.issue.node_id,
});
// Duplicate was closed with wrong reason, fix it
if (stateReason === "COMPLETED") {
core.setOutput("closeAsNotPlanned", "true");
}
} else {
// This issue was closed, close all related rageshakes
for (const rageshake of rageshakes) {
github.rest.issues.update({
owner: RAGESHAKE_OWNER,
repo: RAGESHAKE_REPO,
issue_number: rageshake,
state: "closed",
});
}
}
- uses: actions/github-script@v6
name: Close duplicate as Not Planned
if: steps.main.outputs.closeAsNotPlanned
with:
# We do this step separately, and with the default token so as to not re-trigger this workflow when re-closing
script: |
await github.graphql(`mutation($id:ID!) {
closeIssue(input: { issueId:$id, stateReason:NOT_PLANNED }) {
clientMutationId
}
}`, {
id: context.payload.issue.node_id,
});

16
.github/workflows/pull_request.yaml vendored
View file

@ -1,12 +1,12 @@
name: Pull Request
on:
pull_request_target:
types: [ opened, edited, labeled, unlabeled, synchronize ]
pull_request_target:
types: [opened, edited, labeled, unlabeled, synchronize]
concurrency: ${{ github.workflow }}-${{ github.event.pull_request.head.ref }}
jobs:
action:
uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
with:
labels: "T-Defect,T-Enhancement,T-Task"
secrets:
ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
action:
uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
with:
labels: "T-Defect,T-Enhancement,T-Task"
secrets:
ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

22
.github/workflows/sonarqube.yml vendored
View file

@ -1,15 +1,15 @@
name: SonarQube
on:
workflow_run:
workflows: [ "Tests" ]
types:
- completed
workflow_run:
workflows: ["Tests"]
types:
- completed
concurrency:
group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
cancel-in-progress: true
group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
cancel-in-progress: true
jobs:
sonarqube:
name: 🩻 SonarQube
uses: matrix-org/matrix-js-sdk/.github/workflows/sonarcloud.yml@develop
secrets:
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
sonarqube:
name: 🩻 SonarQube
uses: matrix-org/matrix-js-sdk/.github/workflows/sonarcloud.yml@develop
secrets:
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

188
.github/workflows/static_analysis.yaml vendored
View file

@ -1,119 +1,119 @@
name: Static Analysis
on:
pull_request: { }
push:
branches: [ develop, master ]
repository_dispatch:
types: [ element-web-notify ]
pull_request: {}
push:
branches: [develop, master]
repository_dispatch:
types: [element-web-notify]
env:
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
jobs:
ts_lint:
name: "Typescript Syntax Check"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
ts_lint:
name: "Typescript Syntax Check"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- uses: actions/setup-node@v3
with:
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Typecheck
run: "yarn run lint:types"
- name: Typecheck
run: "yarn run lint:types"
tsc-strict:
name: Typescript Strict Error Checker
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
permissions:
pull-requests: read
checks: write
steps:
- uses: actions/checkout@v3
tsc-strict:
name: Typescript Strict Error Checker
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
permissions:
pull-requests: read
checks: write
steps:
- uses: actions/checkout@v3
- name: Install Deps
run: "scripts/layered.sh"
- name: Install Deps
run: "scripts/layered.sh"
- name: Get diff lines
id: diff
uses: Equip-Collaboration/diff-line-numbers@v1.0.0
with:
include: '["\\.tsx?$"]'
- name: Get diff lines
id: diff
uses: Equip-Collaboration/diff-line-numbers@v1.0.0
with:
include: '["\\.tsx?$"]'
- name: Detecting files changed
id: files
uses: futuratrepadeira/changed-files@v4.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
pattern: '^.*\.tsx?$'
- name: Detecting files changed
id: files
uses: futuratrepadeira/changed-files@v4.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
pattern: '^.*\.tsx?$'
- uses: t3chguy/typescript-check-action@main
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
use-check: false
check-fail-mode: added
output-behaviour: annotate
ts-extra-args: '--strict --noImplicitAny'
files-changed: ${{ steps.files.outputs.files_updated }}
files-added: ${{ steps.files.outputs.files_created }}
files-deleted: ${{ steps.files.outputs.files_deleted }}
line-numbers: ${{ steps.diff.outputs.lineNumbers }}
- uses: t3chguy/typescript-check-action@main
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
use-check: false
check-fail-mode: added
output-behaviour: annotate
ts-extra-args: "--strict --noImplicitAny"
files-changed: ${{ steps.files.outputs.files_updated }}
files-added: ${{ steps.files.outputs.files_created }}
files-deleted: ${{ steps.files.outputs.files_deleted }}
line-numbers: ${{ steps.diff.outputs.lineNumbers }}
i18n_lint:
name: "i18n Check"
uses: matrix-org/matrix-react-sdk/.github/workflows/i18n_check.yml@develop
i18n_lint:
name: "i18n Check"
uses: matrix-org/matrix-react-sdk/.github/workflows/i18n_check.yml@develop
js_lint:
name: "ESLint"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
js_lint:
name: "ESLint"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- uses: actions/setup-node@v3
with:
cache: "yarn"
# Does not need branch matching as only analyses this layer
- name: Install Deps
run: "yarn install --pure-lockfile"
# Does not need branch matching as only analyses this layer
- name: Install Deps
run: "yarn install --pure-lockfile"
- name: Run Linter
run: "yarn run lint:js"
- name: Run Linter
run: "yarn run lint:js"
style_lint:
name: "Style Lint"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
style_lint:
name: "Style Lint"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- uses: actions/setup-node@v3
with:
cache: "yarn"
# Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
- name: Install Dependencies
run: "./scripts/layered.sh"
# Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Run Linter
run: "yarn run lint:style"
- name: Run Linter
run: "yarn run lint:style"
analyse_dead_code:
name: "Analyse Dead Code"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
analyse_dead_code:
name: "Analyse Dead Code"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
- uses: actions/setup-node@v3
with:
cache: "yarn"
- name: Install Deps
run: "scripts/layered.sh"
- name: Install Deps
run: "scripts/layered.sh"
- name: Dead Code Analysis
run: "yarn run analyse:unused-exports"
- name: Dead Code Analysis
run: "yarn run analyse:unused-exports"

64
.github/workflows/tests.yaml vendored
View file

@ -1,41 +1,41 @@
name: Tests
on:
pull_request: { }
push:
branches: [ develop, master ]
repository_dispatch:
types: [ element-web-notify ]
pull_request: {}
push:
branches: [develop, master]
repository_dispatch:
types: [element-web-notify]
env:
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
PR_NUMBER: ${{ github.event.pull_request.number }}
jobs:
jest:
name: Jest
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
jest:
name: Jest
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Yarn cache
uses: actions/setup-node@v3
with:
cache: 'yarn'
- name: Yarn cache
uses: actions/setup-node@v3
with:
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Install Dependencies
run: "./scripts/layered.sh"
- name: Get number of CPU cores
id: cpu-cores
uses: SimenB/github-actions-cpu-cores@v1
- name: Get number of CPU cores
id: cpu-cores
uses: SimenB/github-actions-cpu-cores@v1
- name: Run tests with coverage
run: "yarn coverage --ci --reporters github-actions --max-workers ${{ steps.cpu-cores.outputs.count }}"
- name: Run tests with coverage
run: "yarn coverage --ci --reporters github-actions --max-workers ${{ steps.cpu-cores.outputs.count }}"
- name: Upload Artifact
uses: actions/upload-artifact@v3
with:
name: coverage
path: |
coverage
!coverage/lcov-report
- name: Upload Artifact
uses: actions/upload-artifact@v3
with:
name: coverage
path: |
coverage
!coverage/lcov-report

26
.github/workflows/triage-assigned.yml vendored
View file

@ -1,18 +1,18 @@
name: Move issued assigned to specific team members to their boards
on:
issues:
types: [ assigned ]
issues:
types: [assigned]
jobs:
web-app-team:
runs-on: ubuntu-latest
if: |
contains(github.event.issue.assignees.*.login, 't3chguy') ||
contains(github.event.issue.assignees.*.login, 'turt2live')
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Web App Team
column: "In Progress"
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
web-app-team:
runs-on: ubuntu-latest
if: |
contains(github.event.issue.assignees.*.login, 't3chguy') ||
contains(github.event.issue.assignees.*.login, 'turt2live')
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Web App Team
column: "In Progress"
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

20
.github/workflows/triage-incoming.yml vendored
View file

@ -1,15 +1,15 @@
name: Move new issues into Issue triage board
on:
issues:
types: [ opened ]
issues:
types: [opened]
jobs:
automate-project-columns:
runs-on: ubuntu-latest
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Issue triage
column: Incoming
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
automate-project-columns:
runs-on: ubuntu-latest
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Issue triage
column: Incoming
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

680
.github/workflows/triage-labelled.yml vendored
View file

@ -1,359 +1,359 @@
name: Move labelled issues to correct projects
on:
issues:
types: [labeled]
issues:
types: [labeled]
jobs:
apply_Z-Labs_label:
name: Add Z-Labs label for features behind labs flags
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Maths') ||
contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
contains(github.event.issue.labels.*.name, 'Z-IA') ||
contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-Tags') ||
contains(github.event.issue.labels.*.name, 'A-Video-Rooms') ||
contains(github.event.issue.labels.*.name, 'A-Message-Starring') ||
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
contains(github.event.issue.labels.*.name, 'A-Element-Call')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: ['Z-Labs']
})
apply_Z-Labs_label:
name: Add Z-Labs label for features behind labs flags
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Maths') ||
contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
contains(github.event.issue.labels.*.name, 'Z-IA') ||
contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-Tags') ||
contains(github.event.issue.labels.*.name, 'A-Video-Rooms') ||
contains(github.event.issue.labels.*.name, 'A-Message-Starring') ||
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
contains(github.event.issue.labels.*.name, 'A-Element-Call')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: ['Z-Labs']
})
apply_Help-Wanted_label:
name: Add "Help Wanted" label to all "good first issue" and Hacktoberfest
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'good first issue') ||
contains(github.event.issue.labels.*.name, 'Hacktoberfest')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: ['Help Wanted']
})
apply_Help-Wanted_label:
name: Add "Help Wanted" label to all "good first issue" and Hacktoberfest
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'good first issue') ||
contains(github.event.issue.labels.*.name, 'Hacktoberfest')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.addLabels({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
labels: ['Help Wanted']
})
move_needs_info_issues:
name: X-Needs-Info issues to Need info column on triage board
runs-on: ubuntu-latest
steps:
- uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
with:
action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
project-url: "https://github.com/vector-im/element-web/projects/27"
column-name: "Need info"
label-name: "X-Needs-Info"
move_needs_info_issues:
name: X-Needs-Info issues to Need info column on triage board
runs-on: ubuntu-latest
steps:
- uses: konradpabjan/move-labeled-or-milestoned-issue@190352295fe309fcb113b49193bc81d9aaa9cb01
with:
action-token: "${{ secrets.ELEMENT_BOT_TOKEN }}"
project-url: "https://github.com/vector-im/element-web/projects/27"
column-name: "Need info"
label-name: "X-Needs-Info"
add_priority_design_issues_to_project:
name: P1 X-Needs-Design to Design project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
(contains(github.event.issue.labels.*.name, 'S-Critical') &&
(contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
contains(github.event.issue.labels.*.name, 'S-Major') &&
contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'A11y'))
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc0sUA"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
add_priority_design_issues_to_project:
name: P1 X-Needs-Design to Design project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
(contains(github.event.issue.labels.*.name, 'S-Critical') &&
(contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
contains(github.event.issue.labels.*.name, 'S-Major') &&
contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'A11y'))
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc0sUA"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
add_product_issues:
name: X-Needs-Product to product project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'X-Needs-Product')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AAg6N"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
add_product_issues:
name: X-Needs-Product to product project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'X-Needs-Product')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AAg6N"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
Delight_issues_to_board:
name: Delight issues to project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-New-Search-Experience') ||
(contains(github.event.issue.labels.*.name, 'A-Threads') &&
(contains(github.event.issue.labels.*.name, 'S-Major') ||
contains(github.event.issue.labels.*.name, 'S-Critical'))) ||
contains(github.event.issue.labels.*.name, 'Team: Delight') ||
contains(github.event.issue.labels.*.name, 'Z-NewUserJourney')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc1HvQ"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
Delight_issues_to_board:
name: Delight issues to project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-New-Search-Experience') ||
(contains(github.event.issue.labels.*.name, 'A-Threads') &&
(contains(github.event.issue.labels.*.name, 'S-Major') ||
contains(github.event.issue.labels.*.name, 'S-Critical'))) ||
contains(github.event.issue.labels.*.name, 'Team: Delight') ||
contains(github.event.issue.labels.*.name, 'Z-NewUserJourney')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc1HvQ"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
Search_issues_to_board:
name: Search issues to project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4ADtaO"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
Search_issues_to_board:
name: Search issues to project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4ADtaO"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_voice-message_issues:
name: A-Voice Messages to voice message board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Voice Messages')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc2KCw"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_voice-message_issues:
name: A-Voice Messages to voice message board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Voice Messages')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc2KCw"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_message_bubbles_issues:
name: A-Message-Bubbles to Message bubbles board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Message-Bubbles')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc3m-g"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_message_bubbles_issues:
name: A-Message-Bubbles to Message bubbles board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Message-Bubbles')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc3m-g"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_ftue_issues:
name: Z-FTUE issues to the FTUE project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-FTUE')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AAqVx"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_ftue_issues:
name: Z-FTUE issues to the FTUE project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-FTUE')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AAqVx"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_WTF_issues:
name: Z-WTF issues to the WTF project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-WTF')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AArk0"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
move_WTF_issues:
name: Z-WTF issues to the WTF project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-WTF')
steps:
- uses: octokit/graphql-action@v2.x
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AArk0"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features1:
name: Add labelled issues to PS features team 1
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Polls') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
(contains(github.event.issue.labels.*.name, 'A-Voice-Messages') &&
!contains(github.event.issue.labels.*.name, 'A-Broadcast')) ||
(contains(github.event.issue.labels.*.name, 'A-Session-Mgmt') &&
contains(github.event.issue.labels.*.name, 'A-User-Settings'))
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKF"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features1:
name: Add labelled issues to PS features team 1
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Polls') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
(contains(github.event.issue.labels.*.name, 'A-Voice-Messages') &&
!contains(github.event.issue.labels.*.name, 'A-Broadcast')) ||
(contains(github.event.issue.labels.*.name, 'A-Session-Mgmt') &&
contains(github.event.issue.labels.*.name, 'A-User-Settings'))
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKF"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features2:
name: Add labelled issues to PS features team 2
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-DM-Start') ||
contains(github.event.issue.labels.*.name, 'A-Broadcast')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKd"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features2:
name: Add labelled issues to PS features team 2
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-DM-Start') ||
contains(github.event.issue.labels.*.name, 'A-Broadcast')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKd"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features3:
name: Add labelled issues to PS features team 3
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKW"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
ps_features3:
name: Add labelled issues to PS features team 3
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4AHJKW"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
voip:
name: Add labelled issues to VoIP project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Team: VoIP')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4ABMIk"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
voip:
name: Add labelled issues to VoIP project board
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Team: VoIP')
steps:
- uses: octokit/graphql-action@v2.x
id: add_to_project
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!,$contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.issue.node_id }}
env:
PROJECT_ID: "PVT_kwDOAM0swc4ABMIk"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

260
.github/workflows/triage-move-review-requests.yml vendored
View file

@ -1,139 +1,139 @@
name: Move pull requests asking for review to the relevant project
on:
pull_request_target:
types: [ review_requested ]
pull_request_target:
types: [review_requested]
jobs:
add_design_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "vector-im") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
add_design_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "vector-im") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "design"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc0sUA"
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "design"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc0sUA"
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
add_product_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "vector-im") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
add_product_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "vector-im") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "product"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc4AAg6N"
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "product"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectV2ItemById(input: {projectId: $projectid contentId: $contentid}) {
item {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc4AAg6N"
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

50
.github/workflows/triage-priority-bugs.yml vendored
View file

@ -1,30 +1,30 @@
name: Move P1 bugs to boards
on:
issues:
types: [labeled, unlabeled]
issues:
types: [labeled, unlabeled]
jobs:
P1_issues_to_crypto_team_workboard:
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-UISI') ||
(contains(github.event.issue.labels.*.name, 'A-E2EE') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Cross-Signing') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Key-Backup') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-SAS-Verification')) &&
(contains(github.event.issue.labels.*.name, 'T-Defect') &&
contains(github.event.issue.labels.*.name, 'S-Critical') &&
(contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
contains(github.event.issue.labels.*.name, 'S-Major') &&
contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'A11y') &&
contains(github.event.issue.labels.*.name, 'O-Frequent'))
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Crypto Team
column: Ready
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
P1_issues_to_crypto_team_workboard:
runs-on: ubuntu-latest
if: >
contains(github.event.issue.labels.*.name, 'Z-UISI') ||
(contains(github.event.issue.labels.*.name, 'A-E2EE') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Cross-Signing') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Key-Backup') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-SAS-Verification')) &&
(contains(github.event.issue.labels.*.name, 'T-Defect') &&
contains(github.event.issue.labels.*.name, 'S-Critical') &&
(contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'O-Occasional')) ||
contains(github.event.issue.labels.*.name, 'S-Major') &&
contains(github.event.issue.labels.*.name, 'O-Frequent') ||
contains(github.event.issue.labels.*.name, 'A11y') &&
contains(github.event.issue.labels.*.name, 'O-Frequent'))
steps:
- uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
with:
project: Crypto Team
column: Ready
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

128
.github/workflows/triage-unlabelled.yml vendored
View file

@ -1,70 +1,70 @@
name: Move unlabelled from needs info columns to triaged
on:
issues:
types: [ unlabeled ]
issues:
types: [unlabeled]
jobs:
Move_Unabeled_Issue_On_Project_Board:
name: Move no longer X-Needs-Info issues to Triaged
runs-on: ubuntu-latest
if: >
${{
!contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
env:
BOARD_NAME: "Issue triage"
OWNER: ${{ github.repository_owner }}
REPO: ${{ github.event.repository.name }}
ISSUE: ${{ github.event.issue.number }}
steps:
- name: Check if issue is already in "${{ env.BOARD_NAME }}"
run: |
json=$(curl -s -H 'Content-Type: application/json' -H "Authorization: bearer ${{ secrets.GITHUB_TOKEN }}" -X POST -d '{"query": "query($issue: Int!, $owner: String!, $repo: String!) { repository(owner: $owner, name: $repo) { issue(number: $issue) { projectCards { nodes { project { name } isArchived } } } } } ", "variables" : "{ \"issue\": '${ISSUE}', \"owner\": \"'${OWNER}'\", \"repo\": \"'${REPO}'\" }" }' https://api.github.com/graphql)
if echo $json | jq '.data.repository.issue.projectCards.nodes | length'; then
if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].project.name') =~ "${BOARD_NAME}" ]]; then
if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].isArchived') == 'true' ]]; then
echo "Issue is already in Project '$BOARD_NAME', but is archived - skipping workflow";
echo "SKIP_ACTION=true" >> $GITHUB_ENV
else
echo "Issue is already in Project '$BOARD_NAME', proceeding";
echo "ALREADY_IN_BOARD=true" >> $GITHUB_ENV
fi
else
echo "Issue is not in project '$BOARD_NAME', cancelling this workflow"
echo "ALREADY_IN_BOARD=false" >> $GITHUB_ENV
fi
fi
- name: Move issue
uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
with:
project: Issue triage
column: Triaged
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
Move_Unabeled_Issue_On_Project_Board:
name: Move no longer X-Needs-Info issues to Triaged
runs-on: ubuntu-latest
if: >
${{
!contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
env:
BOARD_NAME: "Issue triage"
OWNER: ${{ github.repository_owner }}
REPO: ${{ github.event.repository.name }}
ISSUE: ${{ github.event.issue.number }}
steps:
- name: Check if issue is already in "${{ env.BOARD_NAME }}"
run: |
json=$(curl -s -H 'Content-Type: application/json' -H "Authorization: bearer ${{ secrets.GITHUB_TOKEN }}" -X POST -d '{"query": "query($issue: Int!, $owner: String!, $repo: String!) { repository(owner: $owner, name: $repo) { issue(number: $issue) { projectCards { nodes { project { name } isArchived } } } } } ", "variables" : "{ \"issue\": '${ISSUE}', \"owner\": \"'${OWNER}'\", \"repo\": \"'${REPO}'\" }" }' https://api.github.com/graphql)
if echo $json | jq '.data.repository.issue.projectCards.nodes | length'; then
if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].project.name') =~ "${BOARD_NAME}" ]]; then
if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].isArchived') == 'true' ]]; then
echo "Issue is already in Project '$BOARD_NAME', but is archived - skipping workflow";
echo "SKIP_ACTION=true" >> $GITHUB_ENV
else
echo "Issue is already in Project '$BOARD_NAME', proceeding";
echo "ALREADY_IN_BOARD=true" >> $GITHUB_ENV
fi
else
echo "Issue is not in project '$BOARD_NAME', cancelling this workflow"
echo "ALREADY_IN_BOARD=false" >> $GITHUB_ENV
fi
fi
- name: Move issue
uses: alex-page/github-project-automation-plus@1f8873e97e3c8f58161a323b7c568c1f623a1c4d
if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
with:
project: Issue triage
column: Triaged
repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
remove_Z-Labs_label:
name: Remove Z-Labs label when features behind labs flags are removed
runs-on: ubuntu-latest
if: >
!(contains(github.event.issue.labels.*.name, 'A-Maths') ||
contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
contains(github.event.issue.labels.*.name, 'Z-IA') ||
contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-Tags') ||
contains(github.event.issue.labels.*.name, 'A-Video-Rooms') ||
contains(github.event.issue.labels.*.name, 'A-Message-Starring') ||
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
contains(github.event.issue.labels.*.name, 'Z-Labs')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.removeLabel({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
name: ['Z-Labs']
})
remove_Z-Labs_label:
name: Remove Z-Labs label when features behind labs flags are removed
runs-on: ubuntu-latest
if: >
!(contains(github.event.issue.labels.*.name, 'A-Maths') ||
contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
contains(github.event.issue.labels.*.name, 'Z-IA') ||
contains(github.event.issue.labels.*.name, 'A-Themes-Custom') ||
contains(github.event.issue.labels.*.name, 'A-E2EE-Dehydration') ||
contains(github.event.issue.labels.*.name, 'A-Tags') ||
contains(github.event.issue.labels.*.name, 'A-Video-Rooms') ||
contains(github.event.issue.labels.*.name, 'A-Message-Starring') ||
contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
contains(github.event.issue.labels.*.name, 'Z-Labs')
steps:
- uses: actions/github-script@v6
with:
script: |
github.rest.issues.removeLabel({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
name: ['Z-Labs']
})

10
.github/workflows/upgrade_dependencies.yml vendored
View file

@ -1,8 +1,8 @@
name: Upgrade Dependencies
on:
workflow_dispatch: { }
workflow_dispatch: {}
jobs:
upgrade:
uses: matrix-org/matrix-js-sdk/.github/workflows/upgrade_dependencies.yml@develop
secrets:
ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
upgrade:
uses: matrix-org/matrix-js-sdk/.github/workflows/upgrade_dependencies.yml@develop
secrets:
ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

58
.modernizr.json
View file

@ -1,36 +1,36 @@
{
"minify": true,
"enableClasses": false,
"feature-detects": [
"test/css/animations",
"test/css/displaytable",
"test/css/filters",
"test/css/flexbox",
"test/css/objectfit",
"minify": true,
"enableClasses": false,
"feature-detects": [
"test/css/animations",
"test/css/displaytable",
"test/css/filters",
"test/css/flexbox",
"test/css/objectfit",
"test/es5/date",
"test/es5/function",
"test/es5/object",
"test/es5/undefined",
"test/es5/date",
"test/es5/function",
"test/es5/object",
"test/es5/undefined",
"test/es6/array",
"test/es6/collections",
"test/es6/promises",
"test/es6/string",
"test/es6/array",
"test/es6/collections",
"test/es6/promises",
"test/es6/string",
"test/svg",
"test/svg/asimg",
"test/svg/filters",
"test/svg",
"test/svg/asimg",
"test/svg/filters",
"test/url/parser",
"test/url/urlsearchparams",
"test/url/parser",
"test/url/urlsearchparams",
"test/cors",
"test/crypto",
"test/iframe/sandbox",
"test/json",
"test/network/fetch",
"test/storage/localstorage",
"test/window/resizeobserver"
]
"test/cors",
"test/crypto",
"test/iframe/sandbox",
"test/json",
"test/network/fetch",
"test/storage/localstorage",
"test/window/resizeobserver"
]
}

13115
CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

91
CONTRIBUTING.md
View file

@ -1,5 +1,4 @@
Contributing code to Element Web
================================
# Contributing code to Element Web
Everyone is welcome to contribute code to Element Web, provided that they are
willing to license their contributions under the same license as the project
@ -9,8 +8,7 @@ license the code under the same terms as the project's overall 'outbound'
license - in this case, Apache Software License v2 (see
[LICENSE](LICENSE)).
How to contribute
-----------------
## How to contribute
The preferred and easiest way to contribute changes to the project is to fork
it on github, and then create a pull request to ask us to pull your changes
@ -20,27 +18,28 @@ We use GitHub's pull request workflow to review the contribution, and either
ask you to make any refinements needed or merge it and make them ourselves.
Things that should go into your PR description:
* A changelog entry in the `Notes` section (see below)
* References to any bugs fixed by the change (in GitHub's `Fixes` notation)
* Describe the why and what is changing in the PR description so it's easy for
onlookers and reviewers to onboard and context switch. This information is
also helpful when we come back to look at this in 6 months and ask "why did
we do it like that?" we have a chance of finding out.
* Why didn't it work before? Why does it work now? What use cases does it
- A changelog entry in the `Notes` section (see below)
- References to any bugs fixed by the change (in GitHub's `Fixes` notation)
- Describe the why and what is changing in the PR description so it's easy for
onlookers and reviewers to onboard and context switch. This information is
also helpful when we come back to look at this in 6 months and ask "why did
we do it like that?" we have a chance of finding out.
- Why didn't it work before? Why does it work now? What use cases does it
unlock?
* If you find yourself adding information on how the code works or why you
- If you find yourself adding information on how the code works or why you
chose to do it the way you did, make sure this information is instead
written as comments in the code itself.
* Sometimes a PR can change considerably as it is developed. In this case,
- Sometimes a PR can change considerably as it is developed. In this case,
the description should be updated to reflect the most recent state of
the PR. (It can be helpful to retain the old content under a suitable
heading, for additional context.)
* Include both **before** and **after** screenshots to easily compare and discuss
what's changing.
* Include a step-by-step testing strategy so that a reviewer can check out the
code locally and easily get to the point of testing your change.
* Add comments to the diff for the reviewer that might help them to understand
why the change is necessary or how they might better understand and review it.
- Include both **before** and **after** screenshots to easily compare and discuss
what's changing.
- Include a step-by-step testing strategy so that a reviewer can check out the
code locally and easily get to the point of testing your change.
- Add comments to the diff for the reviewer that might help them to understand
why the change is necessary or how they might better understand and review it.
We rely on information in pull request to populate the information that goes into
the changelogs our users see, both for Element Web itself and other projects on
@ -50,8 +49,7 @@ used for the changelog entry, but you can specify more options, as follows.
To add a longer, more detailed description of the change for the changelog:
*Fix llama herding bug*
_Fix llama herding bug_
```
Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where the 'Herd' button would not herd more than 8 Llamas if the moon was in the waxing gibbous phase
@ -60,7 +58,8 @@ Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where th
For some PRs, it's not useful to have an entry in the user-facing changelog (this is
the default for PRs labelled with `T-Task`):
*Remove outdated comment from `Ungulates.ts`*
_Remove outdated comment from `Ungulates.ts`_
```
Notes: none
```
@ -68,16 +67,18 @@ Notes: none
Sometimes, you're fixing a bug in a downstream project, in which case you want
an entry in that project's changelog. You can do that too:
*Fix another herding bug*
_Fix another herding bug_
```
Notes: Fix a bug where the `herd()` function would only work on Tuesdays
element-web notes: Fix a bug where the 'Herd' button only worked on Tuesdays
```
This example is for Element Web. You can specify:
* matrix-react-sdk
* element-web
* element-desktop
- matrix-react-sdk
- element-web
- element-desktop
If your PR introduces a breaking change, use the `Notes` section in the same
way, additionally adding the `X-Breaking-Change` label (see below). There's no need
@ -85,17 +86,18 @@ to specify in the notes that it's a breaking change - this will be added
automatically based on the label - but remember to tell the developer how to
migrate:
*Remove legacy class*
_Remove legacy class_
```
Notes: Remove legacy `Camelopard` class. `Giraffe` should be used instead.
```
Other metadata can be added using labels.
* `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a *major* version bump.
* `T-Enhancement`: A new feature - adding this label will mean the change causes a *minor* version bump.
* `T-Defect`: A bug fix (in either code or docs).
* `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
- `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a _major_ version bump.
- `T-Enhancement`: A new feature - adding this label will mean the change causes a _minor_ version bump.
- `T-Defect`: A bug fix (in either code or docs).
- `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
If you don't have permission to add labels, your PR reviewer(s) can work with you
to add them: ask in the PR description or comments.
@ -104,8 +106,8 @@ We use continuous integration, and all pull requests get automatically tested:
if your change breaks the build, then the PR will show that there are failed
checks, so please check back after a few minutes.
Tests
-----
## Tests
Your PR should include tests.
For new user facing features in `matrix-js-sdk`, `matrix-react-sdk` or `element-web`, you
@ -139,6 +141,7 @@ why it's not possible in your PR.
Some sections of code are not sensible to add coverage for, such as those
which explicitly inhibit noisy logging for tests. Which can be hidden using
an istanbul magic comment as [documented here][1]. See example:
```javascript
/* istanbul ignore if */
if (process.env.NODE_ENV !== "test") {
@ -160,8 +163,8 @@ tests later will become progressively more difficult.
If you're not sure how to approach writing tests for your change, ask for help
in [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
Code style
----------
## Code style
Element Web aims to target TypeScript/ES6. All new files should be written in
TypeScript and existing files should use ES6 principles where possible.
@ -174,11 +177,11 @@ The remaining code style is documented in [code_style.md](./code_style.md).
Contributors are encouraged to it and follow the principles set out there.
Please ensure your changes match the cosmetic style of the existing project,
and ***never*** mix cosmetic and functional changes in the same commit, as it
and **_never_** mix cosmetic and functional changes in the same commit, as it
makes it horribly hard to review otherwise.
Attribution
-----------
## Attribution
Everyone who contributes anything to Matrix is welcome to be listed in the
AUTHORS.rst file for the project in question. Please feel free to include a
change to AUTHORS.rst in your pull request to list yourself and a short
@ -187,8 +190,8 @@ give away to contributors - if you feel that Matrix-branded apparel is missing
from your life, please mail us your shipping address to matrix at matrix.org
and we'll try to fix it :)
Sign off
--------
## Sign off
In order to have a concrete record that your contribution is intentional
and you agree to license it under the same terms as the project's license, we've
adopted the same lightweight approach that the Linux Kernel
@ -259,14 +262,11 @@ on Git 2.17+ you can mass signoff using rebase:
git rebase --signoff origin/develop
```
Review expectations
===================
# Review expectations
See https://github.com/vector-im/element-meta/wiki/Review-process
Merge Strategy
==============
# Merge Strategy
The preferred method for merging pull requests is squash merging to keep the
commit history trim, but it is up to the discretion of the team member merging
@ -279,5 +279,4 @@ When stacking pull requests, you may wish to do the following:
2. Branch from your base branch (branch1) to your work branch (branch2), push commits and open a pull request configuring the base to be branch1, saying in the description that it is based on your other PR.
3. Merge the first PR using a merge commit otherwise your stacked PR will need a rebase. Github will automatically adjust the base branch of your other PR to be develop.
[1]: https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md

133
README.md
View file

@ -7,37 +7,34 @@
[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=element-web&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=element-web)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=element-web&metric=bugs)](https://sonarcloud.io/summary/new_code?id=element-web)
Element
=======
# Element
Element (formerly known as Vector and Riot) is a Matrix web client built using the [Matrix
React SDK](https://github.com/matrix-org/matrix-react-sdk).
Supported Environments
======================
# Supported Environments
Element has several tiers of support for different environments:
* Supported
* Definition: Issues **actively triaged**, regressions **block** the release
* Last 2 major versions of Chrome, Firefox, Safari, and Edge on desktop OSes
* Latest release of official Element Desktop app on desktop OSes
* Desktop OSes means macOS, Windows, and Linux versions for desktop devices
that are actively supported by the OS vendor and receive security updates
* Experimental
* Definition: Issues **accepted**, regressions **do not block** the release
* Element as an installed PWA via current stable version of Chrome, Firefox, and Safari
* Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
* Not supported
* Definition: Issues only affecting unsupported environments are **closed**
* Everything else
- Supported
- Definition: Issues **actively triaged**, regressions **block** the release
- Last 2 major versions of Chrome, Firefox, Safari, and Edge on desktop OSes
- Latest release of official Element Desktop app on desktop OSes
- Desktop OSes means macOS, Windows, and Linux versions for desktop devices
that are actively supported by the OS vendor and receive security updates
- Experimental
- Definition: Issues **accepted**, regressions **do not block** the release
- Element as an installed PWA via current stable version of Chrome, Firefox, and Safari
- Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
- Not supported
- Definition: Issues only affecting unsupported environments are **closed**
- Everything else
For accessing Element on an Android or iOS device, we currently recommend the
native apps [element-android](https://github.com/vector-im/element-android)
and [element-ios](https://github.com/vector-im/element-ios).
Getting Started
===============
# Getting Started
The easiest way to test Element is to just use the hosted copy at <https://app.element.io>.
The `develop` branch is continuously deployed to <https://develop.element.io>
@ -67,47 +64,39 @@ and thus allowed.
To install Element as a desktop application, see [Running as a desktop
app](#running-as-a-desktop-app) below.
Important Security Notes
========================
# Important Security Notes
Separate domains
----------------
## Separate domains
We do not recommend running Element from the same domain name as your Matrix
homeserver. The reason is the risk of XSS (cross-site-scripting)
homeserver. The reason is the risk of XSS (cross-site-scripting)
vulnerabilities that could occur if someone caused Element to load and render
malicious user generated content from a Matrix API which then had trusted
access to Element (or other apps) due to sharing the same domain.
We have put some coarse mitigations into place to try to protect against this
situation, but it's still not good practice to do it in the first place. See
situation, but it's still not good practice to do it in the first place. See
<https://github.com/vector-im/element-web/issues/1977> for more details.
Configuration best practices
----------------------------
## Configuration best practices
Unless you have special requirements, you will want to add the following to
your web server configuration when hosting Element Web:
* The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
framed and protect from [clickjacking][owasp-clickjacking].
* The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
header, as the modern replacement for `X-Frame-Options` (though both should be
included since not all browsers support it yet, see
[this][owasp-clickjacking-csp]).
* The `X-Content-Type-Options: nosniff` header, to [disable MIME
sniffing][mime-sniffing].
* The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
legacy browsers.
- The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
framed and protect from [clickjacking][owasp-clickjacking].
- The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
header, as the modern replacement for `X-Frame-Options` (though both should be
included since not all browsers support it yet, see
[this][owasp-clickjacking-csp]).
- The `X-Content-Type-Options: nosniff` header, to [disable MIME
sniffing][mime-sniffing].
- The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
legacy browsers.
[mime-sniffing]:
<https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing>
[owasp-clickjacking-csp]:
<https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#content-security-policy-frame-ancestors-examples>
[owasp-clickjacking]:
<https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html>
[mime-sniffing]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing
[owasp-clickjacking-csp]: https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#content-security-policy-frame-ancestors-examples
[owasp-clickjacking]: https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html
If you are using nginx, this would look something like the following:
@ -117,7 +106,9 @@ add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "frame-ancestors 'none'";
```
For Apache, the configuration looks like:
```
Header set X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
@ -129,8 +120,7 @@ Note: In case you are already setting a `Content-Security-Policy` header
elsewhere, you should modify it to include the `frame-ancestors` directive
instead of adding that last line.
Building From Source
====================
# Building From Source
Element is a modular webapp built with modern ES6 and uses a Node.js build system.
Ensure you have the latest LTS version of Node.js installed.
@ -143,7 +133,7 @@ guide](https://classic.yarnpkg.com/en/docs/install) if you do not have it alread
1. Clone the repo: `git clone https://github.com/vector-im/element-web.git`.
1. Switch to the element-web directory: `cd element-web`.
1. Install the prerequisites: `yarn install`.
* If you're using the `develop` branch, then it is recommended to set up a
- If you're using the `develop` branch, then it is recommended to set up a
proper development environment (see [Setting up a dev
environment](#setting-up-a-dev-environment) below). Alternatively, you
can use <https://develop.element.io> - the continuous integration release of
@ -160,8 +150,7 @@ will not appear in Settings without using the dist script. You can then mount th
`webapp` directory on your web server to actually serve up the app, which is
entirely static content.
Running as a Desktop app
========================
# Running as a Desktop app
Element can also be run as a desktop app, wrapped in Electron. You can download a
pre-built version from <https://element.io/get-started> or, if you prefer,
@ -173,7 +162,7 @@ Many thanks to @aviraldg for the initial work on the Electron integration.
Other options for running as a desktop app:
* @asdf:matrix.org points out that you can use nativefier and it just works(tm)
- @asdf:matrix.org points out that you can use nativefier and it just works(tm)
```bash
yarn global add nativefier
@ -183,8 +172,7 @@ nativefier https://app.element.io/
The [configuration docs](docs/config.md#desktop-app-configuration) show how to
override the desktop app's default settings if desired.
Running from Docker
===================
# Running from Docker
The Docker image can be used to serve element-web as a web server. The easiest way to use
it is to use the prebuilt image:
@ -223,26 +211,22 @@ docker build -t \
.
```
Running in Kubernetes
=====================
# Running in Kubernetes
The provided element-web docker image can also be run from within a Kubernetes cluster.
See the [Kubernetes example](docs/kubernetes.md) for more details.
config.json
===========
# config.json
Element supports a variety of settings to configure default servers, behaviour, themes, etc.
See the [configuration docs](docs/config.md) for more details.
Labs Features
=============
# Labs Features
Some features of Element may be enabled by flags in the `Labs` section of the settings.
Some of these features are described in [labs.md](https://github.com/vector-im/element-web/blob/develop/docs/labs.md).
Caching requirements
====================
# Caching requirements
Element requires the following URLs not to be cached, when/if you are serving Element from your own webserver:
@ -259,8 +243,7 @@ webserver to return `Cache-Control: no-cache` for `/`. This ensures the browser
the next page load after it's been deployed. Note that this is already configured for you in the nginx config of our
Dockerfile.
Development
===========
# Development
Before attempting to develop on Element you **must** read the [developer guide
for `matrix-react-sdk`](https://github.com/matrix-org/matrix-react-sdk#developer-guide), which
@ -282,7 +265,7 @@ higher and lower level React components useful for building Matrix communication
apps using React.
Please note that Element is intended to run correctly without access to the public
internet. So please don't depend on resources (JS libs, CSS, images, fonts)
internet. So please don't depend on resources (JS libs, CSS, images, fonts)
hosted by external CDNs or servers but instead please package all dependencies
into Element itself.
@ -290,8 +273,7 @@ CSS hot-reload is available as an opt-in development feature. You can enable it
by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
of the repository. See `.env.example` for documentation and an example.
Setting up a dev environment
============================
# Setting up a dev environment
Much of the functionality in Element is actually in the `matrix-react-sdk` and
`matrix-js-sdk` modules. It is possible to set these up in a way that makes it
@ -300,7 +282,7 @@ having to manually rebuild each time.
First clone and build `matrix-js-sdk`:
``` bash
```bash
git clone https://github.com/matrix-org/matrix-js-sdk.git
pushd matrix-js-sdk
yarn link
@ -347,9 +329,9 @@ Wait a few seconds for the initial build to finish; you should see something lik
[element-js] ℹ ｢wdm｣: Compiled successfully.
```
Remember, the command will not terminate since it runs the web server
and rebuilds source files when they change. This development server also
disables caching, so do NOT use it in production.
Remember, the command will not terminate since it runs the web server
and rebuilds source files when they change. This development server also
disables caching, so do NOT use it in production.
Open <http://127.0.0.1:8080/> in your browser to see your newly built Element.
@ -377,7 +359,7 @@ echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p
```
___
---
When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be
automatically picked up by webpack and built.
@ -386,8 +368,7 @@ If any of these steps error with, `file table overflow`, you are probably on a m
which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
You'll need to do this in each new terminal you open before building Element.
Running the tests
-----------------
## Running the tests
There are a number of application-level tests in the `tests` directory; these
are designed to run with Jest and JSDOM. To run them
@ -400,8 +381,7 @@ yarn test
See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
Translations
============
# Translations
To add a new translation, head to the [translating doc](docs/translating.md).
@ -409,8 +389,7 @@ For a developer guide, see the [translating dev doc](docs/translating-dev.md).
[<img src="https://translate.element.io/widgets/element-web/-/multi-auto.svg" alt="translationsstatus" width="340">](https://translate.element.io/engage/element-web/?utm_source=widget)
Triaging issues
===============
# Triaging issues
Issues are triaged by community members and the Web App Team, following the [triage process](https://github.com/vector-im/element-meta/wiki/Triage-process).

25
babel.config.js
View file

@ -1,18 +1,21 @@
module.exports = {
"sourceMaps": true,
"presets": [
["@babel/preset-env", {
"targets": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 Edge versions",
],
}],
sourceMaps: true,
presets: [
[
"@babel/preset-env",
{
targets: [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 Edge versions",
],
},
],
"@babel/preset-typescript",
"@babel/preset-react",
],
"plugins": [
plugins: [
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-class-properties",

118
code_style.md
View file

@ -3,10 +3,10 @@
This code style applies to projects which the element-web team directly maintains or is reasonably
adjacent to. As of writing, these are:
* element-desktop
* element-web
* matrix-react-sdk
* matrix-js-sdk
- element-desktop
- element-web
- matrix-react-sdk
- matrix-js-sdk
Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
has stricter code organization to reduce the maintenance burden. These projects will declare their code
@ -66,37 +66,24 @@ Unless otherwise specified, the following applies to all code:
```typescript
// Function arguments
function doThing(
arg1: string,
arg2: string,
arg3: string,
): boolean {
return !!arg1
&& !!arg2
&& !!arg3;
function doThing(arg1: string, arg2: string, arg3: string): boolean {
return !!arg1 && !!arg2 && !!arg3;
}
// Calling a function
doThing(
"String 1",
"String 2",
"String 3",
);
doThing("String 1", "String 2", "String 3");
// Reduce line verbosity when possible/reasonable
doThing(
"String1", "String 2",
"A much longer string 3",
);
doThing("String1", "String 2", "A much longer string 3");
// Chaining function calls
something.doThing()
something
.doThing()
.doOtherThing()
.doMore()
.somethingElse(it =>
useIt(it)
);
.somethingElse((it) => useIt(it));
```
4. Use semicolons for block/line termination.
1. Except when defining interfaces, classes, and non-arrow functions specifically.
5. When a statement's body is a single line, it may be written without curly braces, so long as the body is placed on
@ -105,6 +92,7 @@ Unless otherwise specified, the following applies to all code:
```typescript
if (x) doThing();
```
6. Blocks for `if`, `for`, `switch` and so on must have a space surrounding the condition, but not
within the condition.
@ -113,11 +101,13 @@ Unless otherwise specified, the following applies to all code:
doThing();
}
```
7. Mixing of logical operands requires brackets to explicitly define boolean logic.
```typescript
if ((a > b && b > c) || (d < e)) return true;
if ((a > b && b > c) || d < e) return true;
```
8. Ternaries use the same rules as `if` statements, plus the following:
```typescript
@ -125,14 +115,13 @@ Unless otherwise specified, the following applies to all code:
const val = a > b ? doThing() : doOtherThing();
// Multiline is also okay
const val = a > b
? doThing()
: doOtherThing();
const val = a > b ? doThing() : doOtherThing();
// Use brackets when using multiple conditions.
// Maximum 3 conditions, prefer 2 or less.
const val = (a > b && b > c) ? doThing() : doOtherThing();
const val = a > b && b > c ? doThing() : doOtherThing();
```
9. lowerCamelCase is used for function and variable naming.
10. UpperCamelCase is used for general naming.
11. Interface names should not be marked with an uppercase `I`.
@ -142,6 +131,7 @@ Unless otherwise specified, the following applies to all code:
```typescript
let errorMessage: Optional<string>;
```
14. Objects, arrays, enums and so on must have each line terminated with a comma:
```typescript
@ -150,21 +140,16 @@ Unless otherwise specified, the following applies to all code:
else: 2,
};
const arr = [
"one",
"two",
];
const arr = ["one", "two"];
enum Thing {
Foo,
Bar,
}
doThing(
"arg1",
"arg2",
);
doThing("arg1", "arg2");
```
15. Objects can use shorthand declarations, including mixing of types.
```typescript
@ -175,6 +160,7 @@ Unless otherwise specified, the following applies to all code:
// ... or ...
{ room, prop: this.prop }
```
16. Object keys should always be non-strings when possible.
```typescript
@ -184,11 +170,13 @@ Unless otherwise specified, the following applies to all code:
[EventType.RoomMessage]: true,
}
```
17. Explicitly cast to a boolean.
```typescript
!!stringVar || Boolean(stringVar)
!!stringVar || Boolean(stringVar);
```
18. Use `switch` statements when checking against more than a few enum-like values.
19. Use `const` for constants, `let` for mutability.
20. Describe types exhaustively (ensure noImplictAny would pass).
@ -200,6 +188,7 @@ Unless otherwise specified, the following applies to all code:
2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
23. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
24. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
1. Note that an explicit type is optional if not expected to be used outside of the function call,
unlike in this example:
@ -214,6 +203,7 @@ Unless otherwise specified, the following applies to all code:
// ...
}
```
25. Variables/properties which are `public static` should also be `readonly` when possible.
26. Interface and type properties are terminated with semicolons, not commas.
27. Prefer arrow formatting when declaring functions for interfaces/types:
@ -223,6 +213,7 @@ Unless otherwise specified, the following applies to all code:
myCallback: (arg: string) => Promise<void>;
}
```
28. Prefer a type definition over an inline type. For example, define an interface.
29. Always prefer to add types or declare a type over the use of `any`. Prefer inferred types
when they are not `any`.
@ -231,6 +222,7 @@ Unless otherwise specified, the following applies to all code:
31. Export only what can be reused.
32. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
of truly optional parameters.
1. A notable exception is when the likelihood of a bug is minimal, such as when a function
takes an argument that is more often not required than required. An example where the
`?` operator is inappropriate is when taking a room ID: typically the caller should
@ -245,6 +237,7 @@ Unless otherwise specified, the following applies to all code:
// ...
}
```
33. There should be approximately one interface, class, or enum per file unless the file is named
"types.ts", "global.d.ts", or ends with "-types.ts".
1. The file name should match the interface, class, or enum name.
@ -273,6 +266,7 @@ Unless otherwise specified, the following applies to all code:
const example1 = "simple string";
const example2 = 'string containing "double quotes"';
```
39. Prefer async-await to promise-chaining
```typescript
@ -312,6 +306,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
}
}
```
8. Stores must support using an alternative MatrixClient and dispatcher instance.
9. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
cycles during runtime where components accidentally include more of the app than they intended.
@ -323,37 +318,28 @@ Inheriting all the rules of TypeScript, the following additionally apply:
```typescript
function render() {
return <Component
prop1="test"
prop2={this.state.variable}
/>;
return <Component prop1="test" prop2={this.state.variable} />;
// or
return (
<Component
prop1="test"
prop2={this.state.variable}
/>
);
return <Component prop1="test" prop2={this.state.variable} />;
// or if children are needed (infer parens usage)
return <Component
prop1="test"
prop2={this.state.variable}
>{ _t("Short string here") }</Component>;
return (
<Component prop1="test" prop2={this.state.variable}>
{_t("Short string here")}
</Component>
);
return <Component
prop1="test"
prop2={this.state.variable}
>
{ _t("Longer string here") }
</Component>;
return (
<Component prop1="test" prop2={this.state.variable}>
{_t("Longer string here")}
</Component>
);
}
```
13. Curly braces within JSX should be padded with a space, however properties on those components should not.
See above code example.
14. Functions used as properties should either be defined on the class or stored in a variable. They should not
@ -371,7 +357,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
1. Class names must be prefixed with "mx_".
1. Class names must be prefixed with "mx\_".
2. Class names should denote the component which defines them, followed by any context:
1. mx_MyFoo
2. mx_MyFoo_avatar
@ -382,11 +368,13 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
```scss
.mx_MyFoo {
& .mx_MyFoo_avatar { // instead of &_avatar
& .mx_MyFoo_avatar {
// instead of &_avatar
// ...
}
}
```
6. Break multiple selectors over multiple lines this way:
```scss
@ -396,6 +384,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
// ...
}
```
7. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
8. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
documented for what the values mean:
@ -407,6 +396,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
z-index: 10; // above user avatar, but below dialogs
}
```
9. Avoid the use of `!important`. If necessary, add a comment.
## Tests
@ -431,9 +421,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
// Use "it should..." terminology
it("should call the correct API", async () => {
// test-specific variables go here
// function calls/state changes go here
// expectations go here
});
});

6
config.sample.json
View file

@ -26,13 +26,11 @@
"uisi_autorageshake_app": "element-auto-uisi",
"default_country_code": "GB",
"show_labs_settings": false,
"features": { },
"features": {},
"default_federate": true,
"default_theme": "light",
"room_directory": {
"servers": [
"matrix.org"
]
"servers": ["matrix.org"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,

16
contribute.json
View file

@ -1,17 +1,13 @@
{
"name": "Element",
"name": "Element",
"description": "A glossy Matrix collaboration client for the web.",
"repository": {
"url": "https://github.com/vector-im/element-web",
"license": "Apache License 2.0"
"url": "https://github.com/vector-im/element-web",
"license": "Apache License 2.0"
},
"bugs": {
"list": "https://github.com/vector-im/element-web/issues",
"report": "https://github.com/vector-im/element-web/issues/new/choose"
"list": "https://github.com/vector-im/element-web/issues",
"report": "https://github.com/vector-im/element-web/issues/new/choose"
},
"keywords": [
"chat",
"riot",
"matrix"
]
"keywords": ["chat", "riot", "matrix"]
}

43
docs/app-load.md
View file

@ -15,10 +15,10 @@ Current more parallel flow:
digraph G {
node [shape=box];
subgraph cluster_0 {
color=orange;
node [style=filled];
label = "index.ts";
subgraph cluster_0 {
color=orange;
node [style=filled];
label = "index.ts";
entrypoint, s0, ready [shape=point];
rageshake, config, i18n, theme, skin, olm [shape=parallelogram];
@ -52,33 +52,38 @@ digraph G {
skin -> ready [color=red];
theme -> ready [color=red];
i18n -> ready [color=red];
}
subgraph cluster_1 {
color = green;
node [style=filled];
label = "init.tsx";
}
subgraph cluster_1 {
color = green;
node [style=filled];
label = "init.tsx";
ready -> loadApp;
loadApp -> matrixchat;
}
}
}
</code></pre>
</p>
</details>
Key:
+ Parallelogram: async/await task
+ Box: sync task
+ Diamond: conditional branch
+ Egg: user interaction
+ Blue arrow: async task is allowed to settle but allowed to fail
+ Red arrow: async task success is asserted
- Parallelogram: async/await task
- Box: sync task
- Diamond: conditional branch
- Egg: user interaction
- Blue arrow: async task is allowed to settle but allowed to fail
- Red arrow: async task success is asserted
Notes:
+ A task begins when all its dependencies (arrows going into it) are fulfilled.
+ The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
+ Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
- A task begins when all its dependencies (arrows going into it) are fulfilled.
- The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
- Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
Underlying dependencies:
![image](https://user-images.githubusercontent.com/2403652/73848977-08624500-4821-11ea-9830-bb0317c41086.png)

20
docs/choosing-an-issue.md
View file

@ -33,19 +33,19 @@ someone to add something.
When you're looking through the list, here are some things that might make an
issue a **GOOD** choice:
* It is a problem or feature you care about.
* It concerns a type of code you know a little about.
* You think you can understand what's needed.
* It already has approval from Element Web's designers (look for comments from
members of the
[Product](https://github.com/orgs/vector-im/teams/product/members) or
[Design](https://github.com/orgs/vector-im/teams/design/members) teams).
- It is a problem or feature you care about.
- It concerns a type of code you know a little about.
- You think you can understand what's needed.
- It already has approval from Element Web's designers (look for comments from
members of the
[Product](https://github.com/orgs/vector-im/teams/product/members) or
[Design](https://github.com/orgs/vector-im/teams/design/members) teams).
Here are some things that might make it a **BAD** choice:
* You don't understand it (maybe add a comment asking a clarifying question).
* It sounds difficult, or is part of a larger change you don't know about.
* **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
- You don't understand it (maybe add a comment asking a clarifying question).
- It sounds difficult, or is part of a larger change you don't know about.
- **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
**Element Web's Design and Product teams tend to be very busy**, so if you make
changes that require approval from one of those teams, you will probably have

388
docs/config.md
View file

@ -17,7 +17,7 @@ for the desktop app the application will need to be exited fully (including via
## Homeserver configuration
In order for Element to even start you will need to tell it what homeserver to connect to *by default*. Users will be
In order for Element to even start you will need to tell it what homeserver to connect to _by default_. Users will be
able to use a different homeserver if they like, though this can be disabled with `"disable_custom_urls": true` in your
config.
@ -26,18 +26,18 @@ One of the following options **must** be supplied:
1. `default_server_config`: The preferred method of setting the homeserver connection information. Simply copy/paste
your [`/.well-known/matrix/client`](https://spec.matrix.org/latest/client-server-api/#getwell-knownmatrixclient)
into this field. For example:
```json
{
"default_server_config": {
"m.homeserver": {
"base_url": "https://matrix-client.matrix.org"
},
"m.identity_server": {
"base_url": "https://vector.im"
}
}
}
```
```json
{
"default_server_config": {
"m.homeserver": {
"base_url": "https://matrix-client.matrix.org"
},
"m.identity_server": {
"base_url": "https://vector.im"
}
}
}
```
2. `default_server_name`: A different method of connecting to the homeserver by looking up the connection information
using `.well-known`. When using this option, simply use your server's domain name (the part at the end of user IDs):
`"default_server_name": "matrix.org"`
@ -58,10 +58,10 @@ To force a labs flag on or off, use the following:
```json
{
"features": {
"feature_you_want_to_turn_on": true,
"feature_you_want_to_keep_off": false
}
"features": {
"feature_you_want_to_turn_on": true,
"feature_you_want_to_keep_off": false
}
}
```
@ -82,25 +82,25 @@ instance. As of writing those settings are not fully documented, however a few a
inputs.
3. `room_directory`: Optionally defines how the room directory component behaves. Currently only a single property, `servers`
is supported to add additional servers to the dropdown. For example:
```json
{
"room_directory": {
"servers": ["matrix.org", "example.org"]
}
}
```
```json
{
"room_directory": {
"servers": ["matrix.org", "example.org"]
}
}
```
4. `setting_defaults`: Optional configuration for settings which are not described by this document and support the `config`
level. This list is incomplete. For example:
```json
{
"setting_defaults": {
"MessageComposerInput.showStickersButton": false,
"MessageComposerInput.showPollsButton": false
}
}
```
These values will take priority over the hardcoded defaults for the settings. For a list of available settings, see
[Settings.tsx](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.tsx).
```json
{
"setting_defaults": {
"MessageComposerInput.showStickersButton": false,
"MessageComposerInput.showPollsButton": false
}
}
```
These values will take priority over the hardcoded defaults for the settings. For a list of available settings, see
[Settings.tsx](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.tsx).
## Customisation & branding
@ -170,16 +170,16 @@ Together, these two options might look like the following in your config:
```json
{
"desktop_builds": {
"available": true,
"logo": "https://example.org/assets/logo-small.svg",
"url": "https://example.org/not_element/download"
},
"mobile_builds": {
"ios": null,
"android": "https://example.org/not_element/android",
"fdroid": "https://example.org/not_element/fdroid"
}
"desktop_builds": {
"available": true,
"logo": "https://example.org/assets/logo-small.svg",
"url": "https://example.org/not_element/download"
},
"mobile_builds": {
"ios": null,
"android": "https://example.org/not_element/android",
"fdroid": "https://example.org/not_element/fdroid"
}
}
```
@ -210,18 +210,18 @@ Together, the options might look like this in your config:
```json
{
"branding": {
"welcome_background_url": "https://example.org/assets/background.jpg",
"auth_header_logo_url": "https://example.org/assets/logo.svg",
"auth_footer_links": [
{"text": "FAQ", "url": "https://example.org/faq"},
{"text": "Donate", "url": "https://example.org/donate"}
]
},
"embedded_pages": {
"welcome_url": "https://example.org/assets/welcome.html",
"home_url": "https://example.org/assets/home.html"
}
"branding": {
"welcome_background_url": "https://example.org/assets/background.jpg",
"auth_header_logo_url": "https://example.org/assets/logo.svg",
"auth_footer_links": [
{ "text": "FAQ", "url": "https://example.org/faq" },
{ "text": "Donate", "url": "https://example.org/donate" }
]
},
"embedded_pages": {
"welcome_url": "https://example.org/assets/welcome.html",
"home_url": "https://example.org/assets/home.html"
}
}
```
@ -240,15 +240,15 @@ When Element is deployed alongside a homeserver with SSO-only login, some option
2. `sso_redirect_options`: Options to define how to handle unauthenticated users. If the object contains `"immediate": true`, then
all unauthenticated users will be automatically redirected to the SSO system to start their login. If instead you'd only like to
have users which land on the welcome page to be redirected, use `"on_welcome_page": true`. As an example:
```json
{
"sso_redirect_options": {
"immediate": false,
"on_welcome_page": true
}
}
```
It is most common to use the `immediate` flag instead of `on_welcome_page`.
```json
{
"sso_redirect_options": {
"immediate": false,
"on_welcome_page": true
}
}
```
It is most common to use the `immediate` flag instead of `on_welcome_page`.
## VoIP / Jitsi calls
@ -261,77 +261,77 @@ More information about the Jitsi setup can be found [here](./jitsi.md).
The VoIP and Jitsi options are:
1. `jitsi`: Optional configuration for how to start Jitsi conferences. Currently can only contain a single `preferred_domain`
value which points at the domain of the Jitsi instance. Defaults to `meet.element.io`. This is *not* used if the Jitsi widget
value which points at the domain of the Jitsi instance. Defaults to `meet.element.io`. This is _not_ used if the Jitsi widget
was created by an integration manager, or if the homeserver provides Jitsi information in `/.well-known/matrix/client`. For
example:
```json
{
"jitsi": {
"preferred_domain": "meet.jit.si"
}
}
```
```json
{
"jitsi": {
"preferred_domain": "meet.jit.si"
}
}
```
2. `jitsi_widget`: Optional configuration for the built-in Jitsi widget. Currently can only contain a single `skip_built_in_welcome_screen`
value, denoting whether the "Join Conference" button should be shown. When `true` (default `false`), Jitsi calls will skip to
the call instead of having a screen with a single button on it. This is most useful if the Jitsi instance being used already
has a landing page for users to test audio and video before joining the call, otherwise users will automatically join the call.
For example:
```json
{
"jitsi_widget": {
"skip_built_in_welcome_screen": true
}
}
```
```json
{
"jitsi_widget": {
"skip_built_in_welcome_screen": true
}
}
```
3. `voip`: Optional configuration for various VoIP features. Currently can only contain a single `obey_asserted_identity` value to
send MSC3086-style asserted identity messages during VoIP calls in the room corresponding to the asserted identity. This *must*
send MSC3086-style asserted identity messages during VoIP calls in the room corresponding to the asserted identity. This _must_
only be set in trusted environments. The option defaults to `false`. For example:
```json
{
"voip": {
"obey_asserted_identity": false
}
}
```
```json
{
"voip": {
"obey_asserted_identity": false
}
}
```
4. `widget_build_url`: Optional URL to have Element make a request to when a user presses the voice/video call buttons in the app,
if a call would normally be started by the action. The URL will be called with a `roomId` query parameter to identify the room
being called in. The URL must respond with a JSON object similar to the following:
```json
{
"widget_id": "$arbitrary_string",
"widget": {
"creatorUserId": "@user:example.org",
"id": "$the_same_widget_id",
"type": "m.custom",
"waitForIframeLoad": true,
"name": "My Widget Name Here",
"avatar_url": "mxc://example.org/abc123",
"url": "https://example.org/widget.html",
"data": {
"title": "Subtitle goes here"
}
},
"layout": {
"container": "top",
"index": 0,
"width": 65,
"height": 50
}
}
```
The `widget` is the `content` of a normal widget state event. The `layout` is the layout specifier for the widget being created,
as defined by the `io.element.widgets.layout` state event.
```json
{
"widget_id": "$arbitrary_string",
"widget": {
"creatorUserId": "@user:example.org",
"id": "$the_same_widget_id",
"type": "m.custom",
"waitForIframeLoad": true,
"name": "My Widget Name Here",
"avatar_url": "mxc://example.org/abc123",
"url": "https://example.org/widget.html",
"data": {
"title": "Subtitle goes here"
}
},
"layout": {
"container": "top",
"index": 0,
"width": 65,
"height": 50
}
}
```
The `widget` is the `content` of a normal widget state event. The `layout` is the layout specifier for the widget being created,
as defined by the `io.element.widgets.layout` state event.
5. `audio_stream_url`: Optional URL to pass to Jitsi to enable live streaming. This option is considered experimental and may be removed
at any time without notice.
6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
- `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
- `url`: The URL of the Element Call instance to use for native group calls. This option is considered experimental
and may be removed at any time without notice. Defaults to `https://call.element.io`.
- `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
- `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
- `participant_limit`: The maximum number of users who can join a call; if
this number is exceeded, the user will not be able to join a given call.
- `brand`: Optional name for the app. Defaults to `Element Call`. This is
used throughout the application in various strings/locations.
- `participant_limit`: The maximum number of users who can join a call; if
this number is exceeded, the user will not be able to join a given call.
- `brand`: Optional name for the app. Defaults to `Element Call`. This is
used throughout the application in various strings/locations.
## Bug reporting
@ -344,7 +344,7 @@ If you run your own rageshake server to collect bug reports, the following optio
alongside the rageshake so the rageshake server can filter them by app name. By default, this will be `element-web`, as with any other
rageshake submitted by the app.
If you are using the element.io rageshake server, please set this to `element-auto-uisi` so we can better filter them.
If you are using the element.io rageshake server, please set this to `element-auto-uisi` so we can better filter them.
If you would like to use [Sentry](https://sentry.io/) for rageshake data, add a `sentry` object to your config with the following values:
@ -355,10 +355,10 @@ For example:
```json
{
"sentry": {
"dsn": "dsn-goes-here",
"environment": "production"
}
"sentry": {
"dsn": "dsn-goes-here",
"environment": "production"
}
}
```
@ -375,15 +375,15 @@ If you would like to use Scalar, the integration manager maintained by Element,
```json
{
"integrations_ui_url": "https://scalar.vector.im/",
"integrations_rest_url": "https://scalar.vector.im/api",
"integrations_widgets_urls": [
"https://scalar.vector.im/_matrix/integrations/v1",
"https://scalar.vector.im/api",
"https://scalar-staging.vector.im/_matrix/integrations/v1",
"https://scalar-staging.vector.im/api",
"https://scalar-staging.riot.im/scalar/api"
]
"integrations_ui_url": "https://scalar.vector.im/",
"integrations_rest_url": "https://scalar.vector.im/api",
"integrations_widgets_urls": [
"https://scalar.vector.im/_matrix/integrations/v1",
"https://scalar.vector.im/api",
"https://scalar-staging.vector.im/_matrix/integrations/v1",
"https://scalar-staging.vector.im/api",
"https://scalar-staging.riot.im/scalar/api"
]
}
```
@ -393,9 +393,9 @@ If you would like to include a custom message when someone is reporting an event
```json
{
"report_event": {
"admin_message_md": "Please be sure to review our [terms of service](https://example.org/terms) before reporting a message."
}
"report_event": {
"admin_message_md": "Please be sure to review our [terms of service](https://example.org/terms) before reporting a message."
}
}
```
@ -403,9 +403,7 @@ To add additional "terms and conditions" links throughout the app, use the follo
```json
{
"terms_and_conditions_links": [
{ "text": "Code of conduct", "url": "https://example.org/code-of-conduct" }
]
"terms_and_conditions_links": [{ "text": "Code of conduct", "url": "https://example.org/code-of-conduct" }]
}
```
@ -422,7 +420,7 @@ analytics are deemed impossible and the user won't be asked to opt in to the sys
There are additional root-level options which can be specified:
1. `analytics_owner`: the company name used in dialogs talking about analytics - this defaults to `brand`,
and is useful when the provider of analytics is different from the provider of the Element instance.
and is useful when the provider of analytics is different from the provider of the Element instance.
2. `privacy_policy_url`: URL to the privacy policy including the analytics collection policy.
## Server hosting links
@ -435,26 +433,26 @@ will not be shown to the user.
of `utm_campaign` to denote which link the user clicked on within the app. Only ever applies to matrix.org users specifically.
2. `host_signup`: Optional configuration for an account importer to your hosting platform. The API surface of this is not documented
at the moment, but can be configured with the following subproperties:
1. `brand`: The brand name to use.
2. `url`: The iframe URL for the importer.
3. `domains`: The homeserver domains to show the importer to.
4. `cookie_policy_url`: The URL to the cookie policy for the importer.
5. `privacy_policy_url`: The URL to the privacy policy for the importer.
6. `terms_of_service_url`: The URL to the terms of service for the importer.
1. `brand`: The brand name to use.
2. `url`: The iframe URL for the importer.
3. `domains`: The homeserver domains to show the importer to.
4. `cookie_policy_url`: The URL to the cookie policy for the importer.
5. `privacy_policy_url`: The URL to the privacy policy for the importer.
6. `terms_of_service_url`: The URL to the terms of service for the importer.
If you're looking to mirror a setup from our production/development environments, the following config should be used:
```json
{
"hosting_signup_link": "https://element.io/matrix-services?utm_source=element-web&utm_medium=web",
"host_signup": {
"brand": "Element Home",
"domains": [ "matrix.org" ],
"url": "https://ems.element.io/element-home/in-app-loader",
"cookie_policy_url": "https://element.io/cookie-policy",
"privacy_policy_url": "https://element.io/privacy",
"terms_of_service_url": "https://element.io/terms-of-service"
}
"hosting_signup_link": "https://element.io/matrix-services?utm_source=element-web&utm_medium=web",
"host_signup": {
"brand": "Element Home",
"domains": ["matrix.org"],
"url": "https://ems.element.io/element-home/in-app-loader",
"cookie_policy_url": "https://element.io/cookie-policy",
"privacy_policy_url": "https://element.io/privacy",
"terms_of_service_url": "https://element.io/terms-of-service"
}
}
```
@ -467,10 +465,10 @@ set this value to the following at a minimum:
```json
{
"enable_presence_by_hs_url": {
"https://matrix.org": false,
"https://matrix-client.matrix.org": false
}
"enable_presence_by_hs_url": {
"https://matrix.org": false,
"https://matrix-client.matrix.org": false
}
}
```
@ -487,8 +485,8 @@ Element will check multiple sources when looking for an identity server to use i
the following order of preference:
1. The identity server set in the user's account data
* For a new user, no value is present in their account data. It is only set
if the user visits Settings and manually changes their identity server.
- For a new user, no value is present in their account data. It is only set
if the user visits Settings and manually changes their identity server.
2. The identity server provided by the `.well-known` lookup that occurred at
login
3. The identity server provided by the Riot config file
@ -514,40 +512,40 @@ preferences.
Currently, the following UI feature flags are supported:
* `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
* `UIFeature.feedback` - Whether prompts to supply feedback are shown.
* `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
Jitsi widgets will still work though they cannot easily be added.
* `UIFeature.widgets` - Whether or not widgets will be shown.
* `UIFeature.flair` - Whether or not community flair is shown in rooms.
* `UIFeature.communities` - Whether or not to show any UI related to communities. Implicitly
disables `UIFeature.flair` when disabled.
* `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
user settings are shown to the user.
* `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
is shown.
* `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
are shown.
* `UIFeature.identityServer` - Whether or not functionality requiring an identity server
is shown. When disabled, the user will not be able to interact with the identity
server (sharing email addresses, 3PID invites, etc).
* `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
is shown. Typically this is considered "contact information" on the homeserver, and is
not directly related to the identity server.
* `UIFeature.registration` - Whether or not the registration page is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
user.
* `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
This should only be used if the room history visibility options are managed by the server.
* `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
timeline for recent messages. When false day dates will be used.
* `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
to true.
- `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
- `UIFeature.feedback` - Whether prompts to supply feedback are shown.
- `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
Jitsi widgets will still work though they cannot easily be added.
- `UIFeature.widgets` - Whether or not widgets will be shown.
- `UIFeature.flair` - Whether or not community flair is shown in rooms.
- `UIFeature.communities` - Whether or not to show any UI related to communities. Implicitly
disables `UIFeature.flair` when disabled.
- `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
user settings are shown to the user.
- `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
is shown.
- `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
are shown.
- `UIFeature.identityServer` - Whether or not functionality requiring an identity server
is shown. When disabled, the user will not be able to interact with the identity
server (sharing email addresses, 3PID invites, etc).
- `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
is shown. Typically this is considered "contact information" on the homeserver, and is
not directly related to the identity server.
- `UIFeature.registration` - Whether or not the registration page is accessible. Typically
useful if accounts are managed externally.
- `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
useful if accounts are managed externally.
- `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
useful if accounts are managed externally.
- `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
user.
- `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
This should only be used if the room history visibility options are managed by the server.
- `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
timeline for recent messages. When false day dates will be used.
- `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
to true.
## Undocumented / developer options

2
docs/custom-home.md
View file

@ -26,7 +26,6 @@ The home page can be overridden in `config.json` to provide all users of an elem
}
```
## `home.html` Example
The following is a simple example for a custom `home.html`:
@ -62,4 +61,3 @@ It may be needed to set CORS headers for the `home.html` to enable element-deskt
```
add_header Access-Control-Allow-Origin *;
```

11
docs/customisations.md
View file

@ -30,7 +30,7 @@ maintenance.
**Note**: The project deliberately does not exclude `customisations.json` from Git.
This is to ensure that in shared projects it's possible to have a common config. By
default, Element Web does *not* ship with this file to prevent conflicts.
default, Element Web does _not_ ship with this file to prevent conflicts.
### Custom components
@ -41,9 +41,10 @@ that properties/state machines won't change.
### Component visibility customisation
UI for some actions can be hidden via the ComponentVisibility customisation:
- inviting users to rooms and spaces,
- creating rooms,
- creating spaces,
- inviting users to rooms and spaces,
- creating rooms,
- creating spaces,
To customise visibility create a customisation module from [ComponentVisibility](https://github.com/matrix-org/matrix-react-sdk/blob/master/src/customisations/ComponentVisibility.ts) following the instructions above.
@ -55,6 +56,7 @@ might be shown to the user, but they won't have permission to invite users to
the current room: the button will appear disabled.
For example, to only allow users who meet a certain condition to create spaces:
```typescript
function shouldShowComponent(component: UIComponent): boolean {
if (component === UIComponent.CreateSpaces) {
@ -65,4 +67,5 @@ function shouldShowComponent(component: UIComponent): boolean {
return true;
}
```
In this example, all UI related to creating a space will be hidden unless the users meets the custom condition.

18
docs/e2ee.md
View file

@ -10,9 +10,9 @@ Set the following on your homeserver's
```json
{
"io.element.e2ee": {
"default": false
}
"io.element.e2ee": {
"default": false
}
}
```
@ -29,9 +29,9 @@ following on your homeserver's `/.well-known/matrix/client` config:
```json
{
"io.element.e2ee": {
"secure_backup_required": true
}
"io.element.e2ee": {
"secure_backup_required": true
}
}
```
@ -44,9 +44,9 @@ only offer one of these, you can signal this via the
```json
{
"io.element.e2ee": {
"secure_backup_setup_methods": ["passphrase"]
}
"io.element.e2ee": {
"secure_backup_setup_methods": ["passphrase"]
}
}
```

16
docs/feature-flags.md
View file

@ -5,10 +5,10 @@ flexibility and control over when and where those features are enabled.
For example, flags make the following things possible:
* Extended testing of a feature via labs on develop
* Enabling features when ready instead of the first moment the code is released
* Testing a feature with a specific set of users (by enabling only on a specific
Element instance)
- Extended testing of a feature via labs on develop
- Enabling features when ready instead of the first moment the code is released
- Testing a feature with a specific set of users (by enabling only on a specific
Element instance)
The size of the feature controlled by a feature flag may vary widely: it could
be a large project like reactions or a smaller change to an existing algorithm.
@ -37,6 +37,7 @@ When starting work on a feature, we should create a matching feature flag:
1. Add a new
[setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.tsx)
of the form:
```js
"feature_cats": {
isFeature: true,
@ -45,10 +46,13 @@ When starting work on a feature, we should create a matching feature flag:
default: false,
},
```
2. Check whether the feature is enabled as appropriate:
```js
SettingsStore.getValue("feature_cats")
SettingsStore.getValue("feature_cats");
```
3. Document the feature in the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)
With these steps completed, the feature is disabled by default, but can be
@ -88,12 +92,14 @@ cover these cases, change the setting's `default` in `Settings.tsx` to `true`.
Once we're confident that a feature is working well, we should remove or convert the flag.
If the feature is meant to be turned off/on by the user:
1. Remove `isFeature` from the [setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.ts)
2. Change the `default` to `true` (if desired).
3. Remove the feature from the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)
4. Celebrate! 🥳
If the feature is meant to be forced on (non-configurable):
1. Remove the [setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.ts)
2. Remove all `getValue` lines that test for the feature.
3. Remove the feature from the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)

12
docs/jitsi-dev.md
View file

@ -1,7 +1,7 @@
# Jitsi wrapper developer docs
*If you're looking for information on how to set up Jitsi in your Element, see
[jitsi.md](./jitsi.md) instead.*
_If you're looking for information on how to set up Jitsi in your Element, see
[jitsi.md](./jitsi.md) instead._
These docs are for developers wondering how the different conference buttons work
within Element. If you're not a developer, you're probably looking for [jitsi.md](./jitsi.md).
@ -46,11 +46,11 @@ end up creating a widget with a URL like `https://integrations.example.org?widge
The integration manager's wrapper will typically have another iframe to isolate the
widget from the client by yet another layer. The wrapper often provides other functionality
which might not be available on the embedded site, such as a fullscreen button or the
communication layer with the client (all widgets *should* be talking to the client
communication layer with the client (all widgets _should_ be talking to the client
over `postMessage`, even if they aren't going to be using the widget APIs).
Widgets added with the `/addwidget` command will *not* be wrapped as they are not going
through an integration manager. The widgets themselves *should* also work outside of
Widgets added with the `/addwidget` command will _not_ be wrapped as they are not going
through an integration manager. The widgets themselves _should_ also work outside of
Element. Widgets currently have a "pop out" button which opens them in a new tab and
therefore have no connection back to Riot.
@ -92,7 +92,7 @@ and less risky to load. The local wrapper URL is populated with the conference i
from the original widget (which could be a v1 or v2 widget) so the user joins the right
call.
Critically, when the widget URL is reconstructed it does *not* take into account the
Critically, when the widget URL is reconstructed it does _not_ take into account the
config.json's `preferredDomain` for Jitsi. If it did this, users would end up on different
conference servers and therefore different calls entirely.

16
docs/jitsi.md
View file

@ -24,13 +24,14 @@ Element will use the Jitsi server that is embedded in the widget, even if it is
one you configured. This is because conference calls must be held on a single Jitsi
server and cannot be split over multiple servers.
However, you can configure Element to *start* a conference with your Jitsi server by adding
However, you can configure Element to _start_ a conference with your Jitsi server by adding
to your [config](./config.md) the following:
```json
{
"jitsi": {
"preferredDomain": "your.jitsi.example.org"
}
"jitsi": {
"preferredDomain": "your.jitsi.example.org"
}
}
```
@ -46,11 +47,12 @@ domain will appear later in the URL as a configuration parameter.
**Hint**: If you want everyone on your homeserver to use the same Jitsi server by
default, and you are using element-web 1.6 or newer, set the following on your homeserver's
`/.well-known/matrix/client` config:
```json
{
"im.vector.riot.jitsi": {
"preferredDomain": "your.jitsi.example.org"
}
"im.vector.riot.jitsi": {
"preferredDomain": "your.jitsi.example.org"
}
}
```

4
docs/kubernetes.md
View file

@ -1,5 +1,4 @@
Running in Kubernetes
=====================
# Running in Kubernetes
In case you would like to deploy element-web in a kubernetes cluster you can use
the provided Kubernetes example below as a starting point. Note that this example assumes the
@ -178,4 +177,3 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
number: 80
---

4
docs/labs.md
View file

@ -122,7 +122,7 @@ Switches to a new room search experience.
## Extensible events rendering (`feature_extensible_events`) [In Development]
*Intended for developer use only at the moment.*
_Intended for developer use only at the moment._
Extensible Events are a [new event format](https://github.com/matrix-org/matrix-doc/pull/1767) which
supports graceful fallback in unknown event types. Instead of rendering nothing or a blank space, events
@ -159,7 +159,7 @@ Threading allows users to branch out a new conversation from the main timeline o
Threads can be access by clicking their summary below the root event on the room timeline. Users can find a comprehensive list of threads by click the icon on the room header button.
This feature might work in degraded mode if the homeserver a user is connected to does not advertise support for the unstable feature `org.matrix.msc3440` when calling the `/versions` API endpoint.
This feature might work in degraded mode if the homeserver a user is connected to does not advertise support for the unstable feature `org.matrix.msc3440` when calling the `/versions` API endpoint.
## Video rooms (`feature_video_rooms`)

4
docs/memory-profiles-and-leaks.md
View file

@ -22,8 +22,8 @@ and anything newer is still in the warmup stages of the app.
**Memory profiles can contain sensitive information.** If you are submitting a memory
profile to us for debugging purposes, please pick the appropriate Element developer and
send them over an encrypted private message. *Do not share your memory profile in
public channels or with people you do not trust.*
send them over an encrypted private message. _Do not share your memory profile in
public channels or with people you do not trust._
### Taking a memory profile (Firefox)

1
docs/modules.md
View file

@ -34,6 +34,7 @@ our [ILAG module](https://github.com/vector-im/element-web-ilag-module) which wi
structure of a module is and how it works.
The following requirements are key for any module:
1. The module must depend on `@matrix-org/react-sdk-module-api` (usually as a dev dependency).
2. The module's `main` entrypoint must have a `default` export for the `RuntimeModule` instance, supporting a constructor
which takes a single parameter: a `ModuleApi` instance. This instance is passed to `super()`.

92
docs/review.md
View file

@ -10,53 +10,53 @@ When reviewing code, here are some things we look for and also things we avoid:
### We review for
* Correctness
* Performance
* Accessibility
* Security
* Quality via automated and manual testing
* Comments and documentation where needed
* Sharing knowledge of different areas among the team
* Ensuring it's something we're comfortable maintaining for the long term
* Progress indicators and local echo where appropriate with network activity
- Correctness
- Performance
- Accessibility
- Security
- Quality via automated and manual testing
- Comments and documentation where needed
- Sharing knowledge of different areas among the team
- Ensuring it's something we're comfortable maintaining for the long term
- Progress indicators and local echo where appropriate with network activity
### We should avoid
* Style nits that are already handled by the linter
* Dramatically increasing scope
- Style nits that are already handled by the linter
- Dramatically increasing scope
### Good practices
* Use empathetic language
* See also [Mindful Communication in Code
Reviews](https://kickstarter.engineering/a-guide-to-mindful-communication-in-code-reviews-48aab5282e5e)
and [How to Do Code Reviews Like a Human](https://mtlynch.io/human-code-reviews-1/)
* Authors should prefer smaller commits for easier reviewing and bisection
* Reviewers should be explicit about required versus optional changes
* Reviews are conversations and the PR author should feel comfortable
discussing and pushing back on changes before making them
* Reviewers are encouraged to ask for tests where they believe it is reasonable
* Core team should lead by example through their tone and language
* Take the time to thank and point out good code changes
* Using softer language like "please" and "what do you think?" goes a long way
towards making others feel like colleagues working towards a common goal
- Use empathetic language
- See also [Mindful Communication in Code
Reviews](https://kickstarter.engineering/a-guide-to-mindful-communication-in-code-reviews-48aab5282e5e)
and [How to Do Code Reviews Like a Human](https://mtlynch.io/human-code-reviews-1/)
- Authors should prefer smaller commits for easier reviewing and bisection
- Reviewers should be explicit about required versus optional changes
- Reviews are conversations and the PR author should feel comfortable
discussing and pushing back on changes before making them
- Reviewers are encouraged to ask for tests where they believe it is reasonable
- Core team should lead by example through their tone and language
- Take the time to thank and point out good code changes
- Using softer language like "please" and "what do you think?" goes a long way
towards making others feel like colleagues working towards a common goal
### Workflow
* Authors should request review from the element-web team by default (if someone on
the team is clearly the expert in an area, a direct review request to them may
be more appropriate)
* Reviewers should remove the team review request and request review from
themselves when starting a review to avoid double review
* If there are multiple related PRs authors should reference each of the PRs in
the others before requesting review. Reviewers might start reviewing from
different places and could miss other required PRs.
* Avoid force pushing to a PR after the first round of review
* Use the GitHub default of merge commits when landing (avoid alternate options
like squash or rebase)
* PR author merges after review (assuming they have write access)
* Assign issues only when in progress to indicate to others what can be picked
up
- Authors should request review from the element-web team by default (if someone on
the team is clearly the expert in an area, a direct review request to them may
be more appropriate)
- Reviewers should remove the team review request and request review from
themselves when starting a review to avoid double review
- If there are multiple related PRs authors should reference each of the PRs in
the others before requesting review. Reviewers might start reviewing from
different places and could miss other required PRs.
- Avoid force pushing to a PR after the first round of review
- Use the GitHub default of merge commits when landing (avoid alternate options
like squash or rebase)
- PR author merges after review (assuming they have write access)
- Assign issues only when in progress to indicate to others what can be picked
up
## Code Quality
@ -64,10 +64,10 @@ In the past, we have occasionally written different kinds of tests for
Element and the SDKs, but it hasn't been a consistent focus. Going forward, we'd
like to change that.
* For new features, code reviewers will expect some form of automated testing to
be included by default
* For bug fixes, regression tests are of course great to have, but we don't want
to block fixes on this, so we won't require them at this time
- For new features, code reviewers will expect some form of automated testing to
be included by default
- For bug fixes, regression tests are of course great to have, but we don't want
to block fixes on this, so we won't require them at this time
The above policy is not a strict rule, but instead it's meant to be a
conversation between the author and reviewer. As an author, try to think about
@ -104,10 +104,10 @@ perspective.
In more detail, our usual process for changes that affect the UI or alter user
functionality is:
* For changes that will go live when merged, always flag Design and Product
teams as appropriate
* For changes guarded by a feature flag, Design and Product review is not
required (though may still be useful) since we can continue tweaking
- For changes that will go live when merged, always flag Design and Product
teams as appropriate
- For changes guarded by a feature flag, Design and Product review is not
required (though may still be useful) since we can continue tweaking
As it can be difficult to review design work from looking at just the changed
files in a PR, a [preview site](./pr-previews.md) that includes your changes

22
docs/theming.md
View file

@ -1,31 +1,29 @@
Theming Element
============
# Theming Element
Themes are a very basic way of providing simple alternative look & feels to the
Element app via CSS & custom imagery.
They are *NOT* co be confused with 'skins', which describe apps which sit on top
They are _NOT_ co be confused with 'skins', which describe apps which sit on top
of matrix-react-sdk - e.g. in theory Element itself is a react-sdk skin.
As of March 2022, skins are not fully supported; Element is the only available skin.
To define a theme for Element:
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
which don't differ from `_base.pcss`, to make it clear which are being
overridden. If every single colour is being changed (as per `_dark.pcss`)
then you might as well keep them all.
5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
7. Sit back and admire your handywork.
5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
7. Sit back and admire your handywork.
In future, the assets for a theme will probably be gathered together into a
single directory tree.
Custom Themes
=============
# Custom Themes
Themes derived from the built in themes may also be defined in settings.

45
docs/translating-dev.md
View file

@ -2,11 +2,11 @@
## Requirements
- A working [Development Setup](../README.md#setting-up-a-dev-environment)
- Including up-to-date versions of matrix-react-sdk and matrix-js-sdk
- Latest LTS version of Node.js installed
- Be able to understand English
- Be able to understand the language you want to translate Element into
- A working [Development Setup](../README.md#setting-up-a-dev-environment)
- Including up-to-date versions of matrix-react-sdk and matrix-js-sdk
- Latest LTS version of Node.js installed
- Be able to understand English
- Be able to understand the language you want to translate Element into
## Translating strings vs. marking strings for translation
@ -15,6 +15,7 @@ Translating strings are done with the `_t()` function found in matrix-react-sdk/
Basically, whenever a translatable string is introduced, you should call either `_t()` immediately OR `_td()` and later `_t()`.
Example:
```
// Module-level constant
const COLORS = {
@ -30,10 +31,10 @@ function getColorName(hex) {
## Adding new strings
1. Check if the import ``import { _t } from 'matrix-react-sdk/src/languageHandler';`` is present. If not add it to the other import statements. Also import `_td` if needed.
1. Add ``_t()`` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time.
1. Run `yarn i18n` to update ``src/i18n/strings/en_EN.json``
1. If you added a string with a plural, you can add other English plural variants to ``src/i18n/strings/en_EN.json`` (remeber to edit the one in the same project as the source file containing your new translation).
1. Check if the import `import { _t } from 'matrix-react-sdk/src/languageHandler';` is present. If not add it to the other import statements. Also import `_td` if needed.
1. Add `_t()` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time.
1. Run `yarn i18n` to update `src/i18n/strings/en_EN.json`
1. If you added a string with a plural, you can add other English plural variants to `src/i18n/strings/en_EN.json` (remeber to edit the one in the same project as the source file containing your new translation).
## Editing existing strings
@ -43,21 +44,21 @@ function getColorName(hex) {
## Adding variables inside a string.
1. Extend your ``_t()`` call. Instead of ``_t(STRING)`` use ``_t(STRING, {})``
1. Extend your `_t()` call. Instead of `_t(STRING)` use `_t(STRING, {})`
1. Decide how to name it. Please think about if the person who has to translate it can understand what it does. E.g. using the name 'recipient' is bad, because a translator does not know if it is the name of a person, an email address, a user ID, etc. Rather use e.g. recipientEmailAddress.
1. Add it to the array in ``_t`` for example ``_t(STRING, {variable: this.variable})``
1. Add the variable inside the string. The syntax for variables is ``%(variable)s``. Please note the _s_ at the end. The name of the variable has to match the previous used name.
1. Add it to the array in `_t` for example `_t(STRING, {variable: this.variable})`
1. Add the variable inside the string. The syntax for variables is `%(variable)s`. Please note the _s_ at the end. The name of the variable has to match the previous used name.
- You can use the special ``count`` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. ``_t('You have %(count)s new messages', { count: 2 })`` would show 'You have 2 new messages', while ``_t('You have %(count)s new messages', { count: 1 })`` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in ``count`` is much prefered over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. ``_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })``. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
- You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. ``_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })``.
- You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much prefered over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
- You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
## Things to know/Style Guides
- Do not use `_t()` inside ``getDefaultProps``: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
- If using translated strings as constants, translated strings can't be in constants loaded at class-load time since the translations won't be loaded. Mark the strings using `_td()` instead and perform the actual translation later.
- If a string is presented in the UI with punctuation like a full stop, include this in the translation strings, since punctuation varies between languages too.
- Avoid "translation in parts", i.e. concatenating translated strings or using translated strings in variable substitutions. Context is important for translations, and translating partial strings this way is simply not always possible.
- Concatenating strings often also introduces an implicit assumption about word order (e.g. that the subject of the sentence comes first), which is incorrect for many languages.
- Translation 'smell test': If you have a string that does not begin with a capital letter (is not the start of a sentence) or it ends with e.g. ':' or a preposition (e.g. 'to') you should recheck that you are not trying to translate a partial sentence.
- If you have multiple strings, that are almost identical, except some part (e.g. a word or two) it is still better to translate the full sentence multiple times. It may seem like inefficient repetion, but unlike programming where you try to minimize repetition, translation is much faster if you have many, full, clear, sentences to work with, rather than fewer, but incomplete sentence fragments.
- Do not use `_t()` inside `getDefaultProps`: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
- If using translated strings as constants, translated strings can't be in constants loaded at class-load time since the translations won't be loaded. Mark the strings using `_td()` instead and perform the actual translation later.
- If a string is presented in the UI with punctuation like a full stop, include this in the translation strings, since punctuation varies between languages too.
- Avoid "translation in parts", i.e. concatenating translated strings or using translated strings in variable substitutions. Context is important for translations, and translating partial strings this way is simply not always possible.
- Concatenating strings often also introduces an implicit assumption about word order (e.g. that the subject of the sentence comes first), which is incorrect for many languages.
- Translation 'smell test': If you have a string that does not begin with a capital letter (is not the start of a sentence) or it ends with e.g. ':' or a preposition (e.g. 'to') you should recheck that you are not trying to translate a partial sentence.
- If you have multiple strings, that are almost identical, except some part (e.g. a word or two) it is still better to translate the full sentence multiple times. It may seem like inefficient repetion, but unlike programming where you try to minimize repetition, translation is much faster if you have many, full, clear, sentences to work with, rather than fewer, but incomplete sentence fragments.

15
docs/translating.md
View file

@ -2,15 +2,15 @@
## Requirements
- Web Browser
- Be able to understand English
- Be able to understand the language you want to translate Element into
- Web Browser
- Be able to understand English
- Be able to understand the language you want to translate Element into
## Step 0: Join #element-translations:matrix.org
1. Come and join https://matrix.to/#/#element-translations:matrix.org for general discussion
2. Join https://matrix.to/#/#element-translators:matrix.org for language-specific rooms
3. Read scrollback and/or ask if anyone else is working on your language, and co-ordinate if needed. In general little-or-no coordination is needed though :)
3. Read scrollback and/or ask if anyone else is working on your language, and co-ordinate if needed. In general little-or-no coordination is needed though :)
## Step 1: Preparing your Weblate Profile
@ -27,7 +27,7 @@ If your language is listed go to Step 2a and if not go to Step 2b
## Step 2a: Helping on existing languages.
1. Head to one of the projects listed https://translate.element.io/projects/element-web/
2. Click on the ``translate`` button on the right side of your language
2. Click on the `translate` button on the right side of your language
3. Fill in the translations in the writeable field. You will see the original English string and the string of your second language above.
Head to the explanations under Steb 2b
@ -35,7 +35,7 @@ Head to the explanations under Steb 2b
## Step 2b: Adding a new language
1. Go to one of the projects listed https://translate.element.io/projects/element-web/
2. Click the ``Start new translation`` button at the bottom
2. Click the `Start new translation` button at the bottom
3. Select a language
4. Start translating like in 2a.3
5. Repeat these steps for the other projects which are listed at the link of step 2b.1
@ -52,13 +52,12 @@ The yellow button has to be used if you are unsure about the translation but you
These things are variables that are expanded when displayed by Element. They can be room names, usernames or similar. If you find one, you can move to the right place for your language, but not delete it as the variable will be missing if you do.
A special case is `%(urlStart)s` and `%(urlEnd)s` which are used to mark the beginning of a hyperlink (i.e. `<a href="/somewhere">` and `</a>`. You must keep these markers surrounding the equivalent string in your language that needs to be hyperlinked.
A special case is `%(urlStart)s` and `%(urlEnd)s` which are used to mark the beginning of a hyperlink (i.e. `<a href="/somewhere">` and `</a>`. You must keep these markers surrounding the equivalent string in your language that needs to be hyperlinked.
### "I want to come back to this string. How?"
You can use inside the translation field "Review needed" checkbox. It will be shown as Strings that need to be reviewed.
### Further reading
The official Weblate doc provides some more in-depth explanation on how to do translations and talks about do and don'ts. You can find it at: https://docs.weblate.org/en/latest/user/translating.html

20
element.io/app/config.json
View file

@ -15,11 +15,7 @@
"uisi_autorageshake_app": "element-auto-uisi",
"showLabsSettings": false,
"roomDirectory": {
"servers": [
"matrix.org",
"gitter.im",
"libera.chat"
]
"servers": ["matrix.org", "gitter.im", "libera.chat"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,
@ -36,14 +32,12 @@
}
],
"hostSignup": {
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": [
"matrix.org"
],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": ["matrix.org"],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"
},
"posthog": {
"projectApiKey": "phc_Jzsm6DTm6V2705zeU5dcNvQDlonOR68XvX2sh1sEOHO",

20
element.io/develop/config.json
View file

@ -15,11 +15,7 @@
"uisi_autorageshake_app": "element-auto-uisi",
"showLabsSettings": true,
"roomDirectory": {
"servers": [
"matrix.org",
"gitter.im",
"libera.chat"
]
"servers": ["matrix.org", "gitter.im", "libera.chat"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,
@ -36,14 +32,12 @@
}
],
"hostSignup": {
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": [
"matrix.org"
],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": ["matrix.org"],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"
},
"sentry": {
"dsn": "https://029a0eb289f942508ae0fb17935bd8c5@sentry.matrix.org/6",

26
module_system/installer.ts
View file

@ -65,7 +65,7 @@ export function installer(config: BuildConfig): void {
// else must be a module, we assume.
const pkgJsonStr = fs.readFileSync("./package.json", "utf-8");
const optionalDepNames = getOptionalDepNames(pkgJsonStr);
const installedModules = optionalDepNames.filter(d => !currentOptDeps.includes(d));
const installedModules = optionalDepNames.filter((d) => !currentOptDeps.includes(d));
// Ensure all the modules are compatible. We check them all and report at the end to
// try and save the user some time debugging this sort of failure.
@ -80,7 +80,7 @@ export function installer(config: BuildConfig): void {
if (incompatibleNames.length > 0) {
console.error(
"The following modules are not compatible with this version of element-web. Please update the module " +
"references and try again.",
"references and try again.",
JSON.stringify(incompatibleNames, null, 4), // stringify to get prettier/complete output
);
exitCode = 1;
@ -133,29 +133,33 @@ function callYarnAdd(dep: string): void {
// goes wrong in restoring the original package details.
childProcess.execSync(`yarn add -O ${dep}`, {
env: process.env,
stdio: ['inherit', 'inherit', 'inherit'],
stdio: ["inherit", "inherit", "inherit"],
});
}
function getOptionalDepNames(pkgJsonStr: string): string[] {
return Object.keys(JSON.parse(pkgJsonStr)?.['optionalDependencies'] ?? {});
return Object.keys(JSON.parse(pkgJsonStr)?.["optionalDependencies"] ?? {});
}
function findDepVersionInPackageJson(dep: string, pkgJsonStr: string): string {
const pkgJson = JSON.parse(pkgJsonStr);
const packages = {
...(pkgJson['optionalDependencies'] ?? {}),
...(pkgJson['devDependencies'] ?? {}),
...(pkgJson['dependencies'] ?? {}),
...(pkgJson["optionalDependencies"] ?? {}),
...(pkgJson["devDependencies"] ?? {}),
...(pkgJson["dependencies"] ?? {}),
};
return packages[dep];
}
function getTopLevelDependencyVersion(dep: string): string {
const dependencyTree = JSON.parse(childProcess.execSync(`npm list ${dep} --depth=0 --json`, {
env: process.env,
stdio: ['inherit', 'pipe', 'pipe'],
}).toString('utf-8'));
const dependencyTree = JSON.parse(
childProcess
.execSync(`npm list ${dep} --depth=0 --json`, {
env: process.env,
stdio: ["inherit", "pipe", "pipe"],
})
.toString("utf-8"),
);
/*
What a dependency tree looks like:

430
package.json
View file

@ -1,220 +1,220 @@
{
"name": "element-web",
"version": "1.11.16",
"description": "A feature-rich client for Matrix.org",
"author": "New Vector Ltd.",
"repository": {
"type": "git",
"url": "https://github.com/vector-im/element-web"
},
"license": "Apache-2.0",
"files": [
"lib",
"res",
"src",
"webpack.config.js",
"scripts",
"docs",
"release.sh",
"deploy",
"CHANGELOG.md",
"CONTRIBUTING.rst",
"LICENSE",
"README.md",
"AUTHORS.rst",
"package.json",
"contribute.json"
],
"style": "bundle.css",
"scripts": {
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"clean": "rimraf lib webapp",
"build": "yarn clean && yarn build:genfiles && yarn build:bundle",
"build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
"build:jitsi": "node scripts/build-jitsi.js",
"build:res": "node scripts/copy-res.js",
"build:genfiles": "yarn build:res && yarn build:jitsi && yarn build:module_system",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:bundle": "webpack --progress --bail --mode production",
"build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json",
"build:module_system": "tsc --project ./tsconfig.module_system.json && node ./lib/module_system/scripts/install.js",
"dist": "scripts/package.sh",
"start": "yarn build:module_system && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
"start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
"start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
"start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --mode development --disable-host-check --hot",
"lint": "yarn lint:types && yarn lint:js && yarn lint:style",
"lint:js": "eslint --max-warnings 0 src module_system test && prettier --check .",
"lint:js-fix": "prettier --write . && eslint --fix src module_system test",
"lint:types": "tsc --noEmit --jsx react && tsc --noEmit --project ./tsconfig.module_system.json",
"lint:style": "stylelint \"res/css/**/*.pcss\"",
"test": "jest",
"coverage": "yarn test --coverage",
"analyse:unused-exports": "node ./scripts/analyse_unused_exports.js"
},
"dependencies": {
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
"@matrix-org/react-sdk-module-api": "^0.0.3",
"gfm.css": "^1.1.2",
"jsrsasign": "^10.5.25",
"katex": "^0.16.0",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
"matrix-widget-api": "^1.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"sanitize-html": "^2.3.2",
"ua-parser-js": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/eslint-parser": "^7.12.10",
"@babel/eslint-plugin": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-numeric-separator": "^7.12.7",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@casualbot/jest-sonar-reporter": "^2.2.5",
"@principalstudio/html-webpack-inject-preload": "^1.2.7",
"@sentry/webpack-plugin": "^1.18.1",
"@svgr/webpack": "^5.5.0",
"@testing-library/react": "^12.1.5",
"@types/flux": "^3.1.9",
"@types/jest": "^29.0.0",
"@types/jsrsasign": "^10.5.4",
"@types/modernizr": "^3.5.3",
"@types/node": "^16",
"@types/react": "17.0.49",
"@types/react-dom": "17.0.17",
"@types/sanitize-html": "^2.3.1",
"@types/ua-parser-js": "^0.7.36",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"allchange": "^1.0.6",
"babel-jest": "^29.0.0",
"babel-loader": "^8.2.2",
"chokidar": "^3.5.1",
"concurrently": "^7.0.0",
"cpx": "^1.5.0",
"css-loader": "^4",
"dotenv": "^16.0.2",
"eslint": "8.28.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-deprecate": "^0.7.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-matrix-org": "^0.9.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-unicorn": "^45.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fake-indexeddb": "^4.0.0",
"fetch-mock-jest": "^1.5.1",
"file-loader": "^6.0.0",
"fs-extra": "^11.0.0",
"html-webpack-plugin": "^4.5.2",
"jest": "^29.0.0",
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom": "^29.0.0",
"jest-mock": "^29.0.0",
"jest-raw-loader": "^1.0.1",
"json-loader": "^0.5.7",
"loader-utils": "^3.0.0",
"matrix-mock-request": "^2.5.0",
"matrix-web-i18n": "^1.3.0",
"mini-css-extract-plugin": "^1",
"minimist": "^1.2.6",
"mkdirp": "^1.0.4",
"modernizr": "^3.12.0",
"node-fetch": "^2.6.7",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.4.16",
"postcss-easings": "^2.0.0",
"postcss-hexrgba": "2.0.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.2.3",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^6.7.0",
"postcss-scss": "^4.0.4",
"postcss-simple-vars": "^5.0.2",
"prettier": "2.8.0",
"raw-loader": "^4.0.2",
"rimraf": "^3.0.2",
"semver": "^7.3.7",
"simple-proxy-agent": "^1.1.0",
"string-replace-loader": "3",
"style-loader": "2",
"stylelint": "^14.9.1",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^29.0.0",
"stylelint-scss": "^4.2.0",
"terser-webpack-plugin": "^4.0.0",
"ts-prune": "^0.10.3",
"typescript": "4.9.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"worker-loader": "^2.0.0",
"worklet-loader": "^2.0.0",
"yaml": "^2.0.1"
},
"jest": {
"testEnvironment": "jsdom",
"testEnvironmentOptions": {
"url": "http://localhost/"
"name": "element-web",
"version": "1.11.16",
"description": "A feature-rich client for Matrix.org",
"author": "New Vector Ltd.",
"repository": {
"type": "git",
"url": "https://github.com/vector-im/element-web"
},
"testMatch": [
"<rootDir>/test/**/*-test.[tj]s?(x)"
"license": "Apache-2.0",
"files": [
"lib",
"res",
"src",
"webpack.config.js",
"scripts",
"docs",
"release.sh",
"deploy",
"CHANGELOG.md",
"CONTRIBUTING.rst",
"LICENSE",
"README.md",
"AUTHORS.rst",
"package.json",
"contribute.json"
],
"setupFiles": [
"jest-canvas-mock"
],
"setupFilesAfterEnv": [
"<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
],
"moduleNameMapper": {
"\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
"\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
"\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
"\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
"^react$": "<rootDir>/node_modules/react",
"^react-dom$": "<rootDir>/node_modules/react-dom",
"^matrix-js-sdk$": "<rootDir>/node_modules/matrix-js-sdk/src",
"^matrix-react-sdk$": "<rootDir>/node_modules/matrix-react-sdk/src",
"decoderWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"context-filter-polyfill": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"FontManager.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/FontManager.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/workerMock.js",
"^!!raw-loader!.*": "jest-raw-loader",
"RecorderWorklet": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js"
"style": "bundle.css",
"scripts": {
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"clean": "rimraf lib webapp",
"build": "yarn clean && yarn build:genfiles && yarn build:bundle",
"build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
"build:jitsi": "node scripts/build-jitsi.js",
"build:res": "node scripts/copy-res.js",
"build:genfiles": "yarn build:res && yarn build:jitsi && yarn build:module_system",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:bundle": "webpack --progress --bail --mode production",
"build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json",
"build:module_system": "tsc --project ./tsconfig.module_system.json && node ./lib/module_system/scripts/install.js",
"dist": "scripts/package.sh",
"start": "yarn build:module_system && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
"start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
"start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
"start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --mode development --disable-host-check --hot",
"lint": "yarn lint:types && yarn lint:js && yarn lint:style",
"lint:js": "eslint --max-warnings 0 src module_system test && prettier --check .",
"lint:js-fix": "prettier --write . && eslint --fix src module_system test",
"lint:types": "tsc --noEmit --jsx react && tsc --noEmit --project ./tsconfig.module_system.json",
"lint:style": "stylelint \"res/css/**/*.pcss\"",
"test": "jest",
"coverage": "yarn test --coverage",
"analyse:unused-exports": "node ./scripts/analyse_unused_exports.js"
},
"transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$",
"/node_modules/(?!matrix-react-sdk).+$"
],
"coverageReporters": [
"text-summary",
"lcov"
],
"testResultsProcessor": "@casualbot/jest-sonar-reporter"
},
"@casualbot/jest-sonar-reporter": {
"outputDirectory": "coverage",
"outputName": "jest-sonar-report.xml",
"relativePaths": true
}
"dependencies": {
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
"@matrix-org/react-sdk-module-api": "^0.0.3",
"gfm.css": "^1.1.2",
"jsrsasign": "^10.5.25",
"katex": "^0.16.0",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
"matrix-widget-api": "^1.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"sanitize-html": "^2.3.2",
"ua-parser-js": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/eslint-parser": "^7.12.10",
"@babel/eslint-plugin": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-export-default-from": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-numeric-separator": "^7.12.7",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/register": "^7.12.10",
"@babel/runtime": "^7.12.5",
"@casualbot/jest-sonar-reporter": "^2.2.5",
"@principalstudio/html-webpack-inject-preload": "^1.2.7",
"@sentry/webpack-plugin": "^1.18.1",
"@svgr/webpack": "^5.5.0",
"@testing-library/react": "^12.1.5",
"@types/flux": "^3.1.9",
"@types/jest": "^29.0.0",
"@types/jsrsasign": "^10.5.4",
"@types/modernizr": "^3.5.3",
"@types/node": "^16",
"@types/react": "17.0.49",
"@types/react-dom": "17.0.17",
"@types/sanitize-html": "^2.3.1",
"@types/ua-parser-js": "^0.7.36",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"allchange": "^1.0.6",
"babel-jest": "^29.0.0",
"babel-loader": "^8.2.2",
"chokidar": "^3.5.1",
"concurrently": "^7.0.0",
"cpx": "^1.5.0",
"css-loader": "^4",
"dotenv": "^16.0.2",
"eslint": "8.28.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-deprecate": "^0.7.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-matrix-org": "^0.9.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-unicorn": "^45.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fake-indexeddb": "^4.0.0",
"fetch-mock-jest": "^1.5.1",
"file-loader": "^6.0.0",
"fs-extra": "^11.0.0",
"html-webpack-plugin": "^4.5.2",
"jest": "^29.0.0",
"jest-canvas-mock": "^2.3.0",
"jest-environment-jsdom": "^29.0.0",
"jest-mock": "^29.0.0",
"jest-raw-loader": "^1.0.1",
"json-loader": "^0.5.7",
"loader-utils": "^3.0.0",
"matrix-mock-request": "^2.5.0",
"matrix-web-i18n": "^1.3.0",
"mini-css-extract-plugin": "^1",
"minimist": "^1.2.6",
"mkdirp": "^1.0.4",
"modernizr": "^3.12.0",
"node-fetch": "^2.6.7",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.4.16",
"postcss-easings": "^2.0.0",
"postcss-hexrgba": "2.0.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.2.3",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^6.7.0",
"postcss-scss": "^4.0.4",
"postcss-simple-vars": "^5.0.2",
"prettier": "2.8.0",
"raw-loader": "^4.0.2",
"rimraf": "^3.0.2",
"semver": "^7.3.7",
"simple-proxy-agent": "^1.1.0",
"string-replace-loader": "3",
"style-loader": "2",
"stylelint": "^14.9.1",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^29.0.0",
"stylelint-scss": "^4.2.0",
"terser-webpack-plugin": "^4.0.0",
"ts-prune": "^0.10.3",
"typescript": "4.9.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"worker-loader": "^2.0.0",
"worklet-loader": "^2.0.0",
"yaml": "^2.0.1"
},
"jest": {
"testEnvironment": "jsdom",
"testEnvironmentOptions": {
"url": "http://localhost/"
},
"testMatch": [
"<rootDir>/test/**/*-test.[tj]s?(x)"
],
"setupFiles": [
"jest-canvas-mock"
],
"setupFilesAfterEnv": [
"<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
],
"moduleNameMapper": {
"\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
"\\.(gif|png|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
"\\.svg$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/svg.js",
"\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
"^react$": "<rootDir>/node_modules/react",
"^react-dom$": "<rootDir>/node_modules/react-dom",
"^matrix-js-sdk$": "<rootDir>/node_modules/matrix-js-sdk/src",
"^matrix-react-sdk$": "<rootDir>/node_modules/matrix-react-sdk/src",
"decoderWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"decoderWorker\\.min\\.wasm": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"waveWorker\\.min\\.js": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"context-filter-polyfill": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js",
"FontManager.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/FontManager.js",
"workers/(.+)\\.worker\\.ts": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/workerMock.js",
"^!!raw-loader!.*": "jest-raw-loader",
"RecorderWorklet": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/empty.js"
},
"transformIgnorePatterns": [
"/node_modules/(?!matrix-js-sdk).+$",
"/node_modules/(?!matrix-react-sdk).+$"
],
"coverageReporters": [
"text-summary",
"lcov"
],
"testResultsProcessor": "@casualbot/jest-sonar-reporter"
},
"@casualbot/jest-sonar-reporter": {
"outputDirectory": "coverage",
"outputName": "jest-sonar-report.xml",
"relativePaths": true
}
}

16
res/css/structures/ErrorView.pcss
View file

@ -25,17 +25,8 @@ limitations under the License.
background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
/* stylelint-disable-next-line function-no-unknown */
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #000;
width: 100%;
height: 100%;
@ -99,7 +90,8 @@ limitations under the License.
margin: auto 20px auto 0;
}
h1, h2 {
h1,
h2 {
font-weight: 600;
margin-bottom: 32px;
}

2
res/decoder-ring/datatypes.js
View file

@ -20,7 +20,7 @@
class Optional {
static from(value) {
return value && Some.of(value) || None;
return (value && Some.of(value)) || None;
}
map(f) {
return this;

137
res/decoder-ring/decoder.js
View file

@ -10,11 +10,11 @@ async function getBundleName(baseUrl) {
throw new StartupError(`Couldn't fetch index.html to prefill bundle; ${res.status} ${res.statusText}`);
}
const index = await res.text();
return index.split("\n").map((line) =>
line.match(/<script src="bundles\/([^/]+)\/bundle.js"/),
)
.filter((result) => result)
.map((result) => result[1])[0];
return index
.split("\n")
.map((line) => line.match(/<script src="bundles\/([^/]+)\/bundle.js"/))
.filter((result) => result)
.map((result) => result[1])[0];
}
function validateBundle(value) {
@ -69,7 +69,7 @@ function observeReadableStream(readableStream, pendingContext = {}) {
return;
}
bytesReceived += value.length;
pendingSubject.next(Pending.of({...pendingContext, bytesReceived }));
pendingSubject.next(Pending.of({ ...pendingContext, bytesReceived }));
/* string concatenation is apparently the most performant way to do this */
buffer += utf8Decoder.decode(value);
readNextChunk();
@ -120,25 +120,27 @@ const e = React.createElement;
* Provides user feedback given a FetchStatus object.
*/
function ProgressBar({ fetchStatus }) {
return e('span', { className: "progress "},
return e(
"span",
{ className: "progress " },
fetchStatus.fold({
pending: ({ bytesReceived, length }) => {
if (!bytesReceived) {
return e('span', { className: "spinner" }, "\u29b5");
return e("span", { className: "spinner" }, "\u29b5");
}
const kB = Math.floor(10 * bytesReceived / 1024) / 10;
const kB = Math.floor((10 * bytesReceived) / 1024) / 10;
if (!length) {
return e('span', null, `Fetching (${kB}kB)`);
return e("span", null, `Fetching (${kB}kB)`);
}
const percent = Math.floor(100 * bytesReceived / length);
return e('span', null, `Fetching (${kB}kB) ${percent}%`);
const percent = Math.floor((100 * bytesReceived) / length);
return e("span", null, `Fetching (${kB}kB) ${percent}%`);
},
success: () => e('span', null, "\u2713"),
success: () => e("span", null, "\u2713"),
error: (reason) => {
return e('span', { className: 'error'}, `\u2717 ${reason}`);
return e("span", { className: "error" }, `\u2717 ${reason}`);
},
},
));
}),
);
}
/*
@ -193,23 +195,24 @@ function BundlePicker() {
setColumn(value);
}, []);
/* ------------------------------------------------ */
/* Plumb data-fetching observables through to React */
/* ------------------------------------------------ */
/* Whenever a valid bundle name is input, go see if it's a real bundle on the server */
React.useEffect(() =>
validateBundle(bundle).fold({
some: (value) => {
const subscription = bundleSubject(baseUrl, value)
.pipe(rxjs.operators.map(Some.of))
.subscribe(setBundleFetchStatus);
return () => subscription.unsubscribe();
},
none: () => setBundleFetchStatus(None),
}),
[baseUrl, bundle]);
React.useEffect(
() =>
validateBundle(bundle).fold({
some: (value) => {
const subscription = bundleSubject(baseUrl, value)
.pipe(rxjs.operators.map(Some.of))
.subscribe(setBundleFetchStatus);
return () => subscription.unsubscribe();
},
none: () => setBundleFetchStatus(None),
}),
[baseUrl, bundle],
);
/* Whenever a valid javascript file is input, see if it corresponds to a sourcemap file and initiate a fetch
* if so. */
@ -218,17 +221,18 @@ function BundlePicker() {
setFileFetchStatus(None);
return;
}
const observable = fetchAsSubject(new URL(`bundles/${bundle}/${file}.map`, baseUrl).toString())
.pipe(
rxjs.operators.map((fetchStatus) => fetchStatus.flatMap(value => {
const observable = fetchAsSubject(new URL(`bundles/${bundle}/${file}.map`, baseUrl).toString()).pipe(
rxjs.operators.map((fetchStatus) =>
fetchStatus.flatMap((value) => {
try {
return Success.of(JSON.parse(value));
} catch (e) {
return FetchError.of(e);
}
})),
rxjs.operators.map(Some.of),
);
}),
),
rxjs.operators.map(Some.of),
);
const subscription = observable.subscribe(setFileFetchStatus);
return () => subscription.unsubscribe();
}, [baseUrl, bundle, file]);
@ -256,26 +260,33 @@ function BundlePicker() {
});
}, [fileFetchStatus, line, column]);
/* ------ */
/* Render */
/* ------ */
return e('div', {},
e('div', { className: 'inputs' },
e('div', { className: 'baseUrl' },
e('label', { htmlFor: 'baseUrl'}, 'Base URL'),
e('input', {
name: 'baseUrl',
return e(
"div",
{},
e(
"div",
{ className: "inputs" },
e(
"div",
{ className: "baseUrl" },
e("label", { htmlFor: "baseUrl" }, "Base URL"),
e("input", {
name: "baseUrl",
required: true,
pattern: ".+",
onChange: onBaseUrlChange,
value: baseUrl,
}),
),
e('div', { className: 'bundle' },
e('label', { htmlFor: 'bundle'}, 'Bundle'),
e('input', {
name: 'bundle',
e(
"div",
{ className: "bundle" },
e("label", { htmlFor: "bundle" }, "Bundle"),
e("input", {
name: "bundle",
required: true,
pattern: "[0-9a-f]{20}",
onChange: onBundleChange,
@ -286,10 +297,12 @@ function BundlePicker() {
none: () => null,
}),
),
e('div', { className: 'file' },
e('label', { htmlFor: 'file' }, 'File'),
e('input', {
name: 'file',
e(
"div",
{ className: "file" },
e("label", { htmlFor: "file" }, "File"),
e("input", {
name: "file",
required: true,
pattern: ".+\\.js",
onChange: onFileChange,
@ -300,20 +313,24 @@ function BundlePicker() {
none: () => null,
}),
),
e('div', { className: 'line' },
e('label', { htmlFor: 'line' }, 'Line'),
e('input', {
name: 'line',
e(
"div",
{ className: "line" },
e("label", { htmlFor: "line" }, "Line"),
e("input", {
name: "line",
required: true,
pattern: "[0-9]+",
onChange: onLineChange,
value: line,
}),
),
e('div', { className: 'column' },
e('label', { htmlFor: 'column' }, 'Column'),
e('input', {
name: 'column',
e(
"div",
{ className: "column" },
e("label", { htmlFor: "column" }, "Column"),
e("input", {
name: "column",
required: true,
pattern: "[0-9]+",
onChange: onColumnChange,
@ -321,10 +338,12 @@ function BundlePicker() {
}),
),
),
e('div', null,
e(
"div",
null,
result.fold({
none: () => "Select a bundle, file and line",
some: (value) => e('pre', null, value),
some: (value) => e("pre", null, value),
}),
),
);

18
res/decoder-ring/index.html
View file

@ -1,11 +1,11 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rageshake decoder ring</title>
<script crossorigin src="https://unpkg.com/source-map@0.7.3/dist/source-map.js"></script>
<script>
sourceMap.SourceMapConsumer.initialize({
"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm",
});
</script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
@ -18,12 +18,16 @@
<style>
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
body {
font-family: sans-serif
font-family: sans-serif;
}
.spinner {
@ -44,7 +48,7 @@
}
.valid::after {
content: "✓"
content: "✓";
}
label {
@ -68,7 +72,7 @@
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
try {
ReactDOM.render(React.createElement(Decoder.BundlePicker), document.getElementById("main"))
ReactDOM.render(React.createElement(Decoder.BundlePicker), document.getElementById("main"));
} catch (e) {
const n = document.createElement("div");
n.innerText = `Error starting: ${e.message}`;

2
res/sw.js
View file

@ -1 +1 @@
self.addEventListener('fetch', () => {});
self.addEventListener("fetch", () => {});

278
res/welcome.html
View file

@ -1,175 +1,173 @@
<style type="text/css">
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
* voodoo where we have to set display: none by default
*/
h1::after {
content: "!";
}
h1::after {
content: "!";
}
.mx_Parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 25px 35px;
color: #2e2f32;
}
.mx_Parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 25px 35px;
color: #2e2f32;
}
.mx_Logo {
height: 54px;
margin-top: 2px;
}
.mx_Logo {
height: 54px;
margin-top: 2px;
}
.mx_ButtonGroup {
margin-top: 10px;
}
.mx_ButtonGroup {
margin-top: 10px;
}
.mx_ButtonRow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin: 12px 0 0;
}
.mx_ButtonRow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin: 12px 0 0;
}
.mx_ButtonRow > * {
margin: 0 10px;
}
.mx_ButtonRow > * {
margin: 0 10px;
}
.mx_ButtonRow > *:first-child {
margin-left: 0;
}
.mx_ButtonRow > *:first-child {
margin-left: 0;
}
.mx_ButtonRow > *:last-child {
margin-right: 0;
}
.mx_ButtonRow > *:last-child {
margin-right: 0;
}
.mx_ButtonParent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 10px 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 4px;
width: 150px;
background-repeat: no-repeat;
background-position: 10px center;
text-decoration: none;
color: #2e2f32 !important;
}
.mx_ButtonParent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 10px 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 4px;
width: 150px;
background-repeat: no-repeat;
background-position: 10px center;
text-decoration: none;
color: #2e2f32 !important;
}
.mx_ButtonLabel {
margin-left: 20px;
}
.mx_ButtonLabel {
margin-left: 20px;
}
.mx_Header_title {
font-size: 24px;
font-weight: 600;
margin: 20px 0 0;
}
.mx_Header_title {
font-size: 24px;
font-weight: 600;
margin: 20px 0 0;
}
.mx_Header_subtitle {
font-size: 12px;
font-weight: normal;
margin: 8px 0 0;
}
.mx_Header_subtitle {
font-size: 12px;
font-weight: normal;
margin: 8px 0 0;
}
.mx_ButtonSignIn {
background-color: #368BD6;
color: white !important;
}
.mx_ButtonSignIn {
background-color: #368bd6;
color: white !important;
}
.mx_ButtonCreateAccount {
background-color: #0DBD8B;
color: white !important;
}
.mx_ButtonCreateAccount {
background-color: #0dbd8b;
color: white !important;
}
.mx_SecondaryButton {
background-color: #FFFFFF;
color: #2E2F32;
}
.mx_SecondaryButton {
background-color: #ffffff;
color: #2e2f32;
}
.mx_Button_iconSignIn {
background-image: url('welcome/images/icon-sign-in.svg');
}
.mx_Button_iconCreateAccount {
background-image: url('welcome/images/icon-create-account.svg');
}
.mx_Button_iconHelp {
background-image: url('welcome/images/icon-help.svg');
}
.mx_Button_iconRoomDirectory {
background-image: url('welcome/images/icon-room-directory.svg');
}
.mx_Button_iconSignIn {
background-image: url("welcome/images/icon-sign-in.svg");
}
.mx_Button_iconCreateAccount {
background-image: url("welcome/images/icon-create-account.svg");
}
.mx_Button_iconHelp {
background-image: url("welcome/images/icon-help.svg");
}
.mx_Button_iconRoomDirectory {
background-image: url("welcome/images/icon-room-directory.svg");
}
/*
/*
.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
If it is set on the page, we should show the buttons. Otherwise, we have to assume
we don't have an account and should hide them. No account == no guest account either.
*/
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
display: none;
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions {
margin-top: 20px;
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
margin: 0 auto;
}
@media only screen and (max-width: 480px) {
.mx_ButtonRow {
flex-direction: column;
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
display: none;
}
.mx_ButtonRow > * {
margin: 0 0 10px 0;
.mx_ButtonRow.mx_WelcomePage_guestFunctions {
margin-top: 20px;
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
margin: 0 auto;
}
}
@media only screen and (max-width: 480px) {
.mx_ButtonRow {
flex-direction: column;
}
.mx_ButtonRow > * {
margin: 0 0 10px 0;
}
}
</style>
<div class="mx_Parent">
<a href="https://element.io" target="_blank" rel="noopener">
<img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
<img src="welcome/images/logo.svg" alt="" class="mx_Logo" />
</a>
<h1 class="mx_Header_title">_t("Welcome to Element")</h1>
<!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->

2
scripts/analyse_unused_exports.js
View file

@ -1,5 +1,5 @@
#!/usr/bin/env node
'use strict';
"use strict";
const fs = require("fs");
const { exec } = require("node:child_process");

18
scripts/build-jitsi.js
View file

@ -21,11 +21,13 @@ if (process.env.HTTPS_PROXY) {
options.agent = new ProxyAgent(process.env.HTTPS_PROXY, { tunnel: true });
}
fetch("https://meet.element.io/libs/external_api.min.js", options).then(res => {
const stream = fs.createWriteStream(fname);
return new Promise((resolve, reject) => {
res.body.pipe(stream);
res.body.on('error', err => reject(err));
res.body.on('finish', () => resolve());
});
}).then(() => console.log('Done with Jitsi download'));
fetch("https://meet.element.io/libs/external_api.min.js", options)
.then((res) => {
const stream = fs.createWriteStream(fname);
return new Promise((resolve, reject) => {
res.body.pipe(stream);
res.body.on("error", (err) => reject(err));
res.body.on("finish", () => resolve());
});
})
.then(() => console.log("Done with Jitsi download"));

170
scripts/copy-res.js
View file

@ -11,52 +11,52 @@ const loaderUtils = require("loader-utils");
// This could readily be automated, but it's nice to explicitly
// control when new languages are available.
const INCLUDE_LANGS = [
{'value': 'bg', 'label': 'Български'},
{'value': 'ca', 'label': 'Català'},
{'value': 'cs', 'label': 'čeština'},
{'value': 'da', 'label': 'Dansk'},
{'value': 'de_DE', 'label': 'Deutsch'},
{'value': 'el', 'label': 'Ελληνικά'},
{'value': 'en_EN', 'label': 'English'},
{'value': 'en_US', 'label': 'English (US)'},
{'value': 'eo', 'label': 'Esperanto'},
{'value': 'es', 'label': 'Español'},
{'value': 'et', 'label': 'Eesti'},
{'value': 'eu', 'label': 'Euskara'},
{'value': 'fi', 'label': 'Suomi'},
{'value': 'fr', 'label': 'Français'},
{'value': 'gl', 'label': 'Galego'},
{'value': 'he', 'label': 'עברית'},
{'value': 'hi', 'label': 'हिन्दी'},
{'value': 'hu', 'label': 'Magyar'},
{'value': 'id', 'label': 'Bahasa Indonesia'},
{'value': 'is', 'label': 'íslenska'},
{'value': 'it', 'label': 'Italiano'},
{'value': 'ja', 'label': '日本語'},
{'value': 'kab', 'label': 'Taqbaylit'},
{'value': 'ko', 'label': '한국어'},
{'value': 'lo', 'label': 'ລາວ'},
{'value': 'lt', 'label': 'Lietuvių'},
{'value': 'lv', 'label': 'Latviešu'},
{'value': 'nb_NO', 'label': 'Norwegian Bokmål'},
{'value': 'nl', 'label': 'Nederlands'},
{'value': 'nn', 'label': 'Norsk Nynorsk'},
{'value': 'pl', 'label': 'Polski'},
{'value': 'pt', 'label': 'Português'},
{'value': 'pt_BR', 'label': 'Português do Brasil'},
{'value': 'ru', 'label': 'Русский'},
{'value': 'sk', 'label': 'Slovenčina'},
{'value': 'sq', 'label': 'Shqip'},
{'value': 'sr', 'label': 'српски'},
{'value': 'sv', 'label': 'Svenska'},
{'value': 'te', 'label': 'తెలుగు'},
{'value': 'th', 'label': 'ไทย'},
{'value': 'tr', 'label': 'Türkçe'},
{'value': 'uk', 'label': 'українська мова'},
{'value': 'vi', 'label': 'Tiếng Việt'},
{'value': 'vls', 'label': 'West-Vlaams'},
{'value': 'zh_Hans', 'label': '简体中文'}, // simplified chinese
{'value': 'zh_Hant', 'label': '繁體中文'}, // traditional chinese
{ value: "bg", label: "Български" },
{ value: "ca", label: "Català" },
{ value: "cs", label: "čeština" },
{ value: "da", label: "Dansk" },
{ value: "de_DE", label: "Deutsch" },
{ value: "el", label: "Ελληνικά" },
{ value: "en_EN", label: "English" },
{ value: "en_US", label: "English (US)" },
{ value: "eo", label: "Esperanto" },
{ value: "es", label: "Español" },
{ value: "et", label: "Eesti" },
{ value: "eu", label: "Euskara" },
{ value: "fi", label: "Suomi" },
{ value: "fr", label: "Français" },
{ value: "gl", label: "Galego" },
{ value: "he", label: "עברית" },
{ value: "hi", label: "हिन्दी" },
{ value: "hu", label: "Magyar" },
{ value: "id", label: "Bahasa Indonesia" },
{ value: "is", label: "íslenska" },
{ value: "it", label: "Italiano" },
{ value: "ja", label: "日本語" },
{ value: "kab", label: "Taqbaylit" },
{ value: "ko", label: "한국어" },
{ value: "lo", label: "ລາວ" },
{ value: "lt", label: "Lietuvių" },
{ value: "lv", label: "Latviešu" },
{ value: "nb_NO", label: "Norwegian Bokmål" },
{ value: "nl", label: "Nederlands" },
{ value: "nn", label: "Norsk Nynorsk" },
{ value: "pl", label: "Polski" },
{ value: "pt", label: "Português" },
{ value: "pt_BR", label: "Português do Brasil" },
{ value: "ru", label: "Русский" },
{ value: "sk", label: "Slovenčina" },
{ value: "sq", label: "Shqip" },
{ value: "sr", label: "српски" },
{ value: "sv", label: "Svenska" },
{ value: "te", label: "తెలుగు" },
{ value: "th", label: "ไทย" },
{ value: "tr", label: "Türkçe" },
{ value: "uk", label: "українська мова" },
{ value: "vi", label: "Tiếng Việt" },
{ value: "vls", label: "West-Vlaams" },
{ value: "zh_Hans", label: "简体中文" }, // simplified chinese
{ value: "zh_Hant", label: "繁體中文" }, // traditional chinese
];
// cpx includes globbed parts of the filename in the destination, but excludes
@ -77,15 +77,13 @@ const COPY_LIST = [
["contribute.json", "webapp"],
];
const parseArgs = require('minimist');
const Cpx = require('cpx');
const chokidar = require('chokidar');
const fs = require('fs');
const rimraf = require('rimraf');
const parseArgs = require("minimist");
const Cpx = require("cpx");
const chokidar = require("chokidar");
const fs = require("fs");
const rimraf = require("rimraf");
const argv = parseArgs(
process.argv.slice(2), {}
);
const argv = parseArgs(process.argv.slice(2), {});
const watch = argv.w;
const verbose = argv.v;
@ -98,12 +96,12 @@ function errCheck(err) {
}
// Check if webapp exists
if (!fs.existsSync('webapp')) {
fs.mkdirSync('webapp');
if (!fs.existsSync("webapp")) {
fs.mkdirSync("webapp");
}
// Check if i18n exists
if (!fs.existsSync('webapp/i18n/')) {
fs.mkdirSync('webapp/i18n/');
if (!fs.existsSync("webapp/i18n/")) {
fs.mkdirSync("webapp/i18n/");
}
function next(i, err) {
@ -132,7 +130,9 @@ function next(i, err) {
});
}
const cb = (err) => { next(i + 1, err) };
const cb = (err) => {
next(i + 1, err);
};
if (watch) {
if (opts.directwatch) {
@ -140,14 +140,12 @@ function next(i, err) {
// which in the case of config.json is '.', which inevitably takes
// ages to crawl. So we create our own watcher on the files
// instead.
const copy = () => { cpx.copy(errCheck) };
chokidar.watch(source)
.on('add', copy)
.on('change', copy)
.on('ready', cb)
.on('error', errCheck);
const copy = () => {
cpx.copy(errCheck);
};
chokidar.watch(source).on("add", copy).on("change", copy).on("ready", cb).on("error", errCheck);
} else {
cpx.on('watch-ready', cb);
cpx.on("watch-ready", cb);
cpx.on("watch-error", cb);
cpx.watch();
}
@ -157,17 +155,14 @@ function next(i, err) {
}
function genLangFile(lang, dest) {
const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + lang + '.json';
const riotWebFile = 'src/i18n/strings/' + lang + '.json';
const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
const riotWebFile = "src/i18n/strings/" + lang + ".json";
let translations = {};
[reactSdkFile, riotWebFile].forEach(function(f) {
[reactSdkFile, riotWebFile].forEach(function (f) {
if (fs.existsSync(f)) {
try {
Object.assign(
translations,
JSON.parse(fs.readFileSync(f).toString())
);
Object.assign(translations, JSON.parse(fs.readFileSync(f).toString()));
} catch (e) {
console.error("Failed: " + f, e);
throw e;
@ -192,16 +187,16 @@ function genLangFile(lang, dest) {
function genLangList(langFileMap) {
const languages = {};
INCLUDE_LANGS.forEach(function(lang) {
INCLUDE_LANGS.forEach(function (lang) {
const normalizedLanguage = lang.value.toLowerCase().replace("_", "-");
const languageParts = normalizedLanguage.split('-');
const languageParts = normalizedLanguage.split("-");
if (languageParts.length == 2 && languageParts[0] == languageParts[1]) {
languages[languageParts[0]] = {'fileName': langFileMap[lang.value], 'label': lang.label};
languages[languageParts[0]] = { fileName: langFileMap[lang.value], label: lang.label };
} else {
languages[normalizedLanguage] = {'fileName': langFileMap[lang.value], 'label': lang.label};
languages[normalizedLanguage] = { fileName: langFileMap[lang.value], label: lang.label };
}
});
fs.writeFile('webapp/i18n/languages.json', JSON.stringify(languages, null, 4), function(err) {
fs.writeFile("webapp/i18n/languages.json", JSON.stringify(languages, null, 4), function (err) {
if (err) {
console.error("Copy Error occured: " + err);
throw new Error("Failed to generate languages.json");
@ -230,7 +225,7 @@ function weblateToCounterpart(inTrs) {
const outTrs = {};
for (const key of Object.keys(inTrs)) {
const keyParts = key.split('|', 2);
const keyParts = key.split("|", 2);
if (keyParts.length === 2) {
let obj = outTrs[keyParts[0]];
if (obj === undefined) {
@ -239,7 +234,7 @@ function weblateToCounterpart(inTrs) {
// This is a transitional edge case if a string went from singular to pluralised and both still remain
// in the translation json file. Use the singular translation as `other` and merge pluralisation atop.
obj = outTrs[keyParts[0]] = {
"other": inTrs[key],
other: inTrs[key],
};
console.warn("Found entry in i18n file in both singular and pluralised form", keyParts[0]);
}
@ -258,8 +253,8 @@ regenerate the file, adding its content-hashed filename to langFileMap
and regenerating languages.json with the new filename
*/
function watchLanguage(lang, dest, langFileMap) {
const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + lang + '.json';
const riotWebFile = 'src/i18n/strings/' + lang + '.json';
const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
const riotWebFile = "src/i18n/strings/" + lang + ".json";
// XXX: Use a debounce because for some reason if we read the language
// file immediately after the FS event is received, the file contents
@ -271,16 +266,13 @@ function watchLanguage(lang, dest, langFileMap) {
}
makeLangDebouncer = setTimeout(() => {
const filename = genLangFile(lang, dest);
langFileMap[lang]=filename;
langFileMap[lang] = filename;
genLangList(langFileMap);
}, 500);
};
[reactSdkFile, riotWebFile].forEach(function(f) {
chokidar.watch(f)
.on('add', makeLang)
.on('change', makeLang)
.on('error', errCheck);
[reactSdkFile, riotWebFile].forEach(function (f) {
chokidar.watch(f).on("add", makeLang).on("change", makeLang).on("error", errCheck);
});
}
@ -294,7 +286,7 @@ const I18N_FILENAME_MAP = INCLUDE_LANGS.reduce((m, l) => {
genLangList(I18N_FILENAME_MAP);
if (watch) {
INCLUDE_LANGS.forEach(l => watchLanguage(l.value, I18N_DEST, I18N_FILENAME_MAP));
INCLUDE_LANGS.forEach((l) => watchLanguage(l.value, I18N_DEST, I18N_FILENAME_MAP));
}
// non-language resources

28
src/@types/global.d.ts vendored
View file

@ -19,20 +19,20 @@ import type { Renderer } from "react-dom";
import type { logger } from "matrix-js-sdk/src/logger";
type ElectronChannel =
"app_onAction" |
"before-quit" |
"check_updates" |
"install_update" |
"ipcCall" |
"ipcReply" |
"loudNotification" |
"preferences" |
"seshat" |
"seshatReply" |
"setBadgeCount" |
"update-downloaded" |
"userDownloadCompleted" |
"userDownloadAction";
| "app_onAction"
| "before-quit"
| "check_updates"
| "install_update"
| "ipcCall"
| "ipcReply"
| "loudNotification"
| "preferences"
| "seshat"
| "seshatReply"
| "setBadgeCount"
| "update-downloaded"
| "userDownloadCompleted"
| "userDownloadAction";
declare global {
interface Window {

2
src/@types/raw-loader.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module '!!raw-loader!*' {
declare module "!!raw-loader!*" {
const contents: string;
export default contents;
}

192
src/async-components/structures/CompatibilityView.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import * as React from "react";
import { _t } from "matrix-react-sdk/src/languageHandler";
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
// PostCSS variables will be accessible.
@ -32,115 +32,131 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
let ios = null;
const iosCustomUrl = mobileBuilds?.ios;
if (iosCustomUrl !== null) { // could be undefined or a string
ios = <>
<p><strong>iOS</strong> (iPhone or iPad)</p>
<a
href={iosCustomUrl || "https://apps.apple.com/app/vector/id1083446067"}
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
</>;
if (iosCustomUrl !== null) {
// could be undefined or a string
ios = (
<>
<p>
<strong>iOS</strong> (iPhone or iPad)
</p>
<a
href={iosCustomUrl || "https://apps.apple.com/app/vector/id1083446067"}
target="_blank"
className="mx_ClearDecoration"
>
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
</>
);
}
let android = [<p className="mx_Spacer" key="header"><strong>Android</strong></p>];
let android = [
<p className="mx_Spacer" key="header">
<strong>Android</strong>
</p>,
];
const andCustomUrl = mobileBuilds?.android;
const fdroidCustomUrl = mobileBuilds?.fdroid;
if (andCustomUrl !== null) { // undefined or string
android.push(<a
href={andCustomUrl || "https://play.google.com/store/apps/details?id=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="android"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>);
if (andCustomUrl !== null) {
// undefined or string
android.push(
<a
href={andCustomUrl || "https://play.google.com/store/apps/details?id=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="android"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>,
);
}
if (fdroidCustomUrl !== null) { // undefined or string
android.push(<a
href={fdroidCustomUrl || "https://f-droid.org/repository/browse/?fdid=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="fdroid"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>);
if (fdroidCustomUrl !== null) {
// undefined or string
android.push(
<a
href={fdroidCustomUrl || "https://f-droid.org/repository/browse/?fdid=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="fdroid"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>,
);
}
if (android.length === 1) { // just a header, meaning no links
if (android.length === 1) {
// just a header, meaning no links
android = [];
}
let mobileHeader = <h2 id="step2_heading">{ _t("Use %(brand)s on mobile", { brand }) }</h2>;
let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", { brand })}</h2>;
if (!android.length && !ios) {
mobileHeader = null;
}
return <div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{ _t("Unsupported browser") }</h1>
</div>
return (
<div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{_t("Unsupported browser")}</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{ _t("Your browser can't run %(brand)s", { brand }) }</h2>
<p>
{ _t(
"%(brand)s uses advanced browser features which aren't " +
"supported by your current browser.",
{ brand },
) }
</p>
<p>
{ _t(
'Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, ' +
'or <safariLink>Safari</safariLink> for the best experience.',
{},
{
'chromeLink': (sub) => <a href="https://www.google.com/chrome">{ sub }</a>,
'firefoxLink': (sub) => <a href="https://firefox.com">{ sub }</a>,
'safariLink': (sub) => <a href="https://apple.com/safari">{ sub }</a>,
},
) }
</p>
<p>
{ _t(
"You can continue using your current browser, but some or all features may not work " +
"and the look and feel of the application may be incorrect.",
) }
</p>
<button onClick={onAccept}>
{ _t("I understand the risks and wish to continue") }
</button>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{_t("Your browser can't run %(brand)s", { brand })}</h2>
<p>
{_t(
"%(brand)s uses advanced browser features which aren't " +
"supported by your current browser.",
{ brand },
)}
</p>
<p>
{_t(
"Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, " +
"or <safariLink>Safari</safariLink> for the best experience.",
{},
{
chromeLink: (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
firefoxLink: (sub) => <a href="https://firefox.com">{sub}</a>,
safariLink: (sub) => <a href="https://apple.com/safari">{sub}</a>,
},
)}
</p>
<p>
{_t(
"You can continue using your current browser, but some or all features may not work " +
"and the look and feel of the application may be incorrect.",
)}
</p>
<button onClick={onAccept}>{_t("I understand the risks and wish to continue")}</button>
</div>
</div>
</div>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
{ mobileHeader }
{ ios }
{ android }
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
{mobileHeader}
{ios}
{android}
</div>
</div>
</div>
</div>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{ _t("Go to element.io") }
</a>
</p>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{_t("Go to element.io")}
</a>
</p>
</div>
</div>
</div>
</div>;
);
};
export default CompatibilityView;

47
src/async-components/structures/ErrorView.tsx
View file

@ -28,34 +28,33 @@ interface IProps {
}
const ErrorView: React.FC<IProps> = ({ title, messages }) => {
return <div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{ _t("Failed to start") }</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{ title }</h2>
{ messages && messages.map(msg => <p key={msg}>
{ msg }
</p>) }
return (
<div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{_t("Failed to start")}</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{title}</h2>
{messages && messages.map((msg) => <p key={msg}>{msg}</p>)}
</div>
</div>
</div>
</div>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{ _t("Go to element.io") }
</a>
</p>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{_t("Go to element.io")}
</a>
</p>
</div>
</div>
</div>
</div>;
);
};
export default ErrorView;

20
src/components/views/auth/VectorAuthFooter.tsx
View file

@ -15,31 +15,33 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactElement } from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import React, { ReactElement } from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { _t } from "matrix-react-sdk/src/languageHandler";
const VectorAuthFooter = (): ReactElement => {
const brandingConfig = SdkConfig.getObject("branding");
const links = brandingConfig?.get("auth_footer_links") ?? [
{ "text": "Blog", "url": "https://element.io/blog" },
{ "text": "Twitter", "url": "https://twitter.com/element_hq" },
{ "text": "GitHub", "url": "https://github.com/vector-im/element-web" },
{ text: "Blog", url: "https://element.io/blog" },
{ text: "Twitter", url: "https://twitter.com/element_hq" },
{ text: "GitHub", url: "https://github.com/vector-im/element-web" },
];
const authFooterLinks = [];
for (const linkEntry of links) {
authFooterLinks.push(
<a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noreferrer noopener">
{ linkEntry.text }
{linkEntry.text}
</a>,
);
}
return (
<footer className="mx_AuthFooter" role="contentinfo">
{ authFooterLinks }
<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t('Powered by Matrix') }</a>
{authFooterLinks}
<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
{_t("Powered by Matrix")}
</a>
</footer>
);
};

4
src/components/views/auth/VectorAuthHeaderLogo.tsx
View file

@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import * as React from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
export default class VectorAuthHeaderLogo extends React.PureComponent {
public render(): React.ReactElement {

20
src/components/views/auth/VectorAuthPage.tsx
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import * as React from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import VectorAuthFooter from "./VectorAuthFooter";
@ -48,25 +48,25 @@ export default class VectorAuthPage extends React.PureComponent {
};
const modalStyle: React.CSSProperties = {
position: 'relative',
background: 'initial',
position: "relative",
background: "initial",
};
const blurStyle: React.CSSProperties = {
position: 'absolute',
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
filter: 'blur(40px)',
filter: "blur(40px)",
background: pageStyle.background,
};
const modalContentStyle: React.CSSProperties = {
display: 'flex',
display: "flex",
zIndex: 1,
background: 'rgba(255, 255, 255, 0.59)',
borderRadius: '8px',
background: "rgba(255, 255, 255, 0.59)",
borderRadius: "8px",
};
return (
@ -74,7 +74,7 @@ export default class VectorAuthPage extends React.PureComponent {
<div className="mx_AuthPage_modal" style={modalStyle}>
<div className="mx_AuthPage_modalBlur" style={blurStyle} />
<div className="mx_AuthPage_modalContent" style={modalContentStyle}>
{ this.props.children }
{this.props.children}
</div>
</div>
<VectorAuthFooter />

21
src/favicon.ts
View file

@ -70,8 +70,8 @@ export default class Favicon {
this.baseImage.setAttribute("crossOrigin", "anonymous");
this.baseImage.onload = (): void => {
// get height and width of the favicon
this.canvas.height = (this.baseImage.height > 0) ? this.baseImage.height : 32;
this.canvas.width = (this.baseImage.width > 0) ? this.baseImage.width : 32;
this.canvas.height = this.baseImage.height > 0 ? this.baseImage.height : 32;
this.canvas.width = this.baseImage.width > 0 ? this.baseImage.width : 32;
this.context = this.canvas.getContext("2d");
this.ready();
};
@ -89,7 +89,10 @@ export default class Favicon {
this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
}
private options(n: number | string, params: IParams): {
private options(
n: number | string,
params: IParams,
): {
n: string | number;
len: number;
x: number;
@ -98,7 +101,7 @@ export default class Favicon {
h: number;
} {
const opt = {
n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n,
n: typeof n === "number" ? Math.abs(n as number | 0) : n,
len: ("" + n).length,
// badge positioning constants as percentages
x: 0.4,
@ -174,8 +177,8 @@ export default class Favicon {
this.context.stroke();
this.context.fillStyle = params.textColor;
if ((typeof opt.n) === "number" && opt.n > 999) {
const count = ((opt.n > 9999) ? 9 : Math.floor(opt.n as number / 1000)) + "k+";
if (typeof opt.n === "number" && opt.n > 999) {
const count = (opt.n > 9999 ? 9 : Math.floor((opt.n as number) / 1000)) + "k+";
this.context.fillText(count, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.2));
} else {
this.context.fillText("" + opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15));
@ -209,7 +212,7 @@ export default class Favicon {
newIcon.setAttribute("href", url);
old.parentNode?.removeChild(old);
} else {
this.icons.forEach(icon => {
this.icons.forEach((icon) => {
icon.setAttribute("href", url);
});
}
@ -236,7 +239,7 @@ export default class Favicon {
const icons: HTMLLinkElement[] = [];
const links = window.document.getElementsByTagName("head")[0].getElementsByTagName("link");
for (const link of links) {
if ((/(^|\s)icon(\s|$)/i).test(link.getAttribute("rel"))) {
if (/(^|\s)icon(\s|$)/i.test(link.getAttribute("rel"))) {
icons.push(link);
}
}
@ -252,7 +255,7 @@ export default class Favicon {
window.document.getElementsByTagName("head")[0].appendChild(elms[0]);
}
elms.forEach(item => {
elms.forEach((item) => {
item.setAttribute("type", "image/png");
});
return elms;

86
src/vector/app.tsx
View file

@ -21,10 +21,10 @@ limitations under the License.
// To ensure we load the browser-matrix version first
import "matrix-js-sdk/src/browser-index";
import React, { ReactElement } from 'react';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler';
import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
import React, { ReactElement } from "react";
import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
import { _td, newTranslatableError } from "matrix-react-sdk/src/languageHandler";
import AutoDiscoveryUtils from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
import SdkConfig, { parseSsoRedirectOptions } from "matrix-react-sdk/src/SdkConfig";
@ -34,7 +34,7 @@ import { createClient } from "matrix-js-sdk/src/matrix";
import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import { parseQs } from './url_utils';
import { parseQs } from "./url_utils";
import VectorBasePlatform from "./platform/VectorBasePlatform";
import { getScreenFromLocation, init as initRouting, onNewScreen } from "./routing";
@ -58,25 +58,20 @@ window.matrixLogger = logger;
function makeRegistrationUrl(params: object): string {
let url;
if (window.location.protocol === "vector:") {
url = 'https://app.element.io/#/register';
url = "https://app.element.io/#/register";
} else {
url = (
window.location.protocol + '//' +
window.location.host +
window.location.pathname +
'#/register'
);
url = window.location.protocol + "//" + window.location.host + window.location.pathname + "#/register";
}
const keys = Object.keys(params);
for (let i = 0; i < keys.length; ++i) {
if (i === 0) {
url += '?';
url += "?";
} else {
url += '&';
url += "&";
}
const k = keys[i];
url += k + '=' + encodeURIComponent(params[k]);
url += k + "=" + encodeURIComponent(params[k]);
}
return url;
}
@ -99,7 +94,7 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
const params = parseQs(window.location);
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
const urlWithoutQuery = window.location.protocol + "//" + window.location.host + window.location.pathname;
logger.log("Vector starting at " + urlWithoutQuery);
(platform as VectorBasePlatform).startUpdater();
@ -115,7 +110,7 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
const ssoRedirects = parseSsoRedirectOptions(config);
let autoRedirect = ssoRedirects.immediate === true;
// XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
const isWelcomeOrLanding = window.location.hash === '#/welcome' || window.location.hash === '#';
const isWelcomeOrLanding = window.location.hash === "#/welcome" || window.location.hash === "#";
if (!autoRedirect && ssoRedirects.on_welcome_page && isWelcomeOrLanding) {
autoRedirect = true;
}
@ -133,20 +128,21 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
return;
}
const defaultDeviceName = snakedConfig.get("default_device_display_name")
?? platform.getDefaultDeviceDisplayName();
const defaultDeviceName = snakedConfig.get("default_device_display_name") ?? platform.getDefaultDeviceDisplayName();
return <MatrixChat
onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl}
config={config}
realQueryParams={params}
startingFragmentQueryParams={fragParams}
enableGuest={!config.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={defaultDeviceName}
/>;
return (
<MatrixChat
onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl}
config={config}
realQueryParams={params}
startingFragmentQueryParams={fragParams}
enableGuest={!config.disable_guests}
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={defaultDeviceName}
/>
);
}
async function verifyServerConfig(): Promise<IConfigOptions> {
@ -164,18 +160,20 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
// validators for that purpose.
const config = SdkConfig.get();
let wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const hsUrl = config['default_hs_url'];
const isUrl = config['default_is_url'];
let wkConfig = config["default_server_config"]; // overwritten later under some conditions
const serverName = config["default_server_name"];
const hsUrl = config["default_hs_url"];
const isUrl = config["default_is_url"];
const incompatibleOptions = [wkConfig, serverName, hsUrl].filter(i => !!i);
const incompatibleOptions = [wkConfig, serverName, hsUrl].filter((i) => !!i);
if (incompatibleOptions.length > 1) {
// noinspection ExceptionCaughtLocallyJS
throw newTranslatableError(_td(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
));
throw newTranslatableError(
_td(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
),
);
}
if (incompatibleOptions.length < 1) {
// noinspection ExceptionCaughtLocallyJS
@ -186,17 +184,17 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
logger.log("Config uses a default_hs_url - constructing a default_server_config using this information");
logger.warn(
"DEPRECATED CONFIG OPTION: In the future, default_hs_url will not be accepted. Please use " +
"default_server_config instead.",
"default_server_config instead.",
);
wkConfig = {
"m.homeserver": {
"base_url": hsUrl,
base_url: hsUrl,
},
};
if (isUrl) {
wkConfig["m.identity_server"] = {
"base_url": isUrl,
base_url: isUrl,
};
}
}
@ -211,7 +209,7 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
logger.log("Config uses a default_server_name - doing .well-known lookup");
logger.warn(
"DEPRECATED CONFIG OPTION: In the future, default_server_name will not be accepted. Please " +
"use default_server_config instead.",
"use default_server_config instead.",
);
discoveryResult = await AutoDiscovery.findClientConfig(serverName);
}
@ -238,7 +236,7 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
// Add the newly built config to the actual config for use by the app
logger.log("Updating SdkConfig with validated discovery information");
SdkConfig.add({ "validated_server_config": validatedConfig });
SdkConfig.add({ validated_server_config: validatedConfig });
return SdkConfig.get();
}

5
src/vector/devcss.ts
View file

@ -28,7 +28,7 @@ limitations under the License.
*
* For more details, see webpack.config.js:184 (string-replace-loader)
*/
if (process.env.NODE_ENV === 'development') {
if (process.env.NODE_ENV === "development") {
("use theming");
/**
* Clean up old hot-module script injections as they hog up memory
@ -40,8 +40,7 @@ if (process.env.NODE_ENV === 'development') {
const elements = Array.from(document.querySelectorAll("script[src*=hot-update]"));
if (elements.length > 1) {
const oldInjects = elements.slice(0, elements.length - 1);
oldInjects.forEach(e => e.remove());
oldInjects.forEach((e) => e.remove());
}
}, 1000);
}

4
src/vector/getconfig.ts
View file

@ -18,8 +18,8 @@ import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
// Load the config file. First try to load up a domain-specific config of the
// form "config.$domain.json" and if that fails, fall back to config.json.
export async function getVectorConfig(relativeLocation=''): Promise<IConfigOptions> {
if (relativeLocation !== '' && !relativeLocation.endsWith('/')) relativeLocation += '/';
export async function getVectorConfig(relativeLocation = ""): Promise<IConfigOptions> {
if (relativeLocation !== "" && !relativeLocation.endsWith("/")) relativeLocation += "/";
const specificConfigPromise = getConfig(`${relativeLocation}config.${document.domain}.json`);
const generalConfigPromise = getConfig(relativeLocation + "config.json");

49
src/vector/index.ts
View file

@ -22,13 +22,13 @@ import { logger } from "matrix-js-sdk/src/logger";
// These are things that can run before the skin loads - be careful not to reference the react-sdk though.
import { parseQsFromFragment } from "./url_utils";
import './modernizr';
import "./modernizr";
// Require common CSS here; this will make webpack process it into bundle.css.
// Our own CSS (which is themed) is imported via separate webpack entry points
// in webpack.config.js
require('gfm.css/gfm.css');
require('katex/dist/katex.css');
require("gfm.css/gfm.css");
require("katex/dist/katex.css");
/**
* This require is necessary only for purposes of CSS hot-reload, as otherwise
@ -37,8 +37,8 @@ require('katex/dist/katex.css');
*
* On production build it's going to be an empty module, so don't worry about that.
*/
require('./devcss');
require('./localstorage-fix');
require("./devcss");
require("./localstorage-fix");
async function settled(...promises: Array<Promise<any>>): Promise<void> {
for (const prom of promises) {
@ -60,19 +60,16 @@ function checkBrowserFeatures(): boolean {
// in it for some features we depend on.
// Modernizr requires rules to be lowercase with no punctuation.
// ES2018: http://262.ecma-international.org/9.0/#sec-promise.prototype.finally
window.Modernizr.addTest("promiseprototypefinally", () =>
typeof window.Promise?.prototype?.finally === "function");
window.Modernizr.addTest("promiseprototypefinally", () => typeof window.Promise?.prototype?.finally === "function");
// ES2020: http://262.ecma-international.org/#sec-promise.allsettled
window.Modernizr.addTest("promiseallsettled", () =>
typeof window.Promise?.allSettled === "function");
window.Modernizr.addTest("promiseallsettled", () => typeof window.Promise?.allSettled === "function");
// ES2018: https://262.ecma-international.org/9.0/#sec-get-regexp.prototype.dotAll
window.Modernizr.addTest("regexpdotall", () => (
window.RegExp?.prototype &&
!!Object.getOwnPropertyDescriptor(window.RegExp.prototype, "dotAll")?.get
));
window.Modernizr.addTest(
"regexpdotall",
() => window.RegExp?.prototype && !!Object.getOwnPropertyDescriptor(window.RegExp.prototype, "dotAll")?.get,
);
// ES2019: http://262.ecma-international.org/10.0/#sec-object.fromentries
window.Modernizr.addTest("objectfromentries", () =>
typeof window.Object?.fromEntries === "function");
window.Modernizr.addTest("objectfromentries", () => typeof window.Object?.fromEntries === "function");
const featureList = Object.keys(window.Modernizr);
@ -80,8 +77,8 @@ function checkBrowserFeatures(): boolean {
for (const feature of featureList) {
if (window.Modernizr[feature] === undefined) {
logger.error(
"Looked for feature '%s' but Modernizr has no results for this. " +
"Has it been configured correctly?", feature,
"Looked for feature '%s' but Modernizr has no results for this. " + "Has it been configured correctly?",
feature,
);
return false;
}
@ -120,7 +117,8 @@ async function start(): Promise<void> {
} = await import(
/* webpackChunkName: "init" */
/* webpackPreload: true */
"./init");
"./init"
);
try {
// give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB
@ -178,12 +176,12 @@ async function start(): Promise<void> {
// error handling begins here
// ##########################
if (!acceptBrowser) {
await new Promise<void>(resolve => {
await new Promise<void>((resolve) => {
logger.error("Browser is missing required features.");
// take to a different landing page to AWOOOOOGA at the user
showIncompatibleBrowser(() => {
if (window.localStorage) {
window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
window.localStorage.setItem("mx_accepts_unsupported_browser", String(true));
}
logger.log("User accepts the compatibility risks.");
resolve();
@ -199,12 +197,13 @@ async function start(): Promise<void> {
if (error.err && error.err instanceof SyntaxError) {
// This uses the default brand since the app config is unavailable.
return showError(_t("Your Element is misconfigured"), [
_t("Your Element configuration contains invalid JSON. " +
"Please correct the problem and reload the page."),
_t(
"The message from the parser is: %(message)s",
{ message: error.err.message || _t("Invalid JSON") },
"Your Element configuration contains invalid JSON. " +
"Please correct the problem and reload the page.",
),
_t("The message from the parser is: %(message)s", {
message: error.err.message || _t("Invalid JSON"),
}),
]);
}
return showError(_t("Unable to load config file: please refresh the page to try again."));
@ -237,7 +236,7 @@ async function start(): Promise<void> {
}
}
start().catch(err => {
start().catch((err) => {
logger.error(err);
// show the static error in an iframe to not lose any context / console data
// with some basic styling to make the iframe full page

2
src/vector/indexeddb-worker.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { IndexedDBStoreWorker } from 'matrix-js-sdk/src/indexeddb-worker';
import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
const remoteWorker = new IndexedDBStoreWorker(postMessage as InstanceType<typeof Worker>["postMessage"]);

85
src/vector/init.tsx
View file

@ -20,7 +20,7 @@ limitations under the License.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import olmWasmPath from "@matrix-org/olm/olm.wasm";
import Olm from '@matrix-org/olm';
import Olm from "@matrix-org/olm";
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as languageHandler from "matrix-react-sdk/src/languageHandler";
@ -45,7 +45,7 @@ export function preparePlatform(): void {
if (window.electron) {
logger.log("Using Electron platform");
PlatformPeg.set(new ElectronPlatform());
} else if (window.matchMedia('(display-mode: standalone)').matches) {
} else if (window.matchMedia("(display-mode: standalone)").matches) {
logger.log("Using PWA platform");
PlatformPeg.set(new PWAPlatform());
} else {
@ -90,30 +90,35 @@ export function loadOlm(): Promise<void> {
*/
return Olm.init({
locateFile: () => olmWasmPath,
}).then(() => {
logger.log("Using WebAssembly Olm");
}).catch((wasmLoadError) => {
logger.log("Failed to load Olm: trying legacy version", wasmLoadError);
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
s.onload = resolve;
s.onerror = reject;
document.body.appendChild(s);
}).then(() => {
// Init window.Olm, ie. the one just loaded by the script tag,
// not 'Olm' which is still the failed wasm version.
return window.Olm.init();
}).then(() => {
logger.log("Using legacy Olm");
}).catch((legacyLoadError) => {
logger.log("Both WebAssembly and asm.js Olm failed!", legacyLoadError);
})
.then(() => {
logger.log("Using WebAssembly Olm");
})
.catch((wasmLoadError) => {
logger.log("Failed to load Olm: trying legacy version", wasmLoadError);
return new Promise((resolve, reject) => {
const s = document.createElement("script");
s.src = "olm_legacy.js"; // XXX: This should be cache-busted too
s.onload = resolve;
s.onerror = reject;
document.body.appendChild(s);
})
.then(() => {
// Init window.Olm, ie. the one just loaded by the script tag,
// not 'Olm' which is still the failed wasm version.
return window.Olm.init();
})
.then(() => {
logger.log("Using legacy Olm");
})
.catch((legacyLoadError) => {
logger.log("Both WebAssembly and asm.js Olm failed!", legacyLoadError);
});
});
});
}
export async function loadLanguage(): Promise<void> {
const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/true);
const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/ true);
let langs = [];
if (!prefLang) {
@ -140,25 +145,35 @@ export async function loadApp(fragParams: {}): Promise<void> {
const module = await import(
/* webpackChunkName: "element-web-app" */
/* webpackPreload: true */
"./app");
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams),
document.getElementById('matrixchat'));
"./app"
);
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams), document.getElementById("matrixchat"));
}
export async function showError(title: string, messages?: string[]): Promise<void> {
const ErrorView = (await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView")).default;
window.matrixChat = ReactDOM.render(<ErrorView title={title} messages={messages} />,
document.getElementById('matrixchat'));
const ErrorView = (
await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView"
)
).default;
window.matrixChat = ReactDOM.render(
<ErrorView title={title} messages={messages} />,
document.getElementById("matrixchat"),
);
}
export async function showIncompatibleBrowser(onAccept): Promise<void> {
const CompatibilityView = (await import(
/* webpackChunkName: "compatibility-view" */
"../async-components/structures/CompatibilityView")).default;
window.matrixChat = ReactDOM.render(<CompatibilityView onAccept={onAccept} />,
document.getElementById('matrixchat'));
const CompatibilityView = (
await import(
/* webpackChunkName: "compatibility-view" */
"../async-components/structures/CompatibilityView"
)
).default;
window.matrixChat = ReactDOM.render(
<CompatibilityView onAccept={onAccept} />,
document.getElementById("matrixchat"),
);
}
export async function loadModules(): Promise<void> {

38
src/vector/jitsi/index.html
View file

@ -1,24 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jitsi Widget</title>
</head>
<body>
<div id="jitsiContainer"><!-- the js will put the conference here --></div>
<div id="joinButtonContainer">
<div class="joinConferenceFloating">
<div class="joinConferencePrompt">
<span class="icon"><!-- managed by CSS --></span>
<!-- TODO: i18n -->
<h2>Jitsi Video Conference</h2>
<div id="widgetActionContainer">
<button type="button" id="joinButton">Join Conference</button>
<head>
<meta charset="UTF-8" />
<title>Jitsi Widget</title>
</head>
<body>
<div id="jitsiContainer"><!-- the js will put the conference here --></div>
<div id="joinButtonContainer">
<div class="joinConferenceFloating">
<div class="joinConferencePrompt">
<span class="icon"><!-- managed by CSS --></span>
<!-- TODO: i18n -->
<h2>Jitsi Video Conference</h2>
<div id="widgetActionContainer">
<button type="button" id="joinButton">Join Conference</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- This script is not webpacked, and the script is downloaded at build time -->
<script src="./jitsi_external_api.min.js"></script>
</body>
<!-- This script is not webpacked, and the script is downloaded at build time -->
<script src="./jitsi_external_api.min.js"></script>
</body>
</html>

9
src/vector/jitsi/index.pcss
View file

@ -17,10 +17,10 @@ limitations under the License.
/* TODO: Match the user's theme: https://github.com/vector-im/element-web/issues/12794 */
@font-face {
font-family: 'Nunito';
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
src: url("~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf") format("truetype");
}
$dark-fg: #edf3ff;
@ -38,7 +38,8 @@ body.theme-light {
color: $light-fg;
}
body, html {
body,
html {
padding: 0;
margin: 0;
}
@ -92,7 +93,7 @@ body, html {
margin-top: -$icon-size; /* to visually center the form */
&::before {
content: '';
content: "";
background-size: contain;
background-color: $dark-fg;
mask-repeat: no-repeat;

93
src/vector/jitsi/index.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { KJUR } from 'jsrsasign';
import { KJUR } from "jsrsasign";
import {
IOpenIDCredentials,
IWidgetApiRequest,
@ -34,7 +34,7 @@ import { getVectorConfig } from "../getconfig";
// We have to trick webpack into loading our CSS for us.
require("./index.pcss");
const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';
const JITSI_OPENIDTOKEN_JWT_AUTH = "openidtoken-jwt";
// Dev note: we use raw JS without many dependencies to reduce bundle size.
// We do not need all of React to render a Jitsi conference.
@ -82,9 +82,9 @@ const setupCompleted = (async (): Promise<string | void> => {
// If we have these params, expect a widget API to be available (ie. to be in an iframe
// inside a matrix client). Otherwise, assume we're on our own, eg. have been popped
// out into a browser.
const parentUrl = qsParam('parentUrl', true);
const widgetId = qsParam('widgetId', true);
const theme = qsParam('theme', true);
const parentUrl = qsParam("parentUrl", true);
const widgetId = qsParam("widgetId", true);
const theme = qsParam("theme", true);
if (theme) {
document.body.classList.add(`theme-${theme.replace(" ", "_")}`);
@ -93,10 +93,10 @@ const setupCompleted = (async (): Promise<string | void> => {
// Set this up as early as possible because Element will be hitting it almost immediately.
let widgetApiReady: Promise<void>;
if (parentUrl && widgetId) {
const parentOrigin = new URL(qsParam('parentUrl')).origin;
const parentOrigin = new URL(qsParam("parentUrl")).origin;
widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
widgetApiReady = new Promise<void>(resolve => widgetApi.once("ready", resolve));
widgetApiReady = new Promise<void>((resolve) => widgetApi.once("ready", resolve));
widgetApi.requestCapabilities(VideoConferenceCapabilities);
widgetApi.start();
@ -134,39 +134,39 @@ const setupCompleted = (async (): Promise<string | void> => {
meetApi = null;
closeConference();
} else {
meetApi?.executeCommand('hangup');
meetApi?.executeCommand("hangup");
}
});
handleAction(ElementWidgetActions.MuteAudio, async () => {
if (meetApi && !await meetApi.isAudioMuted()) {
meetApi.executeCommand('toggleAudio');
if (meetApi && !(await meetApi.isAudioMuted())) {
meetApi.executeCommand("toggleAudio");
}
});
handleAction(ElementWidgetActions.UnmuteAudio, async () => {
if (meetApi && await meetApi.isAudioMuted()) {
meetApi.executeCommand('toggleAudio');
if (meetApi && (await meetApi.isAudioMuted())) {
meetApi.executeCommand("toggleAudio");
}
});
handleAction(ElementWidgetActions.MuteVideo, async () => {
if (meetApi && !await meetApi.isVideoMuted()) {
meetApi.executeCommand('toggleVideo');
if (meetApi && !(await meetApi.isVideoMuted())) {
meetApi.executeCommand("toggleVideo");
}
});
handleAction(ElementWidgetActions.UnmuteVideo, async () => {
if (meetApi && await meetApi.isVideoMuted()) {
meetApi.executeCommand('toggleVideo');
if (meetApi && (await meetApi.isVideoMuted())) {
meetApi.executeCommand("toggleVideo");
}
});
handleAction(ElementWidgetActions.TileLayout, async () => {
meetApi?.executeCommand('setTileView', true);
meetApi?.executeCommand("setTileView", true);
});
handleAction(ElementWidgetActions.SpotlightLayout, async () => {
meetApi?.executeCommand('setTileView', false);
meetApi?.executeCommand("setTileView", false);
});
handleAction(ElementWidgetActions.StartLiveStream, async ({ rtmpStreamKey }) => {
if (!meetApi) throw new Error("Conference not joined");
meetApi.executeCommand('startRecording', {
mode: 'stream',
meetApi.executeCommand("startRecording", {
mode: "stream",
// this looks like it should be rtmpStreamKey but we may be on too old
// a version of jitsi meet
//rtmpStreamKey,
@ -178,23 +178,23 @@ const setupCompleted = (async (): Promise<string | void> => {
}
// Populate the Jitsi params now
jitsiDomain = qsParam('conferenceDomain');
conferenceId = qsParam('conferenceId');
displayName = qsParam('displayName', true);
avatarUrl = qsParam('avatarUrl', true); // http not mxc
userId = qsParam('userId');
jitsiAuth = qsParam('auth', true);
roomId = qsParam('roomId', true);
roomName = qsParam('roomName', true);
startAudioOnly = qsParam('isAudioOnly', true) === "true";
isVideoChannel = qsParam('isVideoChannel', true) === "true";
supportsScreensharing = qsParam('supportsScreensharing', true) === "true";
jitsiDomain = qsParam("conferenceDomain");
conferenceId = qsParam("conferenceId");
displayName = qsParam("displayName", true);
avatarUrl = qsParam("avatarUrl", true); // http not mxc
userId = qsParam("userId");
jitsiAuth = qsParam("auth", true);
roomId = qsParam("roomId", true);
roomName = qsParam("roomName", true);
startAudioOnly = qsParam("isAudioOnly", true) === "true";
isVideoChannel = qsParam("isVideoChannel", true) === "true";
supportsScreensharing = qsParam("supportsScreensharing", true) === "true";
// We've reached the point where we have to wait for the config, so do that then parse it.
const instanceConfig = new SnakedObject<IConfigOptions>((await configPromise) ?? <IConfigOptions>{});
const jitsiConfig = instanceConfig.get("jitsi_widget") ?? {};
skipOurWelcomeScreen = (new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig))
.get("skip_built_in_welcome_screen") ?? false;
skipOurWelcomeScreen =
new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig).get("skip_built_in_welcome_screen") ?? false;
// Either reveal the prejoin screen, or skip straight to Jitsi depending on the config.
// We don't set up the call yet though as this might lead to failure without the widget API.
@ -238,10 +238,10 @@ function switchVisibleContainers(): void {
}
function toggleConferenceVisibility(inConference: boolean): void {
document.getElementById("jitsiContainer").style.visibility = inConference ? 'unset' : 'hidden';
document.getElementById("jitsiContainer").style.visibility = inConference ? "unset" : "hidden";
// Video rooms have a separate UI for joining, so they should never show our join button
document.getElementById("joinButtonContainer").style.visibility =
(inConference || isVideoChannel) ? 'hidden' : 'unset';
inConference || isVideoChannel ? "hidden" : "unset";
}
function skipToJitsiSplashScreen(): void {
@ -256,7 +256,7 @@ function skipToJitsiSplashScreen(): void {
*/
function createJWTToken(): string {
// Header
const header = { alg: 'HS256', typ: 'JWT' };
const header = { alg: "HS256", typ: "JWT" };
// Payload
const payload = {
// As per Jitsi token auth, `iss` needs to be set to something agreed between
@ -281,12 +281,7 @@ function createJWTToken(): string {
// Sign JWT
// The secret string here is irrelevant, we're only using the JWT
// to transport data to Prosody in the Jitsi stack.
return KJUR.jws.JWS.sign(
'HS256',
JSON.stringify(header),
JSON.stringify(payload),
'notused',
);
return KJUR.jws.JWS.sign("HS256", JSON.stringify(header), JSON.stringify(payload), "notused");
}
async function notifyHangup(errorMessage?: string): Promise<void> {
@ -318,9 +313,10 @@ function closeConference(): void {
function joinConference(audioInput?: string | null, videoInput?: string | null): void {
let jwt;
if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
if (!openIdToken?.access_token) { // eslint-disable-line camelcase
if (!openIdToken?.access_token) {
// eslint-disable-line camelcase
// We've failing to get a token, don't try to init conference
logger.warn('Expected to have an OpenID credential, cannot initialize widget.');
logger.warn("Expected to have an OpenID credential, cannot initialize widget.");
document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
return;
}
@ -331,8 +327,8 @@ function joinConference(audioInput?: string | null, videoInput?: string | null):
logger.warn(
"[Jitsi Widget] The next few errors about failing to parse URL parameters are fine if " +
"they mention 'external_api' or 'jitsi' in the stack. They're just Jitsi Meet trying to parse " +
"our fragment values and not recognizing the options.",
"they mention 'external_api' or 'jitsi' in the stack. They're just Jitsi Meet trying to parse " +
"our fragment values and not recognizing the options.",
);
const options = {
@ -400,7 +396,7 @@ function joinConference(audioInput?: string | null, videoInput?: string | null):
meetApi.on("audioMuteStatusChanged", onAudioMuteStatusChanged);
meetApi.on("videoMuteStatusChanged", onVideoMuteStatusChanged);
["videoConferenceJoined", "participantJoined", "participantLeft"].forEach(event => {
["videoConferenceJoined", "participantJoined", "participantLeft"].forEach((event) => {
meetApi.on(event, updateParticipants);
});
@ -472,5 +468,4 @@ const updateParticipants = (): void => {
});
};
const onLog = ({ logLevel, args }): void =>
(parent as unknown as typeof global).mx_rage_logger?.log(logLevel, ...args);
const onLog = ({ logLevel, args }): void => (parent as unknown as typeof global).mx_rage_logger?.log(logLevel, ...args);

4
src/vector/localstorage-fix.ts
View file

@ -4,8 +4,8 @@
* */
if (window.localStorage) {
Object.keys(window.localStorage).forEach(key => {
if (key.indexOf('loglevel:') === 0) {
Object.keys(window.localStorage).forEach((key) => {
if (key.indexOf("loglevel:") === 0) {
window.localStorage.removeItem(key);
}
});

1195
src/vector/mobile_guide/index.html
View file

File diff suppressed because one or more lines are too long

73
src/vector/mobile_guide/index.ts
View file

@ -1,17 +1,17 @@
import { logger } from "matrix-js-sdk/src/logger";
import { getVectorConfig } from '../getconfig';
import { getVectorConfig } from "../getconfig";
function onBackToElementClick(): void {
// Cookie should expire in 4 hours
document.cookie = 'element_mobile_redirect_to_guide=false;path=/;max-age=14400';
window.location.href = '../';
document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400";
window.location.href = "../";
}
// NEVER pass user-controlled content to this function! Hardcoded strings only please.
function renderConfigError(message: string): void {
const contactMsg = "If this is unexpected, please contact your system administrator " +
"or technical support representative.";
const contactMsg =
"If this is unexpected, please contact your system administrator " + "or technical support representative.";
message = `<h2>Error loading Element</h2><p>${message}</p><p>${contactMsg}</p>`;
const toHide = document.getElementsByClassName("mx_HomePage_container");
@ -22,46 +22,46 @@ function renderConfigError(message: string): void {
for (const e of toHide) {
// We have to clear the content because .style.display='none'; doesn't work
// due to an !important in the CSS.
e.innerHTML = '';
e.innerHTML = "";
}
for (const e of errorContainers) {
e.style.display = 'block';
e.style.display = "block";
e.innerHTML = message;
}
}
async function initPage(): Promise<void> {
document.getElementById('back_to_element_button').onclick = onBackToElementClick;
document.getElementById("back_to_element_button").onclick = onBackToElementClick;
const config = await getVectorConfig('..');
const config = await getVectorConfig("..");
// We manually parse the config similar to how validateServerConfig works because
// calling that function pulls in roughly 4mb of JS we don't use.
const wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const defaultHsUrl = config['default_hs_url'];
const defaultIsUrl = config['default_is_url'];
const wkConfig = config["default_server_config"]; // overwritten later under some conditions
const serverName = config["default_server_name"];
const defaultHsUrl = config["default_hs_url"];
const defaultIsUrl = config["default_is_url"];
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter(i => !!i);
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter((i) => !!i);
if (incompatibleOptions.length > 1) {
return renderConfigError(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
"or default_hs_url.",
);
}
if (incompatibleOptions.length < 1) {
return renderConfigError("Invalid configuration: no default server specified.");
}
let hsUrl = '';
let isUrl = '';
let hsUrl = "";
let isUrl = "";
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig && wkConfig["m.homeserver"]) {
hsUrl = wkConfig["m.homeserver"]["base_url"];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
if (wkConfig["m.identity_server"]) {
isUrl = wkConfig["m.identity_server"]["base_url"];
}
}
@ -70,11 +70,11 @@ async function initPage(): Promise<void> {
try {
const result = await fetch(`https://${serverName}/.well-known/matrix/client`);
const wkConfig = await result.json();
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig && wkConfig["m.homeserver"]) {
hsUrl = wkConfig["m.homeserver"]["base_url"];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
if (wkConfig["m.identity_server"]) {
isUrl = wkConfig["m.identity_server"]["base_url"];
}
}
} catch (e) {
@ -92,21 +92,20 @@ async function initPage(): Promise<void> {
return renderConfigError("Unable to locate homeserver");
}
if (hsUrl && !hsUrl.endsWith('/')) hsUrl += '/';
if (isUrl && !isUrl.endsWith('/')) isUrl += '/';
if (hsUrl && !hsUrl.endsWith("/")) hsUrl += "/";
if (isUrl && !isUrl.endsWith("/")) isUrl += "/";
if (hsUrl !== 'https://matrix.org/') {
(document.getElementById('configure_element_button') as HTMLAnchorElement).href =
"https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl) +
"&is_url=" + encodeURIComponent(isUrl);
document.getElementById('step1_heading').innerHTML= '1: Install the app';
document.getElementById('step2_container').style.display = 'block';
document.getElementById('hs_url').innerText = hsUrl;
if (hsUrl !== "https://matrix.org/") {
(document.getElementById("configure_element_button") as HTMLAnchorElement).href =
"https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl) + "&is_url=" + encodeURIComponent(isUrl);
document.getElementById("step1_heading").innerHTML = "1: Install the app";
document.getElementById("step2_container").style.display = "block";
document.getElementById("hs_url").innerText = hsUrl;
if (isUrl) {
document.getElementById('custom_is').style.display = 'block';
document.getElementById('is_url').style.display = 'block';
document.getElementById('is_url').innerText = isUrl;
document.getElementById("custom_is").style.display = "block";
document.getElementById("is_url").style.display = "block";
document.getElementById("is_url").innerText = isUrl;
}
}
}

422
src/vector/modernizr.js
View file

File diff suppressed because one or more lines are too long

114
src/vector/platform/ElectronPlatform.tsx
View file

@ -19,12 +19,12 @@ limitations under the License.
*/
import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
import BaseEventIndexManager from 'matrix-react-sdk/src/indexing/BaseEventIndexManager';
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import BaseEventIndexManager from "matrix-react-sdk/src/indexing/BaseEventIndexManager";
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import { _t } from "matrix-react-sdk/src/languageHandler";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
import Modal from "matrix-react-sdk/src/Modal";
@ -41,35 +41,35 @@ import GenericExpiringToast from "matrix-react-sdk/src/components/views/toasts/G
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import VectorBasePlatform from './VectorBasePlatform';
import VectorBasePlatform from "./VectorBasePlatform";
import { SeshatIndexManager } from "./SeshatIndexManager";
import { IPCManager } from "./IPCManager";
const isMac = navigator.platform.toUpperCase().includes('MAC');
const isMac = navigator.platform.toUpperCase().includes("MAC");
function platformFriendlyName(): string {
// used to use window.process but the same info is available here
if (navigator.userAgent.includes('Macintosh')) {
return 'macOS';
} else if (navigator.userAgent.includes('FreeBSD')) {
return 'FreeBSD';
} else if (navigator.userAgent.includes('OpenBSD')) {
return 'OpenBSD';
} else if (navigator.userAgent.includes('SunOS')) {
return 'SunOS';
} else if (navigator.userAgent.includes('Windows')) {
return 'Windows';
} else if (navigator.userAgent.includes('Linux')) {
return 'Linux';
if (navigator.userAgent.includes("Macintosh")) {
return "macOS";
} else if (navigator.userAgent.includes("FreeBSD")) {
return "FreeBSD";
} else if (navigator.userAgent.includes("OpenBSD")) {
return "OpenBSD";
} else if (navigator.userAgent.includes("SunOS")) {
return "SunOS";
} else if (navigator.userAgent.includes("Windows")) {
return "Windows";
} else if (navigator.userAgent.includes("Linux")) {
return "Linux";
} else {
return 'Unknown';
return "Unknown";
}
}
function onAction(payload: ActionPayload): void {
// Whitelist payload actions, no point sending most across
if (['call_state'].includes(payload.action)) {
window.electron.send('app_onAction', payload);
if (["call_state"].includes(payload.action)) {
window.electron.send("app_onAction", payload);
}
}
@ -102,7 +102,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
false if there is not
or the error if one is encountered
*/
window.electron.on('check_updates', (event, status) => {
window.electron.on("check_updates", (event, status) => {
dis.dispatch<CheckUpdatesPayload>({
action: Action.CheckUpdates,
...getUpdateCheckStatus(status),
@ -110,27 +110,27 @@ export default class ElectronPlatform extends VectorBasePlatform {
});
// try to flush the rageshake logs to indexeddb before quit.
window.electron.on('before-quit', function() {
logger.log('element-desktop closing');
window.electron.on("before-quit", function () {
logger.log("element-desktop closing");
rageshake.flush();
});
window.electron.on('update-downloaded', this.onUpdateDownloaded);
window.electron.on("update-downloaded", this.onUpdateDownloaded);
window.electron.on('preferences', () => {
window.electron.on("preferences", () => {
dis.fire(Action.ViewUserSettings);
});
window.electron.on('userDownloadCompleted', (ev, { id, name }) => {
window.electron.on("userDownloadCompleted", (ev, { id, name }) => {
const key = `DOWNLOAD_TOAST_${id}`;
const onAccept = (): void => {
window.electron.send('userDownloadAction', { id, open: true });
window.electron.send("userDownloadAction", { id, open: true });
ToastStore.sharedInstance().dismissToast(key);
};
const onDismiss = (): void => {
window.electron.send('userDownloadAction', { id });
window.electron.send("userDownloadAction", { id });
};
ToastStore.sharedInstance().addOrReplaceToast({
@ -153,7 +153,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getConfig(): Promise<IConfigOptions> {
return this.ipc.call('getConfig');
return this.ipc.call("getConfig");
}
private onUpdateDownloaded = async (ev, { releaseNotes, releaseName }): Promise<void> => {
@ -167,7 +167,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
};
public getHumanReadableName(): string {
return 'Electron Platform'; // no translation required: only used for analytics
return "Electron Platform"; // no translation required: only used for analytics
}
/**
@ -186,7 +186,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
if (this.notificationCount === count) return;
super.setNotificationCount(count);
window.electron.send('setBadgeCount', count);
window.electron.send("setBadgeCount", count);
}
public supportsNotifications(): boolean {
@ -210,29 +210,23 @@ export default class ElectronPlatform extends VectorBasePlatform {
// maybe we should pass basic styling (italics, bold, underline) through from MD
// we only have to strip out < and > as the spec doesn't include anything about things like &amp;
// so we shouldn't assume that all implementations will treat those properly. Very basic tag parsing is done.
if (navigator.userAgent.includes('Linux')) {
msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
if (navigator.userAgent.includes("Linux")) {
msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
const notification = super.displayNotification(
title,
msg,
avatarUrl,
room,
ev,
);
const notification = super.displayNotification(title, msg, avatarUrl, room, ev);
const handler = notification.onclick as Function;
notification.onclick = (): void => {
handler?.();
this.ipc.call('focusWindow');
this.ipc.call("focusWindow");
};
return notification;
}
public loudNotification(ev: MatrixEvent, room: Room): void {
window.electron.send('loudNotification');
window.electron.send("loudNotification");
}
public needsUrlTooltips(): boolean {
@ -240,7 +234,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getAppVersion(): Promise<string> {
return this.ipc.call('getAppVersion');
return this.ipc.call("getAppVersion");
}
public supportsSetting(settingName?: string): boolean {
@ -262,32 +256,32 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async canSelfUpdate(): Promise<boolean> {
const feedUrl = await this.ipc.call('getUpdateFeedUrl');
const feedUrl = await this.ipc.call("getUpdateFeedUrl");
return Boolean(feedUrl);
}
public startUpdateCheck(): void {
super.startUpdateCheck();
window.electron.send('check_updates');
window.electron.send("check_updates");
}
public installUpdate(): void {
// IPC to the main process to install the update, since quitAndInstall
// doesn't fire the before-quit event so the main process needs to know
// it should exit.
window.electron.send('install_update');
window.electron.send("install_update");
}
public getDefaultDeviceDisplayName(): string {
const brand = SdkConfig.get().brand;
return _t('%(brand)s Desktop: %(platformName)s', {
return _t("%(brand)s Desktop: %(platformName)s", {
brand,
platformName: platformFriendlyName(),
});
}
public requestNotificationPermission(): Promise<string> {
return Promise.resolve('granted');
return Promise.resolve("granted");
}
public reload(): void {
@ -299,33 +293,33 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async setLanguage(preferredLangs: string[]): Promise<any> {
return this.ipc.call('setLanguage', preferredLangs);
return this.ipc.call("setLanguage", preferredLangs);
}
public setSpellCheckEnabled(enabled: boolean): void {
this.ipc.call('setSpellCheckEnabled', enabled).catch(error => {
this.ipc.call("setSpellCheckEnabled", enabled).catch((error) => {
logger.log("Failed to send setSpellCheckEnabled IPC to Electron");
logger.error(error);
});
}
public async getSpellCheckEnabled(): Promise<boolean> {
return this.ipc.call('getSpellCheckEnabled');
return this.ipc.call("getSpellCheckEnabled");
}
public setSpellCheckLanguages(preferredLangs: string[]): void {
this.ipc.call('setSpellCheckLanguages', preferredLangs).catch(error => {
this.ipc.call("setSpellCheckLanguages", preferredLangs).catch((error) => {
logger.log("Failed to send setSpellCheckLanguages IPC to Electron");
logger.error(error);
});
}
public async getSpellCheckLanguages(): Promise<string[]> {
return this.ipc.call('getSpellCheckLanguages');
return this.ipc.call("getSpellCheckLanguages");
}
public async getDesktopCapturerSources(options: GetSourcesOptions): Promise<Array<DesktopCapturerSource>> {
return this.ipc.call('getDesktopCapturerSources', options);
return this.ipc.call("getDesktopCapturerSources", options);
}
public supportsDesktopCapturer(): boolean {
@ -338,7 +332,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getAvailableSpellCheckLanguages(): Promise<string[]> {
return this.ipc.call('getAvailableSpellCheckLanguages');
return this.ipc.call("getAvailableSpellCheckLanguages");
}
public getSSOCallbackUrl(fragmentAfterLogin: string): URL {
@ -372,7 +366,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async getPickleKey(userId: string, deviceId: string): Promise<string | null> {
try {
return await this.ipc.call('getPickleKey', userId, deviceId);
return await this.ipc.call("getPickleKey", userId, deviceId);
} catch (e) {
// if we can't connect to the password storage, assume there's no
// pickle key
@ -382,7 +376,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async createPickleKey(userId: string, deviceId: string): Promise<string | null> {
try {
return await this.ipc.call('createPickleKey', userId, deviceId);
return await this.ipc.call("createPickleKey", userId, deviceId);
} catch (e) {
// if we can't connect to the password storage, assume there's no
// pickle key
@ -392,7 +386,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async destroyPickleKey(userId: string, deviceId: string): Promise<void> {
try {
await this.ipc.call('destroyPickleKey', userId, deviceId);
await this.ipc.call("destroyPickleKey", userId, deviceId);
} catch (e) {}
}
}

2
src/vector/platform/IPCManager.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { defer, IDeferred } from 'matrix-js-sdk/src/utils';
import { defer, IDeferred } from "matrix-js-sdk/src/utils";
import { logger } from "matrix-js-sdk/src/logger";
import { ElectronChannel } from "../../@types/global";

2
src/vector/platform/PWAPlatform.ts
View file

@ -24,7 +24,7 @@ export default class PWAPlatform extends WebPlatform {
if (this.notificationCount === count) return;
this.notificationCount = count;
navigator.setAppBadge(count).catch(e => {
navigator.setAppBadge(count).catch((e) => {
logger.error("Failed to update PWA app badge", e);
});
}

38
src/vector/platform/SeshatIndexManager.ts
View file

@ -19,7 +19,7 @@ import BaseEventIndexManager, {
IEventAndProfile,
IIndexStats,
ISearchArgs,
} from 'matrix-react-sdk/src/indexing/BaseEventIndexManager';
} from "matrix-react-sdk/src/indexing/BaseEventIndexManager";
import { IMatrixProfile, IEventWithRoomId as IMatrixEvent, IResultRoomEvents } from "matrix-js-sdk/src/@types/search";
import { IPCManager } from "./IPCManager";
@ -28,35 +28,35 @@ export class SeshatIndexManager extends BaseEventIndexManager {
private readonly ipc = new IPCManager("seshat", "seshatReply");
public async supportsEventIndexing(): Promise<boolean> {
return this.ipc.call('supportsEventIndexing');
return this.ipc.call("supportsEventIndexing");
}
public async initEventIndex(userId: string, deviceId: string): Promise<void> {
return this.ipc.call('initEventIndex', userId, deviceId);
return this.ipc.call("initEventIndex", userId, deviceId);
}
public async addEventToIndex(ev: IMatrixEvent, profile: IMatrixProfile): Promise<void> {
return this.ipc.call('addEventToIndex', ev, profile);
return this.ipc.call("addEventToIndex", ev, profile);
}
public async deleteEvent(eventId: string): Promise<boolean> {
return this.ipc.call('deleteEvent', eventId);
return this.ipc.call("deleteEvent", eventId);
}
public async isEventIndexEmpty(): Promise<boolean> {
return this.ipc.call('isEventIndexEmpty');
return this.ipc.call("isEventIndexEmpty");
}
public async isRoomIndexed(roomId: string): Promise<boolean> {
return this.ipc.call('isRoomIndexed', roomId);
return this.ipc.call("isRoomIndexed", roomId);
}
public async commitLiveEvents(): Promise<void> {
return this.ipc.call('commitLiveEvents');
return this.ipc.call("commitLiveEvents");
}
public async searchEventIndex(searchConfig: ISearchArgs): Promise<IResultRoomEvents> {
return this.ipc.call('searchEventIndex', searchConfig);
return this.ipc.call("searchEventIndex", searchConfig);
}
public async addHistoricEvents(
@ -64,42 +64,42 @@ export class SeshatIndexManager extends BaseEventIndexManager {
checkpoint: ICrawlerCheckpoint | null,
oldCheckpoint: ICrawlerCheckpoint | null,
): Promise<boolean> {
return this.ipc.call('addHistoricEvents', events, checkpoint, oldCheckpoint);
return this.ipc.call("addHistoricEvents", events, checkpoint, oldCheckpoint);
}
public async addCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
return this.ipc.call('addCrawlerCheckpoint', checkpoint);
return this.ipc.call("addCrawlerCheckpoint", checkpoint);
}
public async removeCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
return this.ipc.call('removeCrawlerCheckpoint', checkpoint);
return this.ipc.call("removeCrawlerCheckpoint", checkpoint);
}
public async loadFileEvents(args): Promise<IEventAndProfile[]> {
return this.ipc.call('loadFileEvents', args);
return this.ipc.call("loadFileEvents", args);
}
public async loadCheckpoints(): Promise<ICrawlerCheckpoint[]> {
return this.ipc.call('loadCheckpoints');
return this.ipc.call("loadCheckpoints");
}
public async closeEventIndex(): Promise<void> {
return this.ipc.call('closeEventIndex');
return this.ipc.call("closeEventIndex");
}
public async getStats(): Promise<IIndexStats> {
return this.ipc.call('getStats');
return this.ipc.call("getStats");
}
public async getUserVersion(): Promise<number> {
return this.ipc.call('getUserVersion');
return this.ipc.call("getUserVersion");
}
public async setUserVersion(version: number): Promise<void> {
return this.ipc.call('setUserVersion', version);
return this.ipc.call("setUserVersion", version);
}
public async deleteEventIndex(): Promise<void> {
return this.ipc.call('deleteEventIndex');
return this.ipc.call("deleteEventIndex");
}
}

9
src/vector/platform/VectorBasePlatform.ts
View file

@ -17,8 +17,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import BasePlatform from "matrix-react-sdk/src/BasePlatform";
import { _t } from "matrix-react-sdk/src/languageHandler";
import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
import { getVectorConfig } from "../getconfig";
@ -35,7 +35,7 @@ export default abstract class VectorBasePlatform extends BasePlatform {
}
public getHumanReadableName(): string {
return 'Vector Base Platform'; // no translation required: only used for analytics
return "Vector Base Platform"; // no translation required: only used for analytics
}
/**
@ -78,8 +78,7 @@ export default abstract class VectorBasePlatform extends BasePlatform {
/**
* Begin update polling, if applicable
*/
public startUpdater(): void {
}
public startUpdater(): void {}
/**
* Get a sensible default display name for the

65
src/vector/platform/WebPlatform.ts
View file

@ -17,15 +17,15 @@ limitations under the License.
*/
import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import { _t } from "matrix-react-sdk/src/languageHandler";
import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
import { Action } from "matrix-react-sdk/src/dispatcher/actions";
import { CheckUpdatesPayload } from 'matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload';
import UAParser from 'ua-parser-js';
import { CheckUpdatesPayload } from "matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload";
import UAParser from "ua-parser-js";
import { logger } from "matrix-js-sdk/src/logger";
import VectorBasePlatform from './VectorBasePlatform';
import VectorBasePlatform from "./VectorBasePlatform";
import { parseQs } from "../url_utils";
const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
@ -43,13 +43,13 @@ export default class WebPlatform extends VectorBasePlatform {
public constructor() {
super();
// Register service worker if available on this platform
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js");
}
}
public getHumanReadableName(): string {
return 'Web Platform'; // no translation required: only used for analytics
return "Web Platform"; // no translation required: only used for analytics
}
/**
@ -65,7 +65,7 @@ export default class WebPlatform extends VectorBasePlatform {
* to display notifications. Otherwise false.
*/
public maySendNotifications(): boolean {
return window.Notification.permission === 'granted';
return window.Notification.permission === "granted";
}
/**
@ -79,7 +79,7 @@ export default class WebPlatform extends VectorBasePlatform {
// annoyingly, the latest spec says this returns a
// promise, but this is only supported in Chrome 46
// and Firefox 47, so adapt the callback API.
return new Promise(function(resolve) {
return new Promise(function (resolve) {
window.Notification.requestPermission((result) => {
resolve(result);
});
@ -142,30 +142,33 @@ export default class WebPlatform extends VectorBasePlatform {
showUpdate: (currentVersion: string, mostRecentVersion: string) => void,
showNoUpdate?: () => void,
): Promise<UpdateStatus> => {
return this.getMostRecentVersion().then((mostRecentVersion) => {
const currentVersion = getNormalizedAppVersion(process.env.VERSION);
return this.getMostRecentVersion().then(
(mostRecentVersion) => {
const currentVersion = getNormalizedAppVersion(process.env.VERSION);
if (currentVersion !== mostRecentVersion) {
if (this.shouldShowUpdate(mostRecentVersion)) {
console.log("Update available to " + mostRecentVersion + ", will notify user");
showUpdate(currentVersion, mostRecentVersion);
if (currentVersion !== mostRecentVersion) {
if (this.shouldShowUpdate(mostRecentVersion)) {
console.log("Update available to " + mostRecentVersion + ", will notify user");
showUpdate(currentVersion, mostRecentVersion);
} else {
console.log("Update available to " + mostRecentVersion + " but won't be shown");
}
return { status: UpdateCheckStatus.Ready };
} else {
console.log("Update available to " + mostRecentVersion + " but won't be shown");
console.log("No update available, already on " + mostRecentVersion);
showNoUpdate?.();
}
return { status: UpdateCheckStatus.Ready };
} else {
console.log("No update available, already on " + mostRecentVersion);
showNoUpdate?.();
}
return { status: UpdateCheckStatus.NotAvailable };
}, (err) => {
logger.error("Failed to poll for update", err);
return {
status: UpdateCheckStatus.Error,
detail: err.message || err.status ? err.status.toString() : 'Unknown Error',
};
});
return { status: UpdateCheckStatus.NotAvailable };
},
(err) => {
logger.error("Failed to poll for update", err);
return {
status: UpdateCheckStatus.Error,
detail: err.message || err.status ? err.status.toString() : "Unknown Error",
};
},
);
};
public startUpdateCheck(): void {
@ -197,7 +200,7 @@ export default class WebPlatform extends VectorBasePlatform {
let osName = ua.getOS().name || "unknown OS";
// Stylise the value from the parser to match Apple's current branding.
if (osName === "Mac OS") osName = "macOS";
return _t('%(appName)s: %(browserName)s on %(osName)s', {
return _t("%(appName)s: %(browserName)s on %(osName)s", {
appName,
browserName,
osName,

47
src/vector/rageshakesetup.ts
View file

@ -33,22 +33,26 @@ import { logger } from "matrix-js-sdk/src/logger";
export function initRageshake(): Promise<void> {
// we manually check persistence for rageshakes ourselves
const prom = rageshake.init(/*setUpPersistence=*/false);
prom.then(() => {
logger.log("Initialised rageshake.");
logger.log("To fix line numbers in Chrome: " +
"Meatball menu → Settings → Ignore list → Add /rageshake\\.js$");
const prom = rageshake.init(/*setUpPersistence=*/ false);
prom.then(
() => {
logger.log("Initialised rageshake.");
logger.log(
"To fix line numbers in Chrome: " + "Meatball menu → Settings → Ignore list → Add /rageshake\\.js$",
);
window.addEventListener('beforeunload', () => {
logger.log('element-web closing');
// try to flush the logs to indexeddb
rageshake.flush();
});
window.addEventListener("beforeunload", () => {
logger.log("element-web closing");
// try to flush the logs to indexeddb
rageshake.flush();
});
rageshake.cleanup();
}, (err) => {
logger.error("Failed to initialise rageshake: " + err);
});
rageshake.cleanup();
},
(err) => {
logger.error("Failed to initialise rageshake: " + err);
},
);
return prom;
}
@ -56,7 +60,7 @@ export function initRageshakeStore(): Promise<void> {
return rageshake.tryInitStorage();
}
window.mxSendRageshake = function(text: string, withLogs?: boolean): void {
window.mxSendRageshake = function (text: string, withLogs?: boolean): void {
const url = SdkConfig.get().bug_report_endpoint_url;
if (!url) {
logger.error("Cannot send a rageshake - no bug_report_endpoint_url configured");
@ -72,9 +76,12 @@ window.mxSendRageshake = function(text: string, withLogs?: boolean): void {
userText: text,
sendLogs: withLogs,
progressCallback: logger.log.bind(console),
}).then(() => {
logger.log("Bug report sent!");
}, (err) => {
logger.error(err);
});
}).then(
() => {
logger.log("Bug report sent!");
},
(err) => {
logger.error(err);
},
);
};

9
src/vector/routing.ts
View file

@ -24,7 +24,7 @@ import { parseQsFromFragment } from "./url_utils";
let lastLocationHashSet: string = null;
export function getScreenFromLocation(location: Location): { screen: string, params: QueryDict } {
export function getScreenFromLocation(location: Location): { screen: string; params: QueryDict } {
const fragparts = parseQsFromFragment(location);
return {
screen: fragparts.location.substring(1),
@ -54,11 +54,12 @@ function onHashChange(): void {
// so a web page can update the URL bar appropriately.
export function onNewScreen(screen: string, replaceLast = false): void {
logger.log("newscreen " + screen);
const hash = '#/' + screen;
const hash = "#/" + screen;
lastLocationHashSet = hash;
// if the new hash is a substring of the old one then we are stripping fields e.g `via` so replace history
if (screen.startsWith("room/") &&
if (
screen.startsWith("room/") &&
window.location.hash.includes("/$") === hash.includes("/$") && // only if both did or didn't contain event link
window.location.hash.startsWith(hash)
) {
@ -73,5 +74,5 @@ export function onNewScreen(screen: string, replaceLast = false): void {
}
export function init(): void {
window.addEventListener('hashchange', onHashChange);
window.addEventListener("hashchange", onHashChange);
}

934
src/vector/static/incompatible-browser.html
View file

File diff suppressed because one or more lines are too long

95
src/vector/static/unable-to-load.html
View file

@ -1,11 +1,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<style type="text/css">
/* By default, hide the custom IS stuff - enabled in JS */
#custom_is, #is_url {
#custom_is,
#is_url {
display: none;
}
@ -17,7 +16,8 @@
background: #f9fafb;
max-width: 680px;
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.mx_Button {
@ -27,7 +27,7 @@
margin-left: 4px;
margin-right: 4px;
min-width: 80px;
background-color: #03B381;
background-color: #03b381;
color: #fff;
cursor: pointer;
padding: 12px 22px;
@ -44,7 +44,7 @@
}
.mx_HomePage_header {
color: #2E2F32;
color: #2e2f32;
display: flex;
align-items: center;
justify-content: center;
@ -72,7 +72,7 @@
}
.mx_HomePage_container {
display: block ! important;
display: block !important;
margin: 10px 20px;
}
@ -137,43 +137,58 @@
}
</style>
<meta name="apple-itunes-app" content="app-id=id1083446067">
<meta name="apple-itunes-app" content="app-id=id1083446067" />
</head>
<body>
<div class="mx_HomePage_errorContainer">
<!-- populated by JS if needed -->
</div>
<div class="mx_HomePage_container">
<div class="mx_HomePage_header">
<span class="mx_HomePage_logo">
<svg width="34" height="42" viewBox="0 0 34 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.08 8.68C13.08 7.75216 13.8321 7 14.76 7C20.9456 7 25.96 12.0144 25.96 18.2C25.96 19.1278 25.2078 19.88 24.28 19.88C23.3521 19.88 22.6 19.1278 22.6 18.2C22.6 13.8701 19.0899 10.36 14.76 10.36C13.8321 10.36 13.08 9.60784 13.08 8.68Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.92 33.32C20.92 34.2478 20.1679 35 19.24 35C13.0544 35 8.04001 29.9856 8.04001 23.8C8.04001 22.8722 8.79217 22.12 9.72001 22.12C10.6478 22.12 11.4 22.8722 11.4 23.8C11.4 28.1299 14.9101 31.64 19.24 31.64C20.1679 31.64 20.92 32.3922 20.92 33.32Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 24.9199C3.75216 24.9199 3 24.1678 3 23.2399C3 17.0543 8.01441 12.0399 14.2 12.0399C15.1278 12.0399 15.88 12.7921 15.88 13.7199C15.88 14.6478 15.1278 15.3999 14.2 15.3999C9.87009 15.3999 6.36 18.91 6.36 23.2399C6.36 24.1678 5.60784 24.9199 4.68 24.9199Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.32 17.0801C30.2478 17.0801 31 17.8322 31 18.7601C31 24.9457 25.9856 29.9601 19.8 29.9601C18.8722 29.9601 18.12 29.2079 18.12 28.2801C18.12 27.3522 18.8722 26.6001 19.8 26.6001C24.1299 26.6001 27.64 23.09 27.64 18.7601C27.64 17.8322 28.3922 17.0801 29.32 17.0801Z" fill="#0DBD8B"/>
</svg>
</span>
<h1>Unable to load</h1>
<div class="mx_HomePage_errorContainer">
<!-- populated by JS if needed -->
</div>
<div class="mx_HomePage_col">
<div class="mx_HomePage_row">
<div>
<h2 id="step1_heading">Element can't load</h2>
<p>Something went wrong and Element was unable to load.</p>
<div class="mx_HomePage_container">
<div class="mx_HomePage_header">
<span class="mx_HomePage_logo">
<svg width="34" height="42" viewBox="0 0 34 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.08 8.68C13.08 7.75216 13.8321 7 14.76 7C20.9456 7 25.96 12.0144 25.96 18.2C25.96 19.1278 25.2078 19.88 24.28 19.88C23.3521 19.88 22.6 19.1278 22.6 18.2C22.6 13.8701 19.0899 10.36 14.76 10.36C13.8321 10.36 13.08 9.60784 13.08 8.68Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.92 33.32C20.92 34.2478 20.1679 35 19.24 35C13.0544 35 8.04001 29.9856 8.04001 23.8C8.04001 22.8722 8.79217 22.12 9.72001 22.12C10.6478 22.12 11.4 22.8722 11.4 23.8C11.4 28.1299 14.9101 31.64 19.24 31.64C20.1679 31.64 20.92 32.3922 20.92 33.32Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.68 24.9199C3.75216 24.9199 3 24.1678 3 23.2399C3 17.0543 8.01441 12.0399 14.2 12.0399C15.1278 12.0399 15.88 12.7921 15.88 13.7199C15.88 14.6478 15.1278 15.3999 14.2 15.3999C9.87009 15.3999 6.36 18.91 6.36 23.2399C6.36 24.1678 5.60784 24.9199 4.68 24.9199Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.32 17.0801C30.2478 17.0801 31 17.8322 31 18.7601C31 24.9457 25.9856 29.9601 19.8 29.9601C18.8722 29.9601 18.12 29.2079 18.12 28.2801C18.12 27.3522 18.8722 26.6001 19.8 26.6001C24.1299 26.6001 27.64 23.09 27.64 18.7601C27.64 17.8322 28.3922 17.0801 29.32 17.0801Z"
fill="#0DBD8B"
/>
</svg>
</span>
<h1>Unable to load</h1>
</div>
<div class="mx_HomePage_col">
<div class="mx_HomePage_row">
<div>
<h2 id="step1_heading">Element can't load</h2>
<p>Something went wrong and Element was unable to load.</p>
</div>
</div>
</div>
<div class="mx_HomePage_row mx_Center mx_Spacer">
<p class="mx_Spacer">
<a href="https://element.io" target="_blank" class="mx_FooterLink"> Go to element.io </a>
</p>
</div>
</div>
<div class="mx_HomePage_row mx_Center mx_Spacer">
<p class="mx_Spacer">
<a href="https://element.io" target="_blank" class="mx_FooterLink">
Go to element.io
</a>
</p>
</div>
</div>
</body>

4
src/vector/url_utils.ts
View file

@ -19,7 +19,7 @@ import { QueryDict, decodeParams } from "matrix-js-sdk/src/utils";
// We want to support some name / value pairs in the fragment
// so we're re-using query string like format
//
export function parseQsFromFragment(location: Location): { location: string, params: QueryDict } {
export function parseQsFromFragment(location: Location): { location: string; params: QueryDict } {
// if we have a fragment, it will start with '#', which we need to drop.
// (if we don't, this will return '').
const fragment = location.hash.substring(1);
@ -27,7 +27,7 @@ export function parseQsFromFragment(location: Location): { location: string, par
// our fragment may contain a query-param-like section. we need to fish
// this out *before* URI-decoding because the params may contain ? and &
// characters which are only URI-encoded once.
const hashparts = fragment.split('?');
const hashparts = fragment.split("?");
const result = {
location: decodeURIComponent(hashparts[0]),

694
test/app-tests/loading-test.tsx
View file

@ -18,27 +18,27 @@ limitations under the License.
/* loading.js: test the myriad paths we have for loading the application */
import "fake-indexeddb/auto";
import React from 'react';
import React from "react";
import { render, screen, fireEvent, waitFor, RenderResult, waitForElementToBeRemoved } from "@testing-library/react";
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
import MatrixChat from 'matrix-react-sdk/src/components/structures/MatrixChat';
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import MockHttpBackend from 'matrix-mock-request';
import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import MockHttpBackend from "matrix-mock-request";
import { makeType } from "matrix-react-sdk/src/utils/TypeUtils";
import { ValidatedServerConfig } from 'matrix-react-sdk/src/utils/ValidatedServerConfig';
import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
import { QueryDict, sleep } from "matrix-js-sdk/src/utils";
import "../jest-mocks";
import WebPlatform from '../../src/vector/platform/WebPlatform';
import { parseQs, parseQsFromFragment } from '../../src/vector/url_utils';
import WebPlatform from "../../src/vector/platform/WebPlatform";
import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils";
import { cleanLocalstorage, deleteIndexedDB } from "../test-utils";
const DEFAULT_HS_URL = 'http://my_server';
const DEFAULT_IS_URL = 'http://my_is';
const DEFAULT_HS_URL = "http://my_server";
const DEFAULT_IS_URL = "http://my_is";
describe('loading:', function() {
describe("loading:", function () {
let parentDiv;
let httpBackend;
@ -51,10 +51,10 @@ describe('loading:', function() {
// a promise which resolves when the MatrixChat calls onTokenLoginCompleted
let tokenLoginCompletePromise;
beforeEach(function() {
beforeEach(function () {
httpBackend = new MockHttpBackend();
window.fetch = httpBackend.fetchFn;
parentDiv = document.createElement('div');
parentDiv = document.createElement("div");
// uncomment this to actually add the div to the UI, to help with
// debugging (but slow things down)
@ -64,17 +64,14 @@ describe('loading:', function() {
matrixChat = null;
});
afterEach(async function() {
afterEach(async function () {
console.log(`${Date.now()}: loading: afterEach`);
matrixChat?.unmount();
// unmounting should have cleared the MatrixClientPeg
expect(MatrixClientPeg.get()).toBe(null);
// clear the indexeddbs so we can start from a clean slate next time.
await Promise.all([
deleteIndexedDB('matrix-js-sdk:crypto'),
deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
]);
await Promise.all([deleteIndexedDB("matrix-js-sdk:crypto"), deleteIndexedDB("matrix-js-sdk:riot-web-sync")]);
cleanLocalstorage();
console.log(`${Date.now()}: loading: afterEach complete`);
});
@ -92,19 +89,21 @@ describe('loading:', function() {
windowLocation = {
search: queryString,
hash: uriFragment,
toString: function(): string { return this.search + this.hash; },
toString: function (): string {
return this.search + this.hash;
},
};
function onNewScreen(screen): void {
console.log(Date.now() + " newscreen "+screen);
const hash = '#/' + screen;
console.log(Date.now() + " newscreen " + screen);
const hash = "#/" + screen;
windowLocation.hash = hash;
console.log(Date.now() + " browser URI now "+ windowLocation);
console.log(Date.now() + " browser URI now " + windowLocation);
}
// Parse the given window.location and return parameters that can be used when calling
// MatrixChat.showScreen(screen, params)
function getScreenFromLocation(location): { screen: string, params: QueryDict } {
function getScreenFromLocation(location): { screen: string; params: QueryDict } {
const fragparts = parseQsFromFragment(location);
return {
screen: fragparts.location.substring(1),
@ -114,25 +113,28 @@ describe('loading:', function() {
const fragParts = parseQsFromFragment(windowLocation);
const config = Object.assign({
default_hs_url: DEFAULT_HS_URL,
default_is_url: DEFAULT_IS_URL,
validated_server_config: makeType(ValidatedServerConfig, {
hsUrl: DEFAULT_HS_URL,
hsName: "TEST_ENVIRONMENT",
hsNameIsDifferent: false, // yes, we lie
isUrl: DEFAULT_IS_URL,
}),
embeddedPages: {
homeUrl: 'data:text/html;charset=utf-8;base64,PGh0bWw+PC9odG1sPg==',
const config = Object.assign(
{
default_hs_url: DEFAULT_HS_URL,
default_is_url: DEFAULT_IS_URL,
validated_server_config: makeType(ValidatedServerConfig, {
hsUrl: DEFAULT_HS_URL,
hsName: "TEST_ENVIRONMENT",
hsNameIsDifferent: false, // yes, we lie
isUrl: DEFAULT_IS_URL,
}),
embeddedPages: {
homeUrl: "data:text/html;charset=utf-8;base64,PGh0bWw+PC9odG1sPg==",
},
},
}, opts.config || {});
opts.config || {},
);
PlatformPeg.set(new WebPlatform());
const params = parseQs(windowLocation);
tokenLoginCompletePromise = new Promise<void>(resolve => {
tokenLoginCompletePromise = new Promise<void>((resolve) => {
matrixChat = render(
<MatrixChat
onNewScreen={onNewScreen}
@ -143,8 +145,11 @@ describe('loading:', function() {
enableGuest={true}
onTokenLoginCompleted={resolve}
initialScreenAfterLogin={getScreenFromLocation(windowLocation)}
makeRegistrationUrl={(): string => {throw new Error('Not implemented');}}
/>, parentDiv,
makeRegistrationUrl={(): string => {
throw new Error("Not implemented");
}}
/>,
parentDiv,
);
});
}
@ -155,21 +160,23 @@ describe('loading:', function() {
// returns a promise resolving to the received request
async function expectAndAwaitSync(opts?): Promise<any> {
let syncRequest = null;
httpBackend.when('GET', '/_matrix/client/versions')
.respond(200, {
"versions": ["r0.3.0"],
"unstable_features": {
"m.lazy_load_members": true,
},
});
httpBackend.when("GET", "/_matrix/client/versions").respond(200, {
versions: ["r0.3.0"],
unstable_features: {
"m.lazy_load_members": true,
},
});
const isGuest = opts && opts.isGuest;
if (!isGuest) {
// the call to create the LL filter
httpBackend.when('POST', '/filter').respond(200, { filter_id: 'llfid' });
httpBackend.when('GET', '/pushrules').respond(200, {});
httpBackend.when("POST", "/filter").respond(200, { filter_id: "llfid" });
httpBackend.when("GET", "/pushrules").respond(200, {});
}
httpBackend.when('GET', '/sync')
.check((r) => {syncRequest = r;})
httpBackend
.when("GET", "/sync")
.check((r) => {
syncRequest = r;
})
.respond(200, {});
for (let attempts = 10; attempts > 0; attempts--) {
@ -182,29 +189,35 @@ describe('loading:', function() {
throw new Error("Gave up waiting for /sync");
}
describe("Clean load with no stored credentials:", function() {
it('gives a welcome page by default', function() {
describe("Clean load with no stored credentials:", function () {
it("gives a welcome page by default", function () {
loadApp();
return sleep(1).then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(403, "Guest access is disabled");
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(403, "Guest access is disabled");
return httpBackend.flush();
}).then(() => {
// Wait for another trip around the event loop for the UI to update
return awaitWelcomeComponent(matrixChat);
}).then(() => {
return waitFor(() => expect(windowLocation.hash).toEqual("#/welcome"));
});
return httpBackend.flush();
})
.then(() => {
// Wait for another trip around the event loop for the UI to update
return awaitWelcomeComponent(matrixChat);
})
.then(() => {
return waitFor(() => expect(windowLocation.hash).toEqual("#/welcome"));
});
});
it('should follow the original link after successful login', function() {
it("should follow the original link after successful login", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
@ -213,39 +226,48 @@ describe('loading:', function() {
httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
httpBackend.when("GET", "/api/v1").respond(200, {});
return sleep(1).then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(403, "Guest access is disabled");
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(403, "Guest access is disabled");
return httpBackend.flush();
}).then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(10);
}).then(() => {
return moveFromWelcomeToLogin(matrixChat);
}).then(() => {
return completeLogin(matrixChat);
}).then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
return httpBackend.flush();
})
.then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(10);
})
.then(() => {
return moveFromWelcomeToLogin(matrixChat);
})
.then(() => {
return completeLogin(matrixChat);
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
// and the localstorage should have been updated
expect(localStorage.getItem('mx_user_id')).toEqual('@user:id');
expect(localStorage.getItem('mx_access_token')).toEqual('access_token');
expect(localStorage.getItem('mx_hs_url')).toEqual(DEFAULT_HS_URL);
expect(localStorage.getItem('mx_is_url')).toEqual(DEFAULT_IS_URL);
});
// and the localstorage should have been updated
expect(localStorage.getItem("mx_user_id")).toEqual("@user:id");
expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
expect(localStorage.getItem("mx_hs_url")).toEqual(DEFAULT_HS_URL);
expect(localStorage.getItem("mx_is_url")).toEqual(DEFAULT_IS_URL);
});
});
it.skip('should not register as a guest when using a #/login link', function() {
it.skip("should not register as a guest when using a #/login link", function () {
loadApp({
uriFragment: "#/login",
});
@ -254,37 +276,35 @@ describe('loading:', function() {
httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
httpBackend.when("GET", "/api/v1").respond(200, {});
return awaitLoginComponent(matrixChat).then(async () => {
await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading..."));
// we expect a single <Login> component
await screen.findByRole("main");
screen.getAllByText("Sign in");
return awaitLoginComponent(matrixChat)
.then(async () => {
await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading..."));
// we expect a single <Login> component
await screen.findByRole("main");
screen.getAllByText("Sign in");
// the only outstanding request should be a GET /login
// (in particular there should be no /register request for
// guest registration).
const allowedRequests = [
"/_matrix/client/r0/login",
"/versions",
"/api/v1",
];
for (const req of httpBackend.requests) {
if (req.method === 'GET' && allowedRequests.find(p => req.path.endsWith(p))) {
continue;
// the only outstanding request should be a GET /login
// (in particular there should be no /register request for
// guest registration).
const allowedRequests = ["/_matrix/client/r0/login", "/versions", "/api/v1"];
for (const req of httpBackend.requests) {
if (req.method === "GET" && allowedRequests.find((p) => req.path.endsWith(p))) {
continue;
}
throw new Error(`Unexpected HTTP request to ${req}`);
}
throw new Error(`Unexpected HTTP request to ${req}`);
}
return completeLogin(matrixChat);
}).then(() => {
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/home");
});
return completeLogin(matrixChat);
})
.then(() => {
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/home");
});
});
});
describe("MatrixClient rehydrated from stored credentials:", function() {
beforeEach(async function() {
describe("MatrixClient rehydrated from stored credentials:", function () {
beforeEach(async function () {
localStorage.setItem("mx_hs_url", "http://localhost");
localStorage.setItem("mx_is_url", "http://localhost");
localStorage.setItem("mx_access_token", "access_token");
@ -292,63 +312,68 @@ describe('loading:', function() {
localStorage.setItem("mx_last_room_id", "!last_room:id");
// Create a crypto store as well to satisfy storage consistency checks
const cryptoStore = new IndexedDBCryptoStore(
indexedDB,
"matrix-js-sdk:crypto",
);
const cryptoStore = new IndexedDBCryptoStore(indexedDB, "matrix-js-sdk:crypto");
await cryptoStore.startup();
});
it('shows the last known room by default', function() {
it("shows the last known room by default", function () {
loadApp();
return awaitLoggedIn(matrixChat).then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!last_room:id");
});
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!last_room:id");
});
});
it('shows a home page by default if we have no joined rooms', function() {
it("shows a home page by default if we have no joined rooms", function () {
localStorage.removeItem("mx_last_room_id");
loadApp();
return awaitLoggedIn(matrixChat).then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
// once the sync completes, we should have a home page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/home");
});
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
})
.then(() => {
// once the sync completes, we should have a home page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/home");
});
});
it('shows a room view if we followed a room link', function() {
it("shows a room view if we followed a room link", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
return awaitLoggedIn(matrixChat).then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
});
describe('/#/login link:', function() {
beforeEach(function() {
describe("/#/login link:", function () {
beforeEach(function () {
loadApp({
uriFragment: "#/login",
});
@ -357,7 +382,7 @@ describe('loading:', function() {
return expectAndAwaitSync();
});
it('does not show a login view', async function() {
it("does not show a login view", async function () {
await awaitRoomView(matrixChat);
await screen.findByLabelText("Spaces");
@ -366,136 +391,165 @@ describe('loading:', function() {
});
});
describe('Guest auto-registration:', function() {
it('shows a welcome page by default', function() {
describe("Guest auto-registration:", function () {
it("shows a welcome page by default", function () {
loadApp();
return sleep(1).then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
})
.then(() => {
return awaitLoggedIn(matrixChat);
})
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync({ isGuest: true });
})
.then(() => {
// once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_Welcome")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/welcome");
});
return httpBackend.flush();
}).then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync({ isGuest: true });
}).then(() => {
// once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_Welcome")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/welcome");
});
});
it('uses the default homeserver to register with', function() {
it("uses the default homeserver to register with", function () {
loadApp();
return sleep(1).then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
})
.then(() => {
return awaitLoggedIn(matrixChat);
})
.then(() => {
return expectAndAwaitSync({ isGuest: true });
})
.then((req) => {
expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
// once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_Welcome")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/welcome");
expect(MatrixClientPeg.get().baseUrl).toEqual(DEFAULT_HS_URL);
expect(MatrixClientPeg.get().idBaseUrl).toEqual(DEFAULT_IS_URL);
});
return httpBackend.flush();
}).then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
return expectAndAwaitSync({ isGuest: true });
}).then((req) => {
expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
// once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_Welcome")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/welcome");
expect(MatrixClientPeg.get().baseUrl).toEqual(DEFAULT_HS_URL);
expect(MatrixClientPeg.get().idBaseUrl).toEqual(DEFAULT_IS_URL);
});
});
it('shows a room view if we followed a room link', function() {
it("shows a room view if we followed a room link", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
return sleep(1).then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
})
.then(() => {
return awaitLoggedIn(matrixChat);
})
.then(() => {
return expectAndAwaitSync({ isGuest: true });
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
return httpBackend.flush();
}).then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
return expectAndAwaitSync({ isGuest: true });
}).then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
});
describe('Login as user', function() {
beforeEach(function() {
describe("Login as user", function () {
beforeEach(function () {
// first we have to load the homepage
loadApp();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush().then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
// we got a sync spinner - let the sync complete
return expectAndAwaitSync();
}).then(async () => {
// once the sync completes, we should have a home page
await waitFor(() => matrixChat.container.querySelector(".mx_HomePage"));
return httpBackend
.flush()
.then(() => {
return awaitLoggedIn(matrixChat);
})
.then(() => {
// we got a sync spinner - let the sync complete
return expectAndAwaitSync();
})
.then(async () => {
// once the sync completes, we should have a home page
await waitFor(() => matrixChat.container.querySelector(".mx_HomePage"));
// we simulate a click on the 'login' button by firing off
// the relevant dispatch.
//
// XXX: is it an anti-pattern to access the react-sdk's
// dispatcher in this way? Is it better to find the login
// button and simulate a click? (we might have to arrange
// for it to be shown - it's not always, due to the
// collapsing left panel
// we simulate a click on the 'login' button by firing off
// the relevant dispatch.
//
// XXX: is it an anti-pattern to access the react-sdk's
// dispatcher in this way? Is it better to find the login
// button and simulate a click? (we might have to arrange
// for it to be shown - it's not always, due to the
// collapsing left panel
dis.dispatch({ action: 'start_login' });
dis.dispatch({ action: "start_login" });
return awaitLoginComponent(matrixChat);
});
return awaitLoginComponent(matrixChat);
});
});
it('should give us a login page', async function() {
it("should give us a login page", async function () {
// we expect a single <Login> component
await screen.findByRole("main");
screen.getAllByText("Sign in");
@ -505,44 +559,50 @@ describe('loading:', function() {
});
});
describe('Token login:', function() {
it('logs in successfully', function() {
describe("Token login:", function () {
it("logs in successfully", function () {
localStorage.setItem("mx_sso_hs_url", "https://homeserver");
localStorage.setItem("mx_sso_is_url", "https://idserver");
loadApp({
queryString: "?loginToken=secretToken",
});
return sleep(1).then(async () => {
// we expect a spinner while we're logging in
await assertAtLoadingSpinner();
return sleep(1)
.then(async () => {
// we expect a spinner while we're logging in
await assertAtLoadingSpinner();
httpBackend.when('POST', '/login').check(function(req) {
expect(req.path).toMatch(new RegExp("^https://homeserver/"));
expect(req.data.type).toEqual("m.login.token");
expect(req.data.token).toEqual("secretToken");
}).respond(200, {
user_id: "@user:localhost",
device_id: 'DEVICE_ID',
access_token: "access_token",
httpBackend
.when("POST", "/login")
.check(function (req) {
expect(req.path).toMatch(new RegExp("^https://homeserver/"));
expect(req.data.type).toEqual("m.login.token");
expect(req.data.token).toEqual("secretToken");
})
.respond(200, {
user_id: "@user:localhost",
device_id: "DEVICE_ID",
access_token: "access_token",
});
return httpBackend.flush();
})
.then(() => {
// at this point, MatrixChat should fire onTokenLoginCompleted, which
// makes index.js reload the app. We're not going to attempt to
// simulate the reload - just check that things are left in the
// right state for the reloaded app.
return tokenLoginCompletePromise;
})
.then(() => {
// check that the localstorage has been set up in such a way that
// the reloaded app can pick up where we leave off.
expect(localStorage.getItem("mx_user_id")).toEqual("@user:localhost");
expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
expect(localStorage.getItem("mx_hs_url")).toEqual("https://homeserver");
expect(localStorage.getItem("mx_is_url")).toEqual("https://idserver");
});
return httpBackend.flush();
}).then(() => {
// at this point, MatrixChat should fire onTokenLoginCompleted, which
// makes index.js reload the app. We're not going to attempt to
// simulate the reload - just check that things are left in the
// right state for the reloaded app.
return tokenLoginCompletePromise;
}).then(() => {
// check that the localstorage has been set up in such a way that
// the reloaded app can pick up where we leave off.
expect(localStorage.getItem('mx_user_id')).toEqual('@user:localhost');
expect(localStorage.getItem('mx_access_token')).toEqual('access_token');
expect(localStorage.getItem('mx_hs_url')).toEqual('https://homeserver');
expect(localStorage.getItem('mx_is_url')).toEqual('https://idserver');
});
});
});
@ -551,38 +611,44 @@ describe('loading:', function() {
async function completeLogin(matrixChat: RenderResult): Promise<void> {
// When we switch to the login component, it'll hit the login endpoint
// for proof of life and to get flows. We'll only give it one option.
httpBackend.when('GET', '/login')
.respond(200, { flows: [{ type: "m.login.password" }] });
httpBackend.when("GET", "/login").respond(200, { flows: [{ type: "m.login.password" }] });
httpBackend.flush(); // We already would have tried the GET /login request
// Give the component some time to finish processing the login flows before
// continuing.
await sleep(100);
httpBackend.when('POST', '/login').check(function(req) {
expect(req.data.type).toEqual('m.login.password');
expect(req.data.identifier.type).toEqual('m.id.user');
expect(req.data.identifier.user).toEqual('user');
expect(req.data.password).toEqual('pass');
}).respond(200, {
user_id: '@user:id',
device_id: 'DEVICE_ID',
access_token: 'access_token',
});
httpBackend
.when("POST", "/login")
.check(function (req) {
expect(req.data.type).toEqual("m.login.password");
expect(req.data.identifier.type).toEqual("m.id.user");
expect(req.data.identifier.user).toEqual("user");
expect(req.data.password).toEqual("pass");
})
.respond(200, {
user_id: "@user:id",
device_id: "DEVICE_ID",
access_token: "access_token",
});
fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_username"), { target: { value: "user" } });
fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_password"), { target: { value: "pass" } });
fireEvent.click(screen.getByText("Sign in", { selector: ".mx_Login_submit" }));
return httpBackend.flush().then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(1);
}).then(() => {
return expectAndAwaitSync().catch((e) => {
throw new Error("Never got /sync after login: did the client start?");
return httpBackend
.flush()
.then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(1);
})
.then(() => {
return expectAndAwaitSync().catch((e) => {
throw new Error("Never got /sync after login: did the client start?");
});
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
});
}).then(() => {
httpBackend.verifyNoOutstandingExpectation();
});
}
});
@ -594,7 +660,7 @@ async function assertAtLoadingSpinner(): Promise<void> {
async function awaitLoggedIn(matrixChat: RenderResult): Promise<void> {
if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in
return new Promise(resolve => {
return new Promise((resolve) => {
const onAction = ({ action }): void => {
if (action !== "on_logged_in") {
return;
@ -621,6 +687,6 @@ async function awaitWelcomeComponent(matrixChat: RenderResult): Promise<void> {
}
function moveFromWelcomeToLogin(matrixChat: RenderResult): Promise<void> {
dis.dispatch({ action: 'start_login' });
dis.dispatch({ action: "start_login" });
return awaitLoginComponent(matrixChat);
}

4
test/jest-mocks.ts
View file

@ -15,9 +15,9 @@ limitations under the License.
*/
// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
Object.defineProperty(window, "matchMedia", {
writable: true,
value: jest.fn().mockImplementation(query => ({
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,

6
test/test-utils.ts
View file

@ -34,14 +34,12 @@ export function deleteIndexedDB(dbName: string): Promise<void> {
};
req.onerror = (ev): void => {
reject(new Error(
`${Date.now()}: unable to delete indexeddb ${dbName}: ${req.error}`,
));
reject(new Error(`${Date.now()}: unable to delete indexeddb ${dbName}: ${req.error}`));
};
req.onsuccess = (): void => {
const now = Date.now();
console.log(`${now}: Removed indexeddb instance: ${dbName} in ${now-startTime} ms`);
console.log(`${now}: Removed indexeddb instance: ${dbName} in ${now - startTime} ms`);
resolve();
};
}).catch((e) => {

30
test/unit-tests/vector/getconfig-test.ts
View file

@ -20,88 +20,88 @@ import { getVectorConfig } from "../../../src/vector/getconfig";
fetchMock.config.overwriteRoutes = true;
describe('getVectorConfig()', () => {
describe("getVectorConfig()", () => {
const prevDocumentDomain = document.domain;
const elementDomain = 'app.element.io';
const elementDomain = "app.element.io";
const now = 1234567890;
const specificConfig = {
brand: 'specific',
brand: "specific",
};
const generalConfig = {
brand: 'general',
brand: "general",
};
beforeEach(() => {
document.domain = elementDomain;
// stable value for cachebuster
jest.spyOn(Date, 'now').mockReturnValue(now);
jest.spyOn(Date, "now").mockReturnValue(now);
jest.clearAllMocks();
fetchMock.mockClear();
});
afterAll(() => {
document.domain = prevDocumentDomain;
jest.spyOn(Date, 'now').mockRestore();
jest.spyOn(Date, "now").mockRestore();
});
it('requests specific config for document domain', async () => {
it("requests specific config for document domain", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", specificConfig);
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(specificConfig);
});
it('adds trailing slash to relativeLocation when not an empty string', async () => {
it("adds trailing slash to relativeLocation when not an empty string", async () => {
fetchMock.getOnce("express:../config.app.element.io.json", specificConfig);
fetchMock.getOnce("express:../config.json", generalConfig);
await expect(getVectorConfig("..")).resolves.toEqual(specificConfig);
});
it('returns general config when specific config succeeds but is empty', async () => {
it("returns general config when specific config succeeds but is empty", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", {});
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config 404s', async () => {
it("returns general config when specific config 404s", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { status: 404 });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config is fetched from a file and is empty', async () => {
it("returns general config when specific config is fetched from a file and is empty", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", 0);
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config returns a non-200 status', async () => {
it("returns general config when specific config returns a non-200 status", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { status: 401 });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config returns an error', async () => {
it("returns general config when specific config returns an error", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err1" });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('rejects with an error when general config rejects', async () => {
it("rejects with an error when general config rejects", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
fetchMock.getOnce("express:/config.json", { throws: "err-general" });
await expect(getVectorConfig()).rejects.toBe("err-general");
});
it('rejects with an error when config is invalid JSON', async () => {
it("rejects with an error when config is invalid JSON", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
fetchMock.getOnce("express:/config.json", '{"invalid": "json",}');

170
test/unit-tests/vector/platform/ElectronPlatform-test.ts
View file

@ -14,33 +14,34 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { logger } from 'matrix-js-sdk/src/logger';
import { MatrixEvent, Room } from 'matrix-js-sdk/src/matrix';
import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
import { Action } from 'matrix-react-sdk/src/dispatcher/actions';
import dispatcher from 'matrix-react-sdk/src/dispatcher/dispatcher';
import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
import { Action } from "matrix-react-sdk/src/dispatcher/actions";
import dispatcher from "matrix-react-sdk/src/dispatcher/dispatcher";
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import ElectronPlatform from '../../../../src/vector/platform/ElectronPlatform';
import ElectronPlatform from "../../../../src/vector/platform/ElectronPlatform";
jest.mock('matrix-react-sdk/src/rageshake/rageshake', () => ({
jest.mock("matrix-react-sdk/src/rageshake/rageshake", () => ({
flush: jest.fn(),
}));
describe('ElectronPlatform', () => {
const defaultUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 ' +
'(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36';
describe("ElectronPlatform", () => {
const defaultUserAgent =
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
"(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36";
const mockElectron = {
on: jest.fn(),
send: jest.fn(),
};
const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
const dispatchFireSpy = jest.spyOn(dispatcher, 'fire');
const logSpy = jest.spyOn(logger, 'log').mockImplementation(() => {});
const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
const dispatchFireSpy = jest.spyOn(dispatcher, "fire");
const logSpy = jest.spyOn(logger, "log").mockImplementation(() => {});
const userId = '@alice:server.org';
const deviceId = 'device-id';
const userId = "@alice:server.org";
const deviceId = "device-id";
window.electron = mockElectron;
beforeEach(() => {
@ -53,9 +54,9 @@ describe('ElectronPlatform', () => {
const getElectronEventHandlerCall = (eventType: string): [type: string, handler: Function] | undefined =>
mockElectron.on.mock.calls.find(([type]) => type === eventType);
it('flushes rageshake before quitting', () => {
it("flushes rageshake before quitting", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('before-quit');
const [event, handler] = getElectronEventHandlerCall("before-quit");
// correct event bound
expect(event).toBeTruthy();
@ -65,9 +66,9 @@ describe('ElectronPlatform', () => {
expect(rageshake.flush).toHaveBeenCalled();
});
it('dispatches view settings action on preferences event', () => {
it("dispatches view settings action on preferences event", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('preferences');
const [event, handler] = getElectronEventHandlerCall("preferences");
// correct event bound
expect(event).toBeTruthy();
@ -76,10 +77,10 @@ describe('ElectronPlatform', () => {
expect(dispatchFireSpy).toHaveBeenCalledWith(Action.ViewUserSettings);
});
describe('updates', () => {
it('dispatches on check updates action', () => {
describe("updates", () => {
it("dispatches on check updates action", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('check_updates');
const [event, handler] = getElectronEventHandlerCall("check_updates");
// correct event bound
expect(event).toBeTruthy();
@ -90,9 +91,9 @@ describe('ElectronPlatform', () => {
});
});
it('dispatches on check updates action when update not available', () => {
it("dispatches on check updates action when update not available", () => {
new ElectronPlatform();
const [, handler] = getElectronEventHandlerCall('check_updates');
const [, handler] = getElectronEventHandlerCall("check_updates");
handler({}, false);
expect(dispatchSpy).toHaveBeenCalledWith({
@ -101,55 +102,42 @@ describe('ElectronPlatform', () => {
});
});
it('starts update check', () => {
it("starts update check", () => {
const platform = new ElectronPlatform();
platform.startUpdateCheck();
expect(mockElectron.send).toHaveBeenCalledWith('check_updates');
expect(mockElectron.send).toHaveBeenCalledWith("check_updates");
});
it('installs update', () => {
it("installs update", () => {
const platform = new ElectronPlatform();
platform.installUpdate();
expect(mockElectron.send).toHaveBeenCalledWith('install_update');
expect(mockElectron.send).toHaveBeenCalledWith("install_update");
});
});
it('returns human readable name', () => {
it("returns human readable name", () => {
const platform = new ElectronPlatform();
expect(platform.getHumanReadableName()).toEqual('Electron Platform');
expect(platform.getHumanReadableName()).toEqual("Electron Platform");
});
describe("getDefaultDeviceDisplayName", () => {
it.each([[
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
"(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
"Element Desktop: macOS",
],
[
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) " +
"electron/1.0.0 Chrome/53.0.2785.113 Electron/1.4.3 Safari/537.36",
"Element Desktop: Windows",
],
[
"Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: Linux",
],
[
"Mozilla/5.0 (X11; FreeBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: FreeBSD",
],
[
"Mozilla/5.0 (X11; OpenBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: OpenBSD",
],
[
"Mozilla/5.0 (X11; SunOS i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: SunOS",
],
[
"custom user agent",
"Element Desktop: Unknown",
]])("%s = %s", (userAgent, result) => {
it.each([
[
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
"(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
"Element Desktop: macOS",
],
[
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) " +
"electron/1.0.0 Chrome/53.0.2785.113 Electron/1.4.3 Safari/537.36",
"Element Desktop: Windows",
],
["Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: Linux"],
["Mozilla/5.0 (X11; FreeBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: FreeBSD"],
["Mozilla/5.0 (X11; OpenBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: OpenBSD"],
["Mozilla/5.0 (X11; SunOS i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: SunOS"],
["custom user agent", "Element Desktop: Unknown"],
])("%s = %s", (userAgent, result) => {
delete window.navigator;
window.navigator = { userAgent } as unknown as Navigator;
const platform = new ElectronPlatform();
@ -157,119 +145,119 @@ describe('ElectronPlatform', () => {
});
});
it('returns true for needsUrlTooltips', () => {
it("returns true for needsUrlTooltips", () => {
const platform = new ElectronPlatform();
expect(platform.needsUrlTooltips()).toBe(true);
});
it('should override browser shortcuts', () => {
it("should override browser shortcuts", () => {
const platform = new ElectronPlatform();
expect(platform.overrideBrowserShortcuts()).toBe(true);
});
it('allows overriding native context menus', () => {
it("allows overriding native context menus", () => {
const platform = new ElectronPlatform();
expect(platform.allowOverridingNativeContextMenus()).toBe(true);
});
it('indicates support for desktop capturer', () => {
it("indicates support for desktop capturer", () => {
const platform = new ElectronPlatform();
expect(platform.supportsDesktopCapturer()).toBe(true);
});
it('indicates no support for jitsi screensharing', () => {
it("indicates no support for jitsi screensharing", () => {
const platform = new ElectronPlatform();
expect(platform.supportsJitsiScreensharing()).toBe(false);
});
describe('notifications', () => {
it('indicates support for notifications', () => {
describe("notifications", () => {
it("indicates support for notifications", () => {
const platform = new ElectronPlatform();
expect(platform.supportsNotifications()).toBe(true);
});
it('may send notifications', () => {
it("may send notifications", () => {
const platform = new ElectronPlatform();
expect(platform.maySendNotifications()).toBe(true);
});
it('pretends to request notification permission', async () => {
it("pretends to request notification permission", async () => {
const platform = new ElectronPlatform();
const result = await platform.requestNotificationPermission();
expect(result).toEqual('granted');
expect(result).toEqual("granted");
});
it('creates a loud notification', async () => {
it("creates a loud notification", async () => {
const platform = new ElectronPlatform();
platform.loudNotification(new MatrixEvent(), new Room('!room:server', {} as any, userId));
expect(mockElectron.send).toHaveBeenCalledWith('loudNotification');
platform.loudNotification(new MatrixEvent(), new Room("!room:server", {} as any, userId));
expect(mockElectron.send).toHaveBeenCalledWith("loudNotification");
});
it('sets notification count when count is changing', async () => {
it("sets notification count when count is changing", async () => {
const platform = new ElectronPlatform();
platform.setNotificationCount(0);
// not called because matches internal notificaiton count
expect(mockElectron.send).not.toHaveBeenCalledWith('setBadgeCount', 0);
expect(mockElectron.send).not.toHaveBeenCalledWith("setBadgeCount", 0);
platform.setNotificationCount(1);
expect(mockElectron.send).toHaveBeenCalledWith('setBadgeCount', 1);
expect(mockElectron.send).toHaveBeenCalledWith("setBadgeCount", 1);
});
});
describe('spellcheck', () => {
it('indicates support for spellcheck settings', () => {
describe("spellcheck", () => {
it("indicates support for spellcheck settings", () => {
const platform = new ElectronPlatform();
expect(platform.supportsSpellCheckSettings()).toBe(true);
});
it('gets available spellcheck languages', () => {
it("gets available spellcheck languages", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.getAvailableSpellCheckLanguages();
const [channel, { name }] = mockElectron.send.mock.calls[0];
expect(channel).toEqual("ipcCall");
expect(name).toEqual('getAvailableSpellCheckLanguages');
expect(name).toEqual("getAvailableSpellCheckLanguages");
});
});
describe('pickle key', () => {
it('makes correct ipc call to get pickle key', () => {
describe("pickle key", () => {
it("makes correct ipc call to get pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.getPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('getPickleKey');
expect(name).toEqual("getPickleKey");
expect(args).toEqual([userId, deviceId]);
});
it('makes correct ipc call to create pickle key', () => {
it("makes correct ipc call to create pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.createPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('createPickleKey');
expect(name).toEqual("createPickleKey");
expect(args).toEqual([userId, deviceId]);
});
it('makes correct ipc call to destroy pickle key', () => {
it("makes correct ipc call to destroy pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.destroyPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('destroyPickleKey');
expect(name).toEqual("destroyPickleKey");
expect(args).toEqual([userId, deviceId]);
});
});
describe('versions', () => {
it('calls install update', () => {
describe("versions", () => {
it("calls install update", () => {
const platform = new ElectronPlatform();
platform.installUpdate();
expect(mockElectron.send).toHaveBeenCalledWith('install_update');
expect(mockElectron.send).toHaveBeenCalledWith("install_update");
});
});
});

4
test/unit-tests/vector/platform/PWAPlatform-test.ts
View file

@ -21,7 +21,7 @@ import WebPlatform from "../../../../src/vector/platform/WebPlatform";
jest.mock("../../../../src/vector/platform/WebPlatform");
describe('PWAPlatform', () => {
describe("PWAPlatform", () => {
beforeEach(() => {
jest.clearAllMocks();
});
@ -54,7 +54,7 @@ describe('PWAPlatform', () => {
});
it("should handle Navigator::setAppBadge rejecting gracefully", () => {
navigator.setAppBadge = jest.fn().mockRejectedValue(new Error);
navigator.setAppBadge = jest.fn().mockRejectedValue(new Error());
const platform = new PWAPlatform();
expect(() => platform.setNotificationCount(123)).not.toThrow();
});

127
test/unit-tests/vector/platform/WebPlatform-test.ts
View file

@ -15,24 +15,24 @@ limitations under the License.
*/
import fetchMock from "fetch-mock-jest";
import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
import WebPlatform from '../../../../src/vector/platform/WebPlatform';
import WebPlatform from "../../../../src/vector/platform/WebPlatform";
fetchMock.config.overwriteRoutes = true;
describe('WebPlatform', () => {
describe("WebPlatform", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('returns human readable name', () => {
it("returns human readable name", () => {
const platform = new WebPlatform();
expect(platform.getHumanReadableName()).toEqual('Web Platform');
expect(platform.getHumanReadableName()).toEqual("Web Platform");
});
it('registers service worker', () => {
it("registers service worker", () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - mocking readonly object
navigator.serviceWorker = { register: jest.fn() };
@ -65,12 +65,14 @@ describe('WebPlatform', () => {
});
describe("getDefaultDeviceDisplayName", () => {
it.each([[
"https://develop.element.io/#/room/!foo:bar",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) " +
"Chrome/105.0.0.0 Safari/537.36",
"develop.element.io: Chrome on macOS",
]])("%s & %s = %s", (url, userAgent, result) => {
it.each([
[
"https://develop.element.io/#/room/!foo:bar",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) " +
"Chrome/105.0.0.0 Safari/537.36",
"develop.element.io: Chrome on macOS",
],
])("%s & %s = %s", (url, userAgent, result) => {
delete window.navigator;
window.navigator = { userAgent } as unknown as Navigator;
delete window.location;
@ -80,66 +82,66 @@ describe('WebPlatform', () => {
});
});
describe('notification support', () => {
describe("notification support", () => {
const mockNotification = {
requestPermission: jest.fn(),
permission: 'notGranted',
permission: "notGranted",
};
beforeEach(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.Notification = mockNotification;
mockNotification.permission = 'notGranted';
mockNotification.permission = "notGranted";
});
it('supportsNotifications returns false when platform does not support notifications', () => {
it("supportsNotifications returns false when platform does not support notifications", () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.Notification = undefined;
expect(new WebPlatform().supportsNotifications()).toBe(false);
});
it('supportsNotifications returns true when platform supports notifications', () => {
it("supportsNotifications returns true when platform supports notifications", () => {
expect(new WebPlatform().supportsNotifications()).toBe(true);
});
it('maySendNotifications returns true when notification permissions are not granted', () => {
it("maySendNotifications returns true when notification permissions are not granted", () => {
expect(new WebPlatform().maySendNotifications()).toBe(false);
});
it('maySendNotifications returns true when notification permissions are granted', () => {
mockNotification.permission = 'granted';
it("maySendNotifications returns true when notification permissions are granted", () => {
mockNotification.permission = "granted";
expect(new WebPlatform().maySendNotifications()).toBe(true);
});
it('requests notification permissions and returns result ', async () => {
mockNotification.requestPermission.mockImplementation(callback => callback('test'));
it("requests notification permissions and returns result ", async () => {
mockNotification.requestPermission.mockImplementation((callback) => callback("test"));
const platform = new WebPlatform();
const result = await platform.requestNotificationPermission();
expect(result).toEqual('test');
expect(result).toEqual("test");
});
});
describe('app version', () => {
describe("app version", () => {
const envVersion = process.env.VERSION;
const prodVersion = '1.10.13';
const prodVersion = "1.10.13";
beforeEach(() => {
jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(false);
jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(false);
});
afterAll(() => {
process.env.VERSION = envVersion;
});
it('should return true from canSelfUpdate()', async () => {
it("should return true from canSelfUpdate()", async () => {
const platform = new WebPlatform();
const result = await platform.canSelfUpdate();
expect(result).toBe(true);
});
it('getAppVersion returns normalized app version', async () => {
it("getAppVersion returns normalized app version", async () => {
process.env.VERSION = prodVersion;
const platform = new WebPlatform();
@ -156,23 +158,26 @@ describe('WebPlatform', () => {
expect(notSemverVersion).toEqual(`version not like semver`);
});
describe('pollForUpdate()', () => {
it('should return not available and call showNoUpdate when current version ' +
'matches most recent version', async () => {
process.env.VERSION = prodVersion;
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
describe("pollForUpdate()", () => {
it(
"should return not available and call showNoUpdate when current version " +
"matches most recent version",
async () => {
process.env.VERSION = prodVersion;
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
const showUpdate = jest.fn();
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
const showUpdate = jest.fn();
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
expect(result).toEqual({ status: UpdateCheckStatus.NotAvailable });
expect(showUpdate).not.toHaveBeenCalled();
expect(showNoUpdate).toHaveBeenCalled();
});
expect(result).toEqual({ status: UpdateCheckStatus.NotAvailable });
expect(showUpdate).not.toHaveBeenCalled();
expect(showNoUpdate).toHaveBeenCalled();
},
);
it('should strip v prefix from versions before comparing', async () => {
it("should strip v prefix from versions before comparing", async () => {
process.env.VERSION = prodVersion;
fetchMock.getOnce("/version", `v${prodVersion}`);
const platform = new WebPlatform();
@ -187,24 +192,26 @@ describe('WebPlatform', () => {
expect(showNoUpdate).toHaveBeenCalled();
});
it('should return ready and call showUpdate when current version ' +
'differs from most recent version', async () => {
process.env.VERSION = '0.0.0'; // old version
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
it(
"should return ready and call showUpdate when current version " + "differs from most recent version",
async () => {
process.env.VERSION = "0.0.0"; // old version
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
const showUpdate = jest.fn();
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
const showUpdate = jest.fn();
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
expect(result).toEqual({ status: UpdateCheckStatus.Ready });
expect(showUpdate).toHaveBeenCalledWith('0.0.0', prodVersion);
expect(showNoUpdate).not.toHaveBeenCalled();
});
expect(result).toEqual({ status: UpdateCheckStatus.Ready });
expect(showUpdate).toHaveBeenCalledWith("0.0.0", prodVersion);
expect(showNoUpdate).not.toHaveBeenCalled();
},
);
it('should return ready without showing update when user registered in last 24', async () => {
process.env.VERSION = '0.0.0'; // old version
jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(true);
it("should return ready without showing update when user registered in last 24", async () => {
process.env.VERSION = "0.0.0"; // old version
jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(true);
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
@ -217,7 +224,7 @@ describe('WebPlatform', () => {
expect(showNoUpdate).not.toHaveBeenCalled();
});
it('should return error when version check fails', async () => {
it("should return error when version check fails", async () => {
fetchMock.getOnce("/version", { throws: "oups" });
const platform = new WebPlatform();
@ -225,7 +232,7 @@ describe('WebPlatform', () => {
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
expect(result).toEqual({ status: UpdateCheckStatus.Error, detail: 'Unknown Error' });
expect(result).toEqual({ status: UpdateCheckStatus.Error, detail: "Unknown Error" });
expect(showUpdate).not.toHaveBeenCalled();
expect(showNoUpdate).not.toHaveBeenCalled();
});

Some files were not shown because too many files have changed in this diff Show more