settings: add new hubName setting

This setting will be used to customize the hub name when flashing
firmware. This commit just implements the setting.

Some changes needed to be made to the existing settings infrastructure
since previously it only allowed boolean settings.

src/app/App.tsx

@@ -8,7 +8,7 @@ import SplitterLayout from 'react-splitter-layout';
 import Editor from '../editor/Editor';
 import { RootState } from '../reducers';
 import { toggleBoolean } from '../settings/actions';
-import { SettingId } from '../settings/defaults';
+import { BooleanSettingId } from '../settings/defaults';
 import StatusBar from '../status-bar/StatusBar';
 import Terminal from '../terminal/Terminal';
 import Toolbar from '../toolbar/Toolbar';
@@ -142,7 +142,7 @@ function App(): JSX.Element {
                                     e.key == 'd'
                                 ) {
                                     e.preventDefault();
-                                    dispatch(toggleBoolean(SettingId.ShowDocs));
+                                    dispatch(toggleBoolean(BooleanSettingId.ShowDocs));
                                 }
                             });
 

src/editor/Editor.tsx

@@ -12,7 +12,7 @@ import { IDisposable } from 'xterm';
 import { compile } from '../mpy/actions';
 import { RootState } from '../reducers';
 import { toggleBoolean } from '../settings/actions';
-import { SettingId } from '../settings/defaults';
+import { BooleanSettingId } from '../settings/defaults';
 import { IContextMenuTarget, handleContextMenu } from '../utils/IContextMenuTarget';
 import { isMacOS } from '../utils/os';
 import { setEditSession, storageChanged } from './actions';
@@ -254,7 +254,7 @@ const mapDispatchToProps: DispatchProps = {
     // REVISIT: the options here might need to be changed - hopefully there is
     // one setting that works for all hub types for cases where we aren't connected.
     onCheck: (script) => compile(script, []),
-    onToggleDocs: () => toggleBoolean(SettingId.ShowDocs),
+    onToggleDocs: () => toggleBoolean(BooleanSettingId.ShowDocs),
 };
 
 export default connect(

src/index.scss

@@ -93,3 +93,7 @@ a.#{$ns}-button {
 ::-webkit-scrollbar-thumb:hover {
     background: $pt-icon-color-hover;
 }
+
+.#{$ns}-input-group .#{$ns}-icon {
+    margin: 7px;
+}

src/settings/SettingsDrawer.tsx

@@ -6,11 +6,16 @@ import {
     Button,
     ButtonGroup,
     Classes,
+    ControlGroup,
     Drawer,
     FormGroup,
     Hotkey,
     Hotkeys,
     HotkeysTarget,
+    Icon,
+    InputGroup,
+    Intent,
+    Label,
     Position,
     Switch,
     Tooltip,
@@ -32,10 +37,11 @@ import { RootState } from '../reducers';
 import ExternalLinkIcon from '../utils/ExternalLinkIcon';
 import { BeforeInstallPromptEvent } from '../utils/dom';
 import { isMacOS } from '../utils/os';
-import { setBoolean, toggleBoolean } from './actions';
-import { SettingId } from './defaults';
+import { setBoolean, setString, toggleBoolean } from './actions';
+import { BooleanSettingId, StringSettingId } from './defaults';
 import { SettingsStringId } from './i18n';
 import en from './i18n.en.json';
+import './settings.scss';
 
 type StateProps = {
     showDocs: boolean;
@@ -47,6 +53,8 @@ type StateProps = {
     beforeInstallPrompt: BeforeInstallPromptEvent | null;
     promptingInstall: boolean;
     readyForOfflineUse: boolean;
+    hubName: string;
+    isHubNameValid: boolean;
 };
 
 type DispatchProps = {
@@ -57,6 +65,7 @@ type DispatchProps = {
     onCheckForUpdate: (registration: ServiceWorkerRegistration) => void;
     onReload: (registration: ServiceWorkerRegistration) => void;
     onInstallPrompt: (event: BeforeInstallPromptEvent) => void;
+    onHubNameChange: React.FormEventHandler<HTMLInputElement>;
 };
 
 type OwnProps = {
@@ -92,6 +101,9 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
             isOpen,
             onClose,
             i18n,
+            hubName,
+            isHubNameValid,
+            onHubNameChange,
         } = this.props;
         return (
             <Drawer
@@ -180,6 +192,40 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     }
                                 />
                             </Tooltip>
+                            <ControlGroup>
+                                <Label className={Classes.INLINE}>
+                                    {i18n.translate(
+                                        SettingsStringId.FirmwareHubNameLabel,
+                                    )}
+                                    <InputGroup
+                                        value={hubName}
+                                        onChange={onHubNameChange}
+                                        className="pb-hub-name-input"
+                                        intent={
+                                            isHubNameValid ? Intent.NONE : Intent.DANGER
+                                        }
+                                        placeholder="Pybricks Hub"
+                                        rightElement={
+                                            isHubNameValid ? undefined : (
+                                                <Tooltip
+                                                    content={i18n.translate(
+                                                        SettingsStringId.FirmwareHubNameErrorTooltip,
+                                                    )}
+                                                    boundary="window"
+                                                    position={Position.BOTTOM}
+                                                    targetTagName="div"
+                                                >
+                                                    <Icon
+                                                        icon="error"
+                                                        intent={Intent.DANGER}
+                                                        itemType="div"
+                                                    />
+                                                </Tooltip>
+                                            )
+                                        }
+                                    />
+                                </Label>
+                            </ControlGroup>
                         </FormGroup>
                         <FormGroup label={i18n.translate(SettingsStringId.HelpTitle)}>
                             <ButtonGroup
@@ -328,17 +374,21 @@ const mapStateToProps = (state: RootState): StateProps => ({
     beforeInstallPrompt: state.app.beforeInstallPrompt,
     promptingInstall: state.app.promptingInstall,
     readyForOfflineUse: state.app.readyForOfflineUse,
+    hubName: state.settings.hubName,
+    isHubNameValid: state.settings.isHubNameValid,
 });
 
 const mapDispatchToProps: DispatchProps = {
-    onShowDocsChanged: (checked) => setBoolean(SettingId.ShowDocs, checked),
-    onDarkModeChanged: (checked) => setBoolean(SettingId.DarkMode, checked),
+    onShowDocsChanged: (checked) => setBoolean(BooleanSettingId.ShowDocs, checked),
+    onDarkModeChanged: (checked) => setBoolean(BooleanSettingId.DarkMode, checked),
     onFlashCurrentProgramChanged: (checked) =>
-        setBoolean(SettingId.FlashCurrentProgram, checked),
-    onToggleDocs: () => toggleBoolean(SettingId.ShowDocs),
+        setBoolean(BooleanSettingId.FlashCurrentProgram, checked),
+    onToggleDocs: () => toggleBoolean(BooleanSettingId.ShowDocs),
     onCheckForUpdate: checkForUpdate,
     onReload: reload,
     onInstallPrompt: installPrompt,
+    onHubNameChange: (event) =>
+        setString(StringSettingId.HubName, event.currentTarget.value),
 };
 
 export default connect(

src/settings/actions.ts

@@ -2,72 +2,119 @@
 // Copyright (c) 2021 The Pybricks Authors
 
 import { Action } from 'redux';
-import { SettingId } from './defaults';
+import { BooleanSettingId, StringSettingId } from './defaults';
 
 /** Actions related to settings. */
 export enum SettingsActionType {
     SetBoolean = 'settings.action.setBoolean',
     ToggleBoolean = 'settings.action.toggleBoolean',
     DidFailToSetBoolean = 'settings.action.didFailToSetBoolean',
     DidBooleanChange = 'settings.action.didBooleanChange',
+    SetString = 'settings.action.setString',
+    DidFailToSetString = 'settings.action.didFailToSetString',
+    DidStringChange = 'settings.action.didStringChange',
 }
 
-type SettingInfo<T> = {
+type SettingInfo<TId, TState> = {
     /** The ID of the setting. */
-    id: SettingId;
+    id: TId;
     /** The new state for the setting. */
-    newState: T;
+    newState: TState;
 };
 
 /** Action to set/store a setting. */
 export type SettingsSetBooleanAction = Action<SettingsActionType.SetBoolean> &
-    SettingInfo<boolean>;
+    SettingInfo<BooleanSettingId, boolean>;
 
 /** Creates an action to set/store a setting. */
-export function setBoolean(id: SettingId, newState: boolean): SettingsSetBooleanAction {
+export function setBoolean(
+    id: BooleanSettingId,
+    newState: boolean,
+): SettingsSetBooleanAction {
     return { type: SettingsActionType.SetBoolean, id, newState };
 }
 
 /** Action to toggle a setting. */
 export type SettingsToggleBooleanAction = Action<SettingsActionType.ToggleBoolean> & {
-    id: SettingId;
+    id: BooleanSettingId;
 };
 
 /** Creates an action to toggle a setting. */
-export function toggleBoolean(id: SettingId): SettingsToggleBooleanAction {
+export function toggleBoolean(id: BooleanSettingId): SettingsToggleBooleanAction {
     return { type: SettingsActionType.ToggleBoolean, id };
 }
 
 /** Action that indicates setting/storing a setting failed. */
 export type SettingsDidFailToSetBooleanAction =
     Action<SettingsActionType.DidFailToSetBoolean> & {
-        id: SettingId;
+        id: BooleanSettingId;
         err: Error;
     };
 
 /** Creates an action indicating that setting/storing a setting failed. */
 export function didFailToSetBoolean(
-    id: SettingId,
+    id: BooleanSettingId,
     err: Error,
 ): SettingsDidFailToSetBooleanAction {
     return { type: SettingsActionType.DidFailToSetBoolean, id, err };
 }
 
 /** Action that indicates a stored boolean setting value changed. */
 export type SettingsDidBooleanChangeAction =
-    Action<SettingsActionType.DidBooleanChange> & SettingInfo<boolean>;
+    Action<SettingsActionType.DidBooleanChange> &
+        SettingInfo<BooleanSettingId, boolean>;
 
 /** Creates an action that indicates a stored boolean setting value changed. */
 export function didBooleanChange(
-    id: SettingId,
+    id: BooleanSettingId,
     newState: boolean,
 ): SettingsDidBooleanChangeAction {
     return { type: SettingsActionType.DidBooleanChange, id, newState };
 }
 
+/** Action to set/store a setting. */
+export type SettingsSetStringAction = Action<SettingsActionType.SetString> &
+    SettingInfo<StringSettingId, string>;
+
+/** Creates an action to set/store a setting. */
+export function setString(
+    id: StringSettingId,
+    newState: string,
+): SettingsSetStringAction {
+    return { type: SettingsActionType.SetString, id, newState };
+}
+
+/** Action that indicates setting/storing a setting failed. */
+export type SettingsDidFailToSetStringAction =
+    Action<SettingsActionType.DidFailToSetString> & {
+        id: StringSettingId;
+        err: Error;
+    };
+
+/** Creates an action indicating that setting/storing a setting failed. */
+export function didFailToSetString(
+    id: StringSettingId,
+    err: Error,
+): SettingsDidFailToSetStringAction {
+    return { type: SettingsActionType.DidFailToSetString, id, err };
+}
+
+export type SettingsDidStringChangeAction = Action<SettingsActionType.DidStringChange> &
+    SettingInfo<StringSettingId, string>;
+
+export function didStringChange(
+    id: StringSettingId,
+    newState: string,
+): SettingsDidStringChangeAction {
+    return { type: SettingsActionType.DidStringChange, id, newState };
+}
+
 /** Common type for all settings actions. */
 export type SettingsAction =
     | SettingsSetBooleanAction
     | SettingsToggleBooleanAction
     | SettingsDidFailToSetBooleanAction
-    | SettingsDidBooleanChangeAction;
+    | SettingsDidBooleanChangeAction
+    | SettingsSetStringAction
+    | SettingsDidFailToSetStringAction
+    | SettingsDidStringChangeAction;

src/settings/defaults.ts

@@ -5,22 +5,36 @@
 
 import { prefersDarkMode } from '../utils/os';
 
-export enum SettingId {
+export enum BooleanSettingId {
     ShowDocs = 'showDocs',
     DarkMode = 'darkMode',
     FlashCurrentProgram = 'flashCurrentProgram',
 }
 
-export function getDefaultBooleanValue(id: SettingId): boolean {
+export function getDefaultBooleanValue(id: BooleanSettingId): boolean {
     switch (id) {
-        case SettingId.ShowDocs:
+        case BooleanSettingId.ShowDocs:
             return window.innerWidth >= 1024;
-        case SettingId.DarkMode:
+        case BooleanSettingId.DarkMode:
             return prefersDarkMode();
-        case SettingId.FlashCurrentProgram:
+        case BooleanSettingId.FlashCurrentProgram:
             return false;
         // istanbul ignore next: it is a programmer error if we hit this
         default:
-            throw Error(`Bad setting id: ${id}`);
+            throw Error(`Bad BooleanSettingId: ${id}`);
+    }
+}
+
+export enum StringSettingId {
+    HubName = 'hubName',
+}
+
+export function getDefaultStringValue(id: StringSettingId): string {
+    switch (id) {
+        case StringSettingId.HubName:
+            return ''; // empty string will result in 'Pybricks Hub'
+        // istanbul ignore next: it is a programmer error if we hit this
+        default:
+            throw Error(`Bad StringSettingId: ${id}`);
     }
 }

src/settings/i18n.en.json

@@ -20,6 +20,12 @@
             "flash-current-program": {
                 "label": "Include current program",
                 "tooltip": "Select to include your program when installing the firmware."
+            },
+            "hub-name": {
+                "label": "Hub name",
+                "error": {
+                    "tooltip": "The name is too long."
+                }
             }
         },
         "help": {

src/settings/i18n.ts

@@ -14,6 +14,8 @@ export enum SettingsStringId {
     FirmwareTitle = 'settings.firmware.title',
     FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
     FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
+    FirmwareHubNameLabel = 'settings.firmware.hub-name.label',
+    FirmwareHubNameErrorTooltip = 'settings.firmware.hub-name.error.tooltip',
     HelpTitle = 'settings.help.title',
     HelpProjectsLabel = 'settings.help.projects.label',
     HelpSupportLabel = 'settings.help.support.label',