refactor(React-components): For generation of icons, use factory patt…

…ern naming (#4883)

* Rename icon factory

* Update DeleteDomainObjectCommand.ts

* Fixes

* Update IconFactory.tsx

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

@@ -10,7 +10,7 @@ import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { getButtonType, getDefaultCommand, getTooltipPlacement } from './utilities';
 import { LabelWithShortcut } from './LabelWithShortcut';
 import { type IconName } from '../../architecture/base/utilities/IconName';
-import { IconComponent } from './IconComponentMapper';
+import { IconComponent } from './Factories/IconFactory';
 import { useOnUpdate } from './useOnUpdate';
 import { type PlacementType } from './types';
 import { TOOLTIP_DELAY } from './constants';

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

@@ -18,7 +18,7 @@ import { CommandButtons } from './Toolbar';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
 import { type TranslateDelegate } from '../../architecture/base/utilities/TranslateInput';
 import { type UnitSystem } from '../../architecture/base/renderTarget/UnitSystem';
-import { IconComponent } from './IconComponentMapper';
+import { IconComponent } from './Factories/IconFactory';
 
 const TEXT_SIZE = 'x-small';
 const HEADER_SIZE = 'medium';

react-components/src/components/Architecture/IconComponentMapper.tsx → react-components/src/components/Architecture/Factories/DefaultIcons.tsx

@@ -33,7 +33,7 @@ import {
   FlipVerticalIcon,
   FolderIcon,
   GrabIcon,
-  type IconProps,
+  LeafIcon,
   InfoIcon,
   LocationIcon,
   PerspectiveAltIcon,
@@ -57,12 +57,11 @@ import {
   View360Icon,
   WaypointIcon
 } from '@cognite/cogs.js';
-import { type JSX, type FC } from 'react';
-import { type IconName } from '../../architecture/base/utilities/IconName';
 
-type IconType = FC<IconProps>;
+import { type IconName } from '../../../architecture/base/utilities/IconName';
+import { type IconType } from './IconFactory';
 
-const defaultMappings: Array<[IconName, IconType]> = [
+export const DefaultIcons: Array<[IconName, IconType]> = [
   ['Angle', AngleIcon],
   ['ArrowLeft', ArrowLeftIcon],
   ['ArrowRight', ArrowRightIcon],
@@ -94,6 +93,7 @@ const defaultMappings: Array<[IconName, IconType]> = [
   ['Folder', FolderIcon],
   ['Grab', GrabIcon],
   ['Info', InfoIcon],
+  ['Leaf', LeafIcon],
   ['Location', LocationIcon],
   ['Perspective', PerspectiveIcon],
   ['PerspectiveAlt', PerspectiveAltIcon],
@@ -116,27 +116,3 @@ const defaultMappings: Array<[IconName, IconType]> = [
   ['View360', View360Icon],
   ['Waypoint', WaypointIcon]
 ];
-
-const DefaultIcon = (_iconProps: IconProps): JSX.Element => <></>;
-
-export class IconComponentMapper {
-  private static readonly _iconMap = new Map<IconName, IconType>(defaultMappings);
-
-  public static addIcon(name: IconName, icon: IconType): void {
-    IconComponentMapper._iconMap.set(name, icon);
-  }
-
-  public static getIcon(name: IconName): IconType {
-    if (name === undefined) {
-      return DefaultIcon;
-    }
-    return IconComponentMapper._iconMap.get(name) ?? DefaultIcon;
-  }
-}
-
-type IconComponentProps = IconProps & { iconName: IconName };
-
-export const IconComponent = ({ iconName, ...rest }: IconComponentProps): JSX.Element => {
-  const Icon = IconComponentMapper.getIcon(iconName);
-  return <Icon {...rest} />;
-};

react-components/src/components/Architecture/Factories/IconFactory.tsx

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type JSX, type FC } from 'react';
+import { type IconName } from '../../../architecture/base/utilities/IconName';
+import { type IconProps } from '@cognite/cogs.js';
+import { DefaultIcons } from './DefaultIcons';
+
+export type IconType = FC<IconProps>;
+
+const DefaultIcon = (_iconProps: IconProps): JSX.Element => <></>;
+
+export class IconFactory {
+  private static readonly _icons = new Map<IconName, IconType>(DefaultIcons);
+  public static install(iconName: IconName, iconType: IconType): void {
+    IconFactory._icons.set(iconName, iconType);
+  }
+
+  public static getIcon(iconName: IconName): IconType {
+    if (iconName === undefined) {
+      return DefaultIcon;
+    }
+    return IconFactory._icons.get(iconName) ?? DefaultIcon;
+  }
+}
+
+type IconComponentProps = IconProps & { iconName: IconName };
+
+export const IconComponent = ({ iconName, ...rest }: IconComponentProps): JSX.Element => {
+  const Icon = IconFactory.getIcon(iconName);
+  return <Icon {...rest} />;
+};

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

@@ -20,7 +20,7 @@ import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCo
 import { FilterItem } from './FilterItem';
 import { OPTION_MIN_WIDTH, DEFAULT_PADDING, SELECT_DROPDOWN_ICON_COLOR } from './constants';
 import { type IconName } from '../../architecture/base/utilities/IconName';
-import { IconComponent } from './IconComponentMapper';
+import { IconComponent } from './Factories/IconFactory';
 import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 
 import { offset } from '@floating-ui/dom';

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

@@ -10,7 +10,7 @@ import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { getDefaultCommand, getTooltipPlacement } from './utilities';
 import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
 import { LabelWithShortcut } from './LabelWithShortcut';
-import { IconComponent } from './IconComponentMapper';
+import { IconComponent } from './Factories/IconFactory';
 import { useOnUpdate } from './useOnUpdate';
 import { type PlacementType } from './types';
 import { TOOLTIP_DELAY } from './constants';

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

@@ -25,7 +25,7 @@ import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCo
 import { FilterButton } from './FilterButton';
 import { DEFAULT_PADDING, TOOLTIP_DELAY } from './constants';
 import { type IconName } from '../../architecture/base/utilities/IconName';
-import { IconComponent } from './IconComponentMapper';
+import { IconComponent } from './Factories/IconFactory';
 
 import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 

react-components/src/components/Architecture/TreeView/components/TreeNodeIcon.tsx

@@ -4,7 +4,7 @@
 
 import { type ReactElement } from 'react';
 import { LoaderIcon } from '@cognite/cogs.js';
-import { IconComponentMapper } from '../../IconComponentMapper';
+import { IconFactory } from '../../Factories/IconFactory';
 import { type ITreeNode } from '../../../../architecture/base/treeView/ITreeNode';
 
 // ==================================================
@@ -21,6 +21,6 @@ export const TreeNodeIcon = ({
   if (!node.isSelected && node.iconColor !== undefined) {
     color = node.iconColor;
   }
-  const Icon = node.isLoadingChildren ? LoaderIcon : IconComponentMapper.getIcon(node.icon);
+  const Icon = node.isLoadingChildren ? LoaderIcon : IconFactory.getIcon(node.icon);
   return <Icon style={{ color, marginTop: '3px' }} />;
 };

react-components/src/components/Architecture/index.ts

@@ -4,7 +4,7 @@
 
 export { RevealButtons } from './RevealButtons';
 export type { PlacementType } from './types';
-export { IconComponentMapper } from './IconComponentMapper';
+export { IconFactory } from './Factories/IconFactory';
 export { TreeView } from './TreeView/TreeView';
 export type { TreeViewProps } from './TreeView/TreeViewProps';
 export { ToolUI } from './ToolUI';

react-components/src/components/RevealToolbar/LayersButton/ModelLayersButton.tsx

@@ -6,7 +6,7 @@ import { Button } from '@cognite/cogs.js';
 import { SelectPanel } from '@cognite/cogs-lab';
 import { type ModelHandler } from './ModelHandler';
 import { type ReactElement } from 'react';
-import { IconComponent } from '../../Architecture/IconComponentMapper';
+import { IconComponent } from '../../Architecture/Factories/IconFactory';
 import { type IconName } from '../../../architecture/base/utilities/IconName';
 import { ModelLayersList } from './ModelLayersList';