i18n: use babel-loader plugin

src/explorer/newFileWizard/18n.test.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { lookup } from '../../../test';
+import { I18nId } from './i18n';
+import en from './translations/en.json';
+
+describe('Ensure .json file has matches for I18nId', () => {
+    test.each(Object.values(I18nId))('%s', (id) => {
+        expect(lookup(en, id)).toBeDefined();
+    });
+});

src/explorer/newFileWizard/NewFileWizard.test.tsx

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { waitFor } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { testRender } from '../../../test';
+import NewFileWizard from './NewFileWizard';
+
+describe('create button', () => {
+    it('should close the dialog', async () => {
+        const onClose = jest.fn();
+        const [dialog] = testRender(<NewFileWizard isOpen={true} onClose={onClose} />);
+
+        const button = dialog.getByLabelText('Create');
+
+        // have to type a file name before Create button is enabled
+        userEvent.type(dialog.getByLabelText('File name'), 'test');
+        await waitFor(() => expect(button).not.toBeDisabled());
+
+        userEvent.click(button);
+        expect(onClose).toHaveBeenCalled();
+    });
+});

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import {
+    Button,
+    Classes,
+    Dialog,
+    FormGroup,
+    Radio,
+    RadioGroup,
+} from '@blueprintjs/core';
+import { useI18n } from '@shopify/react-i18n';
+import React, { useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+    FileNameValidationResult,
+    pythonFileExtension,
+    validateFileName,
+} from '../../pybricksMicropython/lib';
+import { useSelector } from '../../reducers';
+import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
+import { Hub, explorerCreateNewFile } 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 [i18n] = useI18n();
+    const dispatch = useDispatch();
+
+    const [fileName, setFileName] = useState('');
+    const fileNames = useSelector((s) => s.fileStorage.fileNames);
+    const fileNameValidation = validateFileName(
+        fileName,
+        pythonFileExtension,
+        fileNames,
+    );
+    const [hubType, setHubType] = useState(defaultHub);
+
+    const fileNameInputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <Dialog
+            icon="plus"
+            title={i18n.translate(I18nId.Title)}
+            isOpen={isOpen}
+            onOpening={() => setFileName('')}
+            onOpened={() => fileNameInputRef.current?.focus()}
+            onClose={onClose}
+        >
+            <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>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+export default NewFileWizard;

src/explorer/newFileWizard/i18n.ts

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+export enum I18nId {
+    Title = 'title',
+    SmartHubLabel = 'smartHub.label',
+    ActionCreate = 'action.create',
+}

src/explorer/newFileWizard/translations/en.json

@@ -0,0 +1,9 @@
+{
+    "title": "Create a new file",
+    "smartHub": {
+        "label": "Smart hub"
+    },
+    "action": {
+        "create": "Create"
+    }
+}