Pull up dialogs to prevent odd behaviours (#551)

src/components/ActionBar/ActionBarItemsRight.tsx

@@ -0,0 +1,119 @@
+import { HStack, MenuDivider, useDisclosure } from "@chakra-ui/react";
+import { ReactNode, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { useLocation } from "react-router";
+import { useStore } from "../../store";
+import AboutDialog from "../AboutDialog";
+import ConnectFirstDialog from "../ConnectFirstDialog";
+import FeedbackForm from "../FeedbackForm";
+import HelpMenu from "../HelpMenu";
+import HelpMenuItems, { tourMap } from "../HelpMenuItems";
+import { LanguageDialog } from "../LanguageDialog";
+import LanguageMenuItem from "../LanguageMenuItem";
+import { SettingsDialog } from "../SettingsDialog";
+import SettingsMenu from "../SettingsMenu";
+import SettingsMenuItem from "../SettingsMenuItem";
+import ToolbarMenu from "../ToolbarMenu";
+
+interface ItemsRightProps {
+  menuItems?: ReactNode;
+  toolbarItems?: ReactNode;
+}
+
+const ItemsRight = ({ menuItems, toolbarItems }: ItemsRightProps) => {
+  const intl = useIntl();
+  const languageDisclosure = useDisclosure();
+  const settingsDisclosure = useDisclosure();
+  const aboutDialogDisclosure = useDisclosure();
+  const feedbackDisclosure = useDisclosure();
+  const connectFirstDisclosure = useDisclosure();
+  const setPostConnectTourTrigger = useStore(
+    (s) => s.setPostConnectTourTrigger
+  );
+  const tourTriggerName = tourMap[useLocation().pathname];
+  const tourTrigger = useMemo(() => {
+    switch (tourTriggerName) {
+      case "TrainModel": {
+        return {
+          name: tourTriggerName,
+          delayedUntilConnection: true,
+        };
+      }
+      case "Connect": {
+        return { name: tourTriggerName };
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }, [tourTriggerName]);
+  return (
+    <>
+      <LanguageDialog
+        isOpen={languageDisclosure.isOpen}
+        onClose={languageDisclosure.onClose}
+      />
+      <SettingsDialog
+        isOpen={settingsDisclosure.isOpen}
+        onClose={settingsDisclosure.onClose}
+      />
+      <ConnectFirstDialog
+        isOpen={connectFirstDisclosure.isOpen}
+        onClose={connectFirstDisclosure.onClose}
+        onChooseConnect={() => setPostConnectTourTrigger(tourTrigger)}
+        explanationTextId="connect-to-tour-body"
+        options={{ postConnectTourTrigger: tourTrigger }}
+      />
+      <AboutDialog
+        isOpen={aboutDialogDisclosure.isOpen}
+        onClose={aboutDialogDisclosure.onClose}
+      />
+      <FeedbackForm
+        isOpen={feedbackDisclosure.isOpen}
+        onClose={feedbackDisclosure.onClose}
+      />
+      <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
+        {toolbarItems}
+        <SettingsMenu
+          onLanguageDialogOpen={languageDisclosure.onOpen}
+          onSettingsDialogOpen={settingsDisclosure.onOpen}
+        />
+      </HStack>
+      <HelpMenu
+        display={{ base: "none", md: "block", lg: "block" }}
+        onAboutDialogOpen={aboutDialogDisclosure.onOpen}
+        onConnectFirstDialogOpen={connectFirstDisclosure.onOpen}
+        onFeedbackOpen={feedbackDisclosure.onOpen}
+        tourTrigger={tourTrigger}
+      />
+      <ToolbarMenu
+        display={{ base: "none", md: "block", lg: "none" }}
+        variant="plain"
+        label={intl.formatMessage({ id: "main-menu" })}
+      >
+        {menuItems}
+        <LanguageMenuItem onOpen={languageDisclosure.onOpen} />
+        <SettingsMenuItem onOpen={settingsDisclosure.onOpen} />
+      </ToolbarMenu>
+      {/* Toolbar items when sm window size. */}
+      <ToolbarMenu
+        display={{ base: "block", md: "none" }}
+        variant="plain"
+        label={intl.formatMessage({ id: "main-menu" })}
+      >
+        {menuItems}
+        <LanguageMenuItem onOpen={languageDisclosure.onOpen} />
+        <SettingsMenuItem onOpen={settingsDisclosure.onOpen} />
+        <MenuDivider />
+        <HelpMenuItems
+          onAboutDialogOpen={aboutDialogDisclosure.onOpen}
+          onConnectFirstDialogOpen={connectFirstDisclosure.onOpen}
+          onFeedbackOpen={feedbackDisclosure.onOpen}
+          tourTrigger={tourTrigger}
+        />
+      </ToolbarMenu>
+    </>
+  );
+};
+
+export default ItemsRight;

src/components/DefaultPageLayout.tsx

@@ -2,7 +2,6 @@ import {
   Button,
   Flex,
   Heading,
-  HStack,
   Icon,
   IconButton,
   MenuDivider,
@@ -28,21 +27,16 @@ import {
 import Tour from "../pages/Tour";
 import { useStore } from "../store";
 import { createHomePageUrl } from "../urls";
-import ActionBar from "./ActionBar";
+import ActionBar from "./ActionBar/ActionBar";
 import AppLogo from "./AppLogo";
 import ConnectionDialogs from "./ConnectionFlowDialogs";
-import HelpMenu from "./HelpMenu";
-import LanguageMenuItem from "./LanguageMenuItem";
+import ImportErrorDialog from "./ImportErrorDialog";
+import MakeCodeLoadErrorDialog from "./MakeCodeLoadErrorDialog";
+import NotCreateAiHexImportDialog from "./NotCreateAiHexImportDialog";
 import PreReleaseNotice from "./PreReleaseNotice";
 import ProjectDropTarget from "./ProjectDropTarget";
 import SaveDialogs from "./SaveDialogs";
-import SettingsMenu from "./SettingsMenu";
-import ToolbarMenu from "./ToolbarMenu";
-import HelpMenuItems from "./HelpMenuItems";
-import ImportErrorDialog from "./ImportErrorDialog";
-import NotCreateAiHexImportDialog from "./NotCreateAiHexImportDialog";
-import MakeCodeLoadErrorDialog from "./MakeCodeLoadErrorDialog";
-import SettingsMenuItem from "./SettingsMenuItem";
+import ItemsRight from "./ActionBar/ActionBarItemsRight";
 
 interface DefaultPageLayoutProps {
   titleId?: string;
@@ -151,36 +145,10 @@ const DefaultPageLayout = ({
               }
               itemsLeftProps={{ width: 0 }}
               itemsRight={
-                <>
-                  <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
-                    {toolbarItemsRight}
-                    <SettingsMenu />
-                  </HStack>
-                  <HelpMenu
-                    display={{ base: "none", md: "block", lg: "block" }}
-                  />
-                  <ToolbarMenu
-                    display={{ base: "none", md: "block", lg: "none" }}
-                    variant="plain"
-                    label={intl.formatMessage({ id: "main-menu" })}
-                  >
-                    {menuItems}
-                    <LanguageMenuItem />
-                    <SettingsMenuItem />
-                  </ToolbarMenu>
-                  {/* Toolbar items when sm window size. */}
-                  <ToolbarMenu
-                    display={{ base: "block", md: "none" }}
-                    variant="plain"
-                    label={intl.formatMessage({ id: "main-menu" })}
-                  >
-                    {menuItems}
-                    <LanguageMenuItem />
-                    <SettingsMenuItem />
-                    <MenuDivider />
-                    <HelpMenuItems />
-                  </ToolbarMenu>
-                </>
+                <ItemsRight
+                  menuItems={menuItems}
+                  toolbarItems={toolbarItemsRight}
+                />
               }
             />
             {flags.preReleaseNotice && <PreReleaseNotice />}

src/components/HelpMenu.tsx

@@ -6,38 +6,35 @@ import {
   MenuButton,
   MenuList,
   Portal,
-  useDisclosure,
 } from "@chakra-ui/react";
 import { useRef } from "react";
 import { RiQuestionLine } from "react-icons/ri";
 import { useIntl } from "react-intl";
-import AboutDialog from "./AboutDialog";
-import FeedbackForm from "./FeedbackForm";
 import HelpMenuItems from "./HelpMenuItems";
+import { TourTrigger } from "../model";
 
-interface HelpMenuProps extends BoxProps {}
+interface HelpMenuProps extends BoxProps {
+  onAboutDialogOpen: () => void;
+  onConnectFirstDialogOpen: () => void;
+  onFeedbackOpen: () => void;
+  tourTrigger: TourTrigger | undefined;
+}
 
 /**
  * A help button that triggers a drop-down menu with actions.
  */
-const HelpMenu = ({ ...rest }: HelpMenuProps) => {
-  const aboutDialogDisclosure = useDisclosure();
-  const feedbackDisclosure = useDisclosure();
+const HelpMenu = ({
+  onAboutDialogOpen,
+  onConnectFirstDialogOpen,
+  onFeedbackOpen,
+  tourTrigger,
+  ...rest
+}: HelpMenuProps) => {
   const intl = useIntl();
   const menuButtonRef = useRef(null);
   const containerRef = useRef(null);
   return (
     <Box {...rest} ref={containerRef}>
-      <AboutDialog
-        isOpen={aboutDialogDisclosure.isOpen}
-        onClose={aboutDialogDisclosure.onClose}
-        finalFocusRef={menuButtonRef}
-      />
-      <FeedbackForm
-        isOpen={feedbackDisclosure.isOpen}
-        onClose={feedbackDisclosure.onClose}
-        finalFocusRef={menuButtonRef}
-      />
       <Menu>
         <MenuButton
           as={IconButton}
@@ -57,7 +54,12 @@ const HelpMenu = ({ ...rest }: HelpMenuProps) => {
         />
         <Portal containerRef={containerRef}>
           <MenuList>
-            <HelpMenuItems />
+            <HelpMenuItems
+              onAboutDialogOpen={onAboutDialogOpen}
+              onConnectFirstDialogOpen={onConnectFirstDialogOpen}
+              onFeedbackOpen={onFeedbackOpen}
+              tourTrigger={tourTrigger}
+            />
           </MenuList>
         </Portal>
       </Menu>