From 7c07ad155cd086b54db51361b483e71076e59210 Mon Sep 17 00:00:00 2001
From: Kalle Struik <kalle@kallestruik.nl>
Date: Sun, 3 Oct 2021 17:38:49 +0200
Subject: [PATCH] Improve the styling of search initialization errors.
Signed-off-by: Kalle Struik <kalle@kallestruik.nl>
---
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<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}
diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/SearchWarning.tsx
similarity index 74%
rename from src/components/views/elements/DesktopBuildsNotice.tsx
rename to src/components/views/elements/SearchWarning.tsx
index cb664f02d0..ef2486b0b7 100644
--- a/src/components/views/elements/DesktopBuildsNotice.tsx
+++ b/src/components/views/elements/SearchWarning.tsx
@@ -35,28 +35,30 @@ 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 <>
- { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
- a: sub => (
- <AccessibleButton
- kind="link_inline"
- onClick={(evt) => {
- evt.preventDefault();
- dis.dispatch({
- action: Action.ViewUserSettings,
- initialTabId: UserTab.Security,
- });
- }}
- >
- { sub }
- </AccessibleButton>),
- }) }
- </>;
+ return (
+ <div className="mx_SearchWarning">
+ { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+ a: sub => (
+ <AccessibleButton
+ kind="link_inline"
+ onClick={(evt) => {
+ evt.preventDefault();
+ dis.dispatch({
+ action: Action.ViewUserSettings,
+ initialTabId: UserTab.Security,
+ });
+ }}
+ >
+ { 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>
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<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} />
</>
);
}
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", () => {