Added support in Split window header render a component (Button ideal…

…ly) to load external component
cognitedata · Aug 26, 2024 · 911114b · 911114b
1 parent 49bae99
commit 911114b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/react-components/src/components/Widgets/WindowWidget.tsx b/react-components/src/components/Widgets/WindowWidget.tsx
@@ -27,6 +27,7 @@ type WindowWidgetProps = {
   subtitle?: string;
   header?: string;
   type?: string;
+  openInNewTab?: ReactNode;
   children: ReactNode;
   onClose?: () => void;
   onResize?: (width: number, height: number) => void;
@@ -38,6 +39,7 @@ export const WindowWidget = ({
   header,
   type,
   children,
+  openInNewTab,
   onClose,
   onResize
 }: WindowWidgetProps): ReactElement => {
@@ -115,6 +117,7 @@ export const WindowWidget = ({
           onResize={handleResize}>
           <Widget>
             <Widget.Header title={title} type={type} header={header} subtitle={subtitle}>
+              {openInNewTab !== undefined && <div>{openInNewTab}</div>}
               <CogsTooltip
                 content={
                   isMinimized

diff --git a/react-components/stories/SplitWindow.stories.tsx b/react-components/stories/SplitWindow.stories.tsx
@@ -6,8 +6,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CadModelContainer, RevealCanvas, PointCloudContainer, RevealContext } from '../src';
 import { CogniteClient } from '@cognite/sdk';
 import { Color } from 'three';
-import { useState, type ReactElement } from 'react';
+import { ReactNode, useState, type ReactElement } from 'react';
 import { WindowWidget } from '../src/components/Widgets/WindowWidget';
+import { Button } from '@cognite/cogs.js';
 
 const meta = {
   title: 'Example/SplitWindow',
@@ -45,7 +46,10 @@ export const Main: Story = {
           <RevealCanvas>
             <PointCloudContainer addModelOptions={addModelOptions} />
             {isWindowWidgetVisible && (
-              <WindowWidget header="Widget Header" onClose={handleClose}>
+              <WindowWidget
+                header="Widget Header"
+                onClose={handleClose}
+                openInNewTab={openExternalButton()}>
                 <SecondaryRevealContainer />
               </WindowWidget>
             )}
@@ -56,6 +60,10 @@ export const Main: Story = {
   }
 };
 
+function openExternalButton(): ReactNode {
+  return <Button>Open in New Tab</Button>;
+}
+
 function SecondaryRevealContainer(): ReactElement {
   return (
     <RevealContext sdk={sdk} color={new Color(0x4a4a4a)} appLanguage={'en'}>