refactor(react-components): refactor info panel (#4627)

* chore(react-components): refactor info panel * chore: lint fix + small refactor
cognitedata · Jun 20, 2024 · 602c32b · 602c32b
1 parent 2c7b5db
commit 602c32b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 34 deletions.
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
@@ -20,7 +20,13 @@ export const CommandButtons = ({
   return (
     <>
       {commands.map(
-        (command, index): ReactElement => addCommandButton(command, isHorizontal, index)
+        (command, index): ReactElement => (
+          <CommandButtonWrapper
+            command={command}
+            isHorizontal={isHorizontal}
+            key={getKey(command, index)}
+          />
+        )
       )}
     </>
   );
@@ -60,7 +66,7 @@ export const CommandButton = ({
     return () => {
       newCommand.removeEventListener(update);
     };
-  }, [newCommand]);
+  }, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]);
 
   if (!isVisible) {
     return <></>;
@@ -106,14 +112,24 @@ function getDefaultCommand(newCommand: BaseCommand, renderTarget: RevealRenderTa
   return newCommand;
 }
 
-function addCommandButton(
-  command: BaseCommand | undefined,
-  isHorizontal: boolean,
-  index: number
-): ReactElement {
+function getKey(command: BaseCommand | undefined, index: number): number {
+  if (command === undefined) {
+    return -index;
+  }
+
+  return command.uniqueId;
+}
+
+function CommandButtonWrapper({
+  command,
+  isHorizontal
+}: {
+  command: BaseCommand | undefined;
+  isHorizontal: boolean;
+}): ReactElement {
   if (command === undefined) {
     const direction = !isHorizontal ? 'horizontal' : 'vertical';
-    return <Divider key={index} weight="2px" length="24px" direction={direction} />;
+    return <Divider weight="2px" length="24px" direction={direction} />;
   }
-  return <CommandButton key={command.uniqueId} command={command} isHorizontal={isHorizontal} />;
+  return <CommandButton command={command} isHorizontal={isHorizontal} />;
 }
diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx
@@ -3,7 +3,7 @@
  */
 import { Icon, type IconType, Body } from '@cognite/cogs.js';
 import styled from 'styled-components';
-import { useState, type ReactElement } from 'react';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
 import {
   DomainObjectPanelUpdater,
   type DomainObjectInfo
@@ -27,38 +27,42 @@ export const DomainObjectPanel = (): ReactElement => {
     DomainObjectInfo | undefined
   >();
 
-  DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo);
+  const domainObject = currentDomainObjectInfo?.domainObject;
+  const commands = useMemo(() => domainObject?.getPanelToolbar(), [domainObject]);
+  const info = domainObject?.getPanelInfo();
+  const style = domainObject?.getPanelInfoStyle();
+  const root = domainObject?.rootDomainObject;
+
+  useEffect(() => {
+    DomainObjectPanelUpdater.setDomainObjectDelegate(setCurrentDomainObjectInfo);
+
+    if (commands === undefined || info === undefined) {
+      return;
+    }
+
+    // Set in the get string on the copy command if any
+    for (const command of commands) {
+      if (command instanceof CopyToClipboardCommand)
+        command.getString = () => toString(info, t, unitSystem);
+    }
+  }, [setCurrentDomainObjectInfo, commands]);
 
   const { t } = useTranslation();
-  if (currentDomainObjectInfo === undefined) {
-    return <></>;
-  }
-  const domainObject = currentDomainObjectInfo.domainObject;
-  if (domainObject === undefined) {
-    return <></>;
-  }
-  const info = domainObject.getPanelInfo();
-  if (info === undefined) {
-    return <></>;
-  }
-  const style = domainObject.getPanelInfoStyle();
-  const root = domainObject.rootDomainObject;
-  if (root === undefined) {
+
+  if (
+    domainObject === undefined ||
+    root === undefined ||
+    info === undefined ||
+    commands === undefined ||
+    style === undefined
+  ) {
     return <></>;
   }
   const unitSystem = root.unitSystem;
 
   const icon = domainObject.icon as IconType;
   const header = info.header;
 
-  const commands = domainObject.getPanelToolbar();
-
-  // Set in the get string on the copy command if any
-  for (const command of commands) {
-    if (command instanceof CopyToClipboardCommand)
-      command.getString = () => toString(info, t, unitSystem);
-  }
-
   const text = header?.getText(t);
   return (
     <Container
@@ -81,7 +85,9 @@ export const DomainObjectPanel = (): ReactElement => {
                 <Body size={HEADER_SIZE}>{text}</Body>
               </PaddedTh>
             )}
-            <CommandButtons commands={commands} isHorizontal={true} />
+            <th>
+              <CommandButtons commands={commands} isHorizontal={true} />
+            </th>
           </tr>
         </tbody>
       </table>
@@ -115,6 +121,7 @@ export const DomainObjectPanel = (): ReactElement => {
 
 function toString(info: PanelInfo, translate: TranslateDelegate, unitSystem: UnitSystem): string {
   let result = '';
+
   {
     const { header } = info;
     const text = header?.getText(translate);