From 911114bae3ef848b60d050b474692ccf71c4143c Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 26 Aug 2024 10:19:22 +0200
Subject: [PATCH 1/4] Added support in Split window header render a component
 (Button ideally) to load external component

---
 .../src/components/Widgets/WindowWidget.tsx          |  3 +++
 react-components/stories/SplitWindow.stories.tsx     | 12 ++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/react-components/src/components/Widgets/WindowWidget.tsx b/react-components/src/components/Widgets/WindowWidget.tsx
index 40ccb48f149..ff57705bd79 100644
--- 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
index 1aefc40fefa..d5e8037e8f8 100644
--- 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'}>

From 9ab65aa31407409f8586d2993fb8164dca5301ef Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 26 Aug 2024 10:34:48 +0200
Subject: [PATCH 2/4] lint fix

---
 react-components/stories/SplitWindow.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-components/stories/SplitWindow.stories.tsx b/react-components/stories/SplitWindow.stories.tsx
index d5e8037e8f8..f988b0079f7 100644
--- a/react-components/stories/SplitWindow.stories.tsx
+++ b/react-components/stories/SplitWindow.stories.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { CadModelContainer, RevealCanvas, PointCloudContainer, RevealContext } from '../src';
 import { CogniteClient } from '@cognite/sdk';
 import { Color } from 'three';
-import { ReactNode, useState, type ReactElement } from 'react';
+import { type ReactNode, useState, type ReactElement } from 'react';
 import { WindowWidget } from '../src/components/Widgets/WindowWidget';
 import { Button } from '@cognite/cogs.js';
 

From afd2097e1bb41f7cb082b0759769868778413114 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 26 Aug 2024 11:35:13 +0200
Subject: [PATCH 3/4] renamed prop name, removed unnecessary additional
 component

---
 react-components/src/components/Widgets/WindowWidget.tsx | 6 +++---
 react-components/src/components/Widgets/constants.ts     | 2 +-
 react-components/stories/SplitWindow.stories.tsx         | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/react-components/src/components/Widgets/WindowWidget.tsx b/react-components/src/components/Widgets/WindowWidget.tsx
index ff57705bd79..b9c89ea72d4 100644
--- a/react-components/src/components/Widgets/WindowWidget.tsx
+++ b/react-components/src/components/Widgets/WindowWidget.tsx
@@ -27,7 +27,7 @@ type WindowWidgetProps = {
   subtitle?: string;
   header?: string;
   type?: string;
-  openInNewTab?: ReactNode;
+  customComponent?: ReactNode;
   children: ReactNode;
   onClose?: () => void;
   onResize?: (width: number, height: number) => void;
@@ -39,7 +39,7 @@ export const WindowWidget = ({
   header,
   type,
   children,
-  openInNewTab,
+  customComponent,
   onClose,
   onResize
 }: WindowWidgetProps): ReactElement => {
@@ -117,7 +117,7 @@ export const WindowWidget = ({
           onResize={handleResize}>
           <Widget>
             <Widget.Header title={title} type={type} header={header} subtitle={subtitle}>
-              {openInNewTab !== undefined && <div>{openInNewTab}</div>}
+              {customComponent !== undefined && customComponent}
               <CogsTooltip
                 content={
                   isMinimized
diff --git a/react-components/src/components/Widgets/constants.ts b/react-components/src/components/Widgets/constants.ts
index af80d64ccd1..27d6b6216b4 100644
--- a/react-components/src/components/Widgets/constants.ts
+++ b/react-components/src/components/Widgets/constants.ts
@@ -6,6 +6,6 @@ export const WIDGET_WINDOW_X_OFFSET = 150;
 export const WIDGET_WINDOW_Y_OFFSET = 75;
 export const WIDGET_WIDTH_FACTOR = 0.4;
 export const WIDGET_HEIGHT_FACTOR = 0.7;
-export const WIDGET_WINDOW_MIN_WIDTH = 300;
+export const WIDGET_WINDOW_MIN_WIDTH = 400;
 export const WIDGET_WINDOW_MIN_HEIGHT = 48;
 export const WIDGET_INSIDE_WINDOW_MIN_HEIGHT = 150;
diff --git a/react-components/stories/SplitWindow.stories.tsx b/react-components/stories/SplitWindow.stories.tsx
index f988b0079f7..600d6eddf83 100644
--- a/react-components/stories/SplitWindow.stories.tsx
+++ b/react-components/stories/SplitWindow.stories.tsx
@@ -49,7 +49,7 @@ export const Main: Story = {
               <WindowWidget
                 header="Widget Header"
                 onClose={handleClose}
-                openInNewTab={openExternalButton()}>
+                customComponent={openExternalButton()}>
                 <SecondaryRevealContainer />
               </WindowWidget>
             )}
@@ -61,7 +61,11 @@ export const Main: Story = {
 };
 
 function openExternalButton(): ReactNode {
-  return <Button>Open in New Tab</Button>;
+  return (
+    <Button style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+      Open in New Tab
+    </Button>
+  );
 }
 
 function SecondaryRevealContainer(): ReactElement {

From 9dd6c525671972147556cc94c14f4a5f83756ed0 Mon Sep 17 00:00:00 2001
From: Pramod S <pramod.s@cognite.com>
Date: Mon, 26 Aug 2024 12:37:56 +0200
Subject: [PATCH 4/4] renamed the header custo element name

---
 react-components/src/components/Widgets/WindowWidget.tsx | 6 +++---
 react-components/stories/SplitWindow.stories.tsx         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/react-components/src/components/Widgets/WindowWidget.tsx b/react-components/src/components/Widgets/WindowWidget.tsx
index b9c89ea72d4..ddc8212f18a 100644
--- a/react-components/src/components/Widgets/WindowWidget.tsx
+++ b/react-components/src/components/Widgets/WindowWidget.tsx
@@ -27,7 +27,7 @@ type WindowWidgetProps = {
   subtitle?: string;
   header?: string;
   type?: string;
-  customComponent?: ReactNode;
+  headerElement?: ReactNode;
   children: ReactNode;
   onClose?: () => void;
   onResize?: (width: number, height: number) => void;
@@ -39,7 +39,7 @@ export const WindowWidget = ({
   header,
   type,
   children,
-  customComponent,
+  headerElement,
   onClose,
   onResize
 }: WindowWidgetProps): ReactElement => {
@@ -117,7 +117,7 @@ export const WindowWidget = ({
           onResize={handleResize}>
           <Widget>
             <Widget.Header title={title} type={type} header={header} subtitle={subtitle}>
-              {customComponent !== undefined && customComponent}
+              {headerElement !== undefined && headerElement}
               <CogsTooltip
                 content={
                   isMinimized
diff --git a/react-components/stories/SplitWindow.stories.tsx b/react-components/stories/SplitWindow.stories.tsx
index 600d6eddf83..2747a062398 100644
--- a/react-components/stories/SplitWindow.stories.tsx
+++ b/react-components/stories/SplitWindow.stories.tsx
@@ -49,7 +49,7 @@ export const Main: Story = {
               <WindowWidget
                 header="Widget Header"
                 onClose={handleClose}
-                customComponent={openExternalButton()}>
+                headerElement={openExternalButton()}>
                 <SecondaryRevealContainer />
               </WindowWidget>
             )}