fix(toolbar): hide feedback panel when submit feedback form opens

static/app/components/devtoolbar/components/app.tsx

@@ -5,6 +5,7 @@ import LoadingTriangle from 'sentry/components/loadingTriangle';
 import {useSessionStorage} from 'sentry/utils/useSessionStorage';
 
 import usePlacementCss from '../hooks/usePlacementCss';
+import useVisibility from '../hooks/useVisibility';
 import {fixedContainerBaseCss} from '../styles/fixedContainer';
 import {avatarCss, globalCss, loadingIndicatorCss} from '../styles/global';
 import {resetFlexColumnCss} from '../styles/reset';
@@ -15,8 +16,12 @@ import PanelRouter from './panelRouter';
 
 export default function App() {
   const placement = usePlacementCss();
-  const [isHidden, setIsHidden] = useSessionStorage('hide_employee_devtoolbar', false);
-  if (isHidden) {
+  const [visibility] = useVisibility();
+  const [isDisabled, setIsDisabled] = useSessionStorage(
+    'hide_employee_devtoolbar',
+    false
+  );
+  if (isDisabled) {
     return null;
   }
 
@@ -25,10 +30,10 @@ export default function App() {
       <Global styles={globalCss} />
       <Global styles={loadingIndicatorCss} />
       <Global styles={avatarCss} />
-      <div css={[fixedContainerBaseCss, placement.fixedContainer.css]}>
-        {isHidden ? null : (
+      <div css={[fixedContainerBaseCss, placement.fixedContainer.css, {visibility}]}>
+        {isDisabled ? null : (
           <Fragment>
-            <Navigation setIsHidden={setIsHidden} />
+            <Navigation setIsDisabled={setIsDisabled} />
             <Suspense fallback={<LoadingPanel />}>
               <PanelRouter />
             </Suspense>

static/app/components/devtoolbar/components/feedback/feedbackPanel.tsx

@@ -12,6 +12,7 @@ import useReplayCount from 'sentry/utils/replayCount/useReplayCount';
 import useConfiguration from '../../hooks/useConfiguration';
 import useCurrentTransactionName from '../../hooks/useCurrentTransactionName';
 import {useSDKFeedbackButton} from '../../hooks/useSDKFeedbackButton';
+import useVisibility from '../../hooks/useVisibility';
 import {
   badgeWithLabelCss,
   gridFlexEndCss,
@@ -34,7 +35,17 @@ import SentryAppLink from '../sentryAppLink';
 import useInfiniteFeedbackList from './useInfiniteFeedbackList';
 
 export default function FeedbackPanel() {
-  const buttonRef = useSDKFeedbackButton();
+  const [, setVisible] = useVisibility();
+
+  const buttonRef = useSDKFeedbackButton(
+    useMemo(
+      () => ({
+        onFormOpen: () => setVisible('hidden'),
+        onFormClose: () => setVisible('visible'),
+      }),
+      [setVisible]
+    )
+  );
   const transactionName = useCurrentTransactionName();
   const queryResult = useInfiniteFeedbackList({
     query: `url:*${transactionName}`,

static/app/components/devtoolbar/components/navigation.tsx

@@ -9,7 +9,11 @@ import useToolbarRoute from '../hooks/useToolbarRoute';
 import {navigationButtonCss, navigationCss} from '../styles/navigation';
 import {resetButtonCss, resetDialogCss} from '../styles/reset';
 
-export default function Navigation({setIsHidden}: {setIsHidden: (val: boolean) => void}) {
+export default function Navigation({
+  setIsDisabled,
+}: {
+  setIsDisabled: (val: boolean) => void;
+}) {
   const {trackAnalytics} = useConfiguration();
   const placement = usePlacementCss();
 
@@ -26,7 +30,7 @@ export default function Navigation({setIsHidden}: {setIsHidden: (val: boolean) =
       <NavButton panelName="feedback" label={'User Feedback'} icon={<IconMegaphone />} />
       <HideButton
         onClick={() => {
-          setIsHidden(true);
+          setIsDisabled(true);
           trackAnalytics?.({
             eventKey: `devtoolbar.nav.hide.click`,
             eventName: `devtoolbar: Hide devtoolbar`,

static/app/components/devtoolbar/components/providers.tsx

@@ -7,6 +7,7 @@ import {lightTheme} from 'sentry/utils/theme';
 
 import {ConfigurationContextProvider} from '../hooks/useConfiguration';
 import {ToolbarRouterContextProvider} from '../hooks/useToolbarRoute';
+import {VisibilityContextProvider} from '../hooks/useVisibility';
 import type {Configuration} from '../types';
 
 interface Props {
@@ -35,7 +36,9 @@ export default function Providers({children, config, container}: Props) {
       <ThemeProvider theme={lightTheme}>
         <ConfigurationContextProvider config={config}>
           <QueryClientProvider client={queryClient}>
-            <ToolbarRouterContextProvider>{children}</ToolbarRouterContextProvider>
+            <VisibilityContextProvider>
+              <ToolbarRouterContextProvider>{children}</ToolbarRouterContextProvider>
+            </VisibilityContextProvider>
           </QueryClientProvider>
         </ConfigurationContextProvider>
       </ThemeProvider>

static/app/components/devtoolbar/hooks/useSDKFeedbackButton.tsx

@@ -2,17 +2,23 @@ import {useEffect, useRef} from 'react';
 
 import useConfiguration from './useConfiguration';
 
-export function useSDKFeedbackButton() {
+export function useSDKFeedbackButton({
+  onFormClose,
+  onFormOpen,
+}: {
+  onFormClose?: () => void;
+  onFormOpen?: () => void;
+}) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const {SentrySDK} = useConfiguration();
   const feedback = SentrySDK && 'getFeedback' in SentrySDK && SentrySDK.getFeedback();
 
   useEffect(() => {
     if (feedback && buttonRef.current) {
-      return feedback.attachTo(buttonRef.current, {});
+      return feedback.attachTo(buttonRef.current, {onFormOpen, onFormClose});
     }
     return () => {};
-  }, [feedback]);
+  }, [feedback, onFormOpen, onFormClose]);
 
   return feedback ? buttonRef : undefined;
 }

static/app/components/devtoolbar/hooks/useVisibility.tsx

@@ -0,0 +1,20 @@
+import type {CSSProperties, Dispatch, ReactNode, SetStateAction} from 'react';
+import {createContext, useContext, useState} from 'react';
+
+type State = CSSProperties['visibility'];
+
+const VisibilityContext = createContext<[State, Dispatch<SetStateAction<State>>]>([
+  'visible',
+  () => {},
+]);
+
+export function VisibilityContextProvider({children}: {children: ReactNode}) {
+  const state = useState<State>('visible');
+  return (
+    <VisibilityContext.Provider value={state}>{children}</VisibilityContext.Provider>
+  );
+}
+
+export default function useVisibility() {
+  return useContext(VisibilityContext);
+}