Panel Integration (#2075)

* integrated panel

* edited header text

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
Co-authored-by: Asier Isayas <aisayas@microsoft.com>

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1281,6 +1281,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     const materializedViewComponentProps: MaterializedViewComponentProps = {
       collection: this.collection,
+      explorer: this.props.settingsTab.getContainer(),
     };
 
     const tabs: SettingsV2TabInfo[] = [];

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

@@ -1,4 +1,5 @@
 import { FontIcon, Link, Stack, Text } from "@fluentui/react";
+import Explorer from "Explorer/Explorer";
 import React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
@@ -6,9 +7,10 @@ import { MaterializedViewTargetComponent } from "./MaterializedViewTargetCompone
 
 export interface MaterializedViewComponentProps {
   collection: ViewModels.Collection;
+  explorer: Explorer;
 }
 
-export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps> = ({ collection }) => {
+export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps> = ({ collection, explorer }) => {
   const isTargetContainer = !!collection?.materializedViewDefinition();
   const isSourceContainer = !!collection?.materializedViews();
 
@@ -17,14 +19,17 @@ export const MaterializedViewComponent: React.FC<MaterializedViewComponentProps>
       <Stack horizontal verticalAlign="center" wrap tokens={{ childrenGap: 8 }}>
         <Text styles={{ root: { fontWeight: 600 } }}>This container has the following views defined for it.</Text>
         <Text>
-          <Link href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/materialized-views#defining-materialized-views">
+          <Link
+            target="_blank"
+            href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/materialized-views#defining-materialized-views"
+          >
             Learn more
             <FontIcon iconName="NavigateExternalInline" style={{ marginLeft: "4px" }} />
           </Link>{" "}
           about how to define materialized views and how to use them.
         </Text>
       </Stack>
-      {isSourceContainer && <MaterializedViewSourceComponent collection={collection} />}
+      {isSourceContainer && <MaterializedViewSourceComponent collection={collection} explorer={explorer} />}
       {isTargetContainer && <MaterializedViewTargetComponent collection={collection} />}
     </Stack>
   );

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

@@ -1,15 +1,23 @@
 import { PrimaryButton } from "@fluentui/react";
+import { MaterializedViewsLabels } from "Common/Constants";
+import Explorer from "Explorer/Explorer";
 import { loadMonaco } from "Explorer/LazyMonaco";
+import { AddMaterializedViewPanel } from "Explorer/Panes/AddMaterializedViewPanel/AddMaterializedViewPanel";
 import { useDatabases } from "Explorer/useDatabases";
+import { useSidePanel } from "hooks/useSidePanel";
 import * as monaco from "monaco-editor";
 import React, { useEffect, useRef } from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 
 export interface MaterializedViewSourceComponentProps {
   collection: ViewModels.Collection;
+  explorer: Explorer;
 }
 
-export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({ collection }) => {
+export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceComponentProps> = ({
+  collection,
+  explorer,
+}) => {
   const editorContainerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(null);
 
@@ -88,7 +96,18 @@ export const MaterializedViewSourceComponent: React.FC<MaterializedViewSourceCom
           overflow: "hidden",
         }}
       />
-      <PrimaryButton text="Add view" styles={{ root: { width: "fit-content", marginTop: 12 } }} onClick={() => {}} />
+      <PrimaryButton
+        text="Add view"
+        styles={{ root: { width: "fit-content", marginTop: 12 } }}
+        onClick={() =>
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              MaterializedViewsLabels.NewMaterializedView,
+              <AddMaterializedViewPanel explorer={explorer} sourceContainer={collection} />,
+            )
+        }
+      />
     </div>
   );
 };