[frontend] render icon in utils

OpenCTI-Platform · Jan 3, 2025 · dd07202 · dd07202
1 parent 5f1370b
commit dd07202
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 58 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/widgets/WidgetCreationTypes.tsx b/opencti-platform/opencti-front/src/private/components/widgets/WidgetCreationTypes.tsx
@@ -4,23 +4,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import React, { FunctionComponent } from 'react';
-import { FormatShapesOutlined, MapOutlined, PieChartOutlined, ViewQuiltOutlined } from '@mui/icons-material';
-import {
-  AlignHorizontalLeft,
-  ChartAreasplineVariant,
-  ChartBar,
-  ChartBubble,
-  ChartDonut,
-  ChartLine,
-  ChartTimeline,
-  ChartTree,
-  Counter,
-  FormatListNumberedRtl,
-  Radar,
-  StarSettingsOutline,
-  ViewListOutline,
-} from 'mdi-material-ui';
-import { widgetVisualizationTypes } from './widgetUtils';
+import { renderIcon, widgetVisualizationTypes } from './widgetUtils';
 import { useFormatter } from '../../../components/i18n';
 
 interface WidgetCreationTypesProps {
@@ -31,47 +15,6 @@ const WidgetCreationTypes: FunctionComponent<WidgetCreationTypesProps> = ({
 }) => {
   const { t_i18n } = useFormatter();
 
-  const renderIcon = (key: string) => {
-    switch (key) {
-      case 'map':
-        return <MapOutlined fontSize="large" color="primary"/>;
-      case 'horizontal-bar':
-        return <AlignHorizontalLeft fontSize="large" color="primary"/>;
-      case 'vertical-bar':
-        return <ChartBar fontSize="large" color="primary"/>;
-      case 'donut':
-        return <ChartDonut fontSize="large" color="primary"/>;
-      case 'area':
-        return <ChartAreasplineVariant fontSize="large" color="primary"/>;
-      case 'timeline':
-        return <ChartTimeline fontSize="large" color="primary"/>;
-      case 'list':
-        return <ViewListOutline fontSize="large" color="primary"/>;
-      case 'distribution-list':
-        return <FormatListNumberedRtl fontSize="large" color="primary"/>;
-      case 'number':
-        return <Counter fontSize="large" color="primary"/>;
-      case 'text':
-        return <FormatShapesOutlined fontSize="large" color="primary"/>;
-      case 'heatmap':
-        return <ChartBubble fontSize="large" color="primary"/>;
-      case 'line':
-        return <ChartLine fontSize="large" color="primary"/>;
-      case 'radar':
-        return <Radar fontSize="large" color="primary"/>;
-      case 'polar-area':
-        return <PieChartOutlined fontSize="large" color="primary"/>;
-      case 'tree':
-        return <ChartTree fontSize="large" color="primary"/>;
-      case 'bookmark':
-        return <StarSettingsOutline fontSize="large" color="primary"/>;
-      case 'wordcloud':
-        return <ViewQuiltOutlined fontSize="large" color="primary"/>;
-      default:
-        return <div>${t_i18n('This widget type is not implemented')}</div>;
-    }
-  };
-
   return (
     <Grid
       container={true}

diff --git a/...private/components/widgets/widgetUtils.ts → ...rivate/components/widgets/widgetUtils.tsx b/...private/components/widgets/widgetUtils.ts → ...rivate/components/widgets/widgetUtils.tsx
@@ -1,4 +1,14 @@
 import * as R from 'ramda';
+import { FormatShapesOutlined, MapOutlined, PieChartOutlined, ViewQuiltOutlined } from '@mui/icons-material';
+import {
+  AlignHorizontalLeft,
+  ChartAreasplineVariant,
+  ChartBar, ChartBubble,
+  ChartDonut, ChartLine,
+  ChartTimeline, ChartTree, Counter, FormatListNumberedRtl, Radar, StarSettingsOutline,
+  ViewListOutline
+} from 'mdi-material-ui';
+import React from 'react';
 
 export const widgetVisualizationTypes = [
   {
@@ -191,3 +201,44 @@ export const getCurrentIsRelationships = (type: string) => {
 export const isWidgetListOrTimeline = (type: string) => {
   return indexedVisualizationTypes[type]?.key === 'list' || indexedVisualizationTypes[type]?.key === 'timeline';
 };
+
+export const renderIcon = (key: string) => {
+  switch (key) {
+    case 'map':
+      return <MapOutlined fontSize="large" color="primary"/>;
+    case 'horizontal-bar':
+      return <AlignHorizontalLeft fontSize="large" color="primary"/>;
+    case 'vertical-bar':
+      return <ChartBar fontSize="large" color="primary"/>;
+    case 'donut':
+      return <ChartDonut fontSize="large" color="primary"/>;
+    case 'area':
+      return <ChartAreasplineVariant fontSize="large" color="primary"/>;
+    case 'timeline':
+      return <ChartTimeline fontSize="large" color="primary"/>;
+    case 'list':
+      return <ViewListOutline fontSize="large" color="primary"/>;
+    case 'distribution-list':
+      return <FormatListNumberedRtl fontSize="large" color="primary"/>;
+    case 'number':
+      return <Counter fontSize="large" color="primary"/>;
+    case 'text':
+      return <FormatShapesOutlined fontSize="large" color="primary"/>;
+    case 'heatmap':
+      return <ChartBubble fontSize="large" color="primary"/>;
+    case 'line':
+      return <ChartLine fontSize="large" color="primary"/>;
+    case 'radar':
+      return <Radar fontSize="large" color="primary"/>;
+    case 'polar-area':
+      return <PieChartOutlined fontSize="large" color="primary"/>;
+    case 'tree':
+      return <ChartTree fontSize="large" color="primary"/>;
+    case 'bookmark':
+      return <StarSettingsOutline fontSize="large" color="primary"/>;
+    case 'wordcloud':
+      return <ViewQuiltOutlined fontSize="large" color="primary"/>;
+    default:
+      return <div>${t_i18n('This widget type is not implemented')}</div>;
+  }
+};