Merge pull request #5225 from matrix-org/travis/ft-sep1620/09-enc-files

Add a note to use the desktop builds when seshat isn't available

src/components/structures/FilePanel.js

@@ -25,6 +25,7 @@ import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 import BaseCard from "../views/right_panel/BaseCard";
 import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
+import DesktopBuildsNotice, {WarningKind} from "../views/elements/DesktopBuildsNotice";
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -222,6 +223,8 @@ class FilePanel extends React.Component {
             <p>{_t('Attach files from chat or just drag and drop them anywhere in a room.')}</p>
         </div>);
 
+        const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
+
         if (this.state.timelineSet) {
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
             //             "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
@@ -232,6 +235,7 @@ class FilePanel extends React.Component {
                     previousPhase={RightPanelPhases.RoomSummary}
                     withoutScrollContainer
                 >
+                    <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
                     <TimelinePanel
                         manageReadReceipts={false}
                         manageReadMarkers={false}

src/components/structures/RoomView.tsx

@@ -1866,6 +1866,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 searchInProgress={this.state.searchInProgress}
                 onCancelClick={this.onCancelSearchClick}
                 onSearch={this.onSearch}
+                isRoomEncrypted={this.context.isRoomEncrypted(this.state.room.roomId)}
             />;
         } else if (showRoomUpgradeBar) {
             aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -0,0 +1,77 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import EventIndexPeg from "../../../indexing/EventIndexPeg";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import React from "react";
+
+export enum WarningKind {
+    Files,
+    Search,
+}
+
+interface IProps {
+    isRoomEncrypted: boolean;
+    kind: WarningKind;
+}
+
+export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) {
+    if (!isRoomEncrypted) return null;
+    if (EventIndexPeg.get()) return null;
+
+    const {desktopBuilds, brand} = SdkConfig.get();
+
+    let text = null;
+    let logo = null;
+    if (desktopBuilds.available) {
+        logo = <img src={desktopBuilds.logo} />;
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("Use the <a>Desktop app</a> to see all encrypted files", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+            case WarningKind.Search:
+                text = _t("Use the <a>Desktop app</a> to search encrypted messages", {}, {
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                });
+                break;
+        }
+    } else {
+        switch (kind) {
+            case WarningKind.Files:
+                text = _t("This version of %(brand)s does not support viewing some encrypted files", {brand});
+                break;
+            case WarningKind.Search:
+                text = _t("This version of %(brand)s does not support searching encrypted messages", {brand});
+                break;
+        }
+    }
+
+    // for safety
+    if (!text) {
+        console.warn("Unknown desktop builds warning kind: ", kind);
+        return null;
+    }
+
+    return (
+        <div className="mx_DesktopBuildsNotice">
+            {logo}
+            <span>{text}</span>
+        </div>
+    );
+}

src/components/views/rooms/SearchBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +20,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
+import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice";
 
 export default class SearchBar extends React.Component {
     constructor(props) {
@@ -72,21 +74,24 @@ export default class SearchBar extends React.Component {
         });
 
         return (
-            <div className="mx_SearchBar">
-                <div className="mx_SearchBar_buttons" role="radiogroup">
-                    <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
-                        {_t("This Room")}
-                    </AccessibleButton>
-                    <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
-                        {_t("All Rooms")}
-                    </AccessibleButton>
+            <>
+                <div className="mx_SearchBar">
+                    <div className="mx_SearchBar_buttons" role="radiogroup">
+                        <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick} aria-checked={this.state.scope === 'Room'} role="radio">
+                            {_t("This Room")}
+                        </AccessibleButton>
+                        <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick} aria-checked={this.state.scope === 'All'} role="radio">
+                            {_t("All Rooms")}
+                        </AccessibleButton>
+                    </div>
+                    <div className="mx_SearchBar_input mx_textinput">
+                        <input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
+                        <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
+                    </div>
+                    <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
                 </div>
-                <div className="mx_SearchBar_input mx_textinput">
-                    <input ref={this._search_term} type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange} />
-                    <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch} />
-                </div>
-                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
-            </div>
+                <DesktopBuildsNotice isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
+            </>
         );
     }
 }