feat(react-components): Added optional support in Split window header…

… to render a component (#4723) * Added support in Split window header render a component (Button ideally) to load external component * lint fix * renamed prop name, removed unnecessary additional component * renamed the header custo element name
cognitedata · Aug 26, 2024 · 555a1e1 · 555a1e1
1 parent 49bae99
commit 555a1e1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 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;
+  headerElement?: ReactNode;
   children: ReactNode;
   onClose?: () => void;
   onResize?: (width: number, height: number) => void;
@@ -38,6 +39,7 @@ export const WindowWidget = ({
   header,
   type,
   children,
+  headerElement,
   onClose,
   onResize
 }: WindowWidgetProps): ReactElement => {
@@ -115,6 +117,7 @@ export const WindowWidget = ({
           onResize={handleResize}>
           <Widget>
             <Widget.Header title={title} type={type} header={header} subtitle={subtitle}>
+              {headerElement !== undefined && headerElement}
               <CogsTooltip
                 content={
                   isMinimized

diff --git 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
@@ -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 { type 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}
+                headerElement={openExternalButton()}>
                 <SecondaryRevealContainer />
               </WindowWidget>
             )}
@@ -56,6 +60,14 @@ export const Main: Story = {
   }
 };
 
+function openExternalButton(): ReactNode {
+  return (
+    <Button style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+      Open in New Tab
+    </Button>
+  );
+}
+
 function SecondaryRevealContainer(): ReactElement {
   return (
     <RevealContext sdk={sdk} color={new Color(0x4a4a4a)} appLanguage={'en'}>