target container

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>
   );
 };

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>
+  );
+};