From ec1437aa524da21eac374004de2376d92dd709ff Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 1 Jun 2023 18:52:40 +0000 Subject: [PATCH 1/9] Add a Jest snapshot of AppPermission --- .../views/elements/AppTile-test.tsx | 27 ++++ .../__snapshots__/AppTile-test.tsx.snap | 145 ++++++++++++++++++ 2 files changed, 172 insertions(+) diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index 8f77db9f1ea..cd2514e998a 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -62,6 +62,11 @@ jest.mock("../../../../src/stores/OwnProfileStore", () => ({ }, })); +// Fake random strings to give a predictable snapshot +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + describe("AppTile", () => { let cli: MatrixClient; let r1: Room; @@ -387,6 +392,28 @@ describe("AppTile", () => { expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center); }); + it("should render permission request", () => { + jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { + if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { + (opts as ApprovalOpts).approved = false; + } + }); + + // userId and creatorUserId are different + const renderResult = render( + + + , + ); + + const { container, asFragment } = renderResult; + + expect(container.querySelector(".mx_Spinner")).toBeFalsy(); + expect(asFragment()).toMatchSnapshot(); + + expect(renderResult.queryByRole("button", { name: "Continue" })).toBeInTheDocument(); + }); + describe("for a maximised (centered) widget", () => { beforeEach(() => { jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockImplementation( diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 9f345ff82c1..d05c8c46e8a 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -163,6 +163,151 @@ exports[`AppTile for a pinned widget should render 1`] = ` `; +exports[`AppTile for a pinned widget should render permission request 1`] = ` + +
+
+ + + + + Example 1 + + + + + +
+
+
+
+
+
+ +
+
+
+ Widget added by +
+
+ + + + +

+ @userAnother +

+
+
+
+ + Using this widget may share data +
+ +
+ with example.com. + +
+
+ This widget may use cookies.  +
+
+
+ Continue +
+
+
+
+
+ +`; + exports[`AppTile preserves non-persisted widget on container move 1`] = `
Date: Wed, 24 May 2023 14:18:56 +0000 Subject: [PATCH 2/9] Move the test inside 'for a pinned widget' category --- .../views/elements/AppTile-test.tsx | 36 ++--- .../__snapshots__/AppTile-test.tsx.snap | 152 +++++++++--------- 2 files changed, 94 insertions(+), 94 deletions(-) diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index cd2514e998a..aa2acfa046c 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -392,7 +392,7 @@ describe("AppTile", () => { expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center); }); - it("should render permission request", () => { + it("should not display 'Continue' button on permission load", () => { jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { (opts as ApprovalOpts).approved = false; @@ -414,6 +414,23 @@ describe("AppTile", () => { expect(renderResult.queryByRole("button", { name: "Continue" })).toBeInTheDocument(); }); + it("should display 'Continue' button on permission load", () => { + jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { + if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { + (opts as ApprovalOpts).approved = true; + } + }); + + // userId and creatorUserId are different + const renderResult = render( + + + , + ); + + expect(renderResult.queryByRole("button", { name: "Continue" })).not.toBeInTheDocument(); + }); + describe("for a maximised (centered) widget", () => { beforeEach(() => { jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockImplementation( @@ -473,21 +490,4 @@ describe("AppTile", () => { expect(asFragment()).toMatchSnapshot(); }); }); - - it("for a pinned widget permission load", () => { - jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { - if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { - (opts as ApprovalOpts).approved = true; - } - }); - - // userId and creatorUserId are different - const renderResult = render( - - - , - ); - - expect(renderResult.queryByRole("button", { name: "Continue" })).not.toBeInTheDocument(); - }); }); diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index d05c8c46e8a..83453ef5bc7 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -88,82 +88,7 @@ exports[`AppTile for a persistent app should render 1`] = ` `; -exports[`AppTile for a pinned widget should render 1`] = ` - -
-
- - - - - Example 1 - - - - - -
-
-
-
-
-
- -
-
-
-
- -`; - -exports[`AppTile for a pinned widget should render permission request 1`] = ` +exports[`AppTile for a pinned widget should not display 'Continue' button on permission load 1`] = `
`; +exports[`AppTile for a pinned widget should render 1`] = ` + +
+
+ + + + + Example 1 + + + + + +
+
+
+
+
+
+ +
+
+
+
+ +`; + exports[`AppTile preserves non-persisted widget on container move 1`] = `
Date: Fri, 19 May 2023 16:58:49 +0000 Subject: [PATCH 3/9] Make only spinner message bold --- res/css/views/rooms/_AppsDrawer.pcss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index 20a68b4136d..bd4c7e7449a 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -326,7 +326,6 @@ limitations under the License. flex-direction: column; justify-content: center; align-items: center; - font-weight: bold; position: relative; height: 100%; From 9f7d651fcab0adaeb622f101781b5f765dda78a5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 19 May 2023 18:45:02 +0000 Subject: [PATCH 4/9] Set font size specified with "mx_AppPermission_smallText" by default - Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText - Create _AppWarning.pcss for AppWarning --- res/css/_components.pcss | 1 + .../views/elements/_AppPermission.pcss | 6 ++++-- .../views/elements/_AppWarning.pcss | 19 +++++++++++++++++++ res/css/views/rooms/_AppsDrawer.pcss | 1 - .../views/elements/AppPermission.tsx | 10 +++++----- .../__snapshots__/AppTile-test.tsx.snap | 16 +++++----------- 6 files changed, 34 insertions(+), 19 deletions(-) create mode 100644 res/css/components/views/elements/_AppWarning.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 56628095f2f..82f8cda556b 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -21,6 +21,7 @@ @import "./components/views/dialogs/polls/_PollListItem.pcss"; @import "./components/views/dialogs/polls/_PollListItemEnded.pcss"; @import "./components/views/elements/_AppPermission.pcss"; +@import "./components/views/elements/_AppWarning.pcss"; @import "./components/views/elements/_FilterDropdown.pcss"; @import "./components/views/elements/_FilterTabGroup.pcss"; @import "./components/views/elements/_LearnMore.pcss"; diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index be78efa43b4..3f1a094ef69 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -16,6 +16,8 @@ limitations under the License. */ .mx_AppPermission { + font-size: $font-12px; + > div { margin-bottom: 12px; } @@ -25,8 +27,8 @@ limitations under the License. padding: 0; } - .mx_AppPermission_smallText { - font-size: $font-12px; + .mx_AppPermission_largeText { + font-size: $font-16px; } .mx_AppPermission_bolder { diff --git a/res/css/components/views/elements/_AppWarning.pcss b/res/css/components/views/elements/_AppWarning.pcss new file mode 100644 index 00000000000..b09937a5519 --- /dev/null +++ b/res/css/components/views/elements/_AppWarning.pcss @@ -0,0 +1,19 @@ +/* +Copyright 2023 Suguru Hirahara + +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. +*/ + +.mx_AppWarning { + font-size: $font-16px; +} diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index bd4c7e7449a..c1a33f356c3 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -313,7 +313,6 @@ limitations under the License. flex-direction: column; justify-content: center; align-items: center; - font-size: $font-16px; h4 { margin: 0; diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index e73c8ddf8a1..70cf6b0895e 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -139,14 +139,14 @@ export default class AppPermission extends React.Component { return (
-
{_t("Widget added by")}
+
{_t("Widget added by")}
{avatar} -

{displayName}

-
{userId}
+

{displayName}

+
{userId}
-
{warning}
-
+
{warning}
+
{_t("This widget may use cookies.")} {encryptionWarning}
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 83453ef5bc7..3dce0dc05eb 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -161,7 +161,7 @@ exports[`AppTile for a pinned widget should not display 'Continue' button on per class="mx_AppPermission" >
Widget added by
@@ -188,17 +188,13 @@ exports[`AppTile for a pinned widget should not display 'Continue' button on per />

@userAnother

-
+
-
+
Using this widget may share data
-
+
This widget may use cookies. 
From 4a697e108f500cf14c3cbfe90d9ff49265c42a33 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 19 May 2023 20:15:56 +0000 Subject: [PATCH 5/9] Make AppPermission panel scrollable, keeping the content at the center --- .../views/elements/_AppPermission.pcss | 18 ++-- .../views/elements/_AppWarning.pcss | 1 + res/css/views/rooms/_AppsDrawer.pcss | 1 - .../views/elements/AppPermission.tsx | 8 +- .../__snapshots__/AppTile-test.tsx.snap | 102 +++++++++--------- 5 files changed, 71 insertions(+), 59 deletions(-) diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index 3f1a094ef69..b55be01e493 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -17,25 +17,30 @@ limitations under the License. .mx_AppPermission { font-size: $font-12px; + width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */ + overflow-y: scroll; - > div { - margin-bottom: 12px; - } + .mx_AppPermission_content { + margin-block: auto; /* place at the center */ + + > div { + margin-block: 12px; + } h4 { margin: 0; padding: 0; } - .mx_AppPermission_largeText { + .mx_AppPermission_content_largeText { font-size: $font-16px; } - .mx_AppPermission_bolder { + .mx_AppPermission_content_bolder { font-weight: var(--font-semi-bold); } - .mx_AppPermission_helpIcon { + .mx_AppPermission_content_helpIcon { margin-top: 1px; margin-right: 2px; width: 10px; @@ -56,6 +61,7 @@ limitations under the License. } } } +} .mx_Tooltip.mx_Tooltip--appPermission { box-shadow: none; diff --git a/res/css/components/views/elements/_AppWarning.pcss b/res/css/components/views/elements/_AppWarning.pcss index b09937a5519..64633e5c9c2 100644 --- a/res/css/components/views/elements/_AppWarning.pcss +++ b/res/css/components/views/elements/_AppWarning.pcss @@ -16,4 +16,5 @@ limitations under the License. .mx_AppWarning { font-size: $font-16px; + justify-content: center; } diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index c1a33f356c3..fc78b321fea 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -311,7 +311,6 @@ limitations under the License. display: flex; height: 100%; flex-direction: column; - justify-content: center; align-items: center; h4 { diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index 70cf6b0895e..39beeb6b9eb 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -118,7 +118,7 @@ export default class AppPermission extends React.Component { tooltip={warningTooltipText} tooltipClass="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark" > - + ); @@ -139,10 +139,11 @@ export default class AppPermission extends React.Component { return (
-
{_t("Widget added by")}
+
+
{_t("Widget added by")}
{avatar} -

{displayName}

+

{displayName}

{userId}
{warning}
@@ -154,6 +155,7 @@ export default class AppPermission extends React.Component { {_t("Continue")}
+
); } diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 3dce0dc05eb..17a5a331f9c 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -161,64 +161,68 @@ exports[`AppTile for a pinned widget should not display 'Continue' button on per class="mx_AppPermission" >
- Widget added by -
-
- + Widget added by +
+
- - -

- @userAnother -

-
-
-
- - Using this widget may share data +

+ @userAnother +

+
+
+
+ + Using this widget may share data +
+ +
+ with example.com. + +
+
+ This widget may use cookies.  +
+
- + Continue
- with example.com. - -
-
- This widget may use cookies.  -
-
-
- Continue
From 6cf7ded91aec8d7bf235d6afee354b0932802109 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 19 May 2023 20:39:45 +0000 Subject: [PATCH 6/9] Run prettier --- .../views/elements/_AppPermission.pcss | 56 +++++++++---------- .../views/elements/AppPermission.tsx | 34 +++++------ 2 files changed, 46 insertions(+), 44 deletions(-) diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index b55be01e493..ebdf9d2cb5e 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -27,41 +27,41 @@ limitations under the License. margin-block: 12px; } - h4 { - margin: 0; - padding: 0; - } - - .mx_AppPermission_content_largeText { - font-size: $font-16px; - } + h4 { + margin: 0; + padding: 0; + } - .mx_AppPermission_content_bolder { - font-weight: var(--font-semi-bold); - } + .mx_AppPermission_content_largeText { + font-size: $font-16px; + } - .mx_AppPermission_content_helpIcon { - margin-top: 1px; - margin-right: 2px; - width: 10px; - height: 10px; - display: inline-block; + .mx_AppPermission_content_bolder { + font-weight: var(--font-semi-bold); + } - &::before { + .mx_AppPermission_content_helpIcon { + margin-top: 1px; + margin-right: 2px; + width: 10px; + height: 10px; display: inline-block; - background-color: $accent; - mask-repeat: no-repeat; - mask-size: 12px; - width: 12px; - height: 12px; - mask-position: center; - content: ""; - vertical-align: middle; - mask-image: url("$(res)/img/feather-customised/help-circle.svg"); + + &::before { + display: inline-block; + background-color: $accent; + mask-repeat: no-repeat; + mask-size: 12px; + width: 12px; + height: 12px; + mask-position: center; + content: ""; + vertical-align: middle; + mask-image: url("$(res)/img/feather-customised/help-circle.svg"); + } } } } -} .mx_Tooltip.mx_Tooltip--appPermission { box-shadow: none; diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index 39beeb6b9eb..2dda1162616 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -139,22 +139,24 @@ export default class AppPermission extends React.Component { return (
-
-
{_t("Widget added by")}
-
- {avatar} -

{displayName}

-
{userId}
-
-
{warning}
-
- {_t("This widget may use cookies.")} {encryptionWarning} -
-
- - {_t("Continue")} - -
+
+
{_t("Widget added by")}
+
+ {avatar} +

+ {displayName} +

+
{userId}
+
+
{warning}
+
+ {_t("This widget may use cookies.")} {encryptionWarning} +
+
+ + {_t("Continue")} + +
); From 245f1f118ff0b6bad307084bc31e0ccb7a0dc023 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 20 May 2023 07:20:12 +0000 Subject: [PATCH 7/9] Use Heading component --- res/css/components/views/elements/_AppPermission.pcss | 9 --------- res/css/components/views/elements/_AppWarning.pcss | 5 +++++ res/css/views/rooms/_AppsDrawer.pcss | 5 ----- src/components/views/elements/AppPermission.tsx | 5 ++--- .../views/elements/__snapshots__/AppTile-test.tsx.snap | 2 +- 5 files changed, 8 insertions(+), 18 deletions(-) diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index ebdf9d2cb5e..4d9b30f19cc 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -27,15 +27,6 @@ limitations under the License. margin-block: 12px; } - h4 { - margin: 0; - padding: 0; - } - - .mx_AppPermission_content_largeText { - font-size: $font-16px; - } - .mx_AppPermission_content_bolder { font-weight: var(--font-semi-bold); } diff --git a/res/css/components/views/elements/_AppWarning.pcss b/res/css/components/views/elements/_AppWarning.pcss index 64633e5c9c2..8d859d12a86 100644 --- a/res/css/components/views/elements/_AppWarning.pcss +++ b/res/css/components/views/elements/_AppWarning.pcss @@ -17,4 +17,9 @@ limitations under the License. .mx_AppWarning { font-size: $font-16px; justify-content: center; + + h4 { + margin: 0; + padding: 0; + } } diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss index fc78b321fea..306e4c103c8 100644 --- a/res/css/views/rooms/_AppsDrawer.pcss +++ b/res/css/views/rooms/_AppsDrawer.pcss @@ -312,11 +312,6 @@ limitations under the License. height: 100%; flex-direction: column; align-items: center; - - h4 { - margin: 0; - padding: 0; - } } .mx_AppTile_loading { diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index 2dda1162616..3aa67e652e0 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -25,6 +25,7 @@ import WidgetUtils from "../../../utils/WidgetUtils"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MemberAvatar from "../avatars/MemberAvatar"; import BaseAvatar from "../avatars/BaseAvatar"; +import Heading from "../typography/Heading"; import AccessibleButton from "./AccessibleButton"; import TextWithTooltip from "./TextWithTooltip"; import { parseUrl } from "../../../utils/UrlUtils"; @@ -143,9 +144,7 @@ export default class AppPermission extends React.Component {
{_t("Widget added by")}
{avatar} -

- {displayName} -

+ {displayName}
{userId}
{warning}
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 17a5a331f9c..9cd35b2d537 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -191,7 +191,7 @@ exports[`AppTile for a pinned widget should not display 'Continue' button on per />

@userAnother

From f6c0ea265f7ea68fe651f9ac04ae7d2388e69d3c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 20 May 2023 08:43:32 +0000 Subject: [PATCH 8/9] Use Icon component --- .../views/elements/_AppPermission.pcss | 21 +++++-------------- res/img/feather-customised/help-circle.svg | 2 +- .../views/elements/AppPermission.tsx | 4 +++- .../__snapshots__/AppTile-test.tsx.snap | 6 +++--- 4 files changed, 12 insertions(+), 21 deletions(-) diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss index 4d9b30f19cc..71f282ebeee 100644 --- a/res/css/components/views/elements/_AppPermission.pcss +++ b/res/css/components/views/elements/_AppPermission.pcss @@ -31,24 +31,13 @@ limitations under the License. font-weight: var(--font-semi-bold); } - .mx_AppPermission_content_helpIcon { - margin-top: 1px; - margin-right: 2px; - width: 10px; - height: 10px; + .mx_TextWithTooltip_target--helpIcon { display: inline-block; + height: $font-14px; /* align with characters on the same line */ + vertical-align: middle; - &::before { - display: inline-block; - background-color: $accent; - mask-repeat: no-repeat; - mask-size: 12px; - width: 12px; - height: 12px; - mask-position: center; - content: ""; - vertical-align: middle; - mask-image: url("$(res)/img/feather-customised/help-circle.svg"); + .mx_Icon { + color: $accent; } } } diff --git a/res/img/feather-customised/help-circle.svg b/res/img/feather-customised/help-circle.svg index 7ecb0a8f358..61b853aae86 100644 --- a/res/img/feather-customised/help-circle.svg +++ b/res/img/feather-customised/help-circle.svg @@ -1,5 +1,5 @@ - + diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index 3aa67e652e0..f57a5e4a29b 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -29,6 +29,7 @@ import Heading from "../typography/Heading"; import AccessibleButton from "./AccessibleButton"; import TextWithTooltip from "./TextWithTooltip"; import { parseUrl } from "../../../utils/UrlUtils"; +import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg"; interface IProps { url: string; @@ -118,8 +119,9 @@ export default class AppPermission extends React.Component { - + ); diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 9cd35b2d537..2e7b731c401 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -202,11 +202,11 @@ exports[`AppTile for a pinned widget should not display 'Continue' button on per Using this widget may share data
-
with example.com. From 6b972bd7d9b8b6a8b2a524f2b7f5acc3faa60d92 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 13 Jun 2023 12:31:46 +0000 Subject: [PATCH 9/9] Fix the test --- .../views/elements/AppTile-test.tsx | 4 +- .../__snapshots__/AppTile-test.tsx.snap | 148 +++++++++--------- 2 files changed, 76 insertions(+), 76 deletions(-) diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index aa2acfa046c..5a825b2a8b8 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -392,7 +392,7 @@ describe("AppTile", () => { expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center); }); - it("should not display 'Continue' button on permission load", () => { + it("should render permission request", () => { jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { (opts as ApprovalOpts).approved = false; @@ -414,7 +414,7 @@ describe("AppTile", () => { expect(renderResult.queryByRole("button", { name: "Continue" })).toBeInTheDocument(); }); - it("should display 'Continue' button on permission load", () => { + it("should not display 'Continue' button on permission load", () => { jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => { if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) { (opts as ApprovalOpts).approved = true; diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 2e7b731c401..dac8883dece 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -88,7 +88,7 @@ exports[`AppTile for a persistent app should render 1`] = ` `; -exports[`AppTile for a pinned widget should not display 'Continue' button on permission load 1`] = ` +exports[`AppTile for a pinned widget should render 1`] = `
-
-
-
- Widget added by -
-
- - - - -

- @userAnother -

-
-
-
- - Using this widget may share data -
-
-
- with example.com. - -
-
- This widget may use cookies.  -
-
-
- Continue -
-
-
-
+
`; -exports[`AppTile for a pinned widget should render 1`] = ` +exports[`AppTile for a pinned widget should render permission request 1`] = `
-
+
+
+
+ Widget added by +
+
+ + + + +

+ @userAnother +

+
+
+
+ + Using this widget may share data +
+
+
+ with example.com. + +
+
+ This widget may use cookies.  +
+
+
+ Continue +
+
+
+