chore: centralized icon rendering tool

Signed-off-by: Vladimir Belousov <vbelouso@redhat.com>

Author: vbelouso

src/app/Overview/components/ActivityTable.tsx

@@ -4,36 +4,14 @@ import { EmptyState } from '@patternfly/react-core';
 import { SystemEventResponseApi } from '@api';
 import { Link } from 'react-router-dom';
 import { resolveResourcePath } from '@app/utils/parseFuncs';
-import { CheckCircleIcon, ErrorCircleOIcon, WarningTriangleIcon, InboxIcon } from '@patternfly/react-icons';
+import { InboxIcon } from '@patternfly/react-icons';
+import { getResultIcon } from '@app/utils/renderUtils';
+import { ResultStatus } from '@app/types/types';
 
 interface ActivityTableProps {
   events: SystemEventResponseApi[];
 }
 
-const getResultIcon = (result: string) => {
-  const PATTERNFLY_COLORS = {
-    success: 'var(--pf-t--global--color--status--success--default)',
-    danger: 'var(--pf-t--global--color--status--danger--default)',
-    warning: 'var(--pf-t--global--color--status--warning--default)',
-  } as const;
-
-  switch (result.toLowerCase()) {
-    case 'ok':
-    case 'success':
-      return <CheckCircleIcon color={PATTERNFLY_COLORS.success} />;
-    case 'failed':
-    case 'failure':
-    case 'error':
-      return <ErrorCircleOIcon color={PATTERNFLY_COLORS.danger} />;
-    case 'warning':
-    case 'partial':
-    case 'pending':
-      return <WarningTriangleIcon color={PATTERNFLY_COLORS.warning} />;
-    default:
-      return <WarningTriangleIcon color={PATTERNFLY_COLORS.warning} />;
-  }
-};
-
 export const ActivityTable: React.FunctionComponent<ActivityTableProps> = ({ events }) => {
   if (events.length === 0) {
     return <EmptyState headingLevel="h4" icon={InboxIcon} titleText="No recent events"></EmptyState>;
@@ -56,7 +34,7 @@ export const ActivityTable: React.FunctionComponent<ActivityTableProps> = ({ eve
             <Td>{event.timestamp ? new Date(event.timestamp).toLocaleString('es-ES') : '-'}</Td>
             <Td>{event.action}</Td>
             <Td>
-              {getResultIcon(event.result)} {event.result}
+              {getResultIcon(event.result as ResultStatus)} {event.result}
             </Td>
             <Td>
               <Link to={resolveResourcePath(event.resourceType ?? '-', event.resourceId ?? '-')}>

src/app/utils/renderUtils.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ActionTypes, ActionStatus, ActionOperations, ResultStatus } from '@app/types/types';
 import { ResourceStatusApi } from '@api';
 import { Label } from '@patternfly/react-core';
@@ -67,15 +66,19 @@ export const getResultIcon = (result: ResultStatus) => {
   return (
     {
       [ResultStatus.Success]: (
-        <InfoCircleIcon color="var(--pf-t--global--icon--color--status--success)" title="Success" />
+        <InfoCircleIcon color="var(--pf-t--global--color--status--success--default)" title="Success" />
+      ),
+      [ResultStatus.Running]: (
+        <OnRunningIcon color="var(--pf-t--global--color--status--info--default)" title="Running" />
+      ),
+      [ResultStatus.Pending]: (
+        <PendingIcon color="var(--pf-t--global--color--status--warning--default)" title="Pending" />
       ),
-      [ResultStatus.Running]: <OnRunningIcon color="var(--pf-t--global--icon--color--status--info)" title="Running" />,
-      [ResultStatus.Pending]: <PendingIcon color="var(--pf-t--global--icon--color--status--warning)" title="Pending" />,
       [ResultStatus.Failed]: (
-        <ExclamationTriangleIcon color="var(--pf-t--global--icon--color--status--danger)" title="Error" />
+        <ExclamationTriangleIcon color="var(--pf-t--global--color--status--danger--default)" title="Error" />
       ),
       [ResultStatus.Warning]: (
-        <ExclamationCircleIcon color="var(--pf-t--global--icon--color--status--warning)" title="Warning" />
+        <ExclamationCircleIcon color="var(--pf-t--global--color--status--warning--default)" title="Warning" />
       ),
       [ResultStatus.Unknown]: <UnknownIcon color="gray" title="Unknown" />,
     }[result] || <UnknownIcon color="gray" title="Unknown" />