Skip to content

Commit 8f626e0

Browse files
nikkikapadianikkikapadia
authored
feat(errors): main body content sections (#112139)
Just adding in the content sections, no real functionality yet just getting the layout set up. Also added in an empty schema hints so i remember to fill it in along with the search bar when possible💀 <img height="400" alt="image" src="https://github.com/user-attachments/assets/0e8c1097-9f97-4399-9182-ecc456192b98" />
1 parent cf81d6d commit 8f626e0

File tree

10 files changed

+217
-43
lines changed

10 files changed

+217
-43
lines changed

‎static/app/views/explore/components/schemaHints/schemaHintsList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,8 @@ const FILTER_KEY_SECTIONS: Record<SchemaHintsSources, FilterKeySection[]> = {
118118
[SchemaHintsSources.EXPLORE]: SPANS_FILTER_KEY_SECTIONS,
119119
[SchemaHintsSources.LOGS]: LOGS_FILTER_KEY_SECTIONS,
120120
[SchemaHintsSources.CONVERSATIONS]: SPANS_FILTER_KEY_SECTIONS,
121+
// TODO: add error filter key sections when they are implemented
122+
[SchemaHintsSources.ERRORS]: [],
121123
};
122124

123125
function getFilterKeySections(source: SchemaHintsSources) {

‎static/app/views/explore/components/schemaHints/schemaHintsUtils.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,11 @@ const SCHEMA_HINTS_HIDDEN_KEYS: string[] = [
6363
];
6464

6565
export enum SchemaHintsSources {
66+
// TODO: change Explore to Spans because Explore is too broad and confusing here
6667
EXPLORE = 'explore',
6768
LOGS = 'logs',
6869
CONVERSATIONS = 'conversations',
70+
ERRORS = 'errors',
6971
}
7072

7173
export const getSchemaHintsListOrder = (source: SchemaHintsSources) => {
@@ -76,6 +78,11 @@ export const getSchemaHintsListOrder = (source: SchemaHintsSources) => {
7678
return SCHEMA_HINTS_LIST_ORDER_KEYS_CONVERSATIONS;
7779
}
7880

81+
if (source === SchemaHintsSources.ERRORS) {
82+
// TODO: check to see which keys we want to display for errors
83+
return [];
84+
}
85+
7986
return SCHEMA_HINTS_LIST_ORDER_KEYS_EXPLORE;
8087
};
8188

‎static/app/views/explore/errors/body.spec.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
2+
3+
import {ErrorsContentSection, ErrorsControlSection} from './body';
4+
5+
describe('ErrorsControlSection', () => {
6+
beforeEach(() => {
7+
localStorage.clear();
8+
});
9+
10+
it('renders as an aside element', () => {
11+
render(<ErrorsControlSection controlSectionExpanded />);
12+
expect(screen.getByRole('complementary')).toBeInTheDocument();
13+
});
14+
});
15+
16+
describe('ErrorsContentSection', () => {
17+
it('renders collapse sidebar button when expanded', () => {
18+
const setControlSectionExpanded = jest.fn();
19+
render(
20+
<ErrorsContentSection
21+
controlSectionExpanded
22+
setControlSectionExpanded={setControlSectionExpanded}
23+
/>
24+
);
25+
26+
const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
27+
expect(collapseButton).toBeInTheDocument();
28+
expect(collapseButton).not.toHaveTextContent('Advanced');
29+
});
30+
31+
it('renders expand sidebar button when collapsed', () => {
32+
const setControlSectionExpanded = jest.fn();
33+
render(
34+
<ErrorsContentSection
35+
controlSectionExpanded={false}
36+
setControlSectionExpanded={setControlSectionExpanded}
37+
/>
38+
);
39+
40+
const expandButton = screen.getByRole('button', {name: 'Expand sidebar'});
41+
expect(expandButton).toBeInTheDocument();
42+
expect(expandButton).toHaveTextContent('Advanced');
43+
});
44+
45+
it('calls setControlSectionExpanded when clicking collapse button', async () => {
46+
const setControlSectionExpanded = jest.fn();
47+
render(
48+
<ErrorsContentSection
49+
controlSectionExpanded
50+
setControlSectionExpanded={setControlSectionExpanded}
51+
/>
52+
);
53+
54+
await userEvent.click(screen.getByRole('button', {name: 'Collapse sidebar'}));
55+
expect(setControlSectionExpanded).toHaveBeenCalledWith(false);
56+
});
57+
});

‎static/app/views/explore/errors/body.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {IconChevron} from 'sentry/icons/iconChevron';
2+
import {t} from 'sentry/locale';
3+
import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
4+
import {
5+
ExploreContentSection,
6+
ExploreControlSection,
7+
} from 'sentry/views/explore/components/styles';
8+
import {ChevronButton} from 'sentry/views/explore/spans/spansTab';
9+
10+
interface ErrorsControlSectionProps {
11+
controlSectionExpanded: boolean;
12+
}
13+
14+
export function ErrorsControlSection({
15+
controlSectionExpanded,
16+
}: ErrorsControlSectionProps) {
17+
return <ExploreControlSection expanded={controlSectionExpanded} />;
18+
}
19+
20+
interface ErrorsContentSectionProps {
21+
controlSectionExpanded: boolean;
22+
setControlSectionExpanded: (expanded: boolean) => void;
23+
}
24+
25+
export function ErrorsContentSection({
26+
controlSectionExpanded,
27+
setControlSectionExpanded,
28+
}: ErrorsContentSectionProps) {
29+
return (
30+
<ExploreContentSection>
31+
<OverChartButtonGroup>
32+
<ChevronButton
33+
aria-label={
34+
controlSectionExpanded ? t('Collapse sidebar') : t('Expand sidebar')
35+
}
36+
expanded={controlSectionExpanded}
37+
size="xs"
38+
icon={
39+
<IconChevron
40+
isDouble
41+
direction={controlSectionExpanded ? 'left' : 'right'}
42+
size="xs"
43+
/>
44+
}
45+
onClick={() => setControlSectionExpanded(!controlSectionExpanded)}
46+
>
47+
{controlSectionExpanded ? null : t('Advanced')}
48+
</ChevronButton>
49+
</OverChartButtonGroup>
50+
</ExploreContentSection>
51+
);
52+
}

‎static/app/views/explore/errors/content.spec.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {OrganizationFixture} from 'sentry-fixture/organization';
22
import {ProjectFixture} from 'sentry-fixture/project';
33

4-
import {render, screen} from 'sentry-test/reactTestingLibrary';
4+
import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
55

66
import {PageFiltersStore} from 'sentry/components/pageFilters/store';
77

8-
import ErrorsContent from './content';
8+
import ErrorsContent, {ErrorsBody} from './content';
99

1010
describe('ErrorsContent', () => {
1111
beforeEach(() => {
@@ -59,3 +59,27 @@ describe('ErrorsContent', () => {
5959
).toBeInTheDocument();
6060
});
6161
});
62+
63+
describe('ErrorsBody', () => {
64+
beforeEach(() => {
65+
localStorage.clear();
66+
});
67+
68+
it('renders with sidebar expanded by default', () => {
69+
render(<ErrorsBody />);
70+
const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
71+
expect(collapseButton).toBeInTheDocument();
72+
expect(collapseButton).not.toHaveTextContent('Advanced');
73+
});
74+
75+
it('collapses sidebar when chevron button is clicked', async () => {
76+
render(<ErrorsBody />);
77+
78+
const collapseButton = screen.getByRole('button', {name: 'Collapse sidebar'});
79+
await userEvent.click(collapseButton);
80+
81+
const expandButton = screen.getByRole('button', {name: 'Expand sidebar'});
82+
expect(expandButton).toBeInTheDocument();
83+
expect(expandButton).toHaveTextContent('Advanced');
84+
});
85+
});

‎static/app/views/explore/errors/content.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,16 @@ import {PageFiltersContainer} from 'sentry/components/pageFilters/container';
66
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
77
import {t} from 'sentry/locale';
88
import {useOrganization} from 'sentry/utils/useOrganization';
9-
import {ExploreBodySearch} from 'sentry/views/explore/components/styles';
9+
import {
10+
ExploreBodyContent,
11+
ExploreBodySearch,
12+
} from 'sentry/views/explore/components/styles';
13+
import {
14+
ErrorsContentSection,
15+
ErrorsControlSection,
16+
} from 'sentry/views/explore/errors/body';
1017
import {ErrorsFilterSection} from 'sentry/views/explore/errors/filterContent';
18+
import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
1119

1220
export default function ErrorsContent() {
1321
const organization = useOrganization();
@@ -22,6 +30,7 @@ export default function ErrorsContent() {
2230
<ErrorsFilterSection />
2331
</ExploreBodySearch>
2432
</PageFiltersContainer>
33+
<ErrorsBody />
2534
</Layout.Page>
2635
</SentryDocumentTitle>
2736
);
@@ -41,3 +50,21 @@ function ErrorsHeader() {
4150
</Layout.Header>
4251
);
4352
}
53+
54+
const ERRORS_TOOLBAR_STORAGE_KEY = 'explore-errors-toolbar';
55+
56+
export function ErrorsBody() {
57+
const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
58+
ERRORS_TOOLBAR_STORAGE_KEY
59+
);
60+
61+
return (
62+
<ExploreBodyContent>
63+
<ErrorsControlSection controlSectionExpanded={controlSectionExpanded} />
64+
<ErrorsContentSection
65+
controlSectionExpanded={controlSectionExpanded}
66+
setControlSectionExpanded={setControlSectionExpanded}
67+
/>
68+
</ExploreBodyContent>
69+
);
70+
}

‎static/app/views/explore/errors/filterContent.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import {EnvironmentPageFilter} from 'sentry/components/pageFilters/environment/e
66
import {ProjectPageFilter} from 'sentry/components/pageFilters/project/projectPageFilter';
77
import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
88
import {t} from 'sentry/locale';
9+
import {SchemaHintsList} from 'sentry/views/explore/components/schemaHints/schemaHintsList';
10+
import {SchemaHintsSources} from 'sentry/views/explore/components/schemaHints/schemaHintsUtils';
11+
import {ExploreSchemaHintsSection} from 'sentry/views/explore/components/styles';
912
import {TraceItemSearchQueryBuilder} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
1013
import {StyledPageFilterBar} from 'sentry/views/explore/spans/spansTabSearchSection';
1114
import {TraceItemDataset} from 'sentry/views/explore/types';
@@ -40,6 +43,17 @@ export function ErrorsFilterSection() {
4043
stringSecondaryAliases={{}}
4144
/>
4245
</Grid>
46+
<ExploreSchemaHintsSection>
47+
<SchemaHintsList
48+
supportedAggregates={[]}
49+
booleanTags={{}}
50+
numberTags={{}}
51+
stringTags={{}}
52+
isLoading={false}
53+
exploreQuery=""
54+
source={SchemaHintsSources.ERRORS}
55+
/>
56+
</ExploreSchemaHintsSection>
4357
</SearchQueryBuilderProvider>
4458
</Layout.Main>
4559
);

‎static/app/views/explore/hooks/useControlSectionExpanded.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {useCallback} from 'react';
2+
3+
import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
4+
5+
export function useControlSectionExpanded(localStorageKey: string) {
6+
const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
7+
localStorageKey,
8+
'expanded'
9+
);
10+
11+
const setControlSectionExpanded = useCallback(
12+
(expanded: boolean) => {
13+
_setControlSectionExpanded(expanded ? 'expanded' : '');
14+
},
15+
[_setControlSectionExpanded]
16+
);
17+
18+
return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
19+
}

‎static/app/views/explore/metrics/metricsTab.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {useCallback} from 'react';
21
import {css} from '@emotion/react';
32
import styled from '@emotion/styled';
43

@@ -13,7 +12,6 @@ import {ProjectPageFilter} from 'sentry/components/pageFilters/project/projectPa
1312
import {IconChevron} from 'sentry/icons/iconChevron';
1413
import {t} from 'sentry/locale';
1514
import {useChartInterval} from 'sentry/utils/useChartInterval';
16-
import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
1715
import {useOrganization} from 'sentry/utils/useOrganization';
1816
import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
1917
import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
@@ -25,6 +23,7 @@ import {
2523
} from 'sentry/views/explore/components/styles';
2624
import {ToolbarVisualizeAddChart} from 'sentry/views/explore/components/toolbar/toolbarVisualize';
2725
import {useMetricsAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
26+
import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
2827
import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
2928
import {MetricPanel} from 'sentry/views/explore/metrics/metricPanel';
3029
import {canUseMetricsUIRefresh} from 'sentry/views/explore/metrics/metricsFlags';
@@ -50,25 +49,10 @@ type MetricsTabProps = {
5049

5150
const METRICS_TOOLBAR_STORAGE_KEY = 'explore-metrics-toolbar';
5251

53-
function useMetricsControlSectionExpanded() {
54-
const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
55-
METRICS_TOOLBAR_STORAGE_KEY,
56-
'expanded'
57-
);
58-
59-
const setControlSectionExpanded = useCallback(
60-
(expanded: boolean) => {
61-
_setControlSectionExpanded(expanded ? 'expanded' : '');
62-
},
63-
[_setControlSectionExpanded]
64-
);
65-
66-
return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
67-
}
68-
6952
function MetricsTabContentRefreshLayout({datePageFilterProps}: MetricsTabProps) {
70-
const [controlSectionExpanded, setControlSectionExpanded] =
71-
useMetricsControlSectionExpanded();
53+
const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
54+
METRICS_TOOLBAR_STORAGE_KEY
55+
);
7256

7357
return (
7458
<MultiMetricsQueryParamsProvider>

‎static/app/views/explore/spans/spansTab.tsx‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Fragment, useCallback, useEffect, useMemo} from 'react';
1+
import {Fragment, useEffect, useMemo} from 'react';
22
import {css} from '@emotion/react';
33
import styled from '@emotion/styled';
44

@@ -22,7 +22,6 @@ import type {Project} from 'sentry/types/project';
2222
import {defined} from 'sentry/utils';
2323
import {DiscoverDatasets} from 'sentry/utils/discover/types';
2424
import {useChartInterval} from 'sentry/utils/useChartInterval';
25-
import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
2625
import {useOrganization} from 'sentry/utils/useOrganization';
2726
import {ChartSelectionProvider} from 'sentry/views/explore/components/attributeBreakdowns/chartSelectionContext';
2827
import {OverChartButtonGroup} from 'sentry/views/explore/components/overChartButtonGroup';
@@ -34,6 +33,7 @@ import {
3433
} from 'sentry/views/explore/components/styles';
3534
import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
3635
import {useAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
36+
import {useControlSectionExpanded} from 'sentry/views/explore/hooks/useControlSectionExpanded';
3737
import {useCrossEventQueries} from 'sentry/views/explore/hooks/useCrossEventQueries';
3838
import {useExploreAggregatesTable} from 'sentry/views/explore/hooks/useExploreAggregatesTable';
3939
import {useExploreSpansTable} from 'sentry/views/explore/hooks/useExploreSpansTable';
@@ -90,30 +90,18 @@ export function SpansTabOnboarding({
9090
);
9191
}
9292

93-
function useControlSectionExpanded() {
94-
const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
95-
'explore-spans-toolbar',
96-
'expanded'
97-
);
98-
99-
const setControlSectionExpanded = useCallback(
100-
(expanded: boolean) => {
101-
_setControlSectionExpanded(expanded ? 'expanded' : '');
102-
},
103-
[_setControlSectionExpanded]
104-
);
105-
106-
return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
107-
}
108-
10993
interface SpanTabProps {
11094
datePageFilterProps: DatePageFilterProps;
11195
}
11296

97+
const SPANS_TOOLBAR_STORAGE_KEY = 'explore-spans-toolbar';
98+
11399
export function SpansTabContent({datePageFilterProps}: SpanTabProps) {
114100
useVisitExplore();
115101

116-
const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded();
102+
const [controlSectionExpanded, setControlSectionExpanded] = useControlSectionExpanded(
103+
SPANS_TOOLBAR_STORAGE_KEY
104+
);
117105

118106
return (
119107
<Fragment>
@@ -365,7 +353,7 @@ const OnboardingContentSection = styled('section')`
365353
grid-column: 1/3;
366354
`;
367355

368-
const ChevronButton = styled(Button)<{expanded: boolean}>`
356+
export const ChevronButton = styled(Button)<{expanded: boolean}>`
369357
display: none;
370358
371359
@media (min-width: ${p => p.theme.breakpoints.md}) {

0 commit comments

Comments
 (0)