From 7f47dd2b5c44105eb7fb82c471df66c040253b02 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Wed, 29 Jan 2025 15:26:29 -0800 Subject: [PATCH 1/8] add tags from highlights to preview + drawer --- .../groupTags/groupTagsDrawer.tsx | 22 ++++++++++++++---- .../streamline/issueTagsPreview.tsx | 23 +++++++++++++++---- static/app/views/issueDetails/utils.tsx | 2 ++ 3 files changed, 39 insertions(+), 8 deletions(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index f017f7164f79dd..cd8e28c758bdc0 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -24,6 +24,7 @@ import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Group} from 'sentry/types/group'; import {trackAnalytics} from 'sentry/utils/analytics'; +import {useDetailedProject} from 'sentry/utils/useDetailedProject'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import {useParams} from 'sentry/utils/useParams'; @@ -33,7 +34,7 @@ import {TagDistribution} from 'sentry/views/issueDetails/groupTags/tagDistributi import {useGroupTags} from 'sentry/views/issueDetails/groupTags/useGroupTags'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; -import {useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils'; +import {HIGHLIGHT_TAGS, useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils'; export function GroupTagsDrawer({group}: {group: Group}) { const location = useLocation(); @@ -67,6 +68,16 @@ export function GroupTagsDrawer({group}: {group: Group}) { environment: environments, }); + const {data: detailedProject} = useDetailedProject({ + orgSlug: organization.slug, + projectSlug: project.slug, + }); + + const highlightTagKeys = useMemo(() => { + const tagKeys = detailedProject?.highlightTags ?? project?.highlightTags ?? []; + return tagKeys.filter(tag => !HIGHLIGHT_TAGS.includes(tag)); + }, [detailedProject, project]); + const tagValues = useMemo( () => data.reduce((valueMap, tag) => { @@ -78,8 +89,11 @@ export function GroupTagsDrawer({group}: {group: Group}) { ); const displayTags = useMemo(() => { - const sortedTags = data.sort((a, b) => a.key.localeCompare(b.key)); - const searchedTags = sortedTags.filter( + const highlightTags = data.filter(tag => highlightTagKeys.includes(tag.key)); + const remainingTags = data.filter(tag => !highlightTagKeys.includes(tag.key)); + const sortedTags = remainingTags.sort((a, b) => a.key.localeCompare(b.key)); + const orderedTags = [...highlightTags, ...sortedTags]; + const searchedTags = orderedTags.filter( tag => tag.key.includes(search) || tag.name.includes(search) || @@ -87,7 +101,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { tagValues[tag.key].includes(search) ); return searchedTags; - }, [data, search, tagValues]); + }, [data, search, tagValues, highlightTagKeys]); if (isPending) { return ; diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index 9656a06eade377..07a3258422e902 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -17,14 +17,16 @@ import {space} from 'sentry/styles/space'; import type {Project} from 'sentry/types/project'; import {percent} from 'sentry/utils'; import {isMobilePlatform} from 'sentry/utils/platform'; +import {useDetailedProject} from 'sentry/utils/useDetailedProject'; import {useLocation} from 'sentry/utils/useLocation'; +import useOrganization from 'sentry/utils/useOrganization'; import {formatVersion} from 'sentry/utils/versions/formatVersion'; import type {GroupTag} from 'sentry/views/issueDetails/groupTags/useGroupTags'; import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroupTags'; import {useEventQuery} from 'sentry/views/issueDetails/streamline/eventSearch'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; -import {usePrefetchTagValues} from 'sentry/views/issueDetails/utils'; +import {HIGHLIGHT_TAGS, usePrefetchTagValues} from 'sentry/views/issueDetails/utils'; const DEFAULT_TAGS = ['transaction', 'environment', 'release']; const FRONTEND_TAGS = ['browser', 'release', 'url', 'environment']; @@ -199,6 +201,17 @@ export default function IssueTagsPreview({ project: Project; }) { const searchQuery = useEventQuery({groupId}); + const organization = useOrganization(); + + const {data: detailedProject} = useDetailedProject({ + orgSlug: organization.slug, + projectSlug: project.slug, + }); + + const highlightTagKeys = useMemo(() => { + const tagKeys = detailedProject?.highlightTags ?? project?.highlightTags ?? []; + return tagKeys.filter(tag => !HIGHLIGHT_TAGS.includes(tag)); + }, [detailedProject, project]); const { isError, @@ -213,6 +226,7 @@ export default function IssueTagsPreview({ return []; } + const highlightTags = tags.filter(tag => highlightTagKeys.includes(tag.key)); const priorityTags = isMobilePlatform(project?.platform) ? MOBILE_TAGS : frontend.some(val => val === project?.platform) @@ -226,9 +240,10 @@ export default function IssueTagsPreview({ .sort((a, b) => priorityTags.indexOf(a.key) - priorityTags.indexOf(b.key)); const remainingTagKeys = tags.filter(tag => !priorityTags.includes(tag.key)).sort(); - const orderedTags = [...sortedTags, ...remainingTagKeys]; - return orderedTags.slice(0, 4); - }, [tags, project?.platform]); + const orderedTags = [...highlightTags, ...sortedTags, ...remainingTagKeys]; + const uniqueTags = [...new Set(orderedTags)]; + return uniqueTags.slice(0, 4); + }, [tags, project?.platform, highlightTagKeys]); if (isPending) { return ( diff --git a/static/app/views/issueDetails/utils.tsx b/static/app/views/issueDetails/utils.tsx index 91ba7804dc5931..c88582cb720cad 100644 --- a/static/app/views/issueDetails/utils.tsx +++ b/static/app/views/issueDetails/utils.tsx @@ -21,6 +21,8 @@ import {useParams} from 'sentry/utils/useParams'; import {useUser} from 'sentry/utils/useUser'; import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroupTags'; +export const HIGHLIGHT_TAGS = ['handled', 'level', 'mobile', 'main_thread', 'url']; + export function markEventSeen( api: Client, orgId: string, From a57a589cf6cc888009cafcd1e3d1c6c38735e3f9 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Wed, 29 Jan 2025 15:29:49 -0800 Subject: [PATCH 2/8] only filter out highlights in preview --- static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 5 ++--- .../app/views/issueDetails/streamline/issueTagsPreview.tsx | 4 +++- static/app/views/issueDetails/utils.tsx | 2 -- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index cd8e28c758bdc0..7fed2c3bc8c4b0 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -34,7 +34,7 @@ import {TagDistribution} from 'sentry/views/issueDetails/groupTags/tagDistributi import {useGroupTags} from 'sentry/views/issueDetails/groupTags/useGroupTags'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; -import {HIGHLIGHT_TAGS, useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils'; +import {useEnvironmentsFromUrl} from 'sentry/views/issueDetails/utils'; export function GroupTagsDrawer({group}: {group: Group}) { const location = useLocation(); @@ -74,8 +74,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { }); const highlightTagKeys = useMemo(() => { - const tagKeys = detailedProject?.highlightTags ?? project?.highlightTags ?? []; - return tagKeys.filter(tag => !HIGHLIGHT_TAGS.includes(tag)); + return detailedProject?.highlightTags ?? project?.highlightTags ?? []; }, [detailedProject, project]); const tagValues = useMemo( diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index 07a3258422e902..d960d8e0e4a976 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -26,7 +26,7 @@ import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroup import {useEventQuery} from 'sentry/views/issueDetails/streamline/eventSearch'; import {Tab, TabPaths} from 'sentry/views/issueDetails/types'; import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute'; -import {HIGHLIGHT_TAGS, usePrefetchTagValues} from 'sentry/views/issueDetails/utils'; +import {usePrefetchTagValues} from 'sentry/views/issueDetails/utils'; const DEFAULT_TAGS = ['transaction', 'environment', 'release']; const FRONTEND_TAGS = ['browser', 'release', 'url', 'environment']; @@ -41,6 +41,8 @@ const BACKEND_TAGS = [ const MOBILE_TAGS = ['device', 'os', 'release', 'environment', 'transaction']; const RTL_TAGS = ['transaction', 'url']; +const HIGHLIGHT_TAGS = ['handled', 'level', 'mobile', 'main_thread', 'url']; + type Segment = { count: number; name: string | React.ReactNode; diff --git a/static/app/views/issueDetails/utils.tsx b/static/app/views/issueDetails/utils.tsx index c88582cb720cad..91ba7804dc5931 100644 --- a/static/app/views/issueDetails/utils.tsx +++ b/static/app/views/issueDetails/utils.tsx @@ -21,8 +21,6 @@ import {useParams} from 'sentry/utils/useParams'; import {useUser} from 'sentry/utils/useUser'; import {useGroupTagsReadable} from 'sentry/views/issueDetails/groupTags/useGroupTags'; -export const HIGHLIGHT_TAGS = ['handled', 'level', 'mobile', 'main_thread', 'url']; - export function markEventSeen( api: Client, orgId: string, From 9edf0b9eef0759aa4621d473222e7de05559a93e Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Wed, 29 Jan 2025 15:41:42 -0800 Subject: [PATCH 3/8] fix tests --- .../app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 2 +- .../issueDetails/streamline/eventDetailsHeader.spec.tsx | 4 ++++ .../app/views/issueDetails/streamline/eventGraph.spec.tsx | 4 ++++ .../issueDetails/streamline/groupDetailsLayout.spec.tsx | 4 ++++ .../issueDetails/streamline/issueTagsPreview.spec.tsx | 7 +++++++ .../app/views/issueDetails/streamline/issueTagsPreview.tsx | 2 ++ 6 files changed, 22 insertions(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index 7fed2c3bc8c4b0..f1313db76f01a5 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -57,7 +57,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { }, }); const [search, setSearch] = useState(''); - + // const { data = [], isPending, diff --git a/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx b/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx index 8ed16846727317..a96a80d1010d00 100644 --- a/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx +++ b/static/app/views/issueDetails/streamline/eventDetailsHeader.spec.tsx @@ -57,6 +57,10 @@ describe('EventDetailsHeader', () => { new Set(['environments']) ); ProjectsStore.loadInitialData([project]); + MockApiClient.addMockResponse({ + url: '/projects/org-slug/project-slug/', + body: [project], + }); MockApiClient.addMockResponse({ url: `/organizations/${organization.slug}/events-stats/`, body: {'count()': EventsStatsFixture(), 'count_unique(user)': EventsStatsFixture()}, diff --git a/static/app/views/issueDetails/streamline/eventGraph.spec.tsx b/static/app/views/issueDetails/streamline/eventGraph.spec.tsx index 3a273b68867bcb..0752df6fa2f901 100644 --- a/static/app/views/issueDetails/streamline/eventGraph.spec.tsx +++ b/static/app/views/issueDetails/streamline/eventGraph.spec.tsx @@ -42,6 +42,10 @@ describe('EventGraph', () => { url: `/organizations/${organization.slug}/releases/stats/`, body: [], }); + MockApiClient.addMockResponse({ + url: '/projects/org-slug/project-slug/', + body: [project], + }); PageFiltersStore.init(); PageFiltersStore.onInitializeUrlState( { diff --git a/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx b/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx index 70f4e3913347a4..470c859b6a1d3f 100644 --- a/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx +++ b/static/app/views/issueDetails/streamline/groupDetailsLayout.spec.tsx @@ -88,6 +88,10 @@ describe('GroupDetailsLayout', () => { githubWriteIntegration: {ok: true}, }, }); + MockApiClient.addMockResponse({ + url: '/projects/org-slug/project-slug/', + body: [project], + }); }); it('renders children, can collapse sidebar', async () => { diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx index 75a0e4e689a93c..5ae6974dcdfe9a 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.spec.tsx @@ -1,4 +1,5 @@ import {GroupFixture} from 'sentry-fixture/group'; +import {ProjectFixture} from 'sentry-fixture/project'; import {TagsFixture} from 'sentry-fixture/tags'; import {render, screen} from 'sentry-test/reactTestingLibrary'; @@ -6,6 +7,12 @@ import {render, screen} from 'sentry-test/reactTestingLibrary'; import IssueTagsPreview from './issueTagsPreview'; describe('IssueTagsPreview', () => { + beforeEach(() => { + MockApiClient.addMockResponse({ + url: '/projects/org-slug/project-slug/', + body: [ProjectFixture()], + }); + }); it('renders preview tags', async () => { const group = GroupFixture(); MockApiClient.addMockResponse({ diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index d960d8e0e4a976..badf8dfc99e1fb 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -50,6 +50,8 @@ type Segment = { color?: string; }; +// + const bgColor = (index: number) => Color(CHART_PALETTE[4].at(index)).alpha(0.8).toString(); const getRoundedPercentage = (percentage: number) => From d2b9311819c80ba716af63d9f2d0bd70848fea96 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Wed, 29 Jan 2025 15:42:01 -0800 Subject: [PATCH 4/8] rm --- static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 1 - static/app/views/issueDetails/streamline/issueTagsPreview.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index f1313db76f01a5..aa5e08db1f4d36 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -57,7 +57,6 @@ export function GroupTagsDrawer({group}: {group: Group}) { }, }); const [search, setSearch] = useState(''); - // const { data = [], isPending, diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index badf8dfc99e1fb..d960d8e0e4a976 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -50,8 +50,6 @@ type Segment = { color?: string; }; -// - const bgColor = (index: number) => Color(CHART_PALETTE[4].at(index)).alpha(0.8).toString(); const getRoundedPercentage = (percentage: number) => From 6e981199ba1ee8ef8de2927a4c9382b2e8826cc9 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Wed, 29 Jan 2025 15:54:46 -0800 Subject: [PATCH 5/8] newline --- static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index aa5e08db1f4d36..7fed2c3bc8c4b0 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -57,6 +57,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { }, }); const [search, setSearch] = useState(''); + const { data = [], isPending, From e68b6b9be05dd2d2993d1ccf63d619191ae506ff Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Thu, 30 Jan 2025 10:47:21 -0800 Subject: [PATCH 6/8] update preview to use specific presets, better pending, same order --- .../issueDetails/streamline/issueTagsPreview.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index d960d8e0e4a976..96e54e4a0d679e 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -41,8 +41,6 @@ const BACKEND_TAGS = [ const MOBILE_TAGS = ['device', 'os', 'release', 'environment', 'transaction']; const RTL_TAGS = ['transaction', 'url']; -const HIGHLIGHT_TAGS = ['handled', 'level', 'mobile', 'main_thread', 'url']; - type Segment = { count: number; name: string | React.ReactNode; @@ -205,14 +203,16 @@ export default function IssueTagsPreview({ const searchQuery = useEventQuery({groupId}); const organization = useOrganization(); - const {data: detailedProject} = useDetailedProject({ + const {data: detailedProject, isPending: isHighlightPending} = useDetailedProject({ orgSlug: organization.slug, projectSlug: project.slug, }); const highlightTagKeys = useMemo(() => { const tagKeys = detailedProject?.highlightTags ?? project?.highlightTags ?? []; - return tagKeys.filter(tag => !HIGHLIGHT_TAGS.includes(tag)); + const highlightDefaults = + detailedProject?.highlightPreset?.tags ?? project?.highlightPreset?.tags ?? []; + return tagKeys.filter(tag => !highlightDefaults.includes(tag)); }, [detailedProject, project]); const { @@ -228,7 +228,10 @@ export default function IssueTagsPreview({ return []; } - const highlightTags = tags.filter(tag => highlightTagKeys.includes(tag.key)); + const highlightTags = tags + .filter(tag => highlightTagKeys.includes(tag.key)) + .sort((a, b) => highlightTagKeys.indexOf(a.key) - highlightTagKeys.indexOf(b.key)); + const priorityTags = isMobilePlatform(project?.platform) ? MOBILE_TAGS : frontend.some(val => val === project?.platform) @@ -247,7 +250,7 @@ export default function IssueTagsPreview({ return uniqueTags.slice(0, 4); }, [tags, project?.platform, highlightTagKeys]); - if (isPending) { + if (isPending || isHighlightPending) { return ( From 5d510306fdb6ee02bd63ecef26cf13f00570e7e1 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Thu, 30 Jan 2025 10:57:54 -0800 Subject: [PATCH 7/8] add loading for drawer --- static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index 7fed2c3bc8c4b0..110bd99c43d6f9 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -68,7 +68,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { environment: environments, }); - const {data: detailedProject} = useDetailedProject({ + const {data: detailedProject, isPending: isHighlightsPending} = useDetailedProject({ orgSlug: organization.slug, projectSlug: project.slug, }); @@ -102,7 +102,7 @@ export function GroupTagsDrawer({group}: {group: Group}) { return searchedTags; }, [data, search, tagValues, highlightTagKeys]); - if (isPending) { + if (isPending || isHighlightsPending) { return ; } From 1771609c0d670ad75960f0cd6c73b31cb5a9bda2 Mon Sep 17 00:00:00 2001 From: Richard Roggenkemper Date: Thu, 30 Jan 2025 13:16:36 -0800 Subject: [PATCH 8/8] order drawer --- static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx index 110bd99c43d6f9..aa84cb674e2bea 100644 --- a/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx +++ b/static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx @@ -89,9 +89,12 @@ export function GroupTagsDrawer({group}: {group: Group}) { const displayTags = useMemo(() => { const highlightTags = data.filter(tag => highlightTagKeys.includes(tag.key)); + const orderedHighlightTags = highlightTags.sort( + (a, b) => highlightTagKeys.indexOf(a.key) - highlightTagKeys.indexOf(b.key) + ); const remainingTags = data.filter(tag => !highlightTagKeys.includes(tag.key)); const sortedTags = remainingTags.sort((a, b) => a.key.localeCompare(b.key)); - const orderedTags = [...highlightTags, ...sortedTags]; + const orderedTags = [...orderedHighlightTags, ...sortedTags]; const searchedTags = orderedTags.filter( tag => tag.key.includes(search) ||