Implement updated open dialog method of the Module API (#11395)
* Implement updated open dialog method Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> * Apply the review comments Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> * Add unit tests for the module system dialog Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> * Bump @matrix-org/react-sdk-module-api from 1.0.0 to 2.0.0 Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> * Run prettier Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> * Apply review comments Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net> --------- Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>
This commit is contained in:
Dominik Henneke
GitHub
parent
3a647229ad
commit
5c43054bfe
7 changed files with 299 additions and 129 deletions
|
|
@ -62,7 +62,7 @@
|
|||
"@babel/runtime": "^7.12.5",
|
||||
"@matrix-org/analytics-events": "^0.6.0",
|
||||
"@matrix-org/matrix-wysiwyg": "^2.4.1",
|
||||
"@matrix-org/react-sdk-module-api": "^1.0.0",
|
||||
"@matrix-org/react-sdk-module-api": "^2.0.0",
|
||||
"@matrix-org/spec": "^1.7.0",
|
||||
"@sentry/browser": "^7.0.0",
|
||||
"@sentry/tracing": "^7.0.0",
|
||||
|
|
|
|||
|
|
@ -17,15 +17,18 @@ limitations under the License.
|
|||
import React, { createRef } from "react";
|
||||
import { DialogContent, DialogProps } from "@matrix-org/react-sdk-module-api/lib/components/DialogContent";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { ModuleApi } from "@matrix-org/react-sdk-module-api/lib/ModuleApi";
|
||||
import { ModuleUiDialogOptions } from "@matrix-org/react-sdk-module-api/lib/types/ModuleUiDialogOptions";
|
||||
|
||||
import ScrollableBaseModal, { IScrollableBaseState } from "./ScrollableBaseModal";
|
||||
import { _t } from "../../../languageHandler";
|
||||
|
||||
interface IProps<P extends DialogProps, C extends DialogContent<P>> {
|
||||
contentFactory: (props: P, ref: React.RefObject<C>) => React.ReactNode;
|
||||
contentProps: P;
|
||||
title: string;
|
||||
onFinished(ok?: boolean, model?: Awaited<ReturnType<DialogContent<P>["trySubmit"]>>): void;
|
||||
additionalContentProps: Omit<P, keyof DialogProps> | undefined;
|
||||
initialOptions: ModuleUiDialogOptions;
|
||||
moduleApi: ModuleApi;
|
||||
onFinished(ok?: boolean, model?: Awaited<ReturnType<DialogContent<P & DialogProps>["trySubmit"]>>): void;
|
||||
}
|
||||
|
||||
interface IState extends IScrollableBaseState {
|
||||
|
|
@ -42,9 +45,10 @@ export class ModuleUiDialog<P extends DialogProps, C extends DialogContent<P>> e
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
title: this.props.title,
|
||||
canSubmit: true,
|
||||
actionLabel: _t("OK"),
|
||||
title: this.props.initialOptions.title,
|
||||
actionLabel: this.props.initialOptions.actionLabel ?? _t("OK"),
|
||||
cancelLabel: this.props.initialOptions.cancelLabel,
|
||||
canSubmit: this.props.initialOptions.canSubmit ?? true,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -61,11 +65,23 @@ export class ModuleUiDialog<P extends DialogProps, C extends DialogContent<P>> e
|
|||
this.props.onFinished(false);
|
||||
}
|
||||
|
||||
private setOptions(options: ModuleUiDialogOptions): void {
|
||||
this.setState((state) => ({ ...state, ...options }));
|
||||
}
|
||||
|
||||
protected renderContent(): React.ReactNode {
|
||||
return (
|
||||
<div className="mx_ModuleUiDialog">
|
||||
{this.props.contentFactory(this.props.contentProps, this.contentRef)}
|
||||
</div>
|
||||
);
|
||||
const dialogProps: DialogProps = {
|
||||
moduleApi: this.props.moduleApi,
|
||||
setOptions: this.setOptions.bind(this),
|
||||
cancel: this.cancel.bind(this),
|
||||
};
|
||||
|
||||
// Typescript isn't very happy understanding that `contentProps` satisfies `P`
|
||||
const contentProps: P = {
|
||||
...this.props.additionalContentProps,
|
||||
...dialogProps,
|
||||
} as unknown as P;
|
||||
|
||||
return <div className="mx_ModuleUiDialog">{this.props.contentFactory(contentProps, this.contentRef)}</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export interface IScrollableBaseState {
|
|||
canSubmit: boolean;
|
||||
title: string;
|
||||
actionLabel: string;
|
||||
cancelLabel?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -103,7 +104,7 @@ export default abstract class ScrollableBaseModal<
|
|||
<div className="mx_CompoundDialog_content">{this.renderContent()}</div>
|
||||
<div className="mx_CompoundDialog_footer">
|
||||
<AccessibleButton onClick={this.onCancel} kind="primary_outline">
|
||||
{_t("Cancel")}
|
||||
{this.state.cancelLabel ?? _t("Cancel")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={this.onSubmit}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import React from "react";
|
|||
import { AccountAuthInfo } from "@matrix-org/react-sdk-module-api/lib/types/AccountAuthInfo";
|
||||
import * as Matrix from "matrix-js-sdk/src/matrix";
|
||||
import { IRegisterRequestParams } from "matrix-js-sdk/src/matrix";
|
||||
import { ModuleUiDialogOptions } from "@matrix-org/react-sdk-module-api/lib/types/ModuleUiDialogOptions";
|
||||
|
||||
import Modal from "../Modal";
|
||||
import { _t } from "../languageHandler";
|
||||
|
|
@ -81,21 +82,21 @@ export class ProxiedModuleApi implements ModuleApi {
|
|||
* @override
|
||||
*/
|
||||
public openDialog<M extends object, P extends DialogProps, C extends DialogContent<P>>(
|
||||
title: string,
|
||||
initialTitleOrOptions: string | ModuleUiDialogOptions,
|
||||
body: (props: P, ref: React.RefObject<C>) => React.ReactNode,
|
||||
props?: Omit<P, keyof DialogProps>,
|
||||
): Promise<{ didOkOrSubmit: boolean; model: M }> {
|
||||
const initialOptions: ModuleUiDialogOptions =
|
||||
typeof initialTitleOrOptions === "string" ? { title: initialTitleOrOptions } : initialTitleOrOptions;
|
||||
|
||||
return new Promise<{ didOkOrSubmit: boolean; model: M }>((resolve) => {
|
||||
Modal.createDialog(
|
||||
ModuleUiDialog<P, C>,
|
||||
{
|
||||
title: title,
|
||||
initialOptions,
|
||||
contentFactory: body,
|
||||
// Typescript isn't very happy understanding that `props` satisfies `Omit<P, keyof DialogProps>`
|
||||
contentProps: {
|
||||
...props,
|
||||
moduleApi: this,
|
||||
} as unknown as P,
|
||||
additionalContentProps: props,
|
||||
},
|
||||
"mx_CompoundDialog",
|
||||
).finished.then(([didOkOrSubmit, model]) => {
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 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 { TranslationStringsObject } from "@matrix-org/react-sdk-module-api/lib/types/translations";
|
||||
import { AccountAuthInfo } from "@matrix-org/react-sdk-module-api/lib/types/AccountAuthInfo";
|
||||
|
||||
import { ProxiedModuleApi } from "../../src/modules/ProxiedModuleApi";
|
||||
import { stubClient } from "../test-utils";
|
||||
import { setLanguage } from "../../src/languageHandler";
|
||||
import { ModuleRunner } from "../../src/modules/ModuleRunner";
|
||||
import { registerMockModule } from "./MockModule";
|
||||
import defaultDispatcher from "../../src/dispatcher/dispatcher";
|
||||
import { Action } from "../../src/dispatcher/actions";
|
||||
|
||||
describe("ProxiedApiModule", () => {
|
||||
afterEach(() => {
|
||||
ModuleRunner.instance.reset();
|
||||
});
|
||||
|
||||
// Note: Remainder is implicitly tested from end-to-end tests of modules.
|
||||
|
||||
describe("translations", () => {
|
||||
it("should cache translations", () => {
|
||||
const api = new ProxiedModuleApi();
|
||||
expect(api.translations).toBeFalsy();
|
||||
|
||||
const translations: TranslationStringsObject = {
|
||||
["custom string"]: {
|
||||
en: "custom string",
|
||||
fr: "custom french string",
|
||||
},
|
||||
};
|
||||
api.registerTranslations(translations);
|
||||
expect(api.translations).toBe(translations);
|
||||
});
|
||||
|
||||
it("should overwriteAccountAuth", async () => {
|
||||
const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
const accountInfo = {} as unknown as AccountAuthInfo;
|
||||
const promise = api.overwriteAccountAuth(accountInfo);
|
||||
|
||||
expect(dispatchSpy).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
action: Action.OverwriteLogin,
|
||||
credentials: {
|
||||
...accountInfo,
|
||||
guest: false,
|
||||
},
|
||||
}),
|
||||
expect.anything(),
|
||||
);
|
||||
|
||||
defaultDispatcher.fire(Action.OnLoggedIn);
|
||||
|
||||
await expect(promise).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
describe("integration", () => {
|
||||
it("should translate strings using translation system", async () => {
|
||||
// Test setup
|
||||
stubClient();
|
||||
|
||||
// Set up a module to pull translations through
|
||||
const module = registerMockModule();
|
||||
const en = "custom string";
|
||||
const de = "custom german string";
|
||||
const enVars = "custom variable %(var)s";
|
||||
const varVal = "string";
|
||||
const deVars = "custom german variable %(var)s";
|
||||
const deFull = `custom german variable ${varVal}`;
|
||||
expect(module.apiInstance).toBeInstanceOf(ProxiedModuleApi);
|
||||
module.apiInstance.registerTranslations({
|
||||
[en]: {
|
||||
en: en,
|
||||
de: de,
|
||||
},
|
||||
[enVars]: {
|
||||
en: enVars,
|
||||
de: deVars,
|
||||
},
|
||||
});
|
||||
await setLanguage("de"); // calls `registerCustomTranslations()` for us
|
||||
|
||||
// See if we can pull the German string out
|
||||
expect(module.apiInstance.translateString(en)).toEqual(de);
|
||||
expect(module.apiInstance.translateString(enVars, { var: varVal })).toEqual(deFull);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
257
test/modules/ProxiedModuleApi-test.tsx
Normal file
257
test/modules/ProxiedModuleApi-test.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
/*
|
||||
Copyright 2022 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 React from "react";
|
||||
import { TranslationStringsObject } from "@matrix-org/react-sdk-module-api/lib/types/translations";
|
||||
import { AccountAuthInfo } from "@matrix-org/react-sdk-module-api/lib/types/AccountAuthInfo";
|
||||
import { DialogContent, DialogProps } from "@matrix-org/react-sdk-module-api/lib/components/DialogContent";
|
||||
import { screen, within } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { ProxiedModuleApi } from "../../src/modules/ProxiedModuleApi";
|
||||
import { stubClient } from "../test-utils";
|
||||
import { setLanguage } from "../../src/languageHandler";
|
||||
import { ModuleRunner } from "../../src/modules/ModuleRunner";
|
||||
import { registerMockModule } from "./MockModule";
|
||||
import defaultDispatcher from "../../src/dispatcher/dispatcher";
|
||||
import { Action } from "../../src/dispatcher/actions";
|
||||
|
||||
describe("ProxiedApiModule", () => {
|
||||
afterEach(() => {
|
||||
ModuleRunner.instance.reset();
|
||||
});
|
||||
|
||||
// Note: Remainder is implicitly tested from end-to-end tests of modules.
|
||||
|
||||
describe("translations", () => {
|
||||
it("should cache translations", () => {
|
||||
const api = new ProxiedModuleApi();
|
||||
expect(api.translations).toBeFalsy();
|
||||
|
||||
const translations: TranslationStringsObject = {
|
||||
["custom string"]: {
|
||||
en: "custom string",
|
||||
fr: "custom french string",
|
||||
},
|
||||
};
|
||||
api.registerTranslations(translations);
|
||||
expect(api.translations).toBe(translations);
|
||||
});
|
||||
|
||||
it("should overwriteAccountAuth", async () => {
|
||||
const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
const accountInfo = {} as unknown as AccountAuthInfo;
|
||||
const promise = api.overwriteAccountAuth(accountInfo);
|
||||
|
||||
expect(dispatchSpy).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
action: Action.OverwriteLogin,
|
||||
credentials: {
|
||||
...accountInfo,
|
||||
guest: false,
|
||||
},
|
||||
}),
|
||||
expect.anything(),
|
||||
);
|
||||
|
||||
defaultDispatcher.fire(Action.OnLoggedIn);
|
||||
|
||||
await expect(promise).resolves.toBeUndefined();
|
||||
});
|
||||
|
||||
describe("integration", () => {
|
||||
it("should translate strings using translation system", async () => {
|
||||
// Test setup
|
||||
stubClient();
|
||||
|
||||
// Set up a module to pull translations through
|
||||
const module = registerMockModule();
|
||||
const en = "custom string";
|
||||
const de = "custom german string";
|
||||
const enVars = "custom variable %(var)s";
|
||||
const varVal = "string";
|
||||
const deVars = "custom german variable %(var)s";
|
||||
const deFull = `custom german variable ${varVal}`;
|
||||
expect(module.apiInstance).toBeInstanceOf(ProxiedModuleApi);
|
||||
module.apiInstance.registerTranslations({
|
||||
[en]: {
|
||||
en: en,
|
||||
de: de,
|
||||
},
|
||||
[enVars]: {
|
||||
en: enVars,
|
||||
de: deVars,
|
||||
},
|
||||
});
|
||||
await setLanguage("de"); // calls `registerCustomTranslations()` for us
|
||||
|
||||
// See if we can pull the German string out
|
||||
expect(module.apiInstance.translateString(en)).toEqual(de);
|
||||
expect(module.apiInstance.translateString(enVars, { var: varVal })).toEqual(deFull);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await setLanguage("en"); // reset the language
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("openDialog", () => {
|
||||
it("should open dialog with a custom title and default options", async () => {
|
||||
class MyDialogContent extends DialogContent {
|
||||
trySubmit = async () => ({ result: true });
|
||||
render = () => <p>This is my example content.</p>;
|
||||
}
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
|
||||
const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
|
||||
"My Dialog Title",
|
||||
(props, ref) => <MyDialogContent ref={ref} {...props} />,
|
||||
);
|
||||
|
||||
const dialog = await screen.findByRole("dialog");
|
||||
|
||||
expect(within(dialog).getByRole("heading", { name: "My Dialog Title" })).toBeInTheDocument();
|
||||
expect(within(dialog).getByText("This is my example content.")).toBeInTheDocument();
|
||||
expect(within(dialog).getByRole("button", { name: "Cancel" })).toBeInTheDocument();
|
||||
|
||||
await userEvent.click(within(dialog).getByRole("button", { name: "OK" }));
|
||||
|
||||
expect(await resultPromise).toEqual({
|
||||
didOkOrSubmit: true,
|
||||
model: { result: true },
|
||||
});
|
||||
|
||||
expect(dialog).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should open dialog with custom options", async () => {
|
||||
class MyDialogContent extends DialogContent {
|
||||
trySubmit = async () => ({ result: true });
|
||||
render = () => <p>This is my example content.</p>;
|
||||
}
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
|
||||
const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
|
||||
{
|
||||
title: "My Custom Dialog Title",
|
||||
actionLabel: "Submit it",
|
||||
cancelLabel: "Cancel it",
|
||||
canSubmit: false,
|
||||
},
|
||||
(props, ref) => <MyDialogContent ref={ref} {...props} />,
|
||||
);
|
||||
|
||||
const dialog = await screen.findByRole("dialog");
|
||||
|
||||
expect(within(dialog).getByRole("heading", { name: "My Custom Dialog Title" })).toBeInTheDocument();
|
||||
expect(within(dialog).getByText("This is my example content.")).toBeInTheDocument();
|
||||
expect(within(dialog).getByRole("button", { name: "Submit it" })).toBeDisabled();
|
||||
|
||||
await userEvent.click(within(dialog).getByRole("button", { name: "Cancel it" }));
|
||||
|
||||
expect(await resultPromise).toEqual({ didOkOrSubmit: false });
|
||||
|
||||
expect(dialog).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should update the options from the opened dialog", async () => {
|
||||
class MyDialogContent extends DialogContent {
|
||||
trySubmit = async () => ({ result: true });
|
||||
render = () => {
|
||||
const onClick = () => {
|
||||
this.props.setOptions({
|
||||
title: "My New Title",
|
||||
actionLabel: "New Action",
|
||||
cancelLabel: "New Cancel",
|
||||
});
|
||||
|
||||
// check if delta updates work
|
||||
this.props.setOptions({
|
||||
canSubmit: false,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<button type="button" onClick={onClick}>
|
||||
Change the settings!
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
|
||||
const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
|
||||
"My Dialog Title",
|
||||
(props, ref) => <MyDialogContent ref={ref} {...props} />,
|
||||
);
|
||||
|
||||
const dialog = await screen.findByRole("dialog");
|
||||
|
||||
expect(within(dialog).getByRole("heading", { name: "My Dialog Title" })).toBeInTheDocument();
|
||||
expect(within(dialog).getByRole("button", { name: "Cancel" })).toBeInTheDocument();
|
||||
expect(within(dialog).getByRole("button", { name: "OK" })).toBeEnabled();
|
||||
|
||||
await userEvent.click(within(dialog).getByRole("button", { name: "Change the settings!" }));
|
||||
|
||||
expect(within(dialog).getByRole("heading", { name: "My New Title" })).toBeInTheDocument();
|
||||
expect(within(dialog).getByRole("button", { name: "New Action" })).toBeDisabled();
|
||||
|
||||
await userEvent.click(within(dialog).getByRole("button", { name: "New Cancel" }));
|
||||
|
||||
expect(await resultPromise).toEqual({
|
||||
didOkOrSubmit: false,
|
||||
model: undefined,
|
||||
});
|
||||
|
||||
expect(dialog).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should cancel the dialog from within the dialog", async () => {
|
||||
class MyDialogContent extends DialogContent {
|
||||
trySubmit = async () => ({ result: true });
|
||||
render = () => (
|
||||
<button type="button" onClick={this.props.cancel}>
|
||||
No need for action
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const api = new ProxiedModuleApi();
|
||||
|
||||
const resultPromise = api.openDialog<{ result: boolean }, DialogProps, MyDialogContent>(
|
||||
"My Dialog Title",
|
||||
(props, ref) => <MyDialogContent ref={ref} {...props} />,
|
||||
);
|
||||
|
||||
const dialog = await screen.findByRole("dialog");
|
||||
|
||||
await userEvent.click(within(dialog).getByRole("button", { name: "No need for action" }));
|
||||
|
||||
expect(await resultPromise).toEqual({
|
||||
didOkOrSubmit: false,
|
||||
model: undefined,
|
||||
});
|
||||
|
||||
expect(dialog).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1867,10 +1867,10 @@
|
|||
version "3.2.14"
|
||||
resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz#acd96c00a881d0f462e1f97a56c73742c8dbc984"
|
||||
|
||||
"@matrix-org/react-sdk-module-api@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-1.0.0.tgz#de73e163a439fe330f6971a6a0cef2ccb090d616"
|
||||
integrity sha512-drhPkoPWitAv9bXS2q8cyaqPta/KGF+Ph3aZSmaYiOPyY5S84e4Ju3JI6/HExqF8+HyBsajlCKtyvTZsMsTIFA==
|
||||
"@matrix-org/react-sdk-module-api@^2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-2.0.0.tgz#f894af429ad352d5151dc7240cc2f987d9dab780"
|
||||
integrity sha512-o/M+IfB3bu4S3yTO10zMRiEtTQagV9AJ9cNmq8a/ksniCx3QLShtzWeL5FkTa8co0ab/VdxdqTlEux0aStT/dg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.17.9"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue