Initial commit

cognitedata · Sep 2, 2024 · d100954 · d100954
1 parent 97c6e1b
commit d100954
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/react-components/src/architecture/base/domainObjects/DomainObject.ts b/react-components/src/architecture/base/domainObjects/DomainObject.ts
@@ -371,9 +371,9 @@ export abstract class DomainObject {
 
   public getPanelToolbar(): BaseCommand[] {
     return [
-      new DeleteDomainObjectCommand(this),
       new CopyToClipboardCommand(),
-      new ToggleMetricUnitsCommand()
+      new ToggleMetricUnitsCommand(),
+      new DeleteDomainObjectCommand(this)
     ];
   }
 

diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx
@@ -1,7 +1,7 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-import { Icon, type IconType, Body } from '@cognite/cogs.js';
+import { Icon, type IconType, Body, Flex } from '@cognite/cogs.js';
 import styled from 'styled-components';
 import { useEffect, useMemo, useState, type ReactElement } from 'react';
 import {
@@ -21,7 +21,7 @@ import { type UnitSystem } from '../../architecture/base/renderTarget/UnitSystem
 import { type DomainObject } from '../../architecture/base/domainObjects/DomainObject';
 
 const TEXT_SIZE = 'x-small';
-const HEADER_SIZE = 'small';
+const HEADER_SIZE = 'medium';
 
 export const DomainObjectPanel = (): ReactElement => {
   const [currentDomainObjectInfo, setCurrentDomainObjectInfo] = useState<
@@ -73,25 +73,15 @@ export const DomainObjectPanel = (): ReactElement => {
         margin: style.marginPx,
         padding: style.paddingPx
       }}>
-      <table>
-        <tbody>
-          <tr>
-            {icon !== undefined && (
-              <PaddedTh>
-                <Icon type={icon} />
-              </PaddedTh>
-            )}
-            {text !== undefined && (
-              <PaddedTh>
-                <Body size={HEADER_SIZE}>{text}</Body>
-              </PaddedTh>
-            )}
-            <th>
-              <CommandButtons commands={commands} isHorizontal={true} />
-            </th>
-          </tr>
-        </tbody>
-      </table>
+      <Flex justifyContent={'space-between'} alignItems={'center'}>
+        <Flex gap={8}>
+          {icon !== undefined && <Icon type={icon} />}
+          {text !== undefined && <Body size={HEADER_SIZE}>{text}</Body>}
+        </Flex>
+        <Flex>
+          <CommandButtons commands={commands} isHorizontal={true} />
+        </Flex>
+      </Flex>
       <table>
         <tbody>{info.items.map((item, _i) => addTextWithNumber(item, unitSystem))}</tbody>
       </table>