random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Query Copilot] Add toggle on feedback buttons (#1512) 

* Add toggle on feedback buttons, clear state when new query generated or deleted

* Update test
This commit is contained in:
v-darkora 2023-07-06 09:49:59 +02:00 committed by GitHub
parent ebfc9d4b36
commit 90178178c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Explorer/QueryCopilot/Popup/DeletePopup.test.tsx
View File

@ -5,7 +5,15 @@ import { DeletePopup } from "./DeletePopup";
describe("Delete Popup snapshot test", () => {
it("should render when showDeletePopup is true", () => {
const wrapper = shallow(<DeletePopup showDeletePopup={true} setShowDeletePopup={() => any} setQuery={() => any} />);
const wrapper = shallow(
<DeletePopup
showDeletePopup={true}
setShowDeletePopup={() => any}
setQuery={() => any}
clearFeedback={() => any}
showFeedbackBar={() => any}
/>
);
expect(wrapper).toMatchSnapshot();
});
});

6
src/Explorer/QueryCopilot/Popup/DeletePopup.tsx
View File

@ -5,14 +5,20 @@ export const DeletePopup = ({
showDeletePopup,
setShowDeletePopup,
setQuery,
clearFeedback,
showFeedbackBar,
}: {
showDeletePopup: boolean;
setShowDeletePopup: Dispatch<SetStateAction<boolean>>;
setQuery: Dispatch<SetStateAction<string>>;
clearFeedback: Dispatch<SetStateAction<void>>;
showFeedbackBar: Dispatch<SetStateAction<boolean>>;
}): JSX.Element => {
const deleteCode = () => {
setQuery("");
setShowDeletePopup(false);
clearFeedback();
showFeedbackBar(false);
};
return (

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

@ -87,6 +87,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
const [isGeneratingQuery, setIsGeneratingQuery] = useState<boolean>(false);
const [isExecuting, setIsExecuting] = useState<boolean>(false);
const [likeQuery, setLikeQuery] = useState<boolean>();
const [dislikeQuery, setDislikeQuery] = useState<boolean>();
const [showCallout, setShowCallout] = useState<boolean>(false);
const [showSamplePrompts, setShowSamplePrompts] = useState<boolean>(false);
const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
@ -263,6 +264,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
};
const resetButtonState = () => {
setDislikeQuery(false);
setLikeQuery(false);
setShowCallout(false);
};
React.useEffect(() => {
useCommandBar.getState().setContextButtons(getCommandbarButtons());
}, [query, selectedQuery]);
@ -291,6 +298,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
onClick={() => {
updateHistories();
generateSQLQuery();
resetButtonState();
}}
/>
{isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
@ -434,17 +442,23 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
style={{ marginLeft: 20 }}
iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
onClick={() => {
setLikeQuery(true);
setShowCallout(true);
setShowCallout(!likeQuery);
setLikeQuery(!likeQuery);
if (dislikeQuery) {
setDislikeQuery(!dislikeQuery);
}
}}
/>
<IconButton
style={{ margin: "0 10px" }}
iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
onClick={() => {
setLikeQuery(false);
if (!dislikeQuery) {
useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
setLikeQuery(false);
}
setDislikeQuery(!dislikeQuery);
setShowCallout(false);
useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
}}
/>
<Separator vertical style={{ color: "#EDEBE9" }} />
@ -456,7 +470,9 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
Copy code
</CommandBarButton>
<CommandBarButton
onClick={() => setShowDeletePopup(true)}
onClick={() => {
setShowDeletePopup(true);
}}
iconProps={{ iconName: "Delete" }}
style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
>
@ -491,7 +507,13 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
<WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"}></WelcomeModal>
{isSamplePromptsOpen ? <SamplePrompts sampleProps={sampleProps} /> : <></>}
{query !== "" && query.trim().length !== 0 ? (
<DeletePopup showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} />
<DeletePopup
showDeletePopup={showDeletePopup}
setShowDeletePopup={setShowDeletePopup}
setQuery={setQuery}
clearFeedback={resetButtonState}
showFeedbackBar={setShowFeedbackBar}
/>
) : (
<></>
)}