Merge branch 'main' into dev/tnaum/sync-doc-deletion-across-views

.github/CODEOWNERS

@@ -1 +1,6 @@
-* @Microsoft/vscodeazuretoolsdev @Microsoft/vscode-cosmosdb-extension
+/.azure-pipelines @Microsoft/vscodeazuretoolsdev @Microsoft/cosmosdb-vscode-engineering
+/.config @Microsoft/vscodeazuretoolsdev @Microsoft/cosmosdb-vscode-engineering
+/src/mongoClusters @tnaum-ms @sevoku
+/src/mongo @tnaum-ms @sevoku
+/src/docdb @bk201- @sevoku
+* @Microsoft/cosmosdb-vscode-engineering

src/webviews/Document/DocumentPanel.tsx

@@ -95,9 +95,10 @@ export const DocumentPanel = () => {
     const state = useDocumentState();
     const dispatcher = useDocumentDispatcher();
 
+    const isReady = state.isReady;
     const isReadOnly = state.mode === 'view';
     const inProgress = state.isSaving || state.isRefreshing;
-    const hasDocumentInDB = state.documentId !== undefined;
+    const hasDocumentInDB = state.documentId !== '';
 
     const onSave = async () => {
         // Save document to the database
@@ -178,6 +179,14 @@ export const DocumentPanel = () => {
         void dispatcher?.notifyDirty?.(state.isDirty);
     }, [dispatcher, state.isDirty]);
 
+    if (!isReady || !state.currentDocumentContent) {
+        return (
+            <section className={classes.container}>
+                <ProgressBar />
+            </section>
+        );
+    }
+
     return (
         <section className={classes.container}>
             <UnsavedChangesDialog open={open} setOpen={setOpen} doAction={doAction} />

src/webviews/Document/DocumentToolbar.tsx

@@ -20,9 +20,10 @@ export type DocumentToolbarProps = {
 export const DocumentToolbar = (props: DocumentToolbarProps) => {
     const state = useDocumentState();
 
+    const isReady = state.isReady;
     const inProgress = state.isSaving || state.isRefreshing;
-    const hasDocumentInDB = state.documentId !== undefined;
-    const isReadOnly = state.mode === 'view';
+    const hasDocumentInDB = state.documentId !== '';
+    const isReadOnly = isReady && state.mode === 'view'; // If the document is not initialized, it is considered as not state
     const isMac = navigator.platform.toLowerCase().includes('mac');
 
     const onSaveHotkeyTitle = isMac ? '\u2318 S' : 'Ctrl+S';
@@ -32,7 +33,7 @@ export const DocumentToolbar = (props: DocumentToolbarProps) => {
     return (
         <>
             <Toolbar size={'small'}>
-                {!isReadOnly && (
+                {isReady && !isReadOnly && (
                     <Tooltip
                         content={`Save document to the database (${onSaveHotkeyTitle})`}
                         relationship="description"
@@ -49,7 +50,7 @@ export const DocumentToolbar = (props: DocumentToolbarProps) => {
                         </ToolbarButton>
                     </Tooltip>
                 )}
-                {isReadOnly && (
+                {isReady && isReadOnly && (
                     <Tooltip
                         content={`Open document for editing (${onEditHotkeyTitle})`}
                         relationship="description"

src/webviews/Document/state/DocumentContextProvider.tsx

@@ -66,6 +66,7 @@ export class DocumentContextProvider extends BaseContextProvider {
                 }
 
                 this.dispatch({ type: 'initState', mode, databaseId, containerId, documentId, partitionKey });
+                this.dispatch({ type: 'setRefreshing', isRefreshing: true });
             },
         );
 

src/webviews/Document/state/DocumentState.tsx

@@ -66,6 +66,7 @@ export type DocumentState = {
     isDirty: boolean; // Document has been modified
     isSaving: boolean; // Document is being saved
     isRefreshing: boolean; // Document is being refreshed
+    isReady: boolean; // Document is being initialized
 
     currentDocumentContent: string; // Current content of the document
     error: string | undefined; // Error message
@@ -81,7 +82,8 @@ export const defaultState: DocumentState = {
     isValid: true,
     isDirty: false,
     isSaving: false,
-    isRefreshing: true,
+    isRefreshing: false,
+    isReady: false,
     currentDocumentContent: '',
     error: undefined,
 };
@@ -106,6 +108,7 @@ export function dispatch(state: DocumentState, action: DispatchAction): Document
                 documentId: action.documentId,
                 dbName: action.databaseId,
                 collectionName: action.containerId,
+                isReady: true,
             };
         case 'setDocument':
             return {

src/webviews/QueryEditor/QueryEditor.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles({
     root: {
         display: 'grid',
         gridTemplateRows: '100vh',
-        minWidth: '900px',
+        // minWidth: '520px',
     },
 });
 

src/webviews/QueryEditor/QueryPanel/QueryPanel.tsx

@@ -5,7 +5,7 @@
 
 import { makeStyles } from '@fluentui/react-components';
 import { QueryMonaco } from './QueryMonaco';
-import { QueryToolbar } from './QueryToolbar';
+import { QueryToolbarOverflow } from './QueryToolbarOverflow';
 
 const useClasses = makeStyles({
     monacoContainer: {
@@ -26,7 +26,7 @@ export const QueryPanel = () => {
 
     return (
         <section className={classes.container}>
-            <QueryToolbar />
+            <QueryToolbarOverflow />
             <section className={classes.monacoContainer}>
                 <QueryMonaco />
             </section>