revert: Sidebar unread counts for filters (CW-7262) (#14769)
## Description Reverts [#14726](https://github.com/chatwoot/chatwoot/pull/14726) (\"feat: Add sidebar unread counts for filters (CW-7262)\"), which shipped in 4.15.0. After 4.15.0 rolled out to prod the unread-counts-for-filters code path caused a cascading incident: - `Counter#ensure_filters_cache!` fires on every `/unread_counts/index` and `update_last_seen` request. - On cache miss it calls `Builder#build_filters_for!`, which: - invokes `store.clear_user_filters!` -> `delete_matching` -> a Redis `SCAN_each` over a per-user pattern keyspace, and - runs 4 fresh SQL passes per user (mentions, participating, unattended, and per-folder `Conversations::FilterService` queries). - Threads blocked in the SCAN held their DB connections, the connection pool exhausted, Sidekiq jobs were discarded with `ActiveJob::DeserializationError: could not obtain a connection from the pool`, and the enqueued queue blew past 200K. Related: [CW-7262](https://linear.app/chatwoot/issue/CW-7262/unread-counts-for-filters-folders) ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
Vishnu Narayanan
@@ -22,10 +22,6 @@ const props = defineProps({
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
badgeTooltip: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const reauthorizationRequired = computed(() => {
|
||||
@@ -38,7 +34,7 @@ const reauthorizationRequired = computed(() => {
|
||||
<ChannelIcon :inbox="inbox" class="size-4" />
|
||||
</span>
|
||||
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
||||
<SidebarUnreadBadge :count="badgeCount" :tooltip="badgeTooltip" />
|
||||
<SidebarUnreadBadge :count="badgeCount" />
|
||||
<div
|
||||
v-if="reauthorizationRequired"
|
||||
v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
|
||||
|
||||
@@ -199,18 +199,6 @@ const getLabelUnreadCount = useMapGetter(
|
||||
const getTeamUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getTeamUnreadCount'
|
||||
);
|
||||
const mentionsUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getMentionsUnreadCount'
|
||||
);
|
||||
const participatingUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getParticipatingUnreadCount'
|
||||
);
|
||||
const unattendedUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getUnattendedUnreadCount'
|
||||
);
|
||||
const getFolderUnreadCount = useMapGetter(
|
||||
'conversationUnreadCounts/getFolderUnreadCount'
|
||||
);
|
||||
const teams = useMapGetter('teams/getMyTeams');
|
||||
const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
|
||||
const conversationCustomViews = useMapGetter(
|
||||
@@ -292,19 +280,6 @@ const sortedLabels = computed(() =>
|
||||
})
|
||||
);
|
||||
|
||||
const unreadBadgeTooltips = computed(() => ({
|
||||
ALL: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.ALL'),
|
||||
INBOX: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.INBOX'),
|
||||
LABEL: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.LABEL'),
|
||||
TEAM: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.TEAM'),
|
||||
FOLDER: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.FOLDER'),
|
||||
MENTIONS: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.MENTIONS'),
|
||||
PARTICIPATING: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.PARTICIPATING'),
|
||||
UNATTENDED: t('SIDEBAR.UNREAD_COUNT_TOOLTIP.UNATTENDED'),
|
||||
}));
|
||||
|
||||
const unreadBadgeTooltip = type => unreadBadgeTooltips.value[type];
|
||||
|
||||
const closeMobileSidebar = () => {
|
||||
if (!props.isMobileSidebarOpen) return;
|
||||
emit('closeMobileSidebar');
|
||||
@@ -360,15 +335,12 @@ const menuItems = computed(() => {
|
||||
label: t('SIDEBAR.ALL_CONVERSATIONS'),
|
||||
icon: 'i-lucide-inbox',
|
||||
badgeCount: allUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('ALL'),
|
||||
activeOn: ['inbox_conversation'],
|
||||
to: accountScopedRoute('home'),
|
||||
},
|
||||
{
|
||||
name: 'Mentions',
|
||||
label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
|
||||
badgeCount: mentionsUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('MENTIONS'),
|
||||
icon: 'i-lucide-at-sign',
|
||||
activeOn: ['conversation_through_mentions'],
|
||||
to: accountScopedRoute('conversation_mentions'),
|
||||
@@ -376,8 +348,6 @@ const menuItems = computed(() => {
|
||||
{
|
||||
name: 'Participating',
|
||||
label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
|
||||
badgeCount: participatingUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('PARTICIPATING'),
|
||||
icon: 'i-lucide-user-round-check',
|
||||
activeOn: ['conversation_through_participating'],
|
||||
to: accountScopedRoute('conversation_participating'),
|
||||
@@ -385,8 +355,6 @@ const menuItems = computed(() => {
|
||||
{
|
||||
name: 'Unattended',
|
||||
activeOn: ['conversation_through_unattended'],
|
||||
badgeCount: unattendedUnreadCount.value,
|
||||
badgeTooltip: unreadBadgeTooltip('UNATTENDED'),
|
||||
label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
|
||||
icon: 'i-lucide-clock-alert',
|
||||
to: accountScopedRoute('conversation_unattended'),
|
||||
@@ -402,8 +370,6 @@ const menuItems = computed(() => {
|
||||
children: sortedFolders.value.map(view => ({
|
||||
name: `${view.name}-${view.id}`,
|
||||
label: view.name,
|
||||
badgeCount: getFolderUnreadCount.value(view.id),
|
||||
badgeTooltip: unreadBadgeTooltip('FOLDER'),
|
||||
to: accountScopedRoute('folder_conversations', { id: view.id }),
|
||||
})),
|
||||
},
|
||||
@@ -419,7 +385,6 @@ const menuItems = computed(() => {
|
||||
name: `${team.name}-${team.id}`,
|
||||
label: team.name,
|
||||
badgeCount: getTeamUnreadCount.value(team.id),
|
||||
badgeTooltip: unreadBadgeTooltip('TEAM'),
|
||||
to: accountScopedRoute('team_conversations', { teamId: team.id }),
|
||||
})),
|
||||
},
|
||||
@@ -435,7 +400,6 @@ const menuItems = computed(() => {
|
||||
name: `${inbox.name}-${inbox.id}`,
|
||||
label: inbox.name,
|
||||
badgeCount: getInboxUnreadCount.value(inbox.id),
|
||||
badgeTooltip: unreadBadgeTooltip('INBOX'),
|
||||
icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
|
||||
to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
|
||||
component: leafProps =>
|
||||
@@ -444,7 +408,6 @@ const menuItems = computed(() => {
|
||||
active: leafProps.active,
|
||||
inbox,
|
||||
badgeCount: leafProps.badgeCount,
|
||||
badgeTooltip: leafProps.badgeTooltip,
|
||||
}),
|
||||
})),
|
||||
},
|
||||
@@ -460,7 +423,6 @@ const menuItems = computed(() => {
|
||||
name: `${label.title}-${label.id}`,
|
||||
label: label.title,
|
||||
badgeCount: getLabelUnreadCount.value(label.id),
|
||||
badgeTooltip: unreadBadgeTooltip('LABEL'),
|
||||
icon: h('span', {
|
||||
class: `size-[8px] rounded-sm`,
|
||||
style: { backgroundColor: label.color },
|
||||
|
||||
@@ -197,10 +197,7 @@ onMounted(async () => {
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ subChild.label }}</span>
|
||||
<SidebarUnreadBadge
|
||||
:count="subChild.badgeCount"
|
||||
:tooltip="subChild.badgeTooltip"
|
||||
/>
|
||||
<SidebarUnreadBadge :count="subChild.badgeCount" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -223,10 +220,7 @@ onMounted(async () => {
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ child.label }}</span>
|
||||
<SidebarUnreadBadge
|
||||
:count="child.badgeCount"
|
||||
:tooltip="child.badgeTooltip"
|
||||
/>
|
||||
<SidebarUnreadBadge :count="child.badgeCount" />
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -12,7 +12,6 @@ const props = defineProps({
|
||||
active: { type: Boolean, default: false },
|
||||
component: { type: Function, default: null },
|
||||
badgeCount: { type: [Number, String], default: 0 },
|
||||
badgeTooltip: { type: String, default: '' },
|
||||
hideTreeLine: { type: Boolean, default: false },
|
||||
thinTreeLine: { type: Boolean, default: false },
|
||||
});
|
||||
@@ -53,14 +52,14 @@ const TREE_CONNECTOR =
|
||||
<component
|
||||
:is="component"
|
||||
v-if="shouldRenderComponent"
|
||||
v-bind="{ label, icon, active, badgeCount, badgeTooltip }"
|
||||
v-bind="{ label, icon, active, badgeCount }"
|
||||
/>
|
||||
<template v-else>
|
||||
<span v-if="icon" class="size-4 grid place-content-center rounded-full">
|
||||
<Icon :icon="icon" class="size-4 inline-block" />
|
||||
</span>
|
||||
<div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
|
||||
<SidebarUnreadBadge :count="badgeCount" :tooltip="badgeTooltip" />
|
||||
<SidebarUnreadBadge :count="badgeCount" />
|
||||
</template>
|
||||
</component>
|
||||
</Policy>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
count: { type: [Number, String], default: 0 },
|
||||
tooltip: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const normalizedCount = computed(() => {
|
||||
@@ -19,7 +18,6 @@ const displayCount = computed(() =>
|
||||
<template>
|
||||
<span
|
||||
v-if="normalizedCount > 0"
|
||||
v-tooltip.top="tooltip || null"
|
||||
data-test-id="sidebar-unread-badge"
|
||||
class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-slate-4 px-1 text-xxs font-medium leading-3 text-n-slate-12 dark:bg-n-slate-5 flex-shrink-0"
|
||||
>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import ChannelLeaf from '../ChannelLeaf.vue';
|
||||
import SidebarUnreadBadge from '../SidebarUnreadBadge.vue';
|
||||
|
||||
const mountChannelLeaf = props =>
|
||||
mount(ChannelLeaf, {
|
||||
@@ -29,17 +28,6 @@ describe('ChannelLeaf', () => {
|
||||
expect(badge.text()).toBe('3');
|
||||
});
|
||||
|
||||
it('passes tooltip copy to unread badge', () => {
|
||||
const wrapper = mountChannelLeaf({
|
||||
badgeCount: 3,
|
||||
badgeTooltip: 'Total unread conversations in this inbox',
|
||||
});
|
||||
|
||||
expect(wrapper.findComponent(SidebarUnreadBadge).props('tooltip')).toBe(
|
||||
'Total unread conversations in this inbox'
|
||||
);
|
||||
});
|
||||
|
||||
it('does not render unread badge when count is zero', () => {
|
||||
const wrapper = mountChannelLeaf({ badgeCount: 0 });
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { h } from 'vue';
|
||||
import SidebarGroupLeaf from '../SidebarGroupLeaf.vue';
|
||||
import SidebarUnreadBadge from '../SidebarUnreadBadge.vue';
|
||||
|
||||
vi.mock('../provider', () => ({
|
||||
useSidebarContext: () => ({
|
||||
@@ -45,17 +44,6 @@ describe('SidebarGroupLeaf', () => {
|
||||
expect(badge.text()).toBe('7');
|
||||
});
|
||||
|
||||
it('passes tooltip copy to unread badge', () => {
|
||||
const wrapper = mountLeaf({
|
||||
badgeCount: 7,
|
||||
badgeTooltip: 'Total unread conversations in this label',
|
||||
});
|
||||
|
||||
expect(wrapper.findComponent(SidebarUnreadBadge).props('tooltip')).toBe(
|
||||
'Total unread conversations in this label'
|
||||
);
|
||||
});
|
||||
|
||||
it('does not render unread badge when count is zero', () => {
|
||||
const wrapper = mountLeaf({ badgeCount: 0 });
|
||||
|
||||
@@ -75,17 +63,14 @@ describe('SidebarGroupLeaf', () => {
|
||||
it('passes unread count to custom leaf components', () => {
|
||||
const wrapper = mountLeaf({
|
||||
badgeCount: 4,
|
||||
badgeTooltip: 'Total unread conversations in this inbox',
|
||||
component: leafProps =>
|
||||
h(
|
||||
'span',
|
||||
{ 'data-test-id': 'custom-leaf-count' },
|
||||
`${leafProps.badgeCount}:${leafProps.badgeTooltip}`
|
||||
leafProps.badgeCount
|
||||
),
|
||||
});
|
||||
|
||||
expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe(
|
||||
'4:Total unread conversations in this inbox'
|
||||
);
|
||||
expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe('4');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -316,16 +316,6 @@
|
||||
"MENTIONED_CONVERSATIONS": "Mentions",
|
||||
"PARTICIPATING_CONVERSATIONS": "Participating",
|
||||
"UNATTENDED_CONVERSATIONS": "Unattended",
|
||||
"UNREAD_COUNT_TOOLTIP": {
|
||||
"ALL": "Total unread conversations",
|
||||
"INBOX": "Total unread conversations in this inbox",
|
||||
"LABEL": "Total unread conversations in this label",
|
||||
"TEAM": "Total unread conversations in this team",
|
||||
"FOLDER": "Total unread conversations in this folder",
|
||||
"MENTIONS": "Unread conversations where you were mentioned",
|
||||
"PARTICIPATING": "Unread conversations you're participating in",
|
||||
"UNATTENDED": "Unread unattended conversations"
|
||||
},
|
||||
"REPORTS": "Reports",
|
||||
"SETTINGS": "Settings",
|
||||
"CONTACTS": "Contacts",
|
||||
|
||||
@@ -6,10 +6,6 @@ export const state = {
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 0,
|
||||
participatingCount: 0,
|
||||
unattendedCount: 0,
|
||||
folders: {},
|
||||
};
|
||||
|
||||
const normalizeCount = count => {
|
||||
@@ -41,18 +37,6 @@ export const getters = {
|
||||
getTeamUnreadCount: $state => teamId => {
|
||||
return $state.teams[String(teamId)] || 0;
|
||||
},
|
||||
getMentionsUnreadCount($state) {
|
||||
return $state.mentionsCount;
|
||||
},
|
||||
getParticipatingUnreadCount($state) {
|
||||
return $state.participatingCount;
|
||||
},
|
||||
getUnattendedUnreadCount($state) {
|
||||
return $state.unattendedCount;
|
||||
},
|
||||
getFolderUnreadCount: $state => folderId => {
|
||||
return $state.folders[String(folderId)] || 0;
|
||||
},
|
||||
getInboxUnreadCounts($state) {
|
||||
return $state.inboxes;
|
||||
},
|
||||
@@ -62,9 +46,6 @@ export const getters = {
|
||||
getTeamUnreadCounts($state) {
|
||||
return $state.teams;
|
||||
},
|
||||
getFolderUnreadCounts($state) {
|
||||
return $state.folders;
|
||||
},
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
@@ -87,10 +68,6 @@ export const mutations = {
|
||||
$state.inboxes = normalizeCounts(payload.inboxes);
|
||||
$state.labels = normalizeCounts(payload.labels);
|
||||
$state.teams = normalizeCounts(payload.teams);
|
||||
$state.mentionsCount = normalizeCount(payload.mentions_count);
|
||||
$state.participatingCount = normalizeCount(payload.participating_count);
|
||||
$state.unattendedCount = normalizeCount(payload.unattended_count);
|
||||
$state.folders = normalizeCounts(payload.folders);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -57,32 +57,10 @@ describe('#getters', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 3: 4 },
|
||||
teams: { 5: 6 },
|
||||
folders: { 8: 9 },
|
||||
};
|
||||
|
||||
expect(getters.getInboxUnreadCounts(state)).toEqual({ 1: 2 });
|
||||
expect(getters.getLabelUnreadCounts(state)).toEqual({ 3: 4 });
|
||||
expect(getters.getTeamUnreadCounts(state)).toEqual({ 5: 6 });
|
||||
expect(getters.getFolderUnreadCounts(state)).toEqual({ 8: 9 });
|
||||
});
|
||||
|
||||
it('returns mentions, participating, unattended, and folder unread counts', () => {
|
||||
const state = {
|
||||
allCount: 0,
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 3,
|
||||
participatingCount: 4,
|
||||
unattendedCount: 5,
|
||||
folders: { 7: 8 },
|
||||
};
|
||||
|
||||
expect(getters.getMentionsUnreadCount(state)).toBe(3);
|
||||
expect(getters.getParticipatingUnreadCount(state)).toBe(4);
|
||||
expect(getters.getUnattendedUnreadCount(state)).toBe(5);
|
||||
expect(getters.getFolderUnreadCount(state)(7)).toBe(8);
|
||||
expect(getters.getFolderUnreadCount(state)('7')).toBe(8);
|
||||
expect(getters.getFolderUnreadCount(state)(8)).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
-19
@@ -21,13 +21,6 @@ describe('#mutations', () => {
|
||||
6: '7',
|
||||
7: 0,
|
||||
},
|
||||
mentions_count: '8',
|
||||
participating_count: 9,
|
||||
unattended_count: '10',
|
||||
folders: {
|
||||
11: '12',
|
||||
12: 0,
|
||||
},
|
||||
});
|
||||
|
||||
expect(state).toEqual({
|
||||
@@ -35,10 +28,6 @@ describe('#mutations', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 4: 5 },
|
||||
teams: { 6: 7 },
|
||||
mentionsCount: 8,
|
||||
participatingCount: 9,
|
||||
unattendedCount: 10,
|
||||
folders: { 11: 12 },
|
||||
});
|
||||
});
|
||||
|
||||
@@ -48,10 +37,6 @@ describe('#mutations', () => {
|
||||
inboxes: { 1: 2 },
|
||||
labels: { 4: 5 },
|
||||
teams: { 6: 7 },
|
||||
mentionsCount: 8,
|
||||
participatingCount: 9,
|
||||
unattendedCount: 10,
|
||||
folders: { 10: 11 },
|
||||
};
|
||||
|
||||
mutations[types.SET_CONVERSATION_UNREAD_COUNTS](state, {});
|
||||
@@ -61,10 +46,6 @@ describe('#mutations', () => {
|
||||
inboxes: {},
|
||||
labels: {},
|
||||
teams: {},
|
||||
mentionsCount: 0,
|
||||
participatingCount: 0,
|
||||
unattendedCount: 0,
|
||||
folders: {},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user