From 8c8f39428b8d54b17d94164f83a3e02b1d163adb Mon Sep 17 00:00:00 2001
From: Nishtha Ahuja <nishthaahuja@microsoft.com>
Date: Fri, 21 Feb 2025 16:01:07 +0530
Subject: [PATCH] target container

---
 .../MaterializedViewComponent.tsx             |  3 ++
 .../MaterializedViewTargetComponent.tsx       | 43 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.tsx

diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx
index af899426a..285e124f2 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.tsx
@@ -2,12 +2,14 @@ import { 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<MaterializedViewComponentProps> = ({ collection }) => {
+  const isTargetContainer = !!collection?.materializedViewDefinition();
   const isSourceContainer = !!collection?.materializedViews();
 
   return (
@@ -23,6 +25,7 @@ export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps>
         </Text>
       </Stack>
       {isSourceContainer && <MaterializedViewSourceComponent collection={collection} />}
+      {isTargetContainer && <MaterializedViewTargetComponent collection={collection} />}
     </Stack>
   );
 };
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.tsx
new file mode 100644
index 000000000..371da00ed
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.tsx
@@ -0,0 +1,43 @@
+import { Stack, Text } from "@fluentui/react";
+import * as React from "react";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+
+export interface MaterializedViewTargetComponentProps {
+  collection: ViewModels.Collection;
+}
+
+export const MaterializedViewTargetComponent: React.FC<MaterializedViewTargetComponentProps> = ({ collection }) => {
+  const materializedViewDefinition = collection?.materializedViewDefinition();
+
+  const textHeadingStyle = {
+    root: { fontWeight: "600", fontSize: 16 },
+  };
+
+  const valueBoxStyle = {
+    root: {
+      backgroundColor: "#f3f3f3",
+      padding: "5px 10px",
+      borderRadius: "4px",
+    },
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 15 }} styles={{ root: { maxWidth: 600 } }}>
+      <Text styles={textHeadingStyle}>Materialized View Settings</Text>
+
+      <Stack tokens={{ childrenGap: 5 }}>
+        <Text styles={{ root: { fontWeight: "600" } }}>Source container</Text>
+        <Stack styles={valueBoxStyle}>
+          <Text>{materializedViewDefinition?.sourceCollectionId}</Text>
+        </Stack>
+      </Stack>
+
+      <Stack tokens={{ childrenGap: 5 }}>
+        <Text styles={{ root: { fontWeight: "600" } }}>Materialized view definition</Text>
+        <Stack styles={valueBoxStyle}>
+          <Text>{materializedViewDefinition?.definition}</Text>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};