New UI features (#7)

* 1805 New-Ui-Features * new ui features - tests * new ui features - tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests * 1814 - New UI Features, tests
verji · Mar 12, 2024 · bba2f5a · bba2f5a
1 parent 88e833e
commit bba2f5a
Show file tree

Hide file tree

Showing 18 changed files with 317 additions and 66 deletions.
diff --git a/jest.config.ts b/jest.config.ts
@@ -20,10 +20,11 @@ import type { Config } from "jest";
 
 const config: Config = {
     testEnvironment: "jsdom",
-    testMatch: ["<rootDir>/test/**/*-test.[jt]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[jt]s?(x)", "<rootDir>/test/**/**/*-test.[jt]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
+    moduleFileExtensions: ["js", "jsx", "json", "ts", "tsx"],
     moduleNameMapper: {
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",

diff --git a/package.json b/package.json
@@ -218,6 +218,7 @@
         "postcss-scss": "^4.0.4",
         "prettier": "3.2.5",
         "raw-loader": "^4.0.2",
+        "react-test-renderer": "17.0.2",
         "rimraf": "^5.0.0",
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",

diff --git a/src/Login.ts b/src/Login.ts
@@ -291,7 +291,7 @@ export async function sendLoginRequest(
         accessToken: data.access_token,
     };
 
-    // SecurityCustomisations.examineLoginResponse?.(data, creds); 
+    // SecurityCustomisations.examineLoginResponse?.(data, creds);
     ModuleRunner.instance.extensions.cryptoSetup?.examineLoginResponse(data, creds);
 
     return creds;

diff --git a/src/MatrixClientPeg.ts b/src/MatrixClientPeg.ts
@@ -468,9 +468,9 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         //     opts.cryptoCallbacks!.getDehydrationKey = SecurityCustomisations.getDehydrationKey;
         // }
 
-        console.log("CryptoSetupExtensions: Executing getDehydrationKeyCallback...")
+        console.log("CryptoSetupExtensions: Executing getDehydrationKeyCallback...");
         const dehydrationKeyCallback = ModuleRunner.instance.extensions.cryptoSetup?.getDehydrationKeyCallback();
-        console.log("CryptoSetupExtensions: Executing getDehydrationKeyCallback...Done")
+        console.log("CryptoSetupExtensions: Executing getDehydrationKeyCallback...Done");
         if (dehydrationKeyCallback) {
             opts.cryptoCallbacks!.getDehydrationKey = dehydrationKeyCallback;
         }

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { useContext, useState } from "react";
+import { useState } from "react";
 
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getHomePageUrl } from "../../utils/pages";
@@ -28,10 +28,13 @@ import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { useEventEmitter } from "../../hooks/useEventEmitter";
-import MatrixClientContext, { useMatrixClientContext } from "../../contexts/MatrixClientContext";
+import { useMatrixClientContext } from "../../contexts/MatrixClientContext";
 import MiniAvatarUploader, { AVATAR_SIZE } from "../views/elements/MiniAvatarUploader";
 import PosthogTrackers from "../../PosthogTrackers";
 import EmbeddedPage from "./EmbeddedPage";
+import SettingsStore from "../../settings/SettingsStore";
+import { UIFeature } from "../../settings/UIFeature";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 const onClickSendDm = (ev: ButtonEvent): void => {
     PosthogTrackers.trackInteraction("WebHomeCreateChatButton", ev);
@@ -63,7 +66,8 @@ const getOwnProfile = (
 });
 
 const UserWelcomeTop: React.FC = () => {
-    const cli = useContext(MatrixClientContext);
+    // const cli = useContext(MatrixClientContext);
+    const cli = MatrixClientPeg.safeGet();
     const userId = cli.getUserId()!;
     const [ownProfile, setOwnProfile] = useState(getOwnProfile(userId));
     useEventEmitter(OwnProfileStore.instance, UPDATE_EVENT, () => {
@@ -94,6 +98,38 @@ const UserWelcomeTop: React.FC = () => {
     );
 };
 
+// //Buttons on homepage can be enabled (true), or disabled (false) setting the UIFeature.HomePageButtons in settings.tsx
+// const ShowButtons = () => {
+//     return (
+//         <div className="mx_HomePage_default_buttons">
+//             <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
+//                 {_tDom("onboarding|send_dm")}
+//             </AccessibleButton>
+//             <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
+//                 {_tDom("onboarding|explore_rooms")}
+//             </AccessibleButton>
+//             <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
+//                 {_tDom("onboarding|create_room")}
+//             </AccessibleButton>
+//         </div>
+//     )
+// }
+
+//Buttons on homepage can be enabled (true), or disabled (false) setting the UIFeature.HomePageButtons in settings.tsx
+const showButtons = (
+    <div className="mx_HomePage_default_buttons">
+        <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
+            {_tDom("onboarding|send_dm")}
+        </AccessibleButton>
+        <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
+            {_tDom("onboarding|explore_rooms")}
+        </AccessibleButton>
+        <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
+            {_tDom("onboarding|create_room")}
+        </AccessibleButton>
+    </div>
+);
+
 const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
     const cli = useMatrixClientContext();
     const config = SdkConfig.get();
@@ -123,17 +159,8 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         <AutoHideScrollbar className="mx_HomePage mx_HomePage_default" element="main">
             <div className="mx_HomePage_default_wrapper">
                 {introSection}
-                <div className="mx_HomePage_default_buttons">
-                    <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
-                        {_tDom("onboarding|send_dm")}
-                    </AccessibleButton>
-                    <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
-                        {_tDom("onboarding|explore_rooms")}
-                    </AccessibleButton>
-                    <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
-                        {_tDom("onboarding|create_room")}
-                    </AccessibleButton>
-                </div>
+                {/* {SettingsStore.getValue(UIFeature.HomePageButtons) && <ShowButtons>} */}
+                {SettingsStore.getValue(UIFeature.HomePageButtons) && showButtons}
             </div>
         </AutoHideScrollbar>
     );

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
@@ -444,11 +444,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             // if the user has previously set up cross-signing, verify this device so we can fetch the
             // private keys.
 
-
             // if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
             const cryptoExtension = ModuleRunner.instance.extensions.cryptoSetup;
             if (cryptoExtension !== undefined && cryptoExtension.SHOW_ENCRYPTION_SETUP_UI == false) {
-                            this.onLoggedIn();
+                this.onLoggedIn();
             } else {
                 this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
             }

diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -34,6 +34,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabelledCheckbox from "../elements/LabelledCheckbox";
+import { UIFeature } from "../../../settings/UIFeature";
 
 interface IProps {
     type?: RoomType;
@@ -412,37 +413,51 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                             className="mx_CreateRoomDialog_topic"
                         />
 
-                        <JoinRuleDropdown
-                            label={_t("create_room|room_visibility_label")}
-                            labelInvite={_t("create_room|join_rule_invite")}
-                            labelKnock={
-                                this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
-                            }
-                            labelPublic={_t("common|public_room")}
-                            labelRestricted={
-                                this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
-                            }
-                            value={this.state.joinRule}
-                            onChange={this.onJoinRuleChange}
-                        />
+                        {/* For those who only want to create private room, set the CreateRoomShowJoinRuleDropdown to false in settings.tsx,
+                        for public rooms and knock rooms, set the flag to true */}
+                        {SettingsStore.getValue(UIFeature.CreateRoomShowJoinRuleDropdown) && (
+                            <>
+                                <JoinRuleDropdown
+                                    label={_t("create_room|room_visibility_label")}
+                                    labelInvite={_t("create_room|join_rule_invite")}
+                                    labelKnock={
+                                        this.askToJoinEnabled ? _t("room_settings|security|join_rule_knock") : undefined
+                                    }
+                                    labelPublic={_t("common|public_room")}
+                                    labelRestricted={
+                                        this.supportsRestricted ? _t("create_room|join_rule_restricted") : undefined
+                                    }
+                                    value={this.state.joinRule}
+                                    onChange={this.onJoinRuleChange}
+                                />
+                            </>
+                        )}
 
                         {publicPrivateLabel}
                         {visibilitySection}
-                        {e2eeSection}
+                        {/* To create only encrypted room, the options can be hidden by setting the flag to false in in settings.tsx, */}
+                        {SettingsStore.getValue(UIFeature.CreateRoomE2eeSection) && e2eeSection}
                         {aliasField}
-                        <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
-                            <summary className="mx_CreateRoomDialog_details_summary">
-                                {this.state.detailsOpen ? _t("action|hide_advanced") : _t("action|show_advanced")}
-                            </summary>
-                            <LabelledToggleSwitch
-                                label={_t("create_room|unfederated", {
-                                    serverName: MatrixClientPeg.getHomeserverName(),
-                                })}
-                                onChange={this.onNoFederateChange}
-                                value={this.state.noFederate}
-                            />
-                            <p>{federateLabel}</p>
-                        </details>
+                        {/* To limit the usage to only your server, set flag to false in in settings.tsx, */}
+                        {SettingsStore.getValue(UIFeature.CreateRoomShowAdvancedSettings) && (
+                            <>
+                                <details onToggle={this.onDetailsToggled} className="mx_CreateRoomDialog_details">
+                                    <summary className="mx_CreateRoomDialog_details_summary">
+                                        {this.state.detailsOpen
+                                            ? _t("action|hide_advanced")
+                                            : _t("action|show_advanced")}
+                                    </summary>
+                                    <LabelledToggleSwitch
+                                        label={_t("create_room|unfederated", {
+                                            serverName: MatrixClientPeg.getHomeserverName(),
+                                        })}
+                                        onChange={this.onNoFederateChange}
+                                        value={this.state.noFederate}
+                                    />
+                                    <p>{federateLabel}</p>
+                                </details>
+                            </>
+                        )}
                     </div>
                 </form>
                 <DialogButtons

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
@@ -70,7 +70,7 @@ import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInse
 import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog";
 import { bulkSpaceBehaviour } from "../../../utils/space";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { IRightPanelCardState } from "../../../stores/right-panel/RightPanelStoreIPanelState";
@@ -82,6 +82,7 @@ import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
 import UIStore from "../../../stores/UIStore";
 import { SpaceScopeHeader } from "../rooms/SpaceScopeHeader";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -208,7 +209,7 @@ export function DeviceItem({
 
     const onDeviceClick = (): void => {
         const user = cli.getUser(userId);
-        if (user) {
+        if (user && SettingsStore.getValue(UIFeature.UserInfoVerifyDevice)) {
             verifyDevice(cli, user, device);
         }
     };
@@ -530,7 +531,8 @@ export const UserOptionsSection: React.FC<{
             <div>
                 {directMessageButton}
                 {readReceiptButton}
-                {shareUserButton}
+                {/* If you donw want users to send a room link, disable flag in settings.tsx */}
+                {SettingsStore.getValue(UIFeature.UserInfoShareLinkToUserButton) && shareUserButton}
                 {insertPillButton}
                 {inviteUserButton}
                 {ignoreButton}
@@ -1044,7 +1046,8 @@ export const RoomAdminToolsContainer: React.FC<IBaseRoomProps> = ({
                 {muteButton}
                 {kickButton}
                 {banButton}
-                {redactButton}
+                {/* If you dont want users to be able to delete messages, set the flag to false in settings.tsx */}
+                {SettingsStore.getValue(UIFeature.UserInfoRedactButton) && redactButton}
                 {children}
             </GenericAdminToolsContainer>
         );

diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
@@ -31,7 +31,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import PosthogTrackers from "../../../PosthogTrackers";
 import SettingsStore from "../../../settings/SettingsStore";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
-import { UIComponent } from "../../../settings/UIFeature";
+import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { ITagMap } from "../../../stores/room-list/algorithms/models";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
@@ -323,7 +323,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                         )}
                     </>
                 )}
-                {showExploreRooms ? (
+                {SettingsStore.getValue(UIFeature.UserInfoRedactButton) && showExploreRooms ? (
                     <IconizedContextMenuOption
                         label={_t("action|explore_public_rooms")}
                         iconClassName="mx_RoomList_iconExplore"

diff --git a/src/modules/ModuleRunner.ts b/src/modules/ModuleRunner.ts
@@ -82,7 +82,6 @@ export class ModuleRunner {
         return merged;
     }
 
-
     /**
      * Ensure we register extensions provided by the modules
      */

diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
@@ -1215,6 +1215,38 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
     },
+    [UIFeature.HomePageButtons]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.UserInfoVerifyDevice]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.UserInfoShareLinkToUserButton]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.UserInfoRedactButton]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.RoomListExplorePublicRooms]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.CreateRoomE2eeSection]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.CreateRoomShowJoinRuleDropdown]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
+    [UIFeature.CreateRoomShowAdvancedSettings]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
 
     // Electron-specific settings, they are stored by Electron and set/read over an IPC.
     // We store them over there are they are necessary to know before the renderer process launches.

diff --git a/src/settings/UIFeature.ts b/src/settings/UIFeature.ts
@@ -33,6 +33,14 @@ export const enum UIFeature {
     RoomHistorySettings = "UIFeature.roomHistorySettings",
     TimelineEnableRelativeDates = "UIFeature.timelineEnableRelativeDates",
     BulkUnverifiedSessionsReminder = "UIFeature.BulkUnverifiedSessionsReminder",
+    HomePageButtons = "UIFeature.homePageButtons",
+    UserInfoVerifyDevice = "UIFeature.userInfoVerifyDevice",
+    UserInfoShareLinkToUserButton = "UIFeature.userInfoShareLinkToUserButton",
+    UserInfoRedactButton = "UIFeature.userInfoRedactButton",
+    RoomListExplorePublicRooms = "UIFeature.roomListExplorePublicRooms",
+    CreateRoomE2eeSection = "UIFeature.createRoomE2eeSection",
+    CreateRoomShowJoinRuleDropdown = "UIFeature.createRoomShowJoinRuleDropdown",
+    CreateRoomShowAdvancedSettings = "UIFeature.createRoomShowAdvancedSettings",
 }
 
 export enum UIComponent {

diff --git a/src/toasts/SetupEncryptionToast.ts b/src/toasts/SetupEncryptionToast.ts
@@ -84,10 +84,12 @@ export const showToast = (kind: Kind): void => {
     //     return;
     // }
 
-    if (ModuleRunner.instance.extensions.cryptoSetup?.setupEncryptionNeeded({
+    if (
+        ModuleRunner.instance.extensions.cryptoSetup?.setupEncryptionNeeded({
             kind: kind as any,
             storeProvider: { getInstance: () => SetupEncryptionStore.sharedInstance() },
-        })) {
+        })
+    ) {
         return;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -82,7 +82,6 @@ export class ModuleRunner { @@
             return merged;
         }
         /**
          * Ensure we register extensions provided by the modules
          */
@@ Expand Down @@