Merge remote-tracking branch 'upstream/develop' into feature_confetti#14676

src/components/views/rooms/AppsDrawer.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useState} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Resizable} from "re-resizable";
@@ -24,15 +24,16 @@ import AppTile from '../elements/AppTile';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
-import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
-import AccessibleButton from '../elements/AccessibleButton';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import {useLocalStorageState} from "../../../hooks/useLocalStorageState";
 import ResizeNotifier from "../../../utils/ResizeNotifier";
 import WidgetStore from "../../../stores/WidgetStore";
+import ResizeHandle from "../elements/ResizeHandle";
+import Resizer from "../../../resizer/resizer";
+import PercentageDistributor from "../../../resizer/distributors/percentage";
 
 export default class AppsDrawer extends React.Component {
     static propTypes = {
@@ -52,6 +53,11 @@ export default class AppsDrawer extends React.Component {
         this.state = {
             apps: this._getApps(),
         };
+
+        this._resizeContainer = null;
+        this.resizer = this._createResizer();
+
+        this.props.resizeNotifier.on("isResizing", this.onIsResizing);
     }
 
     componentDidMount() {
@@ -64,6 +70,10 @@ export default class AppsDrawer extends React.Component {
         ScalarMessaging.stopListening();
         WidgetStore.instance.off(this.props.room.roomId, this._updateApps);
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+        this.props.resizeNotifier.off("isResizing", this.onIsResizing);
     }
 
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@@ -73,6 +83,95 @@ export default class AppsDrawer extends React.Component {
         this._updateApps();
     }
 
+    onIsResizing = (resizing) => {
+        this.setState({ resizing });
+        if (!resizing) {
+            this._relaxResizer();
+        }
+    };
+
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const collapseConfig = {
+            onResizeStart: () => {
+                this._resizeContainer.classList.add("mx_AppsDrawer_resizing");
+            },
+            onResizeStop: () => {
+                this._resizeContainer.classList.remove("mx_AppsDrawer_resizing");
+                // persist to localStorage
+                localStorage.setItem(this._getStorageKey(), JSON.stringify([
+                    this.state.apps.map(app => app.id),
+                    ...this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size),
+                ]));
+            },
+        };
+        // pass a truthy container for now, we won't call attach until we update it
+        const resizer = new Resizer({}, PercentageDistributor, collapseConfig);
+        resizer.setClassNames(classNames);
+        return resizer;
+    }
+
+    _collectResizer = (ref) => {
+        if (this._resizeContainer) {
+            this.resizer.detach();
+        }
+
+        if (ref) {
+            this.resizer.container = ref;
+            this.resizer.attach();
+        }
+        this._resizeContainer = ref;
+        this._loadResizerPreferences();
+    };
+
+    _getStorageKey = () => `mx_apps_drawer-${this.props.room.roomId}`;
+
+    _getAppsHash = (apps) => apps.map(app => app.id).join("~");
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this._getAppsHash(this.state.apps) !== this._getAppsHash(prevState.apps)) {
+            this._loadResizerPreferences();
+        }
+    }
+
+    _relaxResizer = () => {
+        const distributors = this.resizer.getDistributors();
+
+        // relax all items if they had any overconstrained flexboxes
+        distributors.forEach(d => d.start());
+        distributors.forEach(d => d.finish());
+    };
+
+    _loadResizerPreferences = () => {
+        try {
+            const [[...lastIds], ...sizes] = JSON.parse(localStorage.getItem(this._getStorageKey()));
+            // Every app was included in the last split, reuse the last sizes
+            if (this.state.apps.length <= lastIds.length && this.state.apps.every((app, i) => lastIds[i] === app.id)) {
+                sizes.forEach((size, i) => {
+                    const distributor = this.resizer.forHandleAt(i);
+                    if (distributor) {
+                        distributor.size = size;
+                        distributor.finish();
+                    }
+                });
+                return;
+            }
+        } catch (e) {
+            // this is expected
+        }
+
+        if (this.state.apps) {
+            const distributors = this.resizer.getDistributors();
+            distributors.forEach(d => d.item.clearSize());
+            distributors.forEach(d => d.start());
+            distributors.forEach(d => d.finish());
+        }
+    };
+
     onAction = (action) => {
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
@@ -91,7 +190,7 @@ export default class AppsDrawer extends React.Component {
         }
     };
 
-    _getApps = () => WidgetStore.instance.getApps(this.props.room, true);
+    _getApps = () => WidgetStore.instance.getPinnedApps(this.props.room.roomId);
 
     _updateApps = () => {
         this.setState({
@@ -99,15 +198,6 @@ export default class AppsDrawer extends React.Component {
         });
     };
 
-    _canUserModify() {
-        try {
-            return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-        } catch (err) {
-            console.error(err);
-            return false;
-        }
-    }
-
     _launchManageIntegrations() {
         if (SettingsStore.getValue("feature_many_integration_managers")) {
             IntegrationManagers.sharedInstance().openAll();
@@ -116,12 +206,9 @@ export default class AppsDrawer extends React.Component {
         }
     }
 
-    onClickAddWidget = (e) => {
-        e.preventDefault();
-        this._launchManageIntegrations();
-    };
-
     render() {
+        if (!this.props.showApps) return <div />;
+
         const apps = this.state.apps.map((app, index, arr) => {
             const capWhitelist = WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, this.props.room.roomId);
 
@@ -131,7 +218,6 @@ export default class AppsDrawer extends React.Component {
                 fullWidth={arr.length < 2}
                 room={this.props.room}
                 userId={this.props.userId}
-                show={this.props.showApps}
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}
@@ -143,21 +229,6 @@ export default class AppsDrawer extends React.Component {
             return <div />;
         }
 
-        let addWidget;
-        if (this.props.showApps &&
-            this._canUserModify()
-        ) {
-            addWidget = <AccessibleButton
-                onClick={this.onClickAddWidget}
-                className={this.state.apps.length<2 ?
-                    'mx_AddWidget_button mx_AddWidget_button_full_width' :
-                    'mx_AddWidget_button'
-                }
-                title={_t('Add a widget')}>
-                [+] { _t('Add a widget') }
-            </AccessibleButton>;
-        }
-
         let spinner;
         if (
             apps.length === 0 && WidgetEchoStore.roomHasPendingWidgets(
@@ -170,9 +241,11 @@ export default class AppsDrawer extends React.Component {
         }
 
         const classes = classNames({
-            "mx_AppsDrawer": true,
-            "mx_AppsDrawer_fullWidth": apps.length < 2,
-            "mx_AppsDrawer_minimised": !this.props.showApps,
+            mx_AppsDrawer: true,
+            mx_AppsDrawer_fullWidth: apps.length < 2,
+            mx_AppsDrawer_resizing: this.state.resizing,
+            mx_AppsDrawer_2apps: apps.length === 2,
+            mx_AppsDrawer_3apps: apps.length === 3,
         });
 
         return (
@@ -182,13 +255,20 @@ export default class AppsDrawer extends React.Component {
                     minHeight={100}
                     maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined}
                     handleClass="mx_AppsContainer_resizerHandle"
-                    className="mx_AppsContainer"
+                    className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >
-                    { apps }
-                    { spinner }
+                    <div className="mx_AppsContainer" ref={this._collectResizer}>
+                        { apps.map((app, i) => {
+                            if (i < 1) return app;
+                            return <React.Fragment key={app.key}>
+                                <ResizeHandle reverse={i > apps.length / 2} />
+                                { app }
+                            </React.Fragment>;
+                        }) }
+                    </div>
                 </PersistentVResizer>
-                { this._canUserModify() && addWidget }
+                { spinner }
             </div>
         );
     }
@@ -205,14 +285,12 @@ const PersistentVResizer = ({
     children,
 }) => {
     const [height, setHeight] = useLocalStorageState("pvr_" + id, 280); // old fixed height was 273px
-    const [resizing, setResizing] = useState(false);
 
     return <Resizable
         size={{height: Math.min(height, maxHeight)}}
         minHeight={minHeight}
         maxHeight={maxHeight}
         onResizeStart={() => {
-            if (!resizing) setResizing(true);
             resizeNotifier.startResizing();
         }}
         onResize={() => {
@@ -220,14 +298,11 @@ const PersistentVResizer = ({
         }}
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
-            if (resizing) setResizing(false);
             resizeNotifier.stopResizing();
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}
-        className={classNames(className, {
-            mx_AppsDrawer_resizing: resizing,
-        })}
+        className={className}
         enable={{bottom: true}}
     >
         { children }

src/components/views/rooms/RoomHeader.js

@@ -42,6 +42,8 @@ export default class RoomHeader extends React.Component {
         onLeaveClick: PropTypes.func,
         onCancelClick: PropTypes.func,
         e2eStatus: PropTypes.string,
+        onAppsClick: PropTypes.func,
+        appsShown: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -230,6 +232,17 @@ export default class RoomHeader extends React.Component {
                     title={_t("Forget room")} />;
         }
 
+        let appsButton;
+        if (this.props.onAppsClick) {
+            appsButton =
+                <AccessibleTooltipButton
+                    className={classNames("mx_RoomHeader_button mx_RoomHeader_appsButton", {
+                        mx_RoomHeader_appsButton_highlight: this.props.appsShown,
+                    })}
+                    onClick={this.props.onAppsClick}
+                    title={this.props.appsShown ? _t("Hide Widgets") : _t("Show Widgets")} />;
+        }
+
         let searchButton;
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
@@ -243,6 +256,7 @@ export default class RoomHeader extends React.Component {
             <div className="mx_RoomHeader_buttons">
                 { pinnedEventsButton }
                 { forgetButton }
+                { appsButton }
                 { searchButton }
             </div>;
 

src/components/views/rooms/RoomList.tsx

@@ -53,7 +53,6 @@ interface IProps {
     onBlur: (ev: React.FocusEvent) => void;
     onResize: () => void;
     resizeNotifier: ResizeNotifier;
-    collapsed: boolean;
     isMinimized: boolean;
 }
 
@@ -366,7 +365,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
 
     public render() {
         let explorePrompt: JSX.Element;
-        if (RoomListStore.instance.getFirstNameFilterCondition()) {
+        if (!this.props.isMinimized && RoomListStore.instance.getFirstNameFilterCondition()) {
             explorePrompt = <div className="mx_RoomList_explorePrompt">
                 <div>{_t("Can't see what you’re looking for?")}</div>
                 <AccessibleButton kind="link" onClick={this.onExplore}>

src/components/views/rooms/RoomSublist.tsx

@@ -399,6 +399,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
         await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
+        this.forceUpdate(); // because if the sublist doesn't have any changes then we will miss the list order change
     };
 
     private onTagSortChanged = async (sort: SortAlgorithm) => {

src/components/views/rooms/Stickerpicker.js

@@ -272,13 +272,10 @@ export default class Stickerpicker extends React.Component {
                             userId={MatrixClientPeg.get().credentials.userId}
                             creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
                             waitForIframeLoad={true}
-                            show={true}
                             showMenubar={true}
                             onEditClick={this._launchManageIntegrations}
                             onDeleteClick={this._removeStickerpickerWidgets}
                             showTitle={false}
-                            showMinimise={true}
-                            showDelete={false}
                             showCancel={false}
                             showPopout={false}
                             onMinimiseClick={this._onHideStickersClick}