diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 720bef874..88e83a83f 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -45,6 +45,10 @@ import {
ConflictResolutionComponentProps,
} from "./SettingsSubComponents/ConflictResolutionComponent";
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import {
+ MaterializedViewComponent,
+ MaterializedViewComponentProps,
+} from "./SettingsSubComponents/MaterializedViewComponent";
import {
MongoIndexingPolicyComponent,
MongoIndexingPolicyComponentProps,
@@ -162,6 +166,7 @@ export class SettingsComponent extends React.Component,
+ });
+ }
+
const pivotProps: IPivotProps = {
onLinkClick: this.onPivotChange,
selectedKey: SettingsV2TabTypes[this.state.selectedTab],
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx
new file mode 100644
index 000000000..73523fdc0
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx
@@ -0,0 +1,31 @@
+import { FontIcon, Link, Stack, Text } from "@fluentui/react";
+import React from "react";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
+import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
+
+export interface MaterializedViewComponentProps {
+ collection: ViewModels.Collection;
+}
+
+export const MaterializedViewComponent: React.FC = ({ collection }) => {
+ const isTargetContainer = !!collection?.materializedViewDefinition();
+ const isSourceContainer = !!collection?.materializedViews();
+
+ return (
+
+
+ This container has the following views defined for it.
+
+
+ Learn more
+
+ {" "}
+ about how to define materialized views and how to use them.
+
+
+ {isSourceContainer && }
+ {isTargetContainer && }
+
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx
new file mode 100644
index 000000000..dafbd930c
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.tsx
@@ -0,0 +1,96 @@
+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 {
+ collection: ViewModels.Collection;
+}
+
+export const MaterializedViewSourceComponent: React.FC = ({ collection }) => {
+ const editorContainerRef = useRef(null);
+ const editorRef = useRef(null);
+
+ const materializedViews = collection?.materializedViews() ?? [];
+
+ // Helper function to fetch the definition and partition key of targetContainer by traversing through all collections and matching id from MaterializedViews[] with collection id.
+ const getViewDetails = (viewId: string): { definition: string; partitionKey: string[] } => {
+ let definition = "";
+ let partitionKey: string[] = [];
+
+ useDatabases.getState().databases.find((database) => {
+ const collection = database.collections().find((collection) => collection.id() === viewId);
+ if (collection) {
+ const materializedViewDefinition = collection.materializedViewDefinition();
+ materializedViewDefinition && (definition = materializedViewDefinition.definition);
+ collection.partitionKey?.paths && (partitionKey = collection.partitionKey.paths);
+ }
+ });
+
+ return { definition, partitionKey };
+ };
+
+ //JSON value for the editor using the fetched id and definitions.
+ const jsonValue = JSON.stringify(
+ materializedViews.map((view) => {
+ const { definition, partitionKey } = getViewDetails(view.id);
+ return {
+ name: view.id,
+ partitionKey: partitionKey.join(", "),
+ definition,
+ };
+ }),
+ 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;
+
+ editorRef.current = monacoInstance.editor.create(editorContainerRef.current, {
+ value: jsonValue,
+ language: "json",
+ ariaLabel: "Materialized Views JSON",
+ readOnly: true,
+ });
+ };
+
+ initMonaco();
+ return () => {
+ disposed = true;
+ editorRef.current?.dispose();
+ };
+ }, [jsonValue]);
+
+ // Update the editor when the jsonValue changes.
+ useEffect(() => {
+ if (editorRef.current) {
+ editorRef.current.setValue(jsonValue);
+ }
+ }, [jsonValue]);
+
+ return (
+
+
+
console.log("Add view clicked")}
+ />
+