fix(react-components): correctly differentiate between command types

react-components/src/components/Architecture/CommandButton.tsx

@@ -10,14 +10,6 @@ import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { getButtonType, getDefaultCommand, getIcon, getTooltipPlacement } from './utilities';
 import { LabelWithShortcut } from './LabelWithShortcut';
 
-export const createCommandButton = (
-  commandConstructor: () => BaseCommand,
-  isHorizontal = false
-): ReactElement => {
-  const command = useMemo(commandConstructor, []);
-  return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
-};
-
 export const CommandButton = ({
   inputCommand,
   isHorizontal = false

react-components/src/components/Architecture/CommandButtons.tsx

@@ -2,20 +2,28 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import { Divider } from '@cognite/cogs.js';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { OptionButton } from './OptionButton';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import { CommandButton } from './CommandButton';
 
-export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
+export function createButton(command: BaseCommand, isHorizontal = false): ReactElement {
   if (command instanceof BaseOptionCommand) {
     return <OptionButton inputCommand={command} isHorizontal={isHorizontal} />;
   } else {
     return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
   }
-};
+}
+
+export function createButtonFromCommandConstructor(
+  commandConstructor: () => BaseCommand,
+  isHorizontal = false
+): ReactElement {
+  const command = useMemo(commandConstructor, []);
+  return createButton(command, isHorizontal);
+}
 
 export const CommandButtons = ({
   commands,
@@ -57,5 +65,5 @@ function CommandButtonWrapper({
     const direction = !isHorizontal ? 'horizontal' : 'vertical';
     return <Divider weight="2px" length="24px" direction={direction} />;
   }
-  return CreateButton(command, isHorizontal);
+  return createButton(command, isHorizontal);
 }

react-components/src/components/Architecture/RevealButtons.tsx

@@ -11,30 +11,38 @@ import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisV
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
 import { MeasurementTool } from '../../architecture/concrete/measurements/MeasurementTool';
 import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand';
-import { createCommandButton } from './CommandButton';
 import { ObservationsTool } from '../../architecture/concrete/observations/ObservationsTool';
+import { createButtonFromCommandConstructor } from './CommandButtons';
 
 export class RevealButtons {
-  static FitView = (): ReactElement => createCommandButton(() => new FitViewCommand());
+  static FitView = (): ReactElement =>
+    createButtonFromCommandConstructor(() => new FitViewCommand());
 
-  static NavigationTool = (): ReactElement => createCommandButton(() => new NavigationTool());
+  static NavigationTool = (): ReactElement =>
+    createButtonFromCommandConstructor(() => new NavigationTool());
 
   static SetAxisVisible = (): ReactElement =>
-    createCommandButton(() => new SetAxisVisibleCommand());
+    createButtonFromCommandConstructor(() => new SetAxisVisibleCommand());
 
-  static Measurement = (): ReactElement => createCommandButton(() => new MeasurementTool());
+  static Measurement = (): ReactElement =>
+    createButtonFromCommandConstructor(() => new MeasurementTool());
 
-  static Clip = (): ReactElement => createCommandButton(() => new ClipTool());
+  static Clip = (): ReactElement => createButtonFromCommandConstructor(() => new ClipTool());
 
   static SetFlexibleControlsTypeOrbit = (): ReactElement =>
-    createCommandButton(() => new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
+    createButtonFromCommandConstructor(
+      () => new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit)
+    );
 
   static SetFlexibleControlsTypeFirstPerson = (): ReactElement =>
-    createCommandButton(() => new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson));
+    createButtonFromCommandConstructor(
+      () => new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson)
+    );
 
   static Observations = (): ReactElement => {
-    return createCommandButton(() => new ObservationsTool());
+    return createButtonFromCommandConstructor(() => new ObservationsTool());
   };
 
-  static KeyboardSpeed = (): ReactElement => createCommandButton(() => new KeyboardSpeedCommand());
+  static KeyboardSpeed = (): ReactElement =>
+    createButtonFromCommandConstructor(() => new KeyboardSpeedCommand());
 }