Compare commits

...

2 Commits

Author SHA1 Message Date
sunghyunkang1111
7314f6d259 add databaseName in the connection strings 2024-01-18 08:56:00 -06:00
sunghyunkang1111
a616cf8bda Fix the teaching bubble popup and enable copilot card 2024-01-17 10:33:47 -06:00
7 changed files with 30 additions and 16 deletions

View File

@@ -234,7 +234,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
const handleSampleDatabaseChange = async (ev: React.MouseEvent<HTMLElement>, checked?: boolean): Promise<void> => { const handleSampleDatabaseChange = async (ev: React.MouseEvent<HTMLElement>, checked?: boolean): Promise<void> => {
setCopilotSampleDBEnabled(checked); setCopilotSampleDBEnabled(checked);
useQueryCopilot.getState().setCopilotSampleDBEnabled(checked); useQueryCopilot.getState().setCopilotSampleDBEnabled(checked);
setRefreshExplorer(!refreshExplorer); setRefreshExplorer(false);
}; };
const choiceButtonStyles = { const choiceButtonStyles = {

View File

@@ -30,6 +30,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
queryResults: undefined, queryResults: undefined,
errorMessage: "", errorMessage: "",
isSamplePromptsOpen: false, isSamplePromptsOpen: false,
showPromptTeachingBubble: true,
showDeletePopup: false, showDeletePopup: false,
showFeedbackBar: false, showFeedbackBar: false,
showCopyPopup: false, showCopyPopup: false,
@@ -65,6 +66,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }), setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
setErrorMessage: (errorMessage: string) => set({ errorMessage }), setErrorMessage: (errorMessage: string) => set({ errorMessage }),
setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }), setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => set({ showPromptTeachingBubble }),
setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }), setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }), setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }), setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
@@ -103,6 +105,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
queryResults: undefined, queryResults: undefined,
errorMessage: "", errorMessage: "",
isSamplePromptsOpen: false, isSamplePromptsOpen: false,
showPromptTeachingBubble: true,
showDeletePopup: false, showDeletePopup: false,
showFeedbackBar: false, showFeedbackBar: false,
showCopyPopup: false, showCopyPopup: false,

View File

@@ -18,7 +18,6 @@ import {
Text, Text,
TextField, TextField,
} from "@fluentui/react"; } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import { HttpStatusCodes } from "Common/Constants"; import { HttpStatusCodes } from "Common/Constants";
import { handleError } from "Common/ErrorHandlingUtils"; import { handleError } from "Common/ErrorHandlingUtils";
import { createUri } from "Common/UrlUtility"; import { createUri } from "Common/UrlUtility";
@@ -71,7 +70,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
databaseId, databaseId,
containerId, containerId,
}: QueryCopilotPromptProps): JSX.Element => { }: QueryCopilotPromptProps): JSX.Element => {
const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false); const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState<boolean>(false);
const inputEdited = useRef(false); const inputEdited = useRef(false);
const { const {
openFeedbackModal, openFeedbackModal,
@@ -94,6 +93,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
setIsSamplePromptsOpen, setIsSamplePromptsOpen,
showSamplePrompts, showSamplePrompts,
setShowSamplePrompts, setShowSamplePrompts,
showPromptTeachingBubble,
setShowPromptTeachingBubble,
showDeletePopup, showDeletePopup,
setShowDeletePopup, setShowDeletePopup,
showFeedbackBar, showFeedbackBar,
@@ -272,16 +273,23 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
}; };
const showTeachingBubble = (): void => { const showTeachingBubble = (): void => {
if (!inputEdited.current) { if (showPromptTeachingBubble && !inputEdited.current) {
setTimeout(() => { setTimeout(() => {
if (!inputEdited.current && !isWelcomModalVisible()) { if (!inputEdited.current && !isWelcomModalVisible()) {
toggleCopilotTeachingBubbleVisible(); setCopilotTeachingBubbleVisible(true);
inputEdited.current = true; inputEdited.current = true;
} }
}, 30000); }, 30000);
} else {
toggleCopilotTeachingBubbleVisible(false);
} }
}; };
const toggleCopilotTeachingBubbleVisible = (visible: boolean): void => {
setCopilotTeachingBubbleVisible(visible);
setShowPromptTeachingBubble(visible);
};
const isWelcomModalVisible = (): boolean => { const isWelcomModalVisible = (): boolean => {
return localStorage.getItem("hideWelcomeModal") !== "true"; return localStorage.getItem("hideWelcomeModal") !== "true";
}; };
@@ -364,13 +372,13 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
placeholder="Ask a question in natural language and well generate the query for you." placeholder="Ask a question in natural language and well generate the query for you."
aria-labelledby="copilot-textfield-label" aria-labelledby="copilot-textfield-label"
/> />
{copilotTeachingBubbleVisible && ( {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
<TeachingBubble <TeachingBubble
calloutProps={{ directionalHint: DirectionalHint.bottomCenter }} calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
target="#naturalLanguageInput" target="#naturalLanguageInput"
hasCloseButton={true} hasCloseButton={true}
closeButtonAriaLabel="Close" closeButtonAriaLabel="Close"
onDismiss={toggleCopilotTeachingBubbleVisible} onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
hasSmallHeadline={true} hasSmallHeadline={true}
headline="Write a prompt" headline="Write a prompt"
> >
@@ -378,7 +386,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
<Link <Link
onClick={() => { onClick={() => {
setShowSamplePrompts(true); setShowSamplePrompts(true);
toggleCopilotTeachingBubbleVisible(); toggleCopilotTeachingBubbleVisible(false);
}} }}
style={{ color: "white", fontWeight: 600 }} style={{ color: "white", fontWeight: 600 }}
> >

View File

@@ -148,7 +148,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
/> />
</Stack> </Stack>
<Stack horizontal tokens={{ childrenGap: 16 }}> <Stack horizontal tokens={{ childrenGap: 16 }}>
{useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotSampleDBEnabled && ( {useQueryCopilot.getState().copilotEnabled && (
<SplashScreenButton <SplashScreenButton
imgSrc={CopilotIcon} imgSrc={CopilotIcon}
title={"Query faster with Copilot"} title={"Query faster with Copilot"}

View File

@@ -16,7 +16,7 @@ import React from "react";
import { userContext } from "UserContext"; import { userContext } from "UserContext";
export const PostgresConnectTab: React.FC = (): JSX.Element => { export const PostgresConnectTab: React.FC = (): JSX.Element => {
const { adminLogin, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams; const { adminLogin, databaseName, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams;
const [usePgBouncerPort, setUsePgBouncerPort] = React.useState<boolean>(false); const [usePgBouncerPort, setUsePgBouncerPort] = React.useState<boolean>(false);
const [selectedNode, setSelectedNode] = React.useState<string>(nodes?.[0]?.value); const [selectedNode, setSelectedNode] = React.useState<string>(nodes?.[0]?.value);
const portNumber = usePgBouncerPort ? "6432" : "5432"; const portNumber = usePgBouncerPort ? "6432" : "5432";
@@ -40,11 +40,11 @@ export const PostgresConnectTab: React.FC = (): JSX.Element => {
text: node.text, text: node.text,
})); }));
const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/citus?sslmode=require`; const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/${databaseName}?sslmode=require`;
const psql = `psql "host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require"`; const psql = `psql "host=${selectedNode} port=${portNumber} dbname=${databaseName} user=${adminLogin} password={your_password} sslmode=require"`;
const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/citus?user=${adminLogin}&password={your_password}&sslmode=require`; const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/${databaseName}?user=${adminLogin}&password={your_password}&sslmode=require`;
const libpq = `host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require`; const libpq = `host=${selectedNode} port=${portNumber} dbname=${databaseName} user=${adminLogin} password={your_password} sslmode=require`;
const adoDotNet = `Server=${selectedNode};Database=citus;Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`; const adoDotNet = `Server=${selectedNode};Database=${databaseName};Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`;
return ( return (
<div style={{ width: "100%", padding: 16 }}> <div style={{ width: "100%", padding: 16 }}>

View File

@@ -36,6 +36,7 @@ export interface Node {
export interface PostgresConnectionStrParams { export interface PostgresConnectionStrParams {
adminLogin: string; adminLogin: string;
databaseName: string;
enablePublicIpAccess: boolean; enablePublicIpAccess: boolean;
nodes: Node[]; nodes: Node[];
isMarlinServerGroup: boolean; isMarlinServerGroup: boolean;

View File

@@ -29,6 +29,7 @@ export interface QueryCopilotState {
queryResults: QueryResults | undefined; queryResults: QueryResults | undefined;
errorMessage: string; errorMessage: string;
isSamplePromptsOpen: boolean; isSamplePromptsOpen: boolean;
showPromptTeachingBubble: boolean;
showDeletePopup: boolean; showDeletePopup: boolean;
showFeedbackBar: boolean; showFeedbackBar: boolean;
showCopyPopup: boolean; showCopyPopup: boolean;
@@ -71,6 +72,7 @@ export interface QueryCopilotState {
setQueryResults: (queryResults: QueryResults | undefined) => void; setQueryResults: (queryResults: QueryResults | undefined) => void;
setErrorMessage: (errorMessage: string) => void; setErrorMessage: (errorMessage: string) => void;
setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void; setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void;
setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => void;
setShowDeletePopup: (showDeletePopup: boolean) => void; setShowDeletePopup: (showDeletePopup: boolean) => void;
setShowFeedbackBar: (showFeedbackBar: boolean) => void; setShowFeedbackBar: (showFeedbackBar: boolean) => void;
setshowCopyPopup: (showCopyPopup: boolean) => void; setshowCopyPopup: (showCopyPopup: boolean) => void;
@@ -93,7 +95,7 @@ export interface QueryCopilotState {
resetQueryCopilotStates: () => void; resetQueryCopilotStates: () => void;
} }
type QueryCopilotStore = UseStore<QueryCopilotState>; type QueryCopilotStore = UseStore<Partial<QueryCopilotState>>;
export const useQueryCopilot: QueryCopilotStore = create((set) => ({ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
copilotEnabled: false, copilotEnabled: false,