random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-31 06:41:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement query copilot UI (#1452)

Browse Source
This commit is contained in:
victor-meng
2023-06-06 11:43:53 -07:00
committed by GitHub
parent abff435e88
commit aadbb50e7d
23 changed files with 1833 additions and 864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/Explorer/QueryCopilot/__snapshots__/CopilotCarousel.test.tsx.snap Normal file
View File

@@ -0,0 +1,198 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Query Copilot Carousel snapshot test should render when isOpen is true 1`] = `
<Modal
isOpen={true}
styles={
Object {
"main": Object {
"width": 880,
},
}
}
>
<Stack
style={
Object {
"padding": 16,
}
}
>
<Stack
horizontal={true}
horizontalAlign="space-between"
>
<Text
variant="xLarge"
>
What exactly is copilot?
</Text>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Cancel",
}
}
onClick={[Function]}
/>
</Stack>
<Stack
style={
Object {
"marginTop": 8,
}
}
>
<Text
style={
Object {
"fontSize": 13,
}
}
>
A couple of lines about copilot and the background about it. The idea is to have some text to give context to the user.
</Text>
<Text
style={
Object {
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
}
}
>
How do you use copilot
</Text>
<Text
style={
Object {
"fontSize": 13,
"marginTop": 8,
}
}
>
To generate queries , just describe the query you want and copilot will generate the query for you.Watch this video to learn more about how to use copilot.
</Text>
<Image
src=""
style={
Object {
"margin": "16px auto",
}
}
/>
<Text
style={
Object {
"fontSize": 14,
"fontWeight": 600,
}
}
>
What is copilot good at
</Text>
<Text
style={
Object {
"fontSize": 13,
"marginTop": 8,
}
}
>
A couple of lines about what copilot can do and its capablites with a link to
<StyledLinkBase
href=""
target="_blank"
>
documentation
</StyledLinkBase>
if possible.
</Text>
<Text
style={
Object {
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
}
}
>
What are its limitations
</Text>
<Text
style={
Object {
"fontSize": 13,
"marginTop": 8,
}
}
>
A couple of lines about what copilot cant do and its limitations.
<StyledLinkBase
href=""
target="_blank"
>
Link to documentation
</StyledLinkBase>
</Text>
<Text
style={
Object {
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
}
}
>
Disclaimer
</Text>
<Text
style={
Object {
"fontSize": 13,
"marginTop": 8,
}
}
>
AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
<StyledLinkBase
href=""
target="_blank"
>
Read preview terms
</StyledLinkBase>
</Text>
</Stack>
<Separator
styles={
Object {
"root": Object {
"height": 1,
"padding": "16px 0",
"selectors": Object {
"::before": Object {
"background": undefined,
},
},
},
}
}
/>
<Stack
horizontal={true}
horizontalAlign="start"
verticalAlign="center"
>
<CustomizedPrimaryButton
disabled={false}
onClick={[Function]}
text="Next"
/>
</Stack>
</Stack>
</Modal>
`;

171
src/Explorer/QueryCopilot/__snapshots__/PromptCard.test.tsx.snap Normal file
View File

@@ -0,0 +1,171 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Prompt card snapshot test should render properly if isSelected is false 1`] = `
<Stack
horizontal={true}
style={
Object {
"border": "1px solid #F3F2F1",
"boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
"boxSizing": "border-box",
"height": 100,
"padding": "16px 0 16px 16px ",
"width": 650,
}
}
>
<StackItem
grow={1}
>
<Stack
horizontal={true}
>
<div>
<Text
style={
Object {
"background": "#F8FFF0",
"color": "#00A2AD",
"fontSize": 13,
}
}
>
Prompt
</Text>
</div>
<Text
style={
Object {
"fontSize": 13,
"marginLeft": 16,
}
}
>
TestHeader
</Text>
</Stack>
<Text
style={
Object {
"fontSize": 10,
"marginTop": 16,
}
}
>
TestDescription
</Text>
</StackItem>
<StackItem
style={
Object {
"marginLeft": 16,
}
}
>
<StyledChoiceGroup
onChange={[Function]}
options={
Array [
Object {
"key": "selected",
"text": "",
},
]
}
selectedKey=""
styles={
Object {
"flexContainer": Object {
"width": 36,
},
}
}
/>
</StackItem>
</Stack>
`;
exports[`Prompt card snapshot test should render properly if isSelected is true 1`] = `
<Stack
horizontal={true}
style={
Object {
"border": "1px solid #F3F2F1",
"boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
"boxSizing": "border-box",
"height": 100,
"padding": "16px 0 16px 16px ",
"width": 650,
}
}
>
<StackItem
grow={1}
>
<Stack
horizontal={true}
>
<div>
<Text
style={
Object {
"background": "#F8FFF0",
"color": "#00A2AD",
"fontSize": 13,
}
}
>
Prompt
</Text>
</div>
<Text
style={
Object {
"fontSize": 13,
"marginLeft": 16,
}
}
>
TestHeader
</Text>
</Stack>
<Text
style={
Object {
"fontSize": 10,
"marginTop": 16,
}
}
>
TestDescription
</Text>
</StackItem>
<StackItem
style={
Object {
"marginLeft": 16,
}
}
>
<StyledChoiceGroup
onChange={[Function]}
options={
Array [
Object {
"key": "selected",
"text": "",
},
]
}
selectedKey="selected"
styles={
Object {
"flexContainer": Object {
"width": 36,
},
}
}
/>
</StackItem>
</Stack>
`;

124
src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap Normal file
View File

@@ -0,0 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Query copilot tab snapshot test should render with initial input 1`] = `
<Stack
className="tab-pane"
style={
Object {
"height": "100%",
"padding": 24,
"width": "100%",
}
}
>
<Stack
horizontal={true}
verticalAlign="center"
>
<Image
src=""
/>
<Text
style={
Object {
"fontSize": 16,
"fontWeight": 600,
"marginLeft": 8,
}
}
>
Copilot
</Text>
</Stack>
<Stack
horizontal={true}
style={
Object {
"marginTop": 16,
"width": "100%",
}
}
verticalAlign="center"
>
<StyledTextFieldBase
onChange={[Function]}
style={
Object {
"lineHeight": 30,
}
}
styles={
Object {
"root": Object {
"width": "90%",
},
}
}
value="Write a query to return all records in this table"
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
style={
Object {
"marginLeft": 8,
}
}
/>
</Stack>
<Text
style={
Object {
"fontSize": 12,
"marginBottom": 24,
"marginTop": 8,
}
}
>
AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
<StyledLinkBase
href=""
target="_blank"
>
Read preview terms
</StyledLinkBase>
</Text>
<Stack
className="tabPaneContentContainer"
>
<t
customClassName=""
onDragEnd={null}
onDragStart={null}
onSecondaryPaneSizeChange={null}
percentage={false}
primaryIndex={0}
primaryMinSize={100}
secondaryMinSize={200}
vertical={true}
>
<EditorReact
ariaLabel="Editing Query"
content=""
isReadOnly={false}
language="sql"
lineNumbers="on"
onContentChanged={[Function]}
onContentSelected={[Function]}
/>
<QueryResultSection
error=""
executeQueryDocumentsPage={[Function]}
isExecuting={false}
isMongoDB={false}
queryEditorContent=""
/>
</t>
</Stack>
</Stack>
`;