Update RoomProfile.jsx

Bumps [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk) from 16.0.1 to 17.0.0.
- [Release notes](https://github.com/matrix-org/matrix-js-sdk/releases)
- [Changelog](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/matrix-org/matrix-js-sdk/compare/v16.0.1...v17.0.0)

---
updated-dependencies:
- dependency-name: matrix-js-sdk
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,5 @@
 name: 🐞 Bug Report
 description: Report a bug
-labels: 'type: bug'
 
 body:
   - type: markdown
@@ -50,7 +49,7 @@ body:
       render: shell
     validations:
       required: true
-  
+
   - type: textarea
     id: context
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,5 @@
 name: 💡 Feature Request
 description: Suggest an idea
-labels: 'type: feature'
 
 body:
   - type: textarea
@@ -26,7 +25,7 @@ body:
     attributes:
       label: Alternatives considered
       description: "Any alternative solutions you've considered"
-  
+
   - type: textarea
     id: context
     attributes:

.github/dependabot.yml

@@ -1,28 +1,30 @@
 # Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>
 
 version: 2
-
 updates:
-  - package-ecosystem: github-actions
+  - package-ecosystem: npm
     directory: /
-    schedule: 
+    schedule:
       interval: weekly
       day: "tuesday"
       time: "01:00"
       timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 15
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+      day: "tuesday"
+      time: "01:00"
+      timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 5
 
   - package-ecosystem: docker
     directory: /
-    schedule: 
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-
-  - package-ecosystem: npm
-    directory: /
-    schedule: 
+    schedule:
       interval: weekly
       day: "tuesday"
       time: "01:00"
       timezone: "Asia/Kolkata"
+    open-pull-requests-limit: 5

.github/workflows/build-pull-request.yml

@@ -32,8 +32,3 @@ jobs:
           name: pr.json
           path: pr.json
           retention-days: 1
-      - name: Build Docker image
-        uses: docker/build-push-action@v2.10.0
-        with:
-          context: .
-          push: false

.github/workflows/docker-pr.yml

@@ -0,0 +1,20 @@
+name: 'Docker check'
+
+on:
+  pull_request:
+    paths: 
+      - 'Dockerfile'
+
+jobs:
+  docker-build:
+    runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.0
+      - name: Build Docker image
+        uses: docker/build-push-action@v2.10.0
+        with:
+          context: .
+          push: false

.github/workflows/netlify-dev.yml

@@ -10,7 +10,7 @@ jobs:
     name: 'Deploy'
     runs-on: ubuntu-latest
 
-    steps:      
+    steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.0
       - name: Build and deploy to Netlify

.github/workflows/prod-deploy.yml

@@ -44,7 +44,7 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3.6.2
+        uses: docker/metadata-action@v3.7.0
         with:
           images: ajbura/cinny
       - name: Build and push Docker image

Dockerfile

@@ -1,5 +1,5 @@
 ## Builder
-FROM node:17.7.2-alpine3.15 as builder
+FROM node:17.8.0-alpine3.15 as builder
 
 WORKDIR /src
 

package.json

@@ -15,8 +15,8 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "^4.5.5",
-    "@fontsource/roboto": "^4.5.3",
+    "@fontsource/inter": "^4.5.7",
+    "@fontsource/roboto": "^4.5.5",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@tippyjs/react": "^4.2.6",
     "babel-polyfill": "^6.26.0",
@@ -28,7 +28,7 @@
     "formik": "^2.2.9",
     "html-react-parser": "^1.4.9",
     "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^15.6.0",
+    "matrix-js-sdk": "^17.0.0",
     "micromark": "^3.0.10",
     "micromark-extension-gfm": "^2.0.1",
     "micromark-util-chunked": "^1.0.0",
@@ -37,21 +37,21 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-autosize-textarea": "^7.1.0",
-    "react-dnd": "^15.1.1",
-    "react-dnd-html5-backend": "^15.1.2",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
     "react-modal": "^3.14.4",
     "sanitize-html": "^2.7.0",
     "tippy.js": "^6.3.7",
-    "twemoji": "^14.0.1"
+    "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "assert": "^2.0.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.4",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -59,9 +59,9 @@
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.2.0",
@@ -71,15 +71,15 @@
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.6.0",
     "path-browserify": "^1.0.1",
-    "sass": "^1.49.9",
+    "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "webpack": "^5.70.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack-dev-server": "^4.8.1",
     "webpack-merge": "^5.7.3"
   }
 }

src/app/molecules/dialog/Dialog.jsx

@@ -12,6 +12,7 @@ import RawModal from '../../atoms/modal/RawModal';
 function Dialog({
   className, isOpen, title, onAfterOpen, onAfterClose,
   contentOptions, onRequestClose, closeFromOutside, children,
+  invisibleScroll,
 }) {
   return (
     <RawModal
@@ -36,7 +37,7 @@ function Dialog({
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
-            <ScrollView autoHide>
+            <ScrollView autoHide invisible={invisibleScroll}>
               <div className="dialog__content-container">
                 {children}
               </div>
@@ -55,6 +56,7 @@ Dialog.defaultProps = {
   onAfterClose: null,
   onRequestClose: null,
   closeFromOutside: true,
+  invisibleScroll: false,
 };
 
 Dialog.propTypes = {
@@ -67,6 +69,7 @@ Dialog.propTypes = {
   onRequestClose: PropTypes.func,
   closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  invisibleScroll: PropTypes.bool,
 };
 
 export default Dialog;

src/app/molecules/dialog/Dialog.scss

@@ -21,8 +21,3 @@
     flex-direction: column;
   }
 }
-
-.dialog__content-container {
-  padding-top: var(--sp-extra-tight);
-  padding-bottom: var(--sp-extra-loose);
-}

src/app/molecules/dialog/ReusableDialog.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+
+import navigation from '../../../client/state/navigation';
+import IconButton from '../../atoms/button/IconButton';
+import Dialog from './Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReusableDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (title, render, afterClose) => {
+      setIsOpen(true);
+      setData({ title, render, afterClose });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    data.afterClose();
+    setData(null);
+  };
+
+  const handleRequestClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={data?.title || ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={handleRequestClose}
+      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      invisibleScroll
+    >
+      {data?.render(handleRequestClose) || <div />}
+    </Dialog>
+  );
+}
+
+export default ReusableDialog;

src/app/molecules/message/Message.jsx

@@ -547,7 +547,7 @@ const MessageOptions = React.memo(({
                   variant="danger"
                   iconSrc={BinIC}
                   onClick={() => {
-                    if (window.confirm('Are you sure you want to delete this event')) {
+                    if (window.confirm('Are you sure that you want to delete this event?')) {
                       redactEvent(roomId, mEvent.getId());
                     }
                   }}

src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx

@@ -17,19 +17,19 @@ const visibility = {
 
 const items = [{
   iconSrc: null,
-  text: 'World readable (anyone can read)',
+  text: 'Anyone (including guests)',
   type: visibility.WORLD_READABLE,
 }, {
   iconSrc: null,
-  text: 'Member shared (since the point in time of selecting this option)',
+  text: 'Members (all messages)',
   type: visibility.SHARED,
 }, {
   iconSrc: null,
-  text: 'Member invited (since they were invited)',
+  text: 'Members (messages after invite)',
   type: visibility.INVITED,
 }, {
   iconSrc: null,
-  text: 'Member joined (since they joined)',
+  text: 'Members (messages after join)',
   type: visibility.JOINED,
 }];
 
@@ -87,7 +87,7 @@ function RoomHistoryVisibility({ roomId }) {
           </MenuItem>
         ))
       }
-      <Text variant="b3">Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.</Text>
+      <Text variant="b3">Changes to history visibility will only apply to future messages. The visibility of existing history will have no effect.</Text>
     </div>
   );
 }

src/app/molecules/room-options/RoomOptions.jsx

@@ -30,7 +30,7 @@ function RoomOptions({ roomId, afterOptionSelect }) {
     afterOptionSelect();
   };
   const handleLeaveClick = () => {
-    if (confirm('Are you really want to leave this room?')) {
+    if (confirm('Are you sure that you want to leave this room?')) {
       roomActions.leave(roomId);
       afterOptionSelect();
     }

src/app/molecules/room-permissions/RoomPermissions.jsx

@@ -179,6 +179,7 @@ function RoomPermissions({ roomId }) {
   const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
   const permissions = pLEvent.getContent();
   const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
+  const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;
 
   const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
     const handlePowerLevelChange = (newPowerLevel) => {
@@ -208,7 +209,7 @@ function RoomPermissions({ roomId }) {
       (closeMenu) => (
         <PowerLevelSelector
           value={powerLevel}
-          max={100}
+          max={myPowerLevel}
           onSelect={(pl) => {
             closeMenu();
             handlePowerLevelChange(pl);

src/app/molecules/room-profile/RoomProfile.jsx

@@ -117,7 +117,7 @@ function RoomProfile({ roomId }) {
 
   const handleAvatarUpload = async (url) => {
     if (url === null) {
-      if (confirm('Are you sure you want to remove avatar?')) {
+      if (confirm('Are you sure that you want to remove room avatar?')) {
         await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
       }
     } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');

src/app/molecules/space-options/SpaceOptions.jsx

@@ -55,7 +55,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   };
 
   const handleLeaveClick = () => {
-    if (confirm('Are you really want to leave this space?')) {
+    if (confirm('Are you sure that you want to leave this space?')) {
       leave(roomId);
       afterOptionSelect();
     }

src/app/organisms/create-room/CreateRoom.jsx

@@ -210,7 +210,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
             />
           )}
           content={(
-            <Text variant="b3">Founder (101) override the default Admin (100) power level.</Text>
+            <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
           )}
         />
         <Input name="topic" minHeight={174} resizable label="Topic (optional)" />

src/app/organisms/create-room/CreateRoom.scss

@@ -2,6 +2,7 @@
 @use '../../partials/dir';
 
 .create-room {
+  margin: var(--sp-normal);
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -40,7 +40,7 @@ function ProfileEditor({ userId }) {
 
   const handleAvatarUpload = (url) => {
     if (url === null) {
-      if (confirm('Are you sure you want to remove avatar?')) {
+      if (confirm('Are you sure that you want to remove avatar?')) {
         mx.setAvatarUrl('');
         setAvatarSrc(null);
       }

src/app/organisms/pw/Dialogs.jsx

@@ -8,6 +8,8 @@ import Search from '../search/Search';
 import ViewSource from '../view-source/ViewSource';
 import CreateRoom from '../create-room/CreateRoom';
 
+import ReusableDialog from '../../molecules/dialog/ReusableDialog';
+
 function Dialogs() {
   return (
     <>
@@ -18,6 +20,8 @@ function Dialogs() {
       <CreateRoom />
       <SpaceAddExisting />
       <Search />
+
+      <ReusableDialog />
     </>
   );
 }

src/app/organisms/read-receipts/ReadReceipts.jsx

@@ -64,9 +64,11 @@ function ReadReceipts() {
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
-      {
-        readers.map(renderPeople)
-      }
+      <div style={{ marginTop: 'var(--sp-tight)', marginBottom: 'var(--sp-extra-loose)' }}>
+        {
+          readers.map(renderPeople)
+        }
+      </div>
     </Dialog>
   );
 }

src/app/organisms/room/RoomSettings.jsx

@@ -86,7 +86,7 @@ function GeneralSettings({ roomId }) {
         <MenuItem
           variant="danger"
           onClick={() => {
-            if (confirm('Are you really want to leave this room?')) {
+            if (confirm('Are you sure that you want to leave this room?')) {
               roomActions.leave(roomId);
             }
           }}
@@ -123,7 +123,7 @@ function SecuritySettings({ roomId }) {
         <RoomEncryption roomId={roomId} />
       </div>
       <div className="room-settings__card">
-        <MenuHeader>Message history visibility (Who can read history)</MenuHeader>
+        <MenuHeader>Message history visibility</MenuHeader>
         <RoomHistoryVisibility roomId={roomId} />
       </div>
     </>

src/app/organisms/room/RoomViewContent.jsx

@@ -63,7 +63,7 @@ function genRoomIntro(mEvent, roomTimeline) {
       avatarSrc={avatarSrc}
       name={roomTimeline.room.name}
       heading={`Welcome to ${roomTimeline.room.name}`}
-      desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
+      desc={`This is the beginning of the ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
       time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
     />
   );

src/app/organisms/settings/DeviceManage.jsx

@@ -107,7 +107,7 @@ function DeviceManage() {
 
   const handleRemove = async (device, auth = undefined) => {
     if (auth === undefined
-      ? window.confirm(`You are about to logout "${device.display_name}" session?`)
+      ? window.confirm(`You are about to logout "${device.display_name}" session.`)
       : true
     ) {
       addToProcessing(device);

src/app/organisms/space-settings/SpaceSettings.jsx

@@ -90,7 +90,7 @@ function GeneralSettings({ roomId }) {
         <MenuItem
           variant="danger"
           onClick={() => {
-            if (confirm('Are you really want to leave this space?')) {
+            if (confirm('Are you sure that you want to leave this space?')) {
               leave(roomId);
             }
           }}

src/client/action/navigation.js

@@ -150,3 +150,12 @@ export function openReusableContextMenu(placement, cords, render, afterClose) {
     afterClose,
   });
 }
+
+export function openReusableDialog(title, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
+    title,
+    render,
+    afterClose,
+  });
+}

src/client/state/RoomList.js

@@ -206,7 +206,7 @@ class RoomList extends EventEmitter {
     this.matrixClient.getRooms().forEach((room) => {
       const { roomId } = room;
       const tombstone = room.currentState.events.get('m.room.tombstone');
-      if (typeof tombstone !== 'undefined') {
+      if (tombstone?.get('') !== undefined) {
         const repRoomId = tombstone.get('').getContent().replacement_room;
         const repRoomMembership = this.matrixClient.getRoom(repRoomId)?.getMyMembership();
         if (repRoomMembership === 'join') return;

src/client/state/cons.js

@@ -47,6 +47,7 @@ const cons = {
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
     },
     room: {
       JOIN: 'JOIN',
@@ -92,6 +93,7 @@ const cons = {
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',

src/client/state/navigation.js

@@ -174,6 +174,14 @@ class Navigation extends EventEmitter {
           action.afterClose,
         );
       },
+      [cons.actions.navigation.OPEN_REUSABLE_DIALOG]: () => {
+        this.emit(
+          cons.events.navigation.REUSABLE_DIALOG_OPENED,
+          action.title,
+          action.render,
+          action.afterClose,
+        );
+      },
     };
     actions[action.type]?.();
   }