diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
index aa35b48f9..a26441955 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx
@@ -1,66 +1,90 @@
-import React from 'react';
-import { setActiveTab } from 'Duck/search';
+import React, { memo } from 'react';
+import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
-import { issues_types } from 'Types/session/issue';
+import { setActiveTab } from 'Duck/search';
+import { issues_types, types } from 'Types/session/issue';
import { Icon } from 'UI';
import cn from 'classnames';
-interface Props {
- setActiveTab: typeof setActiveTab;
- activeTab: any;
- tags: any;
- total: number;
-}
-function SessionTags(props: Props) {
- const { activeTab, tags, total } = props;
- const disable = activeTab.type === 'all' && total === 0;
-
- return (
-
- {tags &&
- tags.map((tag: any, index: any) => (
-
- props.setActiveTab(tag)}
- label={tag.name}
- isActive={activeTab.type === tag.type}
- icon={tag.icon}
- disabled={disable && tag.type !== 'all'}
- />
-
- ))}
-
- );
+interface Tag {
+ name: string;
+ type: string;
+ icon: string;
}
-export default connect(
- (state: any) => {
- const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee';
- return {
- activeTab: state.getIn(['search', 'activeTab']),
- tags: issues_types.filter((tag: any) => tag.type !== 'mouse_thrashing' && (isEnterprise ? tag.type !== 'bookmark' : tag.type !== 'vault')),
- total: state.getIn(['sessions', 'total']) || 0,
- };
- },
- {
- setActiveTab,
- }
-)(SessionTags);
-
-export function TagItem({ isActive, onClick, label, icon = '', disabled = false }: any) {
- return (
-
-
-
- );
+interface StateProps {
+ activeTab: { type: string };
+ tags: Tag[];
+ total: number;
}
+
+interface DispatchProps {
+ setActiveTab: typeof setActiveTab;
+}
+
+type Props = StateProps & DispatchProps;
+
+const SessionTags: React.FC = memo(({ activeTab, tags, total, setActiveTab }) => {
+ const disable = activeTab.type === 'all' && total === 0;
+
+ return (
+
+ {tags.map((tag, index) => (
+ setActiveTab(tag)}
+ label={tag.name}
+ isActive={activeTab.type === tag.type}
+ icon={tag.icon}
+ disabled={disable && tag.type !== 'all'}
+ />
+ ))}
+
+ );
+});
+
+// Separate the TagItem into its own memoized component.
+export const TagItem: React.FC<{
+ isActive: boolean;
+ onClick: () => void;
+ label: string;
+ icon?: string;
+ disabled: boolean;
+}> = memo(({ isActive, onClick, label, icon, disabled }) => (
+
+));
+
+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 total = state.getIn(['sessions', 'total']) || 0;
+
+ return { activeTab, tags: filteredTags, total };
+};
+
+const mapDispatchToProps = (dispatch: any): DispatchProps => bindActionCreators({
+ setActiveTab
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionTags);