source view complete

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -186,7 +186,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
       this.isMaterializedView =
         !!this.collection?.materializedViewDefinition() || !!this.collection?.materializedViews();
-      console.log("Is Materialized View:", this.isMaterializedView);
       this.isVectorSearchEnabled = isVectorSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
       this.isFullTextSearchEnabled = isFullTextSearchEnabled() && !hasDatabaseSharedThroughput(this.collection);
 

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx

@@ -1,4 +1,4 @@
-import { Link, PrimaryButton, Stack, Text } from "@fluentui/react";
+import { Link, Stack, Text } from "@fluentui/react";
 import React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
@@ -8,23 +8,12 @@ export interface MaterializedViewComponentProps {
 }
 
 export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps> = ({ collection }) => {
+  // If this container itself defines a materialized view, skip rendering this component.
   const isTargetContainer = !!collection?.materializedViewDefinition();
-  const materializedViews = collection?.materializedViews() ?? [];
-
   if (isTargetContainer) {
     return null;
   }
 
-  const showEditor = materializedViews.length > 0;
-  const jsonValue = JSON.stringify(
-    materializedViews.map((view) => ({
-      name: view.id,
-      definition: view.id,
-    })),
-    null,
-    2,
-  );
-
   return (
     <Stack tokens={{ childrenGap: 12 }} styles={{ root: { maxWidth: 600 } }}>
       <Stack horizontal verticalAlign="center" wrap tokens={{ childrenGap: 8 }}>
@@ -34,14 +23,7 @@ export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps>
         </Link>
         <Text>about how to define materialized views and how to use them.</Text>
       </Stack>
-
+      <MaterializedViewSourceComponent collection={collection} />
-      {showEditor && <MaterializedViewSourceComponent jsonValue={jsonValue} />}
-
-      <PrimaryButton
-        text="Add view"
-        styles={{ root: { width: "fit-content" } }}
-        onClick={() => console.log("Add view clicked")}
-      />
     </Stack>
   );
 };

src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx

@@ -1,17 +1,48 @@
+import { PrimaryButton } from "@fluentui/react";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { useDatabases } from "Explorer/useDatabases";
 import * as monaco from "monaco-editor";
 import React, { useEffect, useRef } from "react";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+
 export interface MaterializedViewSourceComponentProps {
-  jsonValue: string;
+  collection: ViewModels.Collection;
 }
 
-export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({ jsonValue }) => {
+export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({ collection }) => {
   const editorContainerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(null);
 
+  // Get the materialized views from the provided collection.
+  const materializedViews = collection?.materializedViews() ?? [];
+
+  // Helper function to fetch the view definition by matching viewId with collection id.
+  const getViewDefinition = (viewId: string): string => {
+    let definition = "";
+    useDatabases.getState().databases.forEach((database) => {
+      database.collections().forEach((coll) => {
+        const materializedViewDefinition = coll.materializedViewDefinition();
+        if (materializedViewDefinition && coll.id() === viewId) {
+          definition = materializedViewDefinition.definition;
+        }
+      });
+    });
+    return definition;
+  };
+
+  // Build the JSON value for the editor using the fetched definitions.
+  const jsonValue = JSON.stringify(
+    materializedViews.map((view) => ({
+      name: view.id,
+      definition: getViewDefinition(view.id),
+    })),
+    null,
+    2,
+  );
+
+  // Initialize Monaco editor with the computed JSON value.
   useEffect(() => {
     let disposed = false;
-
     const initMonaco = async () => {
       const monacoInstance = await loadMonaco();
       if (disposed || !editorContainerRef.current) return;
@@ -24,13 +55,13 @@ export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceCom
     };
 
     initMonaco();
-
     return () => {
       disposed = true;
       editorRef.current?.dispose();
     };
-  }, []);
+  }, [jsonValue]);
 
+  // Update the editor when the jsonValue changes.
   useEffect(() => {
     if (editorRef.current) {
       editorRef.current.setValue(jsonValue);
@@ -38,9 +69,21 @@ export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceCom
   }, [jsonValue]);
 
   return (
-    <div
+    <div>
-      ref={editorContainerRef}
+      <div
-      style={{ height: 250, border: "1px solid #ccc", borderRadius: 4, overflow: "hidden" }}
+        ref={editorContainerRef}
-    />
+        style={{
+          height: 250,
+          border: "1px solid #ccc",
+          borderRadius: 4,
+          overflow: "hidden",
+        }}
+      />
+      <PrimaryButton
+        text="Add view"
+        styles={{ root: { width: "fit-content", marginTop: 12 } }}
+        onClick={() => console.log("Add view clicked")}
+      />
+    </div>
   );
 };