fix ui: change tags icons

frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx

@@ -1,11 +1,13 @@
-import React, { memo } from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { setActiveTab } from 'Duck/search';
 import { issues_types, types } from 'Types/session/issue';
-import { Icon } from 'UI';
+import { Segmented } from 'antd';
 import cn from 'classnames';
-import { Segmented } from 'antd'
+import { Angry, CircleAlert, Skull, WifiOff } from 'lucide-react';
+import React, { memo } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { setActiveTab } from 'Duck/search';
+import { Icon } from 'UI';
 
 interface Tag {
   name: string;
@@ -25,40 +27,60 @@ interface DispatchProps {
 
 type Props = StateProps & DispatchProps;
 
-const SessionTags: React.FC<Props> = memo(({ activeTab, tags, total, setActiveTab }) => {
-  const disable = activeTab.type === 'all' && total === 0;
+const tagIcons = {
+  [types.ALL]: undefined,
+  [types.JS_EXCEPTION]: <CircleAlert size={14} />,
+  [types.BAD_REQUEST]: <WifiOff size={14} />,
+  [types.CLICK_RAGE]: <Angry size={14} />,
+  [types.CRASH]: <Skull size={14} />,
+} as Record<string, any>
 
-  const options = tags.map((tag, i) => ({
-    label: <div className={'flex items-center gap-2'}>
-      {tag.icon ? <Icon
-        name={tag.icon}
-        color={activeTab.type === tag.type ? "main" : undefined}
-        size="14"
-        className={cn("group-hover:fill-teal")}
-      /> : null}
-      <div className={activeTab.type === tag.type ? 'text-main' : ''}>{tag.name}</div>
-    </div>,
-    value: tag.type,
-    disabled: disable && tag.type !== 'all',
-  }))
+const SessionTags: React.FC<Props> = memo(
+  ({ activeTab, tags, total, setActiveTab }) => {
+    const disable = activeTab.type === 'all' && total === 0;
 
-  const onPick = (tabValue: string) => {
-    const tab = tags.find((t) => t.type === tabValue);
-    if (tab) {
-      setActiveTab(tab);
-    }
+    const options = tags.map((tag, i) => ({
+      label: (
+        <div className={'flex items-center gap-2'}>
+          {tag.icon ? (
+            tagIcons[tag.type] ? (
+              tagIcons[tag.type]
+            ) : (
+              <Icon
+                name={tag.icon}
+                color={activeTab.type === tag.type ? 'main' : undefined}
+                size="14"
+                className={cn('group-hover:fill-teal')}
+              />
+            )
+          ) : null}
+          <div className={activeTab.type === tag.type ? 'text-main' : ''}>
+            {tag.name}
+          </div>
+        </div>
+      ),
+      value: tag.type,
+      disabled: disable && tag.type !== 'all',
+    }));
+
+    const onPick = (tabValue: string) => {
+      const tab = tags.find((t) => t.type === tabValue);
+      if (tab) {
+        setActiveTab(tab);
+      }
+    };
+    return (
+      <div className="flex items-center">
+        <Segmented
+          options={options}
+          value={activeTab.type}
+          onChange={onPick}
+          size={'small'}
+        />
+      </div>
+    );
   }
-  return (
-    <div className='flex items-center'>
-      <Segmented
-        options={options}
-        value={activeTab.type}
-        onChange={onPick}
-        size={'small'}
-      />
-    </div>
-  );
-});
+);
 
 // Separate the TagItem into its own memoized component.
 export const TagItem: React.FC<{
@@ -70,38 +92,48 @@ export const TagItem: React.FC<{
 }> = memo(({ isActive, onClick, label, icon, disabled }) => (
   <button
     onClick={onClick}
-    className={cn('transition group rounded ml-2 px-2 py-1 flex items-center uppercase text-sm hover:bg-active-blue hover:text-teal', {
-      'bg-active-blue text-teal': isActive,
-      disabled: disabled
-    })}
+    className={cn(
+      'transition group rounded ml-2 px-2 py-1 flex items-center uppercase text-sm hover:bg-active-blue hover:text-teal',
+      {
+        'bg-active-blue text-teal': isActive,
+        disabled: disabled,
+      }
+    )}
     style={{ height: '36px' }}
   >
     {icon && (
       <Icon
         name={icon}
         color={isActive ? 'teal' : 'gray-medium'}
-        size='14'
+        size="14"
         className={cn('group-hover:fill-teal mr-2')}
       />
     )}
-    <span className='leading-none font-medium'>{label}</span>
+    <span className="leading-none font-medium">{label}</span>
   </button>
 ));
 
 const mapStateToProps = (state: any): StateProps => {
   const platform = state.getIn(['site', 'active'])?.platform || '';
   const activeTab = state.getIn(['search', 'activeTab']);
-  const filteredTags = issues_types.filter(tag =>
-    tag.type !== 'mouse_thrashing' &&
-    (platform === 'web' ? tag.type !== types.TAP_RAGE : tag.type !== types.CLICK_RAGE)
+  const filteredTags = issues_types.filter(
+    (tag) =>
+      tag.type !== 'mouse_thrashing' &&
+      (platform === 'web'
+        ? tag.type !== types.TAP_RAGE
+        : tag.type !== types.CLICK_RAGE)
   );
   const total = state.getIn(['sessions', 'total']) || 0;
 
   return { activeTab, tags: filteredTags, total };
 };
 
-const mapDispatchToProps = (dispatch: any): DispatchProps => bindActionCreators({
-  setActiveTab
-}, dispatch);
+const mapDispatchToProps = (dispatch: any): DispatchProps =>
+  bindActionCreators(
+    {
+      setActiveTab,
+    },
+    dispatch
+  );
 
 export default connect(mapStateToProps, mapDispatchToProps)(SessionTags);