feat(new-trace): Added default bottom position on panel load in trace… (

#66139) Will be working on a resizable bottom panel next, something like the profiling `FrameDrawer` component. --------- Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
getsentry · Mar 4, 2024 · 91a8ae2 · 91a8ae2
1 parent ecbbd20
commit 91a8ae2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/static/app/views/performance/newTraceDetails/newTraceDetailPanel.tsx b/static/app/views/performance/newTraceDetails/newTraceDetailPanel.tsx
@@ -559,6 +559,7 @@ function TraceDetailPanel(props: TraceDetailPanelProps) {
         detailKey={props.node ? 'open' : undefined}
         onClose={props.onClose}
         skipCloseOnOutsideClick
+        startingPositionOnLoad="bottom"
       >
         {props.node &&
           (isTransactionNode(props.node) ? (

diff --git a/static/app/views/starfish/components/detailPanel.tsx b/static/app/views/starfish/components/detailPanel.tsx
@@ -6,8 +6,8 @@ import {IconPanel} from 'sentry/icons';
 import {IconClose} from 'sentry/icons/iconClose';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import localStorage from 'sentry/utils/localStorage';
 import useKeyPress from 'sentry/utils/useKeyPress';
-import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOnClickOutside from 'sentry/utils/useOnClickOutside';
 import SlideOverPanel from 'sentry/views/starfish/components/slideOverPanel';
 
@@ -17,6 +17,7 @@ type DetailProps = {
   onClose?: () => void;
   onOpen?: () => void;
   skipCloseOnOutsideClick?: boolean;
+  startingPositionOnLoad?: 'right' | 'bottom';
 };
 
 type DetailState = {
@@ -25,17 +26,26 @@ type DetailState = {
 
 const SLIDEOUT_STORAGE_KEY = 'starfish-panel-slideout-direction';
 
+function isValidSlidePosition(value: string | null): value is 'right' | 'bottom' {
+  return value === 'right' || value === 'bottom';
+}
+
 export default function Detail({
   children,
   detailKey,
   onClose,
   onOpen,
+  startingPositionOnLoad,
   skipCloseOnOutsideClick = false,
 }: DetailProps) {
+  const localStorageValue = localStorage.getItem(SLIDEOUT_STORAGE_KEY);
+  const storedSlideOutPosition = isValidSlidePosition(localStorageValue)
+    ? localStorageValue
+    : null;
+
   const [state, setState] = useState<DetailState>({collapsed: true});
-  const [slidePosition, setSlidePosition] = useLocalStorageState<'right' | 'bottom'>(
-    SLIDEOUT_STORAGE_KEY,
-    'right'
+  const [slidePosition, setSlidePosition] = useState<'right' | 'bottom'>(
+    startingPositionOnLoad ?? storedSlideOutPosition ?? 'right'
   );
   const escapeKeyPressed = useKeyPress('Escape');
 
@@ -66,6 +76,11 @@ export default function Detail({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [escapeKeyPressed]);
 
+  const handleDocking = (position: 'right' | 'bottom') => {
+    setSlidePosition(position);
+    localStorage.setItem(SLIDEOUT_STORAGE_KEY, position);
+  };
+
   return (
     <SlideOverPanel
       slidePosition={slidePosition}
@@ -81,9 +96,7 @@ export default function Detail({
           aria-label={t('Dock to the bottom')}
           disabled={slidePosition === 'bottom'}
           icon={<IconPanel size="sm" direction="down" />}
-          onClick={() => {
-            setSlidePosition('bottom');
-          }}
+          onClick={() => handleDocking('bottom')}
         />
         <PanelButton
           priority="link"
@@ -92,9 +105,7 @@ export default function Detail({
           aria-label={t('Dock to the right')}
           disabled={slidePosition === 'right'}
           icon={<IconPanel size="sm" direction="right" />}
-          onClick={() => {
-            setSlidePosition('right');
-          }}
+          onClick={() => handleDocking('right')}
         />
         <CloseButton
           priority="link"