diff --git a/static/app/views/explore/logs/logsTab.tsx b/static/app/views/explore/logs/logsTab.tsx index 20af4e3c9c0d48..9381f6d15efe73 100644 --- a/static/app/views/explore/logs/logsTab.tsx +++ b/static/app/views/explore/logs/logsTab.tsx @@ -19,6 +19,7 @@ import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours'; import {AggregationKey} from 'sentry/utils/fields'; import {HOUR} from 'sentry/utils/formatters'; import {useQueryClient, type InfiniteData} from 'sentry/utils/queryClient'; +import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import useOrganization from 'sentry/utils/useOrganization'; import usePageFilters from 'sentry/utils/usePageFilters'; import SchemaHintsList, { @@ -131,7 +132,7 @@ export function LogsTabContent({ return sortBys.map(formatSort); }, [sortBys]); - const [sidebarOpen, setSidebarOpen] = useState( + const [sidebarOpen, setSidebarOpen] = useSidebarOpen( !!( groupBys.some(Boolean) || visualizes.some( @@ -255,7 +256,7 @@ export function LogsTabContent({ setMode(Mode.SAMPLES); } }, - [setMode] + [setSidebarOpen, setMode] ); const saveAsItems = useSaveAsItems({ @@ -359,7 +360,7 @@ export function LogsTabContent({ size="xs" /> } - onClick={() => setSidebarOpen(x => !x)} + onClick={() => setSidebarOpen(!sidebarOpen)} /> @@ -423,3 +424,18 @@ export function LogsTabContent({ ); } + +function useSidebarOpen(defaultExpanded: boolean) { + const [sidebarOpen, _setSidebarOpen] = useLocalStorageState( + 'explore-logs-toolbar', + defaultExpanded ? 'expanded' : '' + ); + + const setSidebarOpen = useCallback( + (expanded: boolean) => { + _setSidebarOpen(expanded ? 'expanded' : ''); + }, + [_setSidebarOpen] + ); + return [sidebarOpen === 'expanded', setSidebarOpen] as const; +} diff --git a/static/app/views/explore/spans/spansTab.tsx b/static/app/views/explore/spans/spansTab.tsx index 5b64683befd0c8..0fc5376edf46b1 100644 --- a/static/app/views/explore/spans/spansTab.tsx +++ b/static/app/views/explore/spans/spansTab.tsx @@ -31,12 +31,10 @@ import { ALLOWED_EXPLORE_VISUALIZE_AGGREGATES, type AggregationKey, } from 'sentry/utils/fields'; -import {decodeScalar} from 'sentry/utils/queryString'; import {chonkStyled} from 'sentry/utils/theme/theme.chonk'; import {withChonk} from 'sentry/utils/theme/withChonk'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; -import {useLocation} from 'sentry/utils/useLocation'; -import {useNavigate} from 'sentry/utils/useNavigate'; +import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import useOrganization from 'sentry/utils/useOrganization'; import usePageFilters from 'sentry/utils/usePageFilters'; import usePrevious from 'sentry/utils/usePrevious'; @@ -104,24 +102,19 @@ export function SpansTabOnboarding({ } function useControlSectionExpanded() { - const location = useLocation(); - const navigate = useNavigate(); - const controlSectionExpanded = decodeScalar(location.query.toolbar); + const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState( + 'explore-spans-toolbar', + 'expanded' + ); + const setControlSectionExpanded = useCallback( (expanded: boolean) => { - const newControlSectionExpanded = expanded ? undefined : 'collapsed'; - navigate({ - ...location, - query: { - ...location.query, - toolbar: newControlSectionExpanded, - }, - }); + _setControlSectionExpanded(expanded ? 'expanded' : ''); }, - [location, navigate] + [_setControlSectionExpanded] ); - return [controlSectionExpanded !== 'collapsed', setControlSectionExpanded] as const; + return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const; } interface SpanTabProps {