From 7c07ad155cd086b54db51361b483e71076e59210 Mon Sep 17 00:00:00 2001 From: Kalle Struik Date: Sun, 3 Oct 2021 17:38:49 +0200 Subject: [PATCH] Improve the styling of search initialization errors. Signed-off-by: Kalle Struik --- res/css/_components.scss | 2 +- ...pBuildsNotice.scss => _SearchWarning.scss} | 2 +- src/components/structures/FilePanel.tsx | 4 +- ...ktopBuildsNotice.tsx => SearchWarning.tsx} | 40 ++++++++++--------- src/components/views/rooms/SearchBar.tsx | 4 +- .../components/views/rooms/SearchBar-test.tsx | 14 +++---- 6 files changed, 34 insertions(+), 32 deletions(-) rename res/css/views/elements/{_DesktopBuildsNotice.scss => _SearchWarning.scss} (96%) rename src/components/views/elements/{DesktopBuildsNotice.tsx => SearchWarning.tsx} (74%) diff --git a/res/css/_components.scss b/res/css/_components.scss index 6988c01789..d1576d6ec8 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/elements/_DesktopBuildsNotice.scss b/res/css/views/elements/_SearchWarning.scss similarity index 96% rename from res/css/views/elements/_DesktopBuildsNotice.scss rename to res/css/views/elements/_SearchWarning.scss index 3672595bf1..c69cfd561b 100644 --- a/res/css/views/elements/_DesktopBuildsNotice.scss +++ b/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; diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index d248c6556f..d2f53f5170 100644 --- a/src/components/structures/FilePanel.tsx +++ b/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 { sensor={this.card.current} onMeasurement={this.onMeasurement} /> - + - { _t("Message search initialisation failed, check your settings for more information", {}, { - a: sub => ( - { - evt.preventDefault(); - dis.dispatch({ - action: Action.ViewUserSettings, - initialTabId: UserTab.Security, - }); - }} - > - { sub } - ), - }) } - ; + return ( +
+ { _t("Message search initialisation failed, check your settings for more information", {}, { + a: sub => ( + { + evt.preventDefault(); + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Security, + }); + }} + > + { sub } + ), + }) } +
+ ); } const brand = SdkConfig.get("brand"); @@ -97,7 +99,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) { } return ( -
+
{ logo } { text }
diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index 20a9e081a0..aadc89efb2 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/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 {
- + ); } diff --git a/test/components/views/rooms/SearchBar-test.tsx b/test/components/views/rooms/SearchBar-test.tsx index b72f838bb9..d1a62ba688 100644 --- a/test/components/views/rooms/SearchBar-test.tsx +++ b/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 */ -jest.mock('../../../../src/components/views/elements/DesktopBuildsNotice', () => ({ +/** mock out SearchWarning component so it doesn't affect the result of our test */ +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(desktopBuildNotice.props().kind).toEqual(mockWarningKind); + expect(searchWarning.props().isRoomEncrypted).toEqual(searchProps.isRoomEncrypted); + expect(searchWarning.props().kind).toEqual(mockWarningKind); }); it("must not search when input value is empty", () => {