fix(react-components): don't append to document body (#4950)

* chore: don't append to document body * chore: fix type issues * chore: lint fix * chore: bump package version * chore: don't send DMS requests when no model instances were found
cognitedata · Jan 6, 2025 · 5cb8e2e · 5cb8e2e
1 parent 3986ce0
commit 5cb8e2e
Show file tree

Hide file tree

Showing 24 changed files with 73 additions and 130 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.10",
+  "version": "0.73.11",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -29,23 +29,23 @@
     "sort-keys": "cdf-i18n-utils-cli sort-local-keys --namespace reveal-react-components --path ./src/common/i18n"
   },
   "peerDependencies": {
-    "@cognite/cogs-lab": "^9.0.0-alpha.111",
+    "@cognite/cogs-lab": "^9.0.0-alpha.153",
     "@cognite/reveal": "4.21.1",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
   },
   "dependencies": {
-    "@cognite/cogs.js": "^10.25.0",
+    "@cognite/cogs.js": "^10.36.0",
     "@tanstack/react-query": "^5.32.0",
     "assert": "^2.1.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
-    "@cognite/cogs-lab": "^9.0.0-alpha.113",
-    "@cognite/cogs.js": "^10.25.0",
+    "@cognite/cogs-lab": "^9.0.0-alpha.153",
+    "@cognite/cogs.js": "^10.36.0",
     "@cognite/reveal": "^4.22.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "1.49.0",

diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
@@ -51,7 +51,6 @@ export const CommandButton = ({
     <CogsTooltip
       content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
-      appendTo={document.body}
       enterDelay={TOOLTIP_DELAY}
       placement={getTooltipPlacement(placement)}>
       <Button

diff --git a/react-components/src/components/Architecture/CustomInputField.tsx b/react-components/src/components/Architecture/CustomInputField.tsx
@@ -82,12 +82,12 @@ export const CustomInputField = ({
     [contents, setContents]
   );
 
-  const fields = command.contents.map((fieldContent, index) => {
+  const fields = contents.map((fieldContent, index) => {
     if (fieldContent.type === 'text') {
       return (
         <Input
           key={index}
-          value={contents?.[index]?.content ?? ''}
+          value={fieldContent.content}
           disabled={!enabled}
           onChange={(data: BaseSyntheticEvent) => {
             handleSetContents(index, data.target.value as string);
@@ -97,12 +97,11 @@ export const CustomInputField = ({
       );
     }
     if (fieldContent.type === 'comment') {
-      const message = contents?.[index]?.type === 'comment' ? contents[index].content : '';
       return (
         <Textarea
           key={index}
           placeholder={placeholders?.[index]}
-          message={message}
+          value={fieldContent.content}
           onChange={(data: BaseSyntheticEvent) => {
             handleSetContents(index, data.target.value as string);
           }}
@@ -137,13 +136,11 @@ export const CustomInputField = ({
       );
     }
     if (fieldContent.type === 'commentWithButtons') {
-      const message =
-        contents?.[index]?.type === 'commentWithButtons' ? contents[index].content : '';
       return (
         <Comment
           key={index}
           placeholder={placeholders?.[index]}
-          message={message}
+          message={fieldContent.content}
           setMessage={(data) => {
             handleSetContents(index, data);
           }}

diff --git a/react-components/src/components/Architecture/DropdownButton.tsx b/react-components/src/components/Architecture/DropdownButton.tsx
@@ -97,14 +97,12 @@ const DropdownElement = ({
       onOpenChange={(open: boolean) => {
         setOpen(open);
       }}
-      hideOnSelect={true}
-      appendTo={'parent'}
       placement={'bottom-start'}
+      disableCloseOnClickInside
       renderTrigger={(props: any) => (
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
           disabled={label === undefined}
-          appendTo={document.body}
           enterDelay={TOOLTIP_DELAY}
           placement={getTooltipPlacement(placement)}>
           <Button
@@ -171,10 +169,8 @@ function createMenuItem(command: BaseCommand, t: TranslateDelegate): ReactElemen
   return (
     <Menu.ItemToggled
       key={command.uniqueId}
-      icon={command.icon}
       disabled={!command.isEnabled}
       toggled={command.isChecked}
-      iconPlacement="left"
       label={command.getLabel(t)}
       onClick={() => {
         command.invoke();

diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
@@ -140,7 +140,6 @@ const FilterMenu = ({
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
           disabled={isOpen || label === undefined}
-          appendTo={document.body}
           placement={placement}>
           <Button
             type={getButtonType(command)}
@@ -239,8 +238,8 @@ const FilterSelectPanelContent = ({
           {BaseFilterCommand.getAllString(t)}
         </SelectPanel.Item>
       </SelectPanel.Section>
-      <SelectPanel.Body label={label} style={{ maxHeight: '300px' }}>
-        <SelectPanel.Section>
+      <SelectPanel.Body style={{ maxHeight: '300px' }}>
+        <SelectPanel.Section title={label}>
           {children?.map((child, _index): ReactElement => {
             return <FilterItem key={child.uniqueId} command={child} />;
           })}

diff --git a/react-components/src/components/Architecture/SegmentedButtons.tsx b/react-components/src/components/Architecture/SegmentedButtons.tsx
@@ -54,7 +54,6 @@ export const SegmentedButtons = ({
     <CogsTooltip
       content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
-      appendTo={document.body}
       enterDelay={TOOLTIP_DELAY}
       placement={getTooltipPlacement(placement)}>
       <SegmentedControl

diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -72,15 +72,13 @@ export const SettingsButton = ({
   const children = command.children;
   return (
     <StyledMenu
-      hideOnSelect={false}
       onOpenChange={(open: boolean) => {
         for (const child of children) {
           child.update();
         }
         setOpen(open);
       }}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
-      container={'parent'}
       placement="right-end"
       style={{
         flexDirection,
@@ -91,7 +89,6 @@ export const SettingsButton = ({
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
           disabled={isOpen || label === undefined}
-          appendTo={document.body}
           enterDelay={TOOLTIP_DELAY}
           placement={getTooltipPlacement(placement)}>
           <Button
@@ -204,14 +201,12 @@ function createToggle(command: BaseCommand, t: TranslateDelegate): ReactNode {
 
 function createButton(command: BaseCommand, t: TranslateDelegate): ReactNode {
   // @update-ui-component-pattern
-  const [isChecked, setChecked] = useState(false);
   const [isEnabled, setEnabled] = useState(true);
   const [isVisible, setVisible] = useState(true);
   const [uniqueId, setUniqueId] = useState(0);
   const [icon, setIcon] = useState<IconName>(undefined);
 
   useOnUpdate(command, () => {
-    setChecked(command.isChecked);
     setEnabled(command.isEnabled);
     setVisible(command.isVisible);
     setUniqueId(command.uniqueId);
@@ -228,15 +223,12 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactNode {
     <Menu.ItemAction
       key={uniqueId}
       disabled={!isEnabled}
-      toggled={isChecked}
       icon={<IconComponent iconName={icon} />}
-      iconPlacement="left"
       style={{ padding: DEFAULT_PADDING }}
       shortcutKeys={command.getShortCutKeys()}
       label={label}
       onClick={() => {
         command.invoke();
-        setChecked(command.isChecked);
       }}
     />
   );

diff --git a/react-components/src/components/Architecture/TreeView/components/TreeViewLabel.tsx b/react-components/src/components/Architecture/TreeView/components/TreeViewLabel.tsx
@@ -40,7 +40,6 @@ export const TreeViewLabel = ({
     <Tooltip
       content={node.label}
       disabled={disabledTooltip}
-      appendTo={document.body}
       enterDelay={TOOLTIP_DELAY}
       placement={'right'}>
       {Text}

diff --git a/react-components/src/components/Architecture/pointsOfInterest/PoiHeader.tsx b/react-components/src/components/Architecture/pointsOfInterest/PoiHeader.tsx
@@ -41,7 +41,7 @@ export const PoiHeader = (): ReactNode => {
         <Divider direction="vertical" weight="2px" />
         <Flex direction="row" justifyContent="flex-start">
           <Dropdown placement="bottom-end" content={<PoiSharePanel />}>
-            <Tooltip placement="top-end" appendTo={document.body} content={t({ key: 'SHARE' })}>
+            <Tooltip placement="top-end" content={t({ key: 'SHARE' })}>
               <Button icon={<ShareIcon />} type="ghost" />
             </Tooltip>
           </Dropdown>

diff --git a/react-components/src/components/Architecture/pointsOfInterest/PoiSharePanel.tsx b/react-components/src/components/Architecture/pointsOfInterest/PoiSharePanel.tsx
@@ -73,8 +73,9 @@ const PoiVisibilityInfobox = ({
       <Flex direction="row" gap={16} alignItems="center">
         <Switch
           checked={markedPublic}
-          onChange={(_: InputEvent, checked: boolean) => {
-            selectedPointOfInterest.properties.visibility = checked ? 'PUBLIC' : 'PRIVATE';
+          onChange={(_, nextValue: boolean | undefined) => {
+            selectedPointOfInterest.properties.visibility =
+              nextValue === true ? 'PUBLIC' : 'PRIVATE';
             void poiDomainObject.updatePointsOfInterest([selectedPointOfInterest]);
             poiDomainObject.notify(Changes.geometry);
           }}

diff --git a/react-components/src/components/Architecture/utilities.ts b/react-components/src/components/Architecture/utilities.ts
@@ -11,7 +11,7 @@ export function getFlexDirection(placement: PlacementType): FlexDirection {
   return placement === 'top' || placement === 'bottom' ? 'row' : 'column';
 }
 
-export function getDividerDirection(placement: PlacementType): string {
+export function getDividerDirection(placement: PlacementType): 'horizontal' | 'vertical' {
   return placement === 'top' || placement === 'bottom' ? 'vertical' : 'horizontal';
 }
 

diff --git a/react-components/src/components/CacheProvider/RevisionFdmNodeCache.ts b/react-components/src/components/CacheProvider/RevisionFdmNodeCache.ts
@@ -273,7 +273,7 @@ export class RevisionFdmNodeCache {
       return connectionsAndNodes.map((connection) => connection.connection);
     }
     const modelInstances = await this._modelInstances;
-    if (modelInstances === undefined) {
+    if (modelInstances === undefined || modelInstances.length === 0) {
       return [];
     }
 

diff --git a/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx b/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx
@@ -40,7 +40,7 @@ export const AssetContextualizedButton = ({
   }, [enableContextualizedStyling, setEnableMappedStyling]);
 
   return (
-    <CogsTooltip content={t(tooltip)} placement="right" appendTo={document.body}>
+    <CogsTooltip content={t(tooltip)} placement="right">
       <Button
         type="ghost"
         icon=<AssetsIcon />

diff --git a/react-components/src/components/RevealToolbar/FitModelsButton.tsx b/react-components/src/components/RevealToolbar/FitModelsButton.tsx
@@ -17,10 +17,7 @@ export const FitModelsButton = (): ReactElement => {
   }, []);
 
   return (
-    <CogsTooltip
-      content={t({ key: 'FIT_VIEW_TOOLTIP' })}
-      placement="right"
-      appendTo={document.body}>
+    <CogsTooltip content={t({ key: 'FIT_VIEW_TOOLTIP' })} placement="right">
       <Button
         type="ghost"
         icon=<ExpandAlternativeIcon />

diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx
@@ -24,7 +24,6 @@ export const HelpButton = ({ fallbackLanguage, placement }: HelpButtonProps): Re
 
   return (
     <Dropdown
-      appendTo={document.body}
       onClickOutside={() => {
         setHelpActive(false);
       }}
@@ -36,10 +35,7 @@ export const HelpButton = ({ fallbackLanguage, placement }: HelpButtonProps): Re
           <TouchNavigation fallbackLanguage={fallbackLanguage} />
         </StyledContainer>
       }>
-      <CogsTooltip
-        content={t({ key: 'HELP_TOOLTIP' })}
-        placement={'right'}
-        appendTo={document.body}>
+      <CogsTooltip content={t({ key: 'HELP_TOOLTIP' })} placement={'right'}>
         <Button
           type="ghost"
           icon={<HelpIcon />}

diff --git a/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx
@@ -59,8 +59,7 @@ export const LayersButton = ({
         <SelectPanel.Trigger>
           <Tooltip
             content={<LabelWithShortcut label={t({ key: 'LAYERS_FILTER_TOOLTIP' })} />}
-            placement="right"
-            appendTo={document.body}>
+            placement="right">
             <Button icon=<LayersIcon /> type="ghost" />
           </Tooltip>
         </SelectPanel.Trigger>

diff --git a/react-components/src/components/RevealToolbar/ResetCameraButton.tsx b/react-components/src/components/RevealToolbar/ResetCameraButton.tsx
@@ -39,10 +39,7 @@ export const ResetCameraButton = ({
   }, [sceneExternalId, sceneSpaceId, cameraNavigation, resetToDefaultSceneCamera, viewer]);
 
   return (
-    <CogsTooltip
-      content={t({ key: 'RESET_CAMERA_TO_HOME' })}
-      placement="bottom"
-      appendTo={document.body}>
+    <CogsTooltip content={t({ key: 'RESET_CAMERA_TO_HOME' })} placement="bottom">
       <Button
         type="ghost"
         icon=<HomeIcon />

diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -128,7 +128,6 @@ export const RuleBasedOutputsButton = ({
   return (
     <Menu
       placement="right-start"
-      disabled={disabled}
       style={{
         maxHeight: 300,
         overflow: 'auto',
@@ -137,10 +136,7 @@ export const RuleBasedOutputsButton = ({
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
-        <CogsTooltip
-          content={t({ key: 'RULESET_SELECT_HEADER' })}
-          placement="right"
-          appendTo={document.body}>
+        <CogsTooltip content={t({ key: 'RULESET_SELECT_HEADER' })} placement="right">
           <Button
             icon=<ColorPaletteIcon />
             disabled={disabled}

diff --git a/react-components/src/components/RevealToolbar/SelectSceneButton.tsx b/react-components/src/components/RevealToolbar/SelectSceneButton.tsx
@@ -3,7 +3,8 @@
  */
 import { useCallback, useState, type ReactElement } from 'react';
 
-import { Button, Menu, Tooltip as CogsTooltip, WorldIcon } from '@cognite/cogs.js';
+import { Button, Tooltip as CogsTooltip, WorldIcon } from '@cognite/cogs.js';
+import { Menu } from '@cognite/cogs-lab';
 import { use3dScenes } from '../../hooks/scenes/use3dScenes';
 import { useTranslation } from '../i18n/I18n';
 import { type DmsUniqueIdentifier } from '../../data-providers/FdmSDK';
@@ -45,7 +46,6 @@ export const SelectSceneButton = ({
   return (
     <StyledMenu
       placement="right-start"
-      appendTo={document.body}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       renderTrigger={(props: any) => (
         <CogsTooltip content={t({ key: 'SCENE_SELECT_HEADER' })}>
@@ -54,7 +54,7 @@ export const SelectSceneButton = ({
           </Button>
         </CogsTooltip>
       )}>
-      {orientation === 'none' && <Menu.Header>{t({ key: 'SCENE_SELECT_HEADER' })}</Menu.Header>}
+      {orientation === 'none' && <Menu.Section label={t({ key: 'SCENE_SELECT_HEADER' })} />}
       <SceneList selectedScene={selectedScene} onSceneChange={setSceneAndUpdateName} />
     </StyledMenu>
   );

diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -30,15 +30,13 @@ export const SettingsButton = ({
   return (
     <StyledMenu
       placement="right"
-      container={'parent'}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
         <CogsTooltip
           content={t({ key: 'SETTINGS_TOOLTIP' })}
           placement="right"
-          disabled={settingsActive}
-          appendTo={document.body}>
+          disabled={settingsActive}>
           <Button
             icon=<SettingsIcon />
             type="ghost"

diff --git a/react-components/src/components/RevealToolbar/ShareButton.tsx b/react-components/src/components/RevealToolbar/ShareButton.tsx
@@ -15,10 +15,7 @@ export const ShareButton = (): ReactElement => {
   };
 
   return (
-    <CogsTooltip
-      content={t({ key: 'COPY_URL_TO_SHARE' })}
-      placement="right"
-      appendTo={document.body}>
+    <CogsTooltip content={t({ key: 'COPY_URL_TO_SHARE' })} placement="right">
       <Button icon=<ShareIcon /> type="ghost" aria-label="share-button" onClick={handleShare} />
     </CogsTooltip>
   );

diff --git a/react-components/src/components/RevealToolbar/SlicerButton.tsx b/react-components/src/components/RevealToolbar/SlicerButton.tsx
@@ -98,10 +98,7 @@ export const SlicerButton = (): ReactElement => {
       placement="right-start"
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       renderTrigger={(props: any) => (
-        <CogsTooltip
-          content={t({ key: 'SLICE_TOOLTIP' })}
-          placement="right"
-          appendTo={document.body}>
+        <CogsTooltip content={t({ key: 'SLICE_TOOLTIP' })} placement="right">
           <Button {...props} type="ghost" icon=<SliceIcon /> aria-label="Slice models" />
         </CogsTooltip>
       )}>