Skip to content

Commit 81e6492

Browse files
committed
👔 Move all AskSeer related items into askSeer.tsx
1 parent 767327a commit 81e6492

File tree

3 files changed

+59
-96
lines changed

3 files changed

+59
-96
lines changed

static/app/components/searchQueryBuilder/askSeer.tsx

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,61 @@
1+
import {useRef} from 'react';
12
import styled from '@emotion/styled';
3+
import {useOption} from '@react-aria/listbox';
4+
import type {ComboBoxState} from '@react-stately/combobox';
25

6+
import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
7+
import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
8+
import {IconSeer} from 'sentry/icons';
9+
import {t} from 'sentry/locale';
310
import {space} from 'sentry/styles/space';
11+
import {trackAnalytics} from 'sentry/utils/analytics';
12+
import useOrganization from 'sentry/utils/useOrganization';
413

514
export const ASK_SEER_ITEM_KEY = 'ask_seer';
615
export const ASK_SEER_CONSENT_ITEM_KEY = 'ask_seer_consent';
716

8-
export const AskSeerPane = styled('div')`
17+
function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
18+
const ref = useRef<HTMLDivElement>(null);
19+
const {setDisplaySeerResults} = useSearchQueryBuilder();
20+
const organization = useOrganization();
21+
22+
const {optionProps, labelProps, isFocused, isPressed} = useOption(
23+
{
24+
key: ASK_SEER_ITEM_KEY,
25+
'aria-label': 'Ask Seer',
26+
shouldFocusOnHover: true,
27+
shouldSelectOnPressUp: true,
28+
},
29+
state,
30+
ref
31+
);
32+
33+
const handleClick = () => {
34+
trackAnalytics('trace.explorer.ai_query_interface', {
35+
organization,
36+
action: 'opened',
37+
});
38+
setDisplaySeerResults(true);
39+
};
40+
41+
return (
42+
<AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
43+
<InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
44+
<IconSeer />
45+
<AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
46+
</AskSeerListItem>
47+
);
48+
}
49+
50+
export function AskSeer<T>({state}: {state: ComboBoxState<T>}) {
51+
return (
52+
<AskSeerPane>
53+
<AskSeerOption state={state} />
54+
</AskSeerPane>
55+
);
56+
}
57+
58+
const AskSeerPane = styled('div')`
959
grid-area: seer;
1060
display: flex;
1161
align-items: center;
@@ -16,7 +66,7 @@ export const AskSeerPane = styled('div')`
1666
width: 100%;
1767
`;
1868

19-
export const AskSeerListItem = styled('div')`
69+
const AskSeerListItem = styled('div')`
2070
position: relative;
2171
display: flex;
2272
align-items: center;
@@ -48,7 +98,7 @@ export const AskSeerListItem = styled('div')`
4898
}
4999
`;
50100

51-
export const AskSeerLabel = styled('span')`
101+
const AskSeerLabel = styled('span')`
52102
${p => p.theme.overflowEllipsis};
53103
color: ${p => p.theme.purple400};
54104
font-size: ${p => p.theme.fontSize.md};

static/app/components/searchQueryBuilder/tokens/combobox.tsx

Lines changed: 3 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import {usePopper} from 'react-popper';
1111
import styled from '@emotion/styled';
1212
import {type AriaComboBoxProps} from '@react-aria/combobox';
13-
import {type AriaListBoxOptions, useOption} from '@react-aria/listbox';
13+
import {type AriaListBoxOptions} from '@react-aria/listbox';
1414
import {ariaHideOutside} from '@react-aria/overlays';
1515
import {mergeRefs} from '@react-aria/utils';
1616
import {type ComboBoxState, useComboBoxState} from '@react-stately/combobox';
@@ -28,27 +28,17 @@ import {
2828
} from 'sentry/components/core/compactSelect/utils';
2929
import {Input} from 'sentry/components/core/input';
3030
import {useAutosizeInput} from 'sentry/components/core/input/useAutosizeInput';
31-
import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
3231
import {Overlay} from 'sentry/components/overlay';
33-
import {
34-
ASK_SEER_ITEM_KEY,
35-
AskSeerLabel,
36-
AskSeerListItem,
37-
AskSeerPane,
38-
} from 'sentry/components/searchQueryBuilder/askSeer';
32+
import {ASK_SEER_ITEM_KEY, AskSeer} from 'sentry/components/searchQueryBuilder/askSeer';
3933
import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
4034
import {useSearchTokenCombobox} from 'sentry/components/searchQueryBuilder/tokens/useSearchTokenCombobox';
4135
import {
4236
findItemInSections,
4337
itemIsSection,
4438
} from 'sentry/components/searchQueryBuilder/tokens/utils';
4539
import type {Token, TokenResult} from 'sentry/components/searchSyntax/parser';
46-
import {IconSeer} from 'sentry/icons';
47-
import {t} from 'sentry/locale';
4840
import {space} from 'sentry/styles/space';
4941
import {defined} from 'sentry/utils';
50-
import {trackAnalytics} from 'sentry/utils/analytics';
51-
import useOrganization from 'sentry/utils/useOrganization';
5242
import useOverlay from 'sentry/utils/useOverlay';
5343
import usePrevious from 'sentry/utils/usePrevious';
5444

@@ -259,39 +249,6 @@ function useUpdateOverlayPositionOnContentChange({
259249
}, [contentRef, isOpen, updateOverlayPosition]);
260250
}
261251

262-
function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
263-
const ref = useRef<HTMLDivElement>(null);
264-
const {setDisplaySeerResults} = useSearchQueryBuilder();
265-
const organization = useOrganization();
266-
267-
const {optionProps, labelProps, isFocused, isPressed} = useOption(
268-
{
269-
key: ASK_SEER_ITEM_KEY,
270-
'aria-label': 'Ask Seer',
271-
shouldFocusOnHover: true,
272-
shouldSelectOnPressUp: true,
273-
},
274-
state,
275-
ref
276-
);
277-
278-
const handleClick = () => {
279-
trackAnalytics('trace.explorer.ai_query_interface', {
280-
organization,
281-
action: 'opened',
282-
});
283-
setDisplaySeerResults(true);
284-
};
285-
286-
return (
287-
<AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
288-
<InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
289-
<IconSeer />
290-
<AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
291-
</AskSeerListItem>
292-
);
293-
}
294-
295252
function OverlayContent<T extends SelectOptionOrSectionWithKey<string>>({
296253
customMenu,
297254
filterValue,
@@ -346,9 +303,7 @@ function OverlayContent<T extends SelectOptionOrSectionWithKey<string>>({
346303
/>
347304
{enableAISearch ? (
348305
<Feature features="organizations:gen-ai-explore-traces">
349-
<AskSeerPane>
350-
<AskSeerOption state={state} />
351-
</AskSeerPane>
306+
<AskSeer state={state} />
352307
</Feature>
353308
) : null}
354309
</ListBoxOverlay>

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@ import type {
1515
} from 'sentry/components/core/compactSelect/types';
1616
import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
1717
import {Overlay} from 'sentry/components/overlay';
18-
import {
19-
ASK_SEER_ITEM_KEY,
20-
AskSeerLabel,
21-
AskSeerListItem,
22-
AskSeerPane,
23-
} from 'sentry/components/searchQueryBuilder/askSeer';
18+
import {ASK_SEER_ITEM_KEY, AskSeer} from 'sentry/components/searchQueryBuilder/askSeer';
2419
import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
2520
import type {CustomComboboxMenuProps} from 'sentry/components/searchQueryBuilder/tokens/combobox';
2621
import {KeyDescription} from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/keyDescription';
@@ -31,12 +26,10 @@ import {
3126
} from 'sentry/components/searchQueryBuilder/tokens/filterKeyListBox/utils';
3227
import type {Token, TokenResult} from 'sentry/components/searchSyntax/parser';
3328
import {getKeyLabel, getKeyName} from 'sentry/components/searchSyntax/utils';
34-
import {IconMegaphone, IconSeer} from 'sentry/icons';
29+
import {IconMegaphone} from 'sentry/icons';
3530
import {t} from 'sentry/locale';
3631
import {space} from 'sentry/styles/space';
37-
import {trackAnalytics} from 'sentry/utils/analytics';
3832
import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
39-
import useOrganization from 'sentry/utils/useOrganization';
4033
import usePrevious from 'sentry/utils/usePrevious';
4134

4235
interface FilterKeyListBoxProps<T> extends CustomComboboxMenuProps<T> {
@@ -143,39 +136,6 @@ function RecentSearchFilterOption<T>({
143136
);
144137
}
145138

146-
function AskSeerOption<T>({state}: {state: ComboBoxState<T>}) {
147-
const ref = useRef<HTMLDivElement>(null);
148-
const {setDisplaySeerResults} = useSearchQueryBuilder();
149-
const organization = useOrganization();
150-
151-
const {optionProps, labelProps, isFocused, isPressed} = useOption(
152-
{
153-
key: ASK_SEER_ITEM_KEY,
154-
'aria-label': 'Ask Seer',
155-
shouldFocusOnHover: true,
156-
shouldSelectOnPressUp: true,
157-
},
158-
state,
159-
ref
160-
);
161-
162-
const handleClick = () => {
163-
trackAnalytics('trace.explorer.ai_query_interface', {
164-
organization,
165-
action: 'opened',
166-
});
167-
setDisplaySeerResults(true);
168-
};
169-
170-
return (
171-
<AskSeerListItem ref={ref} onClick={handleClick} {...optionProps}>
172-
<InteractionStateLayer isHovered={isFocused} isPressed={isPressed} />
173-
<IconSeer />
174-
<AskSeerLabel {...labelProps}>{t('Ask Seer')}</AskSeerLabel>
175-
</AskSeerListItem>
176-
);
177-
}
178-
179139
function useHighlightFirstOptionOnSectionChange({
180140
state,
181141
selectedSection,
@@ -267,9 +227,7 @@ function FilterKeyMenuContent<T extends SelectOptionOrSectionWithKey<string>>({
267227
<Fragment>
268228
{enableAISearch ? (
269229
<Feature features="organizations:gen-ai-explore-traces">
270-
<AskSeerPane>
271-
<AskSeerOption state={state} />
272-
</AskSeerPane>
230+
<AskSeer state={state} />
273231
</Feature>
274232
) : null}
275233
{showRecentFilters ? (

0 commit comments

Comments
 (0)