Merge pull request #6899 from KalleStruik/19245-improve-styling-of-search-initialization-errors

Improve the styling of search initialization errors.

res/css/_components.scss

@@ -143,7 +143,7 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_CopyableText.scss";
-@import "./views/elements/_DesktopBuildsNotice.scss";
+@import "./views/elements/_SearchWarning.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
 @import "./views/elements/_DialPadBackspaceButton.scss";
 @import "./views/elements/_DirectorySearchBox.scss";

res/css/views/elements/_SearchWarning.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DesktopBuildsNotice {
+.mx_SearchWarning {
     text-align: center;
     padding: 0 16px;
 

src/components/structures/FilePanel.tsx

@@ -27,7 +27,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClientPeg } from '../../MatrixClientPeg';
 import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
-import DesktopBuildsNotice, { WarningKind } from "../views/elements/DesktopBuildsNotice";
+import SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
 import BaseCard from "../views/right_panel/BaseCard";
 import ResizeNotifier from '../../utils/ResizeNotifier';
 import TimelinePanel from "./TimelinePanel";
@@ -275,7 +275,7 @@ class FilePanel extends React.Component<IProps, IState> {
                             sensor={this.card.current}
                             onMeasurement={this.onMeasurement}
                         />
-                        <DesktopBuildsNotice isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
+                        <SearchWarning isRoomEncrypted={isRoomEncrypted} kind={WarningKind.Files} />
                         <TimelinePanel
                             manageReadReceipts={false}
                             manageReadMarkers={false}

src/components/views/elements/SearchWarning.tsx

@@ -35,12 +35,13 @@ interface IProps {
     kind: WarningKind;
 }
 
-export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
+export default function SearchWarning({ isRoomEncrypted, kind }: IProps) {
     if (!isRoomEncrypted) return null;
     if (EventIndexPeg.get()) return null;
 
     if (EventIndexPeg.error) {
-        return <>
+        return (
+            <div className="mx_SearchWarning">
                 { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
                     a: sub => (
                         <AccessibleButton
@@ -56,7 +57,8 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
                             { sub }
                         </AccessibleButton>),
                 }) }
-        </>;
+            </div>
+        );
     }
 
     const brand = SdkConfig.get("brand");
@@ -97,7 +99,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
     }
 
     return (
-        <div className="mx_DesktopBuildsNotice">
+        <div className="mx_SearchWarning">
             { logo }
             <span>{ text }</span>
         </div>

src/components/views/rooms/SearchBar.tsx

@@ -20,10 +20,10 @@ import classNames from "classnames";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import { _t } from '../../../languageHandler';
-import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice";
 import { PosthogScreenTracker } from '../../../PosthogTrackers';
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import SearchWarning, { WarningKind } from "../elements/SearchWarning";
 
 interface IProps {
     onCancelClick: () => void;
@@ -127,7 +127,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
                     </div>
                     <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick} />
                 </div>
-                <DesktopBuildsNotice isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
+                <SearchWarning isRoomEncrypted={this.props.isRoomEncrypted} kind={WarningKind.Search} />
             </>
         );
     }

src/i18n/strings/en_EN.json

@@ -2249,11 +2249,6 @@
     "Error - Mixed content": "Error - Mixed content",
     "Popout widget": "Popout widget",
     "Copy": "Copy",
-    "Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",
-    "Use the <a>Desktop app</a> to see all encrypted files": "Use the <a>Desktop app</a> to see all encrypted files",
-    "Use the <a>Desktop app</a> to search encrypted messages": "Use the <a>Desktop app</a> to search encrypted messages",
-    "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files",
-    "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages",
     "Share entire screen": "Share entire screen",
     "Application window": "Application window",
     "Share content": "Share content",
@@ -2380,6 +2375,11 @@
     "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
     "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
     "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
+    "Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",
+    "Use the <a>Desktop app</a> to see all encrypted files": "Use the <a>Desktop app</a> to see all encrypted files",
+    "Use the <a>Desktop app</a> to search encrypted messages": "Use the <a>Desktop app</a> to search encrypted messages",
+    "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files",
+    "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages",
     "Server Options": "Server Options",
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.",
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",

test/components/views/rooms/SearchBar-test.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import { mount } from "enzyme";
 
-import DesktopBuildsNotice from "../../../../src/components/views/elements/DesktopBuildsNotice";
+import SearchWarning from "../../../../src/components/views/elements/SearchWarning";
 import { PosthogScreenTracker } from "../../../../src/PosthogTrackers";
 import SearchBar, { SearchScope } from "../../../../src/components/views/rooms/SearchBar";
 import { KeyBindingAction } from "../../../../src/accessibility/KeyboardShortcuts";
@@ -39,8 +39,8 @@ jest.mock("../../../../src/KeyBindingsManager", () => ({
         { getAccessibilityAction: jest.fn(() => mockCurrentEvent) })),
 }));
 
-/** mock out DesktopBuildsNotice component so it doesn't affect the result of our test */
+/** mock out SearchWarning component so it doesn't affect the result of our test */
-jest.mock('../../../../src/components/views/elements/DesktopBuildsNotice', () => ({
+jest.mock('../../../../src/components/views/elements/SearchWarning', () => ({
     __esModule: true,
     WarningKind: {
         get Search() { // eslint-disable-line @typescript-eslint/naming-convention
@@ -73,13 +73,13 @@ describe("SearchBar", () => {
 
     it("must render child components and pass necessary props", () => {
         const postHogScreenTracker = wrapper.find(PosthogScreenTracker);
-        const desktopBuildNotice = wrapper.find(DesktopBuildsNotice);
+        const searchWarning = wrapper.find(SearchWarning);
 
         expect(postHogScreenTracker.length).toBe(1);
-        expect(desktopBuildNotice.length).toBe(1);
+        expect(searchWarning.length).toBe(1);
         expect(postHogScreenTracker.props().screenName).toEqual("RoomSearch");
-        expect(desktopBuildNotice.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted);
+        expect(searchWarning.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted);
-        expect(desktopBuildNotice.props().kind).toEqual(mockWarningKind);
+        expect(searchWarning.props().kind).toEqual(mockWarningKind);
     });
 
     it("must not search when input value is empty", () => {