[Query Copilot V2] Unit tests for V2 Copilot (#1580)
* Add tests for V2 of copilot and fix query parameter feature flag * Fix merge changes
This commit is contained in:
parent
ebd40cb9b0
commit
19100ec437
|
@ -1,10 +1,26 @@
|
|||
import { Text } from "@fluentui/react";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import React from "react";
|
||||
import { SampleBubble } from "./SampleBubble";
|
||||
|
||||
describe("Sample Bubble snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
it("should render", () => {
|
||||
const wrapper = shallow(<SampleBubble />);
|
||||
|
||||
const sampleInputs = wrapper.find(Text);
|
||||
|
||||
expect(sampleInputs.length).toEqual(2);
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual("");
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
it("should render and be clicked", () => {
|
||||
const wrapper = shallow(<SampleBubble />);
|
||||
|
||||
const firstSampleInput = wrapper.find(Text).first();
|
||||
firstSampleInput.simulate("click", {}, "");
|
||||
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual(expect.any(String));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,54 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Sample Bubble snapshot test should render 1`] = `
|
||||
exports[`Sample Bubble snapshot test should render 1`] = `
|
||||
<Stack
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"display": "flex",
|
||||
"margin": "10px",
|
||||
"padding": "10px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Text
|
||||
key="0"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"border": "1.5px solid #B0BEFF",
|
||||
"borderRadius": "4px",
|
||||
"cursor": "pointer",
|
||||
"marginBottom": "5px",
|
||||
"padding": "2px",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return last 10 records in the database
|
||||
</Text>
|
||||
<Text
|
||||
key="1"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"border": "1.5px solid #B0BEFF",
|
||||
"borderRadius": "4px",
|
||||
"cursor": "pointer",
|
||||
"marginBottom": "5px",
|
||||
"padding": "2px",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return all records in this table created in the last thirty days which also have the record owner as "Contoso"
|
||||
</Text>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Sample Bubble snapshot test should render and be clicked 1`] = `
|
||||
<Stack
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
|
|
|
@ -1,10 +1,84 @@
|
|||
import { IconButton, Image, TextField } from "@fluentui/react";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import React from "react";
|
||||
import { Footer } from "./Footer";
|
||||
|
||||
describe("Footer snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
const initialStoreState = useQueryCopilot.getState();
|
||||
beforeEach(() => {
|
||||
useQueryCopilot.setState(initialStoreState, true);
|
||||
});
|
||||
|
||||
it("should open sample prompts on button click", () => {
|
||||
const wrapper = shallow(<Footer />);
|
||||
|
||||
const samplePromptsImage = wrapper.find(Image).first();
|
||||
samplePromptsImage.simulate("click", {});
|
||||
|
||||
expect(useQueryCopilot.getState().isSamplePromptsOpen).toBeTruthy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should update user input", () => {
|
||||
const wrapper = shallow(<Footer />);
|
||||
const newInput = "some new input";
|
||||
|
||||
const textInput = wrapper.find(TextField).first();
|
||||
textInput.simulate("change", {}, newInput);
|
||||
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual(newInput);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should pass text with enter key", () => {
|
||||
const testMessage = "test message";
|
||||
useQueryCopilot.getState().setUserPrompt(testMessage);
|
||||
const wrapper = shallow(<Footer />);
|
||||
|
||||
const textInput = wrapper.find(TextField).first();
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
textInput.simulate("keydown", { key: "Enter", shiftKey: false, preventDefault: () => {} });
|
||||
|
||||
expect(useQueryCopilot.getState().chatMessages).toEqual([testMessage]);
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual("");
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should not pass text with non enter key", () => {
|
||||
const wrapper = shallow(<Footer />);
|
||||
|
||||
const textInput = wrapper.find(TextField).first();
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
textInput.simulate("keydown", { key: "K", shiftKey: false, preventDefault: () => {} });
|
||||
|
||||
expect(useQueryCopilot.getState().chatMessages).toEqual([]);
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual("");
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should not pass if no text", () => {
|
||||
const wrapper = shallow(<Footer />);
|
||||
|
||||
const textInput = wrapper.find(TextField).first();
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
textInput.simulate("keydown", { key: "Enter", shiftKey: false, preventDefault: () => {} });
|
||||
|
||||
expect(useQueryCopilot.getState().chatMessages).toEqual([]);
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual("");
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should pass text with icon button", () => {
|
||||
const testMessage = "test message";
|
||||
useQueryCopilot.getState().setUserPrompt(testMessage);
|
||||
const wrapper = shallow(<Footer />);
|
||||
|
||||
const iconButton = wrapper.find(IconButton).first();
|
||||
iconButton.simulate("click", {});
|
||||
|
||||
expect(useQueryCopilot.getState().chatMessages).toEqual([testMessage]);
|
||||
expect(useQueryCopilot.getState().userPrompt).toEqual("");
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,421 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Footer snapshot test should render 1`] = `
|
||||
exports[`Footer snapshot test should not pass if no text 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"background": "white",
|
||||
"borderRadius": "20px",
|
||||
"display": "flex",
|
||||
"margin": "5px",
|
||||
"padding": "5px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Stack>
|
||||
<Image
|
||||
onClick={[Function]}
|
||||
src=""
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"fontWeight": 400,
|
||||
"paddingLeft": 8,
|
||||
"textAlign": "left",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "5px",
|
||||
"selectors": Object {
|
||||
":hover": Object {
|
||||
"outline": "1px dashed #605e5c",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SamplePrompts
|
||||
sampleProps={
|
||||
Object {
|
||||
"isSamplePromptsOpen": false,
|
||||
"setIsSamplePromptsOpen": [Function],
|
||||
"setTextBox": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
multiline={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Write your own prompt or ask a question"
|
||||
resizable={false}
|
||||
styles={
|
||||
Object {
|
||||
"fieldGroup": Object {
|
||||
"border": "none",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "none",
|
||||
"borderRadius": "20px",
|
||||
"height": "80px",
|
||||
"marginLeft": "10px",
|
||||
"outline": "none",
|
||||
"padding": "8px",
|
||||
"width": "100%",
|
||||
},
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Send",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Footer snapshot test should not pass text with non enter key 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"background": "white",
|
||||
"borderRadius": "20px",
|
||||
"display": "flex",
|
||||
"margin": "5px",
|
||||
"padding": "5px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Stack>
|
||||
<Image
|
||||
onClick={[Function]}
|
||||
src=""
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"fontWeight": 400,
|
||||
"paddingLeft": 8,
|
||||
"textAlign": "left",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "5px",
|
||||
"selectors": Object {
|
||||
":hover": Object {
|
||||
"outline": "1px dashed #605e5c",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SamplePrompts
|
||||
sampleProps={
|
||||
Object {
|
||||
"isSamplePromptsOpen": false,
|
||||
"setIsSamplePromptsOpen": [Function],
|
||||
"setTextBox": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
multiline={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Write your own prompt or ask a question"
|
||||
resizable={false}
|
||||
styles={
|
||||
Object {
|
||||
"fieldGroup": Object {
|
||||
"border": "none",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "none",
|
||||
"borderRadius": "20px",
|
||||
"height": "80px",
|
||||
"marginLeft": "10px",
|
||||
"outline": "none",
|
||||
"padding": "8px",
|
||||
"width": "100%",
|
||||
},
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Send",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Footer snapshot test should open sample prompts on button click 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"background": "white",
|
||||
"borderRadius": "20px",
|
||||
"display": "flex",
|
||||
"margin": "5px",
|
||||
"padding": "5px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Stack>
|
||||
<Image
|
||||
onClick={[Function]}
|
||||
src=""
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"fontWeight": 400,
|
||||
"paddingLeft": 8,
|
||||
"textAlign": "left",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "5px",
|
||||
"selectors": Object {
|
||||
":hover": Object {
|
||||
"outline": "1px dashed #605e5c",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SamplePrompts
|
||||
sampleProps={
|
||||
Object {
|
||||
"isSamplePromptsOpen": false,
|
||||
"setIsSamplePromptsOpen": [Function],
|
||||
"setTextBox": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
multiline={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Write your own prompt or ask a question"
|
||||
resizable={false}
|
||||
styles={
|
||||
Object {
|
||||
"fieldGroup": Object {
|
||||
"border": "none",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "none",
|
||||
"borderRadius": "20px",
|
||||
"height": "80px",
|
||||
"marginLeft": "10px",
|
||||
"outline": "none",
|
||||
"padding": "8px",
|
||||
"width": "100%",
|
||||
},
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Send",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Footer snapshot test should pass text with enter key 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"background": "white",
|
||||
"borderRadius": "20px",
|
||||
"display": "flex",
|
||||
"margin": "5px",
|
||||
"padding": "5px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Stack>
|
||||
<Image
|
||||
onClick={[Function]}
|
||||
src=""
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"fontWeight": 400,
|
||||
"paddingLeft": 8,
|
||||
"textAlign": "left",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "5px",
|
||||
"selectors": Object {
|
||||
":hover": Object {
|
||||
"outline": "1px dashed #605e5c",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SamplePrompts
|
||||
sampleProps={
|
||||
Object {
|
||||
"isSamplePromptsOpen": false,
|
||||
"setIsSamplePromptsOpen": [Function],
|
||||
"setTextBox": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
multiline={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Write your own prompt or ask a question"
|
||||
resizable={false}
|
||||
styles={
|
||||
Object {
|
||||
"fieldGroup": Object {
|
||||
"border": "none",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "none",
|
||||
"borderRadius": "20px",
|
||||
"height": "80px",
|
||||
"marginLeft": "10px",
|
||||
"outline": "none",
|
||||
"padding": "8px",
|
||||
"width": "100%",
|
||||
},
|
||||
}
|
||||
}
|
||||
value="test message"
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Send",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Footer snapshot test should pass text with icon button 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"background": "white",
|
||||
"borderRadius": "20px",
|
||||
"display": "flex",
|
||||
"margin": "5px",
|
||||
"padding": "5px",
|
||||
}
|
||||
}
|
||||
verticalAlign="end"
|
||||
>
|
||||
<Stack>
|
||||
<Image
|
||||
onClick={[Function]}
|
||||
src=""
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"fontWeight": 400,
|
||||
"paddingLeft": 8,
|
||||
"textAlign": "left",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "5px",
|
||||
"selectors": Object {
|
||||
":hover": Object {
|
||||
"outline": "1px dashed #605e5c",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<SamplePrompts
|
||||
sampleProps={
|
||||
Object {
|
||||
"isSamplePromptsOpen": false,
|
||||
"setIsSamplePromptsOpen": [Function],
|
||||
"setTextBox": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<StyledTextFieldBase
|
||||
multiline={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Write your own prompt or ask a question"
|
||||
resizable={false}
|
||||
styles={
|
||||
Object {
|
||||
"fieldGroup": Object {
|
||||
"border": "none",
|
||||
},
|
||||
"root": Object {
|
||||
"border": "none",
|
||||
"borderRadius": "20px",
|
||||
"height": "80px",
|
||||
"marginLeft": "10px",
|
||||
"outline": "none",
|
||||
"padding": "8px",
|
||||
"width": "100%",
|
||||
},
|
||||
}
|
||||
}
|
||||
value="test message"
|
||||
/>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Send",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Footer snapshot test should update user input 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
horizontalAlign="end"
|
||||
|
|
|
@ -1,10 +1,17 @@
|
|||
import { IconButton } from "@fluentui/react";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import React from "react";
|
||||
import { Header } from "./Header";
|
||||
|
||||
describe("Header snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
it("should close on button click ", () => {
|
||||
const wrapper = shallow(<Header />);
|
||||
|
||||
const iconButton = wrapper.find(IconButton).first();
|
||||
iconButton.simulate("click", {});
|
||||
|
||||
expect(useQueryCopilot.getState().showCopilotSidebar).toBeFalsy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Header snapshot test should render 1`] = `
|
||||
exports[`Header snapshot test should close on button click 1`] = `
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
|
|
|
@ -1,10 +1,32 @@
|
|||
import { PrimaryButton } from "@fluentui/react";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import { withHooks } from "jest-react-hooks-shallow";
|
||||
import React from "react";
|
||||
import { WelcomeSidebarModal } from "./WelcomeSidebarModal";
|
||||
|
||||
describe("WelcomeSidebarModal snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
describe("Welcome Sidebar Modal snapshot test", () => {
|
||||
it("should close on button click ", () => {
|
||||
withHooks(() => {
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
const spy = jest.spyOn(localStorage, "setItem");
|
||||
spy.mockClear();
|
||||
|
||||
const button = wrapper.find(PrimaryButton).first();
|
||||
button.simulate("click", {});
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
expect(spy).toHaveBeenLastCalledWith("showWelcomeSidebar", "false");
|
||||
expect(useQueryCopilot.getState().showWelcomeSidebar).toBeFalsy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
it("should not reneder with local storage key", () => {
|
||||
withHooks(() => {
|
||||
window.localStorage.setItem("showWelcomeSidebar", "false");
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -7,9 +7,9 @@ import CopilotSidebarWelcomeIllustration from "../../../../../images/CopilotSide
|
|||
import Thumb from "../../../../../images/CopilotThumb.svg";
|
||||
|
||||
export const WelcomeSidebarModal: React.FC = (): JSX.Element => {
|
||||
const { setShowWelcomeSidebar } = useQueryCopilot();
|
||||
const { showWelcomeSidebar, setShowWelcomeSidebar } = useQueryCopilot();
|
||||
|
||||
const hideModal = () => {
|
||||
const hideModal = (): void => {
|
||||
setShowWelcomeSidebar(false);
|
||||
window.localStorage.setItem("showWelcomeSidebar", "false");
|
||||
};
|
||||
|
@ -20,108 +20,111 @@ export const WelcomeSidebarModal: React.FC = (): JSX.Element => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
backgroundColor: "#FAFAFA",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
showWelcomeSidebar && (
|
||||
<Stack
|
||||
style={{
|
||||
margin: "20px 10px",
|
||||
padding: "20px",
|
||||
maxHeight: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
backgroundColor: "#FAFAFA",
|
||||
flex: "1 0 100%",
|
||||
}}
|
||||
>
|
||||
<Stack horizontalAlign="center" verticalAlign="center">
|
||||
<Image src={CopilotSidebarWelcomeIllustration} />
|
||||
</Stack>
|
||||
<div
|
||||
style={{
|
||||
margin: "20px 10px",
|
||||
padding: "20px",
|
||||
maxHeight: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<Stack horizontalAlign="center" verticalAlign="center">
|
||||
<Image src={CopilotSidebarWelcomeIllustration} />
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Stack.Item align="center" style={{ marginBottom: "10px" }}>
|
||||
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Flash} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Let copilot do the work for you
|
||||
<Stack>
|
||||
<Stack.Item align="center" style={{ marginBottom: "10px" }}>
|
||||
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Flash} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Let copilot do the work for you
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Thumb} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Use your judgement
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Thumb} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Use your judgement
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Database} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Copilot currently works only a sample database
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Database} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Copilot currently works only a sample database
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Stack.Item align="center">
|
||||
<PrimaryButton style={{ width: "224px", height: "32px" }} onClick={hideModal}>
|
||||
Get Started
|
||||
</PrimaryButton>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Stack.Item align="center">
|
||||
<PrimaryButton style={{ width: "224px", height: "32px" }} onClick={hideModal}>
|
||||
Get Started
|
||||
</PrimaryButton>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,243 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WelcomeSidebarModal snapshot test should render 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"overflow": "auto",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"borderRadius": "20px",
|
||||
"boxSizing": "border-box",
|
||||
"margin": "20px 10px",
|
||||
"maxHeight": "100%",
|
||||
"padding": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontalAlign="center"
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className="title bold"
|
||||
>
|
||||
Welcome to Copilot in CosmosDB
|
||||
</Text>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Let copilot do the work for you
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-learn-more"
|
||||
>
|
||||
Learn more
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Use your judgement
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-preview-terms"
|
||||
>
|
||||
Read preview terms
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Copilot currently works only a sample database
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-learn-more"
|
||||
>
|
||||
Learn more
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<StackItem
|
||||
align="center"
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"height": "32px",
|
||||
"width": "224px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Get Started
|
||||
</CustomizedPrimaryButton>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
`;
|
||||
exports[`Welcome Sidebar Modal snapshot test should close on button click 1`] = `""`;
|
||||
|
||||
exports[`Welcome Sidebar Modal snapshot test should not reneder with local storage key 1`] = `""`;
|
||||
|
|
|
@ -1,10 +1,54 @@
|
|||
import { Stack } from "@fluentui/react";
|
||||
import { SampleBubble } from "Explorer/QueryCopilot/V2/Bubbles/Sample/SampleBubble";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import { withHooks } from "jest-react-hooks-shallow";
|
||||
import React from "react";
|
||||
import { QueryCopilotSidebar } from "./QueryCopilotSidebar";
|
||||
|
||||
describe("QueryCopilotSidebar snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
describe("Query Copilot Sidebar snapshot test", () => {
|
||||
const initialState = useQueryCopilot.getState();
|
||||
|
||||
beforeEach(() => {
|
||||
useQueryCopilot.setState(initialState, true);
|
||||
});
|
||||
|
||||
it("should render and set copilot used flag ", () => {
|
||||
withHooks(() => {
|
||||
useQueryCopilot.getState().setShowCopilotSidebar(true);
|
||||
const wrapper = shallow(<QueryCopilotSidebar />);
|
||||
|
||||
expect(useQueryCopilot.getState().wasCopilotUsed).toBeTruthy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it("should render and not set copilot used flag ", () => {
|
||||
withHooks(() => {
|
||||
const wrapper = shallow(<QueryCopilotSidebar />);
|
||||
|
||||
expect(useQueryCopilot.getState().wasCopilotUsed).toBeFalsy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it("should render with chat messages", () => {
|
||||
const message = "some test message";
|
||||
useQueryCopilot.getState().setChatMessages([message]);
|
||||
const wrapper = shallow(<QueryCopilotSidebar />);
|
||||
|
||||
const messageContainer = wrapper.find(Stack).findWhere((x) => x.text() === message);
|
||||
|
||||
expect(messageContainer).toBeDefined();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should render samples without messages", () => {
|
||||
const wrapper = shallow(<QueryCopilotSidebar />);
|
||||
|
||||
const sampleBubble = wrapper.find(SampleBubble);
|
||||
|
||||
expect(sampleBubble).toBeDefined();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -9,7 +9,7 @@ import React from "react";
|
|||
import { WelcomeSidebarModal } from "../Modal/WelcomeSidebarModal";
|
||||
|
||||
export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
|
||||
const { setWasCopilotUsed, showCopilotSidebar, chatMessages, showWelcomeSidebar } = useQueryCopilot();
|
||||
const { setWasCopilotUsed, showCopilotSidebar, chatMessages } = useQueryCopilot();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (showCopilotSidebar) {
|
||||
|
@ -18,44 +18,39 @@ export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA", overflow: "auto" }}>
|
||||
<Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA" }}>
|
||||
<Header />
|
||||
{showWelcomeSidebar ? (
|
||||
<WelcomeSidebarModal />
|
||||
) : (
|
||||
<>
|
||||
<WelcomeSidebarModal />
|
||||
<Stack
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
{chatMessages.map((message, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
horizontalAlign="center"
|
||||
tokens={{ padding: 8, childrenGap: 8 }}
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflowY: "auto",
|
||||
backgroundColor: "#E0E7FF",
|
||||
borderRadius: "8px",
|
||||
margin: "5px 10px",
|
||||
textAlign: "start",
|
||||
}}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
{chatMessages.map((message, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
horizontalAlign="center"
|
||||
tokens={{ padding: 8, childrenGap: 8 }}
|
||||
style={{
|
||||
backgroundColor: "#E0E7FF",
|
||||
borderRadius: "8px",
|
||||
margin: "5px 10px",
|
||||
textAlign: "start",
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Stack>
|
||||
))}
|
||||
|
||||
<RetrievingBubble />
|
||||
|
||||
{chatMessages.length === 0 && <SampleBubble />}
|
||||
{message}
|
||||
</Stack>
|
||||
<Footer />
|
||||
</>
|
||||
)}
|
||||
))}
|
||||
|
||||
<RetrievingBubble />
|
||||
|
||||
{chatMessages.length === 0 && <SampleBubble />}
|
||||
</Stack>
|
||||
<Footer />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,17 +1,140 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`QueryCopilotSidebar snapshot test should render 1`] = `
|
||||
exports[`Query Copilot Sidebar snapshot test should render and not set copilot used flag 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"overflow": "auto",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Header />
|
||||
<WelcomeSidebarModal />
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
"flexGrow": 1,
|
||||
"overflowY": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
<RetrievingBubble />
|
||||
<SampleBubble />
|
||||
</Stack>
|
||||
<Footer />
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Query Copilot Sidebar snapshot test should render and set copilot used flag 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Header />
|
||||
<WelcomeSidebarModal />
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
"flexGrow": 1,
|
||||
"overflowY": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
<RetrievingBubble />
|
||||
<SampleBubble />
|
||||
</Stack>
|
||||
<Footer />
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Query Copilot Sidebar snapshot test should render samples without messages 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Header />
|
||||
<WelcomeSidebarModal />
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
"flexGrow": 1,
|
||||
"overflowY": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
<RetrievingBubble />
|
||||
<SampleBubble />
|
||||
</Stack>
|
||||
<Footer />
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
exports[`Query Copilot Sidebar snapshot test should render with chat messages 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Header />
|
||||
<WelcomeSidebarModal />
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "column",
|
||||
"flexGrow": 1,
|
||||
"overflowY": "auto",
|
||||
}
|
||||
}
|
||||
>
|
||||
<WelcomeBubble />
|
||||
<Stack
|
||||
horizontalAlign="center"
|
||||
key="0"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#E0E7FF",
|
||||
"borderRadius": "8px",
|
||||
"margin": "5px 10px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 8,
|
||||
"padding": 8,
|
||||
}
|
||||
}
|
||||
>
|
||||
some test message
|
||||
</Stack>
|
||||
<RetrievingBubble />
|
||||
</Stack>
|
||||
<Footer />
|
||||
</Stack>
|
||||
`;
|
||||
|
|
|
@ -111,7 +111,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
|
|||
enablePriorityBasedThrottling: "true" === get("enableprioritybasedthrottling"),
|
||||
enableNPSSurvey: "true" === get("enablenpssurvey"),
|
||||
enableCopilot: "true" === get("enablecopilot"),
|
||||
copilotVersion: get("copilotVersion") ? get("copilotVersion") : "v1.0",
|
||||
copilotVersion: get("copilotversion") ?? "v1.0",
|
||||
enableCopilotPhoenixGateaway: "true" === get("enablecopilotphoenixgateaway"),
|
||||
enableCopilotFullSchema: "true" === get("enablecopilotfullschema"),
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue