ui for source container

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -184,7 +184,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowComputedPropertiesEditor = userContext.apiType === "SQL";
       this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
       this.shouldShowPartitionKeyEditor = userContext.apiType === "SQL" && isRunningOnPublicCloud();
-      this.isMaterializedView = !!this.collection?.materializedViewDefinition();
+      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,13 +1,47 @@
-import { Text } from "@fluentui/react";
+import { Link, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
+import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
 
 export interface MaterializedViewComponentProps {
   collection: ViewModels.Collection;
 }
 
 export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps> = ({ collection }) => {
-  console.log("collection", collection);
+  const isTargetContainer = !!collection?.materializedViewDefinition();
-  const sourceId = collection.materializedViewDefinition()?.sourceCollectionId;
+  const materializedViews = collection?.materializedViews() ?? [];
-  return <Text>{`Source ID: ${sourceId}`}</Text>;
+
+  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 }}>
+        <Text styles={{ root: { fontWeight: 600 } }}>This container has the following views defined for it</Text>
+        <Link target="_blank" href="https://aka.ms/MicrosoftCopilotForAzureInCDBHowTo">
+          Learn more
+        </Link>
+        <Text>about how to define materialized views and how to use them.</Text>
+      </Stack>
+
+      {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

@@ -0,0 +1,46 @@
+import { loadMonaco } from "Explorer/LazyMonaco";
+import * as monaco from "monaco-editor";
+import React, { useEffect, useRef } from "react";
+export interface MaterializedViewSourceComponentProps {
+  jsonValue: string;
+}
+
+export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({ jsonValue }) => {
+  const editorContainerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(null);
+
+  useEffect(() => {
+    let disposed = false;
+
+    const initMonaco = async () => {
+      const monacoInstance = await loadMonaco();
+      if (disposed || !editorContainerRef.current) return;
+
+      editorRef.current = monacoInstance.editor.create(editorContainerRef.current, {
+        value: jsonValue,
+        language: "json",
+        ariaLabel: "Materialized Views JSON",
+      });
+    };
+
+    initMonaco();
+
+    return () => {
+      disposed = true;
+      editorRef.current?.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.setValue(jsonValue);
+    }
+  }, [jsonValue]);
+
+  return (
+    <div
+      ref={editorContainerRef}
+      style={{ height: 250, border: "1px solid #ccc", borderRadius: 4, overflow: "hidden" }}
+    />
+  );
+};