fix: sign out dialog disappearing when account menu is unfocused (#863)

app/assets/javascripts/components/AccountMenu/index.tsx

@@ -7,7 +7,6 @@ import { GeneralAccountMenu } from './GeneralAccountMenu';
 import { FunctionComponent } from 'preact';
 import { SignInPane } from './SignIn';
 import { CreateAccount } from './CreateAccount';
-import { ConfirmSignoutContainer } from '../ConfirmSignoutModal';
 import { ConfirmPassword } from './ConfirmPassword';
 import { JSXInternal } from 'preact/src/jsx';
 
@@ -130,10 +129,6 @@ export const AccountMenu: FunctionComponent<Props> = observer(
             closeMenu={closeAccountMenu}
           />
         </div>
-        <ConfirmSignoutContainer
-          appState={appState}
-          application={application}
-        />
       </div>
     );
   }

app/assets/javascripts/components/ApplicationView.tsx

@@ -24,6 +24,7 @@ import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
 import { PremiumModalProvider } from './Premium';
+import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
 
 type Props = {
   application: WebApplication;
@@ -265,6 +266,11 @@ export class ApplicationView extends PureComponent<Props, State> {
                 application={this.application}
                 appState={this.appState}
               />
+
+              <ConfirmSignoutContainer
+                appState={this.appState}
+                application={this.application}
+              />
             </>
           )}
         </div>

app/assets/javascripts/preferences/panes/account/SignOutView.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@/components/Button';
-import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
 import { OtherSessionsSignOutContainer } from '@/components/OtherSessionsSignOut';
 import {
   PreferencesGroup,
@@ -58,35 +57,28 @@ const SignOutView: FunctionComponent<{
         appState={appState}
         application={application}
       />
-
-      <ConfirmSignoutContainer appState={appState} application={application} />
     </>
   );
 });
 
 const ClearSessionDataView: FunctionComponent<{
-  application: WebApplication;
   appState: AppState;
-}> = observer(({ application, appState }) => {
+}> = observer(({ appState }) => {
   return (
-    <>
+    <PreferencesGroup>
-      <PreferencesGroup>
+      <PreferencesSegment>
-        <PreferencesSegment>
+        <Title>Clear session data</Title>
-          <Title>Clear session data</Title>
+        <Text>This will delete all local items and preferences.</Text>
-          <Text>This will delete all local items and preferences.</Text>
+        <div className="min-h-3" />
-          <div className="min-h-3" />
+        <Button
-          <Button
+          type="danger"
-            type="danger"
+          label="Clear Session Data"
-            label="Clear Session Data"
+          onClick={() => {
-            onClick={() => {
+            appState.accountMenu.setSigningOut(true);
-              appState.accountMenu.setSigningOut(true);
+          }}
-            }}
+        />
-          />
+      </PreferencesSegment>
-        </PreferencesSegment>
+    </PreferencesGroup>
-      </PreferencesGroup>
-
-      <ConfirmSignoutContainer appState={appState} application={application} />
-    </>
   );
 });
 
@@ -94,9 +86,8 @@ export const SignOutWrapper: FunctionComponent<{
   application: WebApplication;
   appState: AppState;
 }> = observer(({ application, appState }) => {
-  if (!application.hasAccount())
+  if (!application.hasAccount()) {
-    return (
+    return <ClearSessionDataView appState={appState} />;
-      <ClearSessionDataView appState={appState} application={application} />
+  }
-    );
   return <SignOutView appState={appState} application={application} />;
 });