random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 23:16:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Query Copilot] Adding loading spinner for Copilot tab (#1494)

Browse Source 
* Add loading spinner for react tabs

* Run prettier and import useTabs instead of passing it
This commit is contained in:
v-darkora 2023-06-26 09:13:30 +02:00 committed by GitHub
parent 15e8c66aa4
commit 0b6cb8ee3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,7 @@ import SplitterLayout from "react-splitter-layout";
import CopilotIcon from "../../../images/Copilot.svg";
import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
import SaveQueryIcon from "../../../images/save-cosmos.svg";
import { useTabs } from "../../hooks/useTabs";
interface QueryCopilotTabProps {
initialInput: string;
@ -73,6 +74,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
const generateSQLQuery = async (): Promise<void> => {
try {
setIsGeneratingQuery(true);
useTabs.getState().setIsTabExecuting(true);
const payload = {
containerSchema: QueryCopilotSampleContainerSchema,
userPrompt: userInput,
@ -101,6 +103,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
throw error;
} finally {
setIsGeneratingQuery(false);
useTabs.getState().setIsTabExecuting(false);
}
};
@ -119,6 +122,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
const queryDocumentsPerPage = async (firstItemIndex: number, queryIterator: MinimalQueryIterator): Promise<void> => {
try {
setIsExecuting(true);
useTabs.getState().setIsTabExecuting(true);
const queryResults: QueryResults = await queryPagesUntilContentPresent(
firstItemIndex,
async (firstItemIndex: number) =>
@ -133,6 +137,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
handleError(errorMessage, "executeQueryCopilotTab");
} finally {
setIsExecuting(false);
useTabs.getState().setIsTabExecuting(false);
}
};

11
src/Explorer/Tabs/Tabs.tsx
View File

@ -113,7 +113,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
<div className="tab_Content">
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
{useObservable(tab?.isExecuting || ko.observable(false)) && (
{isTabExecuting(tab, tabKind) && (
<img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
)}
</span>
@ -211,6 +211,15 @@ const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
}
};
const isTabExecuting = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
if (useObservable(tab?.isExecuting || ko.observable(false))) {
return true;
} else if (tabKind !== undefined && tabKind !== ReactTabKind.Home && useTabs.getState()?.isTabExecuting) {
return true;
}
return false;
};
const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
switch (activeReactTab) {
case ReactTabKind.Connect:

6
src/hooks/useTabs.ts
View File

@ -11,6 +11,7 @@ interface TabsState {
activeReactTab: ReactTabKind | undefined;
networkSettingsWarning: string;
queryCopilotTabInitialInput: string;
isTabExecuting: boolean;
activateTab: (tab: TabsBase) => void;
activateNewTab: (tab: TabsBase) => void;
activateReactTab: (tabkind: ReactTabKind) => void;
@ -24,6 +25,7 @@ interface TabsState {
closeReactTab: (tabKind: ReactTabKind) => void;
setNetworkSettingsWarning: (warningMessage: string) => void;
setQueryCopilotTabInitialInput: (input: string) => void;
setIsTabExecuting: (state: boolean) => void;
}
export enum ReactTabKind {
@ -40,6 +42,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
activeReactTab: ReactTabKind.Home,
networkSettingsWarning: "",
queryCopilotTabInitialInput: "",
isTabExecuting: false,
activateTab: (tab: TabsBase): void => {
if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
set({ activeTab: tab, activeReactTab: undefined });
@ -151,4 +154,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
},
setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
setQueryCopilotTabInitialInput: (input: string) => set({ queryCopilotTabInitialInput: input }),
setIsTabExecuting: (state: boolean) => {
set({ isTabExecuting: state });
},
}));