Skip to content

Commit

Permalink
feat(explore): Ability to expand/collapse explore toolbar (#84037)
Browse files Browse the repository at this point in the history
The table needs a lot of room sometimes so this allows users to
expand/collapse the sidebar for more space.
Zylphrex authored Jan 28, 2025
1 parent 71bb730 commit 4283c5d
Showing 2 changed files with 75 additions and 22 deletions.
83 changes: 64 additions & 19 deletions static/app/views/explore/spans/spansTab.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import {useMemo} from 'react';
import {useMemo, useState} from 'react';
import styled from '@emotion/styled';
import * as Sentry from '@sentry/react';

import Alert from 'sentry/components/alert';
import {Button} from 'sentry/components/button';
import * as Layout from 'sentry/components/layouts/thirds';
import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
@@ -12,6 +13,7 @@ import {
EAPSpanSearchQueryBuilder,
SpanSearchQueryBuilder,
} from 'sentry/components/performance/spanSearchQueryBuilder';
import {IconChevron} from 'sentry/icons/iconChevron';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {defined} from 'sentry/utils';
@@ -124,6 +126,8 @@ export function SpansTabContentImpl({
: spansTableResult.result.error?.message ?? '';
const chartError = timeseriesResult.error?.message ?? '';

const [expanded, setExpanded] = useState(true);

useAnalytics({
queryType,
aggregatesTableResult,
@@ -133,7 +137,7 @@ export function SpansTabContentImpl({
});

return (
<Body>
<Body withToolbar={expanded}>
<TopSection>
<StyledPageFilterBar condensed>
<ProjectPageFilter />
@@ -182,8 +186,10 @@ export function SpansTabContentImpl({
/>
)}
</TopSection>
<ExploreToolbar extras={toolbarExtras} />
<MainSection fullWidth>
<SideSection>
<ExploreToolbar width={300} extras={toolbarExtras} />
</SideSection>
<MainSection>
{(tableError || chartError) && (
<Alert type="error" showIcon>
{tableError || chartError}
@@ -203,11 +209,28 @@ export function SpansTabContentImpl({
samplesTab={samplesTab}
setSamplesTab={setSamplesTab}
/>
<Toggle withToolbar={expanded}>
<StyledButton
aria-label={expanded ? t('Collapse sidebar') : t('Expande sidebar')}
size="xs"
icon={<IconDoubleChevron direction={expanded ? 'left' : 'right'} />}
onClick={() => setExpanded(!expanded)}
/>
</Toggle>
</MainSection>
</Body>
);
}

function IconDoubleChevron(props: React.ComponentProps<typeof IconChevron>) {
return (
<DoubleChevronWrapper>
<IconChevron style={{marginRight: `-3px`}} {...props} />
<IconChevron style={{marginLeft: `-3px`}} {...props} />
</DoubleChevronWrapper>
);
}

function ExploreTagsProvider({children}: any) {
const dataset = useExploreDataset();

@@ -230,16 +253,15 @@ export function SpansTabContent(props: SpanTabProps) {
);
}

const Body = styled(Layout.Body)`
gap: ${space(2)};
const Body = styled(Layout.Body)<{withToolbar: boolean}>`
@media (min-width: ${p => p.theme.breakpoints.medium}) {
grid-template-columns: 300px minmax(100px, auto);
gap: ${space(2)};
}
@media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
grid-template-columns: 400px minmax(100px, auto);
display: grid;
${p =>
p.withToolbar
? `grid-template-columns: 300px minmax(100px, auto);`
: `grid-template-columns: 0px minmax(100px, auto);`}
gap: ${space(2)} ${p => (p.withToolbar ? `${space(2)}` : '0px')};
transition: 700ms;
}
`;

@@ -249,20 +271,43 @@ const TopSection = styled('div')`
grid-column: 1/3;
margin-bottom: ${space(2)};
@media (min-width: ${p => p.theme.breakpoints.large}) {
@media (min-width: ${p => p.theme.breakpoints.medium}) {
grid-template-columns: minmax(300px, auto) 1fr;
margin-bottom: 0;
}
`;

@media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
grid-template-columns: minmax(400px, auto) 1fr;
}
const SideSection = styled('aside')`
overflow: hidden;
`;

const MainSection = styled(Layout.Main)`
grid-column: 2/3;
const MainSection = styled('section')`
position: relative;
max-width: 100%;
`;

const StyledPageFilterBar = styled(PageFilterBar)`
width: auto;
`;

const Toggle = styled('div')<{withToolbar: boolean}>`
display: none;
position: absolute;
top: 5px;
left: ${p => (p.withToolbar ? '-17px' : '-31px')};
transition: 700ms;
@media (min-width: ${p => p.theme.breakpoints.medium}) {
display: block;
}
`;

const StyledButton = styled(Button)`
width: 28px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
`;

const DoubleChevronWrapper = styled('div')`
display: flex;
`;
14 changes: 11 additions & 3 deletions static/app/views/explore/toolbar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import styled from '@emotion/styled';

import {defined} from 'sentry/utils';
import {
useExploreDataset,
useExploreFields,
@@ -22,9 +25,10 @@ type Extras = 'dataset toggle';

interface ExploreToolbarProps {
extras?: Extras[];
width?: number;
}

export function ExploreToolbar({extras}: ExploreToolbarProps) {
export function ExploreToolbar({extras, width}: ExploreToolbarProps) {
const dataset = useExploreDataset();
const setDataset = useSetExploreDataset();
const mode = useExploreMode();
@@ -36,7 +40,7 @@ export function ExploreToolbar({extras}: ExploreToolbarProps) {
const setSortBys = useSetExploreSortBys();

return (
<div>
<Container width={width}>
{extras?.includes('dataset toggle') && (
<ToolbarDataset dataset={dataset} setDataset={setDataset} />
)}
@@ -52,6 +56,10 @@ export function ExploreToolbar({extras}: ExploreToolbarProps) {
/>
<ToolbarSaveAs />
<ToolbarSuggestedQueries />
</div>
</Container>
);
}

const Container = styled('div')<{width?: number}>`
${p => defined(p.width) && `min-width: ${p.width}px;`}
`;

0 comments on commit 4283c5d

Please sign in to comment.