random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add welcome popop for query copilot (#1493)

Browse Source
This commit is contained in:
v-darkora
2023-07-06 09:49:34 +02:00
committed by GitHub
parent 4742ee0e7b
commit ebfc9d4b36
8 changed files with 206 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/Explorer/QueryCopilot/Modal/WelcomeModal.css Normal file
View File

@@ -0,0 +1,47 @@
.modalContentPadding {
padding-top: 15px;
width: 513px;
height: 638px;
}
.exitPadding {
padding: 0px 7px 0px 0px;
}
.previewMargin {
margin: 8px 10px 0px 0;
}
.preview {
padding: 0px 4px;
background: #f0f0f0;
border-radius: 8px;
font-size: 10px;
}
.exitIcon {
margin: 3px 7px 0px 0px;
color: #424242;
}
.text {
width: 348px;
padding: 8px 16px 8px 16px;
margin-left: 25px;
}
.bold {
font-weight: 600;
}
.imageTextPadding {
padding: 0px 5px 0px 0px;
}
.buttonPadding {
padding: 15px 0px 0px 0px;
}
.tryButton {
border-radius: 4px;
}

116
src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React from "react";
import Database from "../../../../images/CopilotDatabase.svg";
import Flash from "../../../../images/CopilotFlash.svg";
import Thumb from "../../../../images/CopilotThumb.svg";
import CoplilotWelcomeIllustration from "../../../../images/CopliotWelcomeIllustration.svg";
import "./WelcomeModal.css";
export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element => {
const [isModalVisible, { setFalse: hideModal }] = useBoolean(visible);
React.useEffect(() => {
if (visible) {
window.localStorage.setItem("hideWelcomeModal", "true");
}
});
return (
<>
(
<Modal isOpen={isModalVisible} onDismiss={hideModal} isBlocking={false}>
<Stack className="modalContentPadding">
<Stack horizontal>
<Stack horizontal grow={4} horizontalAlign="end">
<Stack.Item>
<Image src={CoplilotWelcomeIllustration} />
</Stack.Item>
</Stack>
<Stack horizontal grow={1} horizontalAlign="end" verticalAlign="start" className="exitPadding">
<Stack.Item className="previewMargin">
<Text className="preview">Preview</Text>
</Stack.Item>
<Stack.Item>
<IconButton
onClick={hideModal}
iconProps={{ iconName: "Cancel" }}
title="Exit"
ariaLabel="Exit"
className="exitIcon"
/>
</Stack.Item>
</Stack>
</Stack>
<Stack horizontalAlign="center">
<Stack.Item align="center">
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Flash} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Let copilot do the work for you
<br />
</Text>
</StackItem>
</Stack>
<Text>
Ask Copilot to generate a query by describing the query in your words.
<br />
<Link href="">Learn more</Link>
</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Thumb} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Use your judgement
<br />
</Text>
</StackItem>
</Stack>
<Text>
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
<br />
<Link href="">Read preview terms</Link>
</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Database} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Copilot currently works only a sample database
<br />
</Text>
</StackItem>
</Stack>
<Text>
Copilot is setup on a sample database we have configured for you at no cost
<br />
<Link href="">Learn more</Link>
</Text>
</Stack.Item>
</Stack>
<Stack className="buttonPadding">
<Stack.Item align="center">
<PrimaryButton onClick={hideModal} className="tryButton">
Try Copilot
</PrimaryButton>
</Stack.Item>
</Stack>
</Stack>
</Modal>
)
</>
);
};

2
src/Explorer/QueryCopilot/QueryCopilotTab.tsx
View File

@@ -31,6 +31,7 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
import Explorer from "Explorer/Explorer";
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
@@ -487,6 +488,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
/>
</SplitterLayout>
</Stack>
<WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"}></WelcomeModal>
{isSamplePromptsOpen ? <SamplePrompts sampleProps={sampleProps} /> : <></>}
{query !== "" && query.trim().length !== 0 ? (
<DeletePopup showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} />

3
src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
View File

@@ -126,6 +126,9 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
/>
</t>
</Stack>
<WelcomeModal
visible={true}
/>
<CopyPopup
setShowCopyPopup={[Function]}
showCopyPopup={false}