app/App: move firmware flash dialogs from settings

The flash firmware dialog show action can be triggered even when the
settings panel is not mounted, so we need to move the dialogs up in
the tree to the app level.

Fixes: https://github.com/pybricks/support/issues/694

CHANGELOG.md

@@ -6,8 +6,10 @@
 
 ### Fixed
 - Fixed run button enabled when no file open ([support#691]).
+- Fixed flash firmware dialog not showing when settings not open ([support#694]).
 
 [support#691]: https://github.com/pybricks/support/issues/691
+[support#694]: https://github.com/pybricks/support/issues/694
 
 ## [2.0.0-beta.5] - 2022-07-28
 

src/app/App.tsx

@@ -10,6 +10,8 @@ import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import Activities from '../activities/Activities';
 import Editor from '../editor/Editor';
+import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
+import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import StatusBar from '../status-bar/StatusBar';
 import Terminal from '../terminal/Terminal';
@@ -198,6 +200,8 @@ const App: React.VFC = () => {
             </div>
             <StatusBar />
             <Tour />
+            <InstallPybricksDialog />
+            <RestoreOfficialDialog />
         </div>
     );
 };

src/settings/Settings.tsx

@@ -22,8 +22,6 @@ import {
 import { Button } from '../components/Button';
 import HelpButton from '../components/HelpButton';
 import { firmwareInstallPybricks } from '../firmware/actions';
-import { InstallPybricksDialog } from '../firmware/installPybricksDialog/InstallPybricksDialog';
-import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
 import { firmwareRestoreOfficialDialogShow } from '../firmware/restoreOfficialDialog/actions';
 import { pseudolocalize } from '../i18n';
 import { useSelector } from '../reducers';
@@ -104,7 +102,6 @@ const Settings: React.VoidFunctionComponent = () => {
                     label={i18n.translate('firmware.flashPybricksButton.label')}
                     onPress={() => dispatch(firmwareInstallPybricks())}
                 />
-                <InstallPybricksDialog />
                 <Button
                     id="pb-settings-flash-official-button"
                     minimal={true}
@@ -112,7 +109,6 @@ const Settings: React.VoidFunctionComponent = () => {
                     label={i18n.translate('firmware.flashLegoButton.label')}
                     onPress={() => dispatch(firmwareRestoreOfficialDialogShow())}
                 />
-                <RestoreOfficialDialog />
             </FormGroup>
             <FormGroup label={i18n.translate('help.title')}>
                 <ButtonGroup minimal={true} vertical={true} alignText="left">