explorer/newFileWizard: refactor

This refactors the new file wizard to be more independent. Most of the
control is now done through the saga instead of splitting it between
react and the sagas.

Also fix a few issues while we are touching this:
- pressing enter now accepts the dialog
- newly created file is now activated in the editor

src/explorer/newFileWizard/NewFileWizard.test.tsx

@@ -2,23 +2,73 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import { waitFor } from '@testing-library/dom';
+import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { testRender } from '../../../test';
 import NewFileWizard from './NewFileWizard';
+import { Hub, newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 
-describe('create button', () => {
-    it('should close the dialog', async () => {
-        const onClose = jest.fn();
-        const [dialog] = testRender(<NewFileWizard isOpen={true} onClose={onClose} />);
+afterEach(() => {
+    cleanup();
+});
+
+describe('accept', () => {
+    it('should dispatch accept action when button is clicked', async () => {
+        const [dialog, dispatch] = testRender(<NewFileWizard />, {
+            explorer: { newFileWizard: { isOpen: true } },
+        });
 
         const button = dialog.getByLabelText('Create');
 
         // have to type a file name before Create button is enabled
-        userEvent.type(dialog.getByLabelText('File name'), 'test');
+        userEvent.type(dialog.getByRole('textbox', { name: 'File name' }), 'test');
         await waitFor(() => expect(button).not.toBeDisabled());
 
         userEvent.click(button);
-        expect(onClose).toHaveBeenCalled();
+        expect(dispatch).toHaveBeenCalledWith(
+            newFileWizardDidAccept('test', '.py', Hub.Technic),
+        );
+    });
+
+    it('should dispatch accept action when enter is pressed ', async () => {
+        const [dialog, dispatch] = testRender(<NewFileWizard />, {
+            explorer: { newFileWizard: { isOpen: true } },
+        });
+
+        userEvent.type(
+            dialog.getByRole('textbox', { name: 'File name' }),
+            'test{enter}',
+        );
+
+        expect(dispatch).toHaveBeenCalledWith(
+            newFileWizardDidAccept('test', '.py', Hub.Technic),
+        );
+    });
+});
+
+describe('cancel', () => {
+    it('should dispatch cancel when close button is clicked', () => {
+        const [dialog, dispatch] = testRender(<NewFileWizard />, {
+            explorer: { newFileWizard: { isOpen: true } },
+        });
+
+        userEvent.click(dialog.getByRole('button', { name: 'Close' }));
+
+        expect(dispatch).toHaveBeenCalledWith(newFileWizardDidCancel());
+    });
+
+    it('should dispatch cancel when escape button is pressed', async () => {
+        const [dialog, dispatch] = testRender(<NewFileWizard />, {
+            explorer: { newFileWizard: { isOpen: true } },
+        });
+
+        await waitFor(() =>
+            expect(dialog.getByRole('textbox', { name: 'File name' })).toHaveFocus(),
+        );
+
+        userEvent.keyboard('{esc}');
+
+        expect(dispatch).toHaveBeenCalledWith(newFileWizardDidCancel());
     });
 });

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -10,7 +10,7 @@ import {
     RadioGroup,
 } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
     FileNameValidationResult,
@@ -18,28 +18,20 @@ import {
     validateFileName,
 } from '../../pybricksMicropython/lib';
 import { useSelector } from '../../reducers';
+import { useUniqueId } from '../../utils/react';
 import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
-import { Hub, explorerCreateNewFile } from './../actions';
+import { Hub, newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 import { I18nId } from './i18n';
 
 // This should be set to the most commonly used hub.
 const defaultHub = Hub.Technic;
 
-type NewFileWizardProps = {
-    /** Controls if the dialog is open. */
-    readonly isOpen: boolean;
-    /** Called when the dialog is closed. */
-    readonly onClose: () => void;
-};
-
-const NewFileWizard: React.VoidFunctionComponent<NewFileWizardProps> = ({
-    isOpen,
-    onClose,
-}) => {
+const NewFileWizard: React.VoidFunctionComponent = () => {
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useI18n();
     const dispatch = useDispatch();
 
+    const isOpen = useSelector((s) => s.explorer.newFileWizard.isOpen);
     const [fileName, setFileName] = useState('');
     const files = useSelector((s) => s.explorer.files);
     const fileNameValidation = validateFileName(
@@ -51,6 +43,20 @@ const NewFileWizard: React.VoidFunctionComponent<NewFileWizardProps> = ({
 
     const fileNameInputRef = useRef<HTMLInputElement>(null);
 
+    const handleSubmit = useCallback<React.FormEventHandler>(
+        (e) => {
+            e.preventDefault();
+            dispatch(newFileWizardDidAccept(fileName, pythonFileExtension, hubType));
+        },
+        [dispatch, fileName, pythonFileExtension, hubType],
+    );
+
+    const handleClose = useCallback(() => {
+        dispatch(newFileWizardDidCancel());
+    }, [dispatch]);
+
+    const acceptButtonLabelId = useUniqueId('pybricks-explorer');
+
     return (
         <Dialog
             icon="plus"
@@ -58,51 +64,50 @@ const NewFileWizard: React.VoidFunctionComponent<NewFileWizardProps> = ({
             isOpen={isOpen}
             onOpening={() => setFileName('')}
             onOpened={() => fileNameInputRef.current?.focus()}
-            onClose={onClose}
+            onClose={handleClose}
         >
-            <div className={Classes.DIALOG_BODY}>
-                <FileNameFormGroup
-                    fileName={fileName}
-                    fileExtension={pythonFileExtension}
-                    validationResult={fileNameValidation}
-                    inputRef={fileNameInputRef}
-                    onChange={setFileName}
-                />
-                <FormGroup label={i18n.translate(I18nId.SmartHubLabel)}>
-                    <RadioGroup
-                        selectedValue={hubType}
-                        onChange={(e) => setHubType(e.currentTarget.value as Hub)}
-                    >
-                        <Radio value={Hub.Move}>BOOST Move Hub</Radio>
-                        <Radio value={Hub.City}>City Hub</Radio>
-                        <Radio value={Hub.Technic}>Technic Hub</Radio>
-                        <Radio value={Hub.Prime}>SPIKE Prime</Radio>
-                        <Radio value={Hub.Essential}>SPIKE Essential</Radio>
-                        <Radio value={Hub.Inventor}>MINDSTORMS Robot Inventor</Radio>
-                    </RadioGroup>
-                </FormGroup>
-            </div>
-            <div className={Classes.DIALOG_FOOTER}>
-                <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                    <Button
-                        aria-label="Create"
-                        intent="primary"
-                        disabled={fileNameValidation !== FileNameValidationResult.IsOk}
-                        onClick={() => {
-                            onClose();
-                            dispatch(
-                                explorerCreateNewFile(
-                                    fileName,
-                                    pythonFileExtension,
-                                    hubType,
-                                ),
-                            );
-                        }}
-                    >
-                        {i18n.translate(I18nId.ActionCreate)}
-                    </Button>
+            <form onSubmit={handleSubmit}>
+                <div className={Classes.DIALOG_BODY}>
+                    <FileNameFormGroup
+                        fileName={fileName}
+                        fileExtension={pythonFileExtension}
+                        validationResult={fileNameValidation}
+                        inputRef={fileNameInputRef}
+                        onChange={setFileName}
+                    />
+                    <FormGroup label={i18n.translate(I18nId.SmartHubLabel)}>
+                        <RadioGroup
+                            selectedValue={hubType}
+                            onChange={(e) => setHubType(e.currentTarget.value as Hub)}
+                        >
+                            <Radio value={Hub.Move}>BOOST Move Hub</Radio>
+                            <Radio value={Hub.City}>City Hub</Radio>
+                            <Radio value={Hub.Technic}>Technic Hub</Radio>
+                            <Radio value={Hub.Prime}>SPIKE Prime</Radio>
+                            <Radio value={Hub.Essential}>SPIKE Essential</Radio>
+                            <Radio value={Hub.Inventor}>
+                                MINDSTORMS Robot Inventor
+                            </Radio>
+                        </RadioGroup>
+                    </FormGroup>
                 </div>
-            </div>
+                <div className={Classes.DIALOG_FOOTER}>
+                    <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                        <Button
+                            aria-labelledby={acceptButtonLabelId}
+                            intent="primary"
+                            disabled={
+                                fileNameValidation !== FileNameValidationResult.IsOk
+                            }
+                            type="submit"
+                        >
+                            <span id={acceptButtonLabelId}>
+                                {i18n.translate(I18nId.ActionCreate)}
+                            </span>
+                        </Button>
+                    </div>
+                </div>
+            </form>
         </Dialog>
     );
 };

src/explorer/newFileWizard/actions.ts

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { createAction } from '../../actions';
+
+import { pythonFileExtension } from '../../pybricksMicropython/lib';
+
+/** Supported file extensions. */
+type SupportedFileExtension = typeof pythonFileExtension;
+
+/** Supported hub types. */
+export enum Hub {
+    /** BOOST Move hub */
+    Move = 'movehub',
+    /** City hub */
+    City = 'cityhub',
+    /** Technic hub */
+    Technic = 'technichub',
+    /** MINDSTORMS Robot Inventor hub */
+    Inventor = 'inventorhub',
+    /** SPIKE Prime hub */
+    Prime = 'primehub',
+    /** SPIKE Essential hub */
+    Essential = 'essentialhub',
+}
+
+export const newFileWizardShow = createAction(() => ({
+    type: 'explorer.newFileWizard.action.show',
+}));
+
+export const newFileWizardDidAccept = createAction(
+    (fileName: string, fileExtension: SupportedFileExtension, hubType: Hub) => ({
+        type: 'explorer.newFileWizard.action.didAccept',
+        fileName,
+        fileExtension,
+        hubType,
+    }),
+);
+
+export const newFileWizardDidCancel = createAction(() => ({
+    type: 'explorer.newFileWizard.action.didCancel',
+}));

src/explorer/newFileWizard/reducers.ts

@@ -0,0 +1,27 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { Reducer, combineReducers } from 'redux';
+import {
+    newFileWizardDidAccept,
+    newFileWizardDidCancel,
+    newFileWizardShow,
+} from './actions';
+
+/** Controls the new file wizard dialog isOpen state. */
+const isOpen: Reducer<boolean> = (state = false, action) => {
+    if (newFileWizardShow.matches(action)) {
+        return true;
+    }
+
+    if (
+        newFileWizardDidAccept.matches(action) ||
+        newFileWizardDidCancel.matches(action)
+    ) {
+        return false;
+    }
+
+    return state;
+};
+
+export default combineReducers({ isOpen });