@balena/ui-shared-components 12.0.2-build-renovate-major-7-react-router-dom-591a9d391de2d33bdec9daa8f13684f5a2112f33-1 → 12.1.0-build-secure-boot-0f91aab21d2d77cbaaebddf68775aec0ba8c81ab-1

package/dist/components/DownloadImageDialog/ApplicationInstructions.d.ts

@@ -6,4 +6,5 @@ export declare const ApplicationInstructions: import("react").NamedExoticCompone
     templateData: {
         dockerImage: string;
     };
+    secureboot: boolean;
 }>;

package/dist/components/DownloadImageDialog/ApplicationInstructions.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import has from 'lodash/has';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { interpolateMustache } from './utils';
 import { Box, List, Tab, Tabs, Typography } from '@mui/material';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { OrderedListItem } from '../OrderedListItem';
 import { Markdown } from '../Markdown';
+import { Chip } from '../Chip';
 export const getUserOs = () => {
     const platform = window.navigator.platform.toLowerCase();
     if (platform.includes('win')) {
@@ -19,12 +19,13 @@ export const getUserOs = () => {
     }
     return 'Unknown';
 };
+const SECURE_BOOT_INSTRUCTION_TO_REPLACE_START = 'Press the F10 key while BIOS';
 const dtJsonTocontractOsKeyMap = {
     windows: 'Windows',
     osx: 'MacOS',
     linux: 'Linux',
 };
-export const ApplicationInstructions = memo(function ApplicationInstructions({ deviceType, templateData, }) {
+export const ApplicationInstructions = memo(function ApplicationInstructions({ deviceType, templateData, secureboot, }) {
     var _a;
     const [currentOs, setCurrentOs] = useState(getUserOs());
     const instructions = useMemo(() => {
@@ -64,37 +65,28 @@ export const ApplicationInstructions = memo(function ApplicationInstructions({ d
                             setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown');
                         }, "aria-label": "os tabs", children: Object.keys(instructions).map((os) => {
                             return _jsx(Tab, { label: os, value: os }, os);
-                        }) }) }) })), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, { mt: 2, children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, { href: `https://www.balena.io/docs/learn/getting-started/${deviceType.slug}/nodejs/`, children: "Getting Started Guide" }), "."] }) })] }));
+                        }) }) }) })), _jsx(InstructionsList, { instructions: finalInstructions, secureboot: secureboot }), _jsx(Box, { mt: 2, children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, { href: `https://www.balena.io/docs/learn/getting-started/${deviceType.slug}/nodejs/`, children: "Getting Started Guide" }), "."] }) })] }));
 });
-const InstructionsItem = ({ node, index }) => {
-    const hasChildren = has(node, 'children');
-    let text = null;
-    if (typeof node === 'string') {
-        text = node;
-    }
-    if (node === null || node === void 0 ? void 0 : node.text) {
-        text = node.text;
-    }
-    return (_jsxs(OrderedListItem, { index: index + 1, sx: { maxWidth: '100%' }, children: [_jsx(Markdown, { components: {
-                    code: (codeProps) => {
-                        return (_jsx("code", Object.assign({ style: {
-                                maxWidth: '100%',
-                                display: 'inline-block',
-                                whiteSpace: 'normal',
-                                wordBreak: 'break-all',
-                                wordWrap: 'break-word',
-                            } }, codeProps)));
-                    },
-                    br: () => {
-                        return _jsx("p", {});
-                    },
-                    p: ({ children }) => (_jsx("p", { style: { marginTop: 0, marginBottom: 0 }, children: children })),
-                }, children: text }), hasChildren && (_jsx(List, { children: node.children.map((item, i) => {
-                    return _jsx(InstructionsItem, { node: item, index: i }, i);
-                }) }))] }));
+const InstructionsItem = ({ instruction, index, secureboot, }) => {
+    return (_jsx(OrderedListItem, { index: index + 1, sx: { maxWidth: '100%' }, children: _jsx(Markdown, { components: {
+                code: (codeProps) => {
+                    return (_jsx("code", Object.assign({ style: {
+                            maxWidth: '100%',
+                            display: 'inline-block',
+                            whiteSpace: 'normal',
+                            wordBreak: 'break-all',
+                            wordWrap: 'break-word',
+                        } }, codeProps)));
+                },
+                br: () => {
+                    return _jsx("p", {});
+                },
+                p: ({ children }) => (_jsx("p", { style: { marginTop: 0, marginBottom: 0 }, children: secureboot &&
+                        instruction.includes(SECURE_BOOT_INSTRUCTION_TO_REPLACE_START) ? (_jsxs(_Fragment, { children: [instruction.split(SECURE_BOOT_INSTRUCTION_TO_REPLACE_START)[0], _jsxs(Box, { mt: 2, borderLeft: 1, borderColor: "divider", pl: 2, children: [_jsx(Chip, { sx: { marginRight: 1 }, label: "Secure Boot", color: "purple" }), "The device needs to be configured in secure boot setup mode. This depends on the UEFI/BIOS implementation, but in general, this involves resetting the UEFI settings to default configuration, configuring the device to boot in UEFI mode, setting the first boot option to the USB key and disabling the restoration of factory keys. Save and Exit the UEFI/BIOS menu and the device should automatically reboot and begin the provisioning process.", ' ', _jsx(MUILinkWithTracking, { href: "https://docs.balena.io/reference/OS/secure-boot-and-full-disk-encryption/generic-x86-64-gpt/#provision-the-device", children: "Read more on UEFI settings for secure boot and full disk encryption." })] })] })) : (children) })),
+            }, children: instruction }) }));
 };
-const InstructionsList = ({ instructions }) => {
-    return (_jsx(List, { children: instructions.map((item, i) => {
-            return _jsx(InstructionsItem, { node: item, index: i }, `${item}_${i}`);
+const InstructionsList = ({ instructions, secureboot, }) => {
+    return (_jsx(List, { children: instructions.map((instruction, i) => {
+            return (_jsx(InstructionsItem, { instruction: instruction, index: i, secureboot: secureboot }, `${instruction}_${i}`));
         }) }));
 };

package/dist/components/DownloadImageDialog/ImageForm.d.ts

@@ -16,5 +16,7 @@ interface ImageFormProps {
     onSelectedOsTypeChange: (osType: string) => void;
     onChange: (key: keyof DownloadImageFormModel, value: DownloadImageFormModel[keyof DownloadImageFormModel]) => void;
 }
+export declare const GENERIC_X86_SLUG = "generic-amd64";
+export declare const GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION = "5.3.15";
 export declare const ImageForm: import("react").NamedExoticComponent<ImageFormProps>;
 export {};

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -1,22 +1,25 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Box, Button, Checkbox, Chip, Collapse, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, InputLabel, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, } from '@mui/material';
+import { Avatar, Box, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, InputLabel, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, Accordion, AccordionSummary, AccordionDetails, Switch, Dialog, DialogTitle, DialogContent, DialogActions, Button, } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { getPreferredVersionOpts, transformVersions } from './version';
 import { OsTypeSelector } from './OsTypeSelector';
 import { VariantSelector } from './VariantSelector';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
 import ArticleIcon from '@mui/icons-material/Article';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { FALLBACK_LOGO_UNKNOWN_DEVICE } from './utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight, faTriangleExclamation, } from '@fortawesome/free-solid-svg-icons';
+import * as semver from 'balena-semver';
 import { Callout } from '../Callout';
 import { token } from '../../utils/token';
+import { getFromLocalStorage, setToLocalStorage } from '../../utils/storage';
+import { NewChip } from '../NewChip';
+import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
 const POLL_INTERVAL_DOCS = 'https://www.balena.io/docs/reference/supervisor/bandwidth-reduction/#side-effects--warnings';
+const SECURE_BOOT_AND_FULL_DISK_ENCRYPTION_DOCS = 'https://docs.balena.io/reference/OS/secure-boot-and-full-disk-encryption/overview/';
 const getCategorizedVersions = (deviceTypeOsVersions, deviceType, osType) => {
     var _a;
     const osVersions = (_a = deviceTypeOsVersions[deviceType.slug]) !== null && _a !== void 0 ? _a : [];
@@ -36,9 +39,14 @@ const lineMap = {
     sunset: 'yellow',
     outdated: 'red',
 };
+export const GENERIC_X86_SLUG = 'generic-amd64';
+export const GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION = '5.3.15';
 export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVersions, isInitialDefault, osType, osTypes, hasEsrVersions, model, formElement, downloadUrl, applicationId, authToken, onSelectedOsTypeChange, onChange, }) {
     var _a, _b;
+    const { state } = useAnalyticsContext();
     const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+    const [showSecureBootConfirmationDialog, setShowSecureBootConfirmationDialog,] = useState(false);
+    const [dontShowSecureBootWarningAgain, setDontShowSecureBootWarningAgain] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const [version, setVersion] = useState();
     const [variant, setVariant] = useState('prod');
@@ -46,6 +54,15 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
     const { selectionOpts, preferredSelectionOpts } = useMemo(() => getCategorizedVersions(osVersions, model.deviceType, osType), [osVersions, model.deviceType, osType]);
     const versionSelectionOpts = useMemo(() => (showAllVersions ? selectionOpts : preferredSelectionOpts), [preferredSelectionOpts, selectionOpts, showAllVersions]);
     const showAllVersionsToggle = useMemo(() => preferredSelectionOpts.length < selectionOpts.length, [preferredSelectionOpts.length, selectionOpts.length]);
+    const supportsSecureBoot = useMemo(() => {
+        return (model.deviceType.slug === GENERIC_X86_SLUG &&
+            semver.gte(model.version, GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION));
+    }, [model.deviceType.slug, model.version]);
+    const secureBootDontShowAgainKey = `${model.deviceType.slug}_secureboot_warning_do_not_show_again`;
+    const dismissSecureBootWarning = useCallback((accepted, dontShowAgain) => {
+        var _a;
+        (_a = state.webTracker) === null || _a === void 0 ? void 0 : _a.track('Application Add Device Modal Hide Secure Boot Warning', { accepted, dontShowAgain });
+    }, [state.webTracker]);
     const handleVariantChange = useCallback((v) => {
         setVariant(v);
         onChange('developmentMode', v === 'dev');
@@ -99,86 +116,138 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
         onChange('deviceType', newDeviceType);
     }, [compatibleDeviceTypes, model.deviceType.slug, onChange]);
     const recommendedVersion = useMemo(() => { var _a; return (_a = versionSelectionOpts.find((v) => { var _a; return !((_a = v.knownIssueList) === null || _a === void 0 ? void 0 : _a.length); })) === null || _a === void 0 ? void 0 : _a.value; }, [versionSelectionOpts]);
-    return (_jsxs(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, children: [_jsx("input", { type: "hidden", name: "deviceType", value: model.deviceType.slug }), _jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsx("input", { type: "hidden", name: "version", value: model.version }), _jsxs(Box, { py: 3, display: "flex", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Box, { display: "flex", flexDirection: "column", flex: "1", maxWidth: "100%", children: [_jsxs(InputLabel, { htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Select device type", ' ', _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(HelpIcon, { color: "info", sx: { fontSize: '1rem', marginLeft: 1 } }) })] }), _jsx(Autocomplete, { fullWidth: true, id: "device-type-select", value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
-                                    var _a;
-                                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { variant: "square", src: (_a = option.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, { noWrap: true, children: option.name })] })));
-                                }, renderInput: (_a) => {
-                                    var _b;
-                                    var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
-                                    return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: (_jsx(Avatar, { variant: "square", src: (_b = model.deviceType.logo) !== null && _b !== void 0 ? _b : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } })) }) })));
-                                }, onChange: (_event, value) => {
-                                    if (!value) {
-                                        return;
-                                    }
-                                    handleSelectedDeviceTypeChange(value);
-                                }, disableClearable: true, 
-                                // TODO: consider whether there is a better solution than letting the width vary as you search
-                                componentsProps: {
-                                    popper: { sx: { width: 'fit-content' } },
-                                } })] })), (!isInitialDefault || osType) &&
-                        hasEsrVersions &&
-                        model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && version && (_jsxs(Box, { display: "flex", flexWrap: "wrap", maxWidth: "100%", children: [_jsxs(Box, { display: "flex", flexDirection: "column", maxWidth: "100%", flex: 1, children: [_jsx(InputLabel, { sx: { mb: 2 }, htmlFor: "e2e-download-image-versions-list", children: "Select version" }), _jsx(Autocomplete, { fullWidth: true, id: "e2e-download-image-versions-list", value: version, getOptionLabel: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, options: versionSelectionOpts, onChange: (_event, ver) => {
-                                    handleVersionChange(ver);
-                                }, placeholder: "Choose a version...", renderOption: (props, option) => (_jsx(Box, Object.assign({ component: "li" }, props, { children: _jsx(VersionSelectItem, { option: option, isRecommended: option.value === recommendedVersion }) }))), renderInput: (_a) => {
-                                    var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
-                                    return (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: (_jsxs(_Fragment, { children: [version.value === recommendedVersion && (_jsx(Chip, { sx: { ml: 1 }, color: "green", label: "recommended" })), !!(version === null || version === void 0 ? void 0 : version.knownIssueList) && (_jsx(Tooltip, { title: version.knownIssueList, children: _jsx(FontAwesomeIcon, { icon: faTriangleExclamation, color: token('color.icon.warning') }) })), InputProps.endAdornment] })) }) })));
-                                }, disableClearable: true })] }), showAllVersionsToggle && (_jsx(Box, { mx: 2, display: "flex", alignItems: "center", alignSelf: "flex-end", 
-                        // TODO: find a better way to center the checkbox with the input only (without label)
-                        height: 54, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions" }) }))] })), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
-                        handleVariantChange(v ? 'dev' : 'prod');
-                    } }) })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", children: "Network" }), _jsxs(RadioGroup, { "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => {
-                                    onChange('network', event.target.value);
-                                }, children: [_jsx(FormControlLabel, { value: "ethernet", control: _jsx(Radio, {}), label: "Ethernet only" }), _jsx(FormControlLabel, { value: "wifi", control: _jsx(Radio, {}), label: "Wifi + Ethernet" })] })] }), model.network === 'wifi' && (_jsxs(_Fragment, { children: [_jsx(InputLabel, { htmlFor: "device-wifi-ssid", sx: { mb: 2 }, children: "WiFi SSID" }), _jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
-                                    htmlInput: {
-                                        name: 'wifiSsid',
-                                        autoComplete: 'wifiSsid-auto-complete',
-                                    },
-                                }, onChange: (event) => {
-                                    onChange('wifiSsid', event.target.value);
-                                } }), _jsx(InputLabel, { htmlFor: "device-wifi-password", sx: { my: 2 }, children: "Wifi Passphrase" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, slotProps: {
-                                    htmlInput: {
-                                        name: 'wifiKey',
-                                    },
-                                    // input and htmlInput are different https://mui.com/material-ui/api/text-field/#text-field-prop-slotProps
-                                    input: {
-                                        endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
-                                                    setShowPassword((show) => !show);
-                                                }, onMouseDown: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", p: 2, ref: formElement, children: [_jsx("input", { type: "hidden", name: "deviceType", value: model.deviceType.slug }), _jsx("input", { type: "hidden", name: "_token", value: authToken }), _jsx("input", { type: "hidden", name: "appId", value: applicationId }), _jsx("input", { type: "hidden", name: "fileType", value: ".zip" }), _jsx("input", { type: "hidden", name: "version", value: model.version }), _jsxs(Box, { py: 3, display: "flex", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsxs(Stack, { flex: "1", maxWidth: "100%", children: [_jsxs(InputLabel, { htmlFor: "device-type-select", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Device type", ' ', _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(HelpIcon, { color: "info", sx: { fontSize: '1rem', marginLeft: 1 } }) })] }), _jsx(Autocomplete, { fullWidth: true, id: "device-type-select", value: model.deviceType, options: compatibleDeviceTypes, getOptionLabel: (option) => option.name, renderOption: (props, option) => {
+                                            var _a;
+                                            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { variant: "square", src: (_a = option.logo) !== null && _a !== void 0 ? _a : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } }), _jsx(Typography, { noWrap: true, children: option.name })] })));
+                                        }, renderInput: (_a) => {
+                                            var _b;
+                                            var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
+                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
+                                                    input: Object.assign(Object.assign({}, InputProps), { startAdornment: (_jsx(Avatar, { variant: "square", src: (_b = model.deviceType.logo) !== null && _b !== void 0 ? _b : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 3, width: '20px', height: '20px' } })) }),
+                                                } })));
+                                        }, onChange: (_event, value) => {
+                                            if (!value) {
+                                                return;
+                                            }
+                                            handleSelectedDeviceTypeChange(value);
+                                        }, disableClearable: true, 
+                                        // TODO: consider whether there is a better solution than letting the width vary as you search
+                                        slotProps: {
+                                            popper: { sx: { width: 'fit-content' } },
+                                        } })] })), (!isInitialDefault || osType) &&
+                                hasEsrVersions &&
+                                model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && version && (_jsxs(Box, { display: "flex", flexWrap: "wrap", maxWidth: "100%", children: [_jsxs(Stack, { maxWidth: "100%", flex: 1, children: [_jsx(InputLabel, { sx: { mb: 2 }, htmlFor: "e2e-download-image-versions-list", children: "Select version" }), _jsx(Autocomplete, { fullWidth: true, id: "e2e-download-image-versions-list", value: version, getOptionLabel: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, options: versionSelectionOpts, onChange: (_event, ver) => {
+                                            handleVersionChange(ver);
+                                        }, placeholder: "Choose a version...", renderOption: (props, option) => (_jsx(Box, Object.assign({ component: "li" }, props, { children: _jsx(VersionSelectItem, { option: option, isRecommended: option.value === recommendedVersion }) }))), renderInput: (_a) => {
+                                            var { InputProps } = _a, params = __rest(_a, ["InputProps"]);
+                                            return (_jsx(TextField, Object.assign({}, params, { slotProps: {
+                                                    input: Object.assign(Object.assign({}, InputProps), { endAdornment: (_jsxs(_Fragment, { children: [version.value === recommendedVersion && (_jsx(Chip, { sx: { ml: 1 }, color: "green", label: "recommended" })), !!(version === null || version === void 0 ? void 0 : version.knownIssueList) && (_jsx(Tooltip, { title: version.knownIssueList, children: _jsx(FontAwesomeIcon, { icon: faTriangleExclamation, color: token('color.icon.warning') }) })), InputProps.endAdornment] })) }),
+                                                } })));
+                                        }, disableClearable: true })] }), showAllVersionsToggle && (_jsx(Box, { mx: 2, display: "flex", alignItems: "center", alignSelf: "flex-end", 
+                                // TODO: find a better way to center the checkbox with the input only (without label)
+                                height: 54, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions" }) }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), (!isInitialDefault || !variant) && (_jsx(Box, { sx: { mt: 3 }, children: _jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
+                                handleVariantChange(v ? 'dev' : 'prod');
+                            } }) })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Stack, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "network-radio-buttons-group-label", children: _jsx(Typography, { variant: "titleSm", children: "Network" }) }), _jsxs(RadioGroup, { "aria-labelledby": "network-radio-buttons-group-label", value: model.network, name: "network", onChange: (event) => {
+                                            onChange('network', event.target.value);
+                                        }, children: [_jsx(FormControlLabel, { value: "ethernet", control: _jsx(Radio, {}), label: "Ethernet only" }), _jsx(FormControlLabel, { value: "wifi", control: _jsx(Radio, {}), label: "Wifi + Ethernet" })] })] }), model.network === 'wifi' && (_jsxs(_Fragment, { children: [_jsx(InputLabel, { htmlFor: "device-wifi-ssid", sx: { mb: 2 }, children: "WiFi SSID" }), _jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
+                                            htmlInput: {
+                                                name: 'wifiSsid',
+                                                autoComplete: 'wifiSsid-auto-complete',
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange('wifiSsid', event.target.value);
+                                        } }), _jsx(InputLabel, { htmlFor: "device-wifi-password", sx: { my: 2 }, children: "Wifi Passphrase" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, slotProps: {
+                                            htmlInput: {
+                                                name: 'wifiKey',
+                                            },
+                                            // input and htmlInput are different https://mui.com/material-ui/api/text-field/#text-field-prop-slotProps
+                                            input: {
+                                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
+                                                            setShowPassword((show) => !show);
+                                                        }, onMouseDown: (event) => {
+                                                            event.preventDefault();
+                                                        }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange('wifiKey', event.target.value);
+                                        } })] }))] }), supportsSecureBoot && (_jsxs(_Fragment, { children: [_jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(FormControl, { children: [_jsx(FormLabel, { id: "secure-boot-and-full-disk-encryption-label", children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [_jsx(Typography, { variant: "titleSm", children: "Secure Boot and Full Disk Encryption" }), _jsx(NewChip, { expiryTimestamp: "2025-06-01" })] }) }), _jsx(FormControlLabel, { control: _jsx(Switch, { onClick: (event) => {
+                                                if (!model.secureboot &&
+                                                    !getFromLocalStorage(secureBootDontShowAgainKey)) {
                                                     event.preventDefault();
-                                                }, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
-                                    },
-                                }, onChange: (event) => {
-                                    onChange('wifiKey', event.target.value);
-                                } })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => {
-                    setShowAdvancedSettings(!showAdvancedSettings);
-                }, variant: "outlined", sx: { mb: 2 }, children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] }), _jsx(Collapse, { in: showAdvancedSettings, collapsedSize: 0, children: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, { htmlFor: "poll-interval-label", sx: { display: 'flex' }, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                height: '1.5rem',
-                                            }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }), _jsx(TextField, { id: "poll-interval-label", "aria-labelledby": "poll-interval-label", value: model.appUpdatePollInterval, slotProps: {
-                                        htmlInput: {
-                                            name: 'appUpdatePollInterval',
-                                            autoComplete: 'appUpdatePollInterval-auto-complete',
-                                        },
-                                    }, onChange: (event) => {
-                                        onChange('appUpdatePollInterval', event.target.value);
-                                    } })] }), _jsx(InputLabel, { htmlFor: "provision-key-name", sx: { my: 2 }, children: "Provisioning Key name" }), _jsx(TextField, { name: "provisioningKeyName", id: "provision-key-name", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
-                                htmlInput: {
-                                    name: 'provisioningKeyName',
-                                    autoComplete: 'provisioningKeyName-auto-complete',
-                                },
-                            }, onChange: (event) => {
-                                onChange('provisioningKeyName', event.target.value);
-                            } }), _jsx(InputLabel, { htmlFor: "provision-key-expiring", sx: { my: 2 }, children: "Provisioning Key expiring on" }), _jsx(TextField, { type: "date", id: "provision-key-expiring", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', slotProps: {
-                                htmlInput: {
-                                    name: 'provisioningKeyExpiryDate',
-                                    autoComplete: 'provisioningKeyExpiryDate-auto-complete',
-                                },
-                            }, onChange: (event) => {
-                                onChange('provisioningKeyExpiryDate', event.target.value);
-                            } })] }) })] }));
+                                                    setShowSecureBootConfirmationDialog(true);
+                                                    if (state.webTracker) {
+                                                        state.webTracker.track('Application Add Device Modal Show Secure Boot Warning');
+                                                    }
+                                                }
+                                            }, onChange: (event) => {
+                                                onChange('secureboot', event.target.checked);
+                                            }, checked: model.secureboot }), label: _jsxs(Stack, { direction: "row", children: [_jsx(Typography, { children: "Enable Secure Boot and Full Disk Encryption" }), _jsx(MUILinkWithTracking, { eventProperties: {
+                                                        source: 'Application Add Device Modal Secure Boot Doc Icon',
+                                                    }, href: SECURE_BOOT_AND_FULL_DISK_ENCRYPTION_DOCS, sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        height: '1.5rem',
+                                                    }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }) })] })] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Accordion, { disableGutters: true, elevation: 0, expanded: showAdvancedSettings, onChange: () => {
+                            setShowAdvancedSettings(!showAdvancedSettings);
+                        }, sx: {
+                            border: 'none',
+                            '&::before': {
+                                display: 'none',
+                            },
+                        }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(FontAwesomeIcon, { icon: faChevronRight }), sx: { flexDirection: 'row-reverse', gap: 1 }, children: _jsx(Typography, { variant: "titleSm", children: "Advanced settings" }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, { htmlFor: "poll-interval-label", sx: { display: 'flex', alignItems: 'center' }, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { eventProperties: {
+                                                                source: 'Application Add Device Modal Poll Interval Doc Icon',
+                                                            }, href: POLL_INTERVAL_DOCS, sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                height: '1.5rem',
+                                                            }, children: _jsx(ArticleIcon, { sx: { ml: 1, fontSize: '1.15rem' } }) })] }), _jsx(TextField, { id: "poll-interval-label", "aria-labelledby": "poll-interval-label", value: model.appUpdatePollInterval, slotProps: {
+                                                        htmlInput: {
+                                                            name: 'appUpdatePollInterval',
+                                                            autoComplete: 'appUpdatePollInterval-auto-complete',
+                                                        },
+                                                    }, onChange: (event) => {
+                                                        onChange('appUpdatePollInterval', event.target.value);
+                                                    } })] }), _jsx(InputLabel, { htmlFor: "provision-key-name", sx: { my: 2 }, children: "Provisioning Key name" }), _jsx(TextField, { name: "provisioningKeyName", id: "provision-key-name", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
+                                                htmlInput: {
+                                                    name: 'provisioningKeyName',
+                                                    autoComplete: 'provisioningKeyName-auto-complete',
+                                                },
+                                            }, onChange: (event) => {
+                                                onChange('provisioningKeyName', event.target.value);
+                                            } }), _jsx(InputLabel, { htmlFor: "provision-key-expiring", sx: { my: 2 }, children: "Provisioning Key expiring on" }), _jsx(TextField, { type: "date", id: "provision-key-expiring", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', slotProps: {
+                                                htmlInput: {
+                                                    name: 'provisioningKeyExpiryDate',
+                                                    autoComplete: 'provisioningKeyExpiryDate-auto-complete',
+                                                },
+                                            }, onChange: (event) => {
+                                                onChange('provisioningKeyExpiryDate', event.target.value);
+                                            } })] }) })] })] }), _jsxs(Dialog, { open: showSecureBootConfirmationDialog, onClose: () => {
+                    setShowSecureBootConfirmationDialog(false);
+                    dismissSecureBootWarning(false, dontShowSecureBootWarningAgain);
+                    setDontShowSecureBootWarningAgain(false);
+                }, children: [_jsx(DialogTitle, { children: "Enabling Secure Boot and Full Disk Encryption" }), _jsx(DialogContent, { children: _jsxs(Stack, { children: ["Enabling Secure Boot and Full Disk Encryption has important implications:", _jsxs("ul", { children: [_jsxs("li", { children: ["The image you are about to download is", ' ', _jsx(MUILinkWithTracking, { eventProperties: {
+                                                        source: "Application Add Device Modal Secure Boot Warning signed with balena's main platform key Link",
+                                                    }, href: "https://docs.balena.io/reference/OS/secure-boot-and-full-disk-encryption/overview/#keys-and-certificates-in-secure-boot", children: "signed with balena's main platform key" })] }), _jsx("li", { children: "Full Disk Encryption (FDE): All data on the disk will be encrypted with a unique key per device, ensuring that data extraction or retrieval from a powered-off device is impossible." }), _jsxs("li", { children: ["Secure Boot: Ensures only OS images signed by balena can unlock the disks and access data stored on the device. Hardened Mode Limitations:", _jsxs("ul", { children: [_jsx("li", { children: "Unsigned kernel modules cannot be loaded." }), _jsx("li", { children: "Boot parameters cannot be modified." }), _jsx("li", { children: "Debugging early boot processes is practically impossible." })] })] })] }), _jsxs(Typography, { children: ["If you need to load out-of-tree kernel drivers or require a unique signing key,", ' ', _jsx(MUILinkWithTracking, { eventProperties: {
+                                                source: 'Application Add Device Modal Secure Boot Warning Contact Us Link',
+                                            }, href: "mailto:sales@balena.io", target: "_self", children: "contact us" }), ' ', "to discuss your specific requirements."] }), _jsx(MUILinkWithTracking, { eventProperties: {
+                                        source: 'Application Add Device Modal Secure Boot Warning Learn More Link',
+                                    }, href: "https://docs.balena.io/reference/OS/secure-boot-and-full-disk-encryption/overview/", children: "Learn more about Secure Boot and Full Disk Encryption." }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: (event) => {
+                                            setDontShowSecureBootWarningAgain(event.target.checked);
+                                        } }), label: "Don't show me this warning again for this device type", sx: { mt: 2 } })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { "aria-label": "Go back and do not acknowledge Secure Boot and Full Disk Encryption warning", onClick: () => {
+                                    setShowSecureBootConfirmationDialog(false);
+                                    dismissSecureBootWarning(false, dontShowSecureBootWarningAgain);
+                                    setDontShowSecureBootWarningAgain(false);
+                                }, variant: "outlined", color: "secondary", children: "Cancel" }), _jsx(Button, { "aria-label": "Acknowledge Secure Boot and Full Disk Encryption warning", onClick: () => {
+                                    onChange('secureboot', true);
+                                    setShowSecureBootConfirmationDialog(false);
+                                    if (dontShowSecureBootWarningAgain) {
+                                        setToLocalStorage(secureBootDontShowAgainKey, 'true');
+                                    }
+                                    dismissSecureBootWarning(true, dontShowSecureBootWarningAgain);
+                                    setDontShowSecureBootWarningAgain(false);
+                                }, children: "I understand and acknowledge" })] })] })] }));
 });
 // TODO: We need a better way than just copying the styling. Consider creating a component to export
 const VersionSelectItem = ({ option, isRecommended, }) => {
-    return (_jsxs(Stack, { direction: "column", flexWrap: "wrap", maxWidth: "100%", rowGap: 1, children: [_jsxs(Typography, { noWrap: true, maxWidth: "100%", variant: "titleSm", children: [option.title, !!option.line && (_jsx(Chip, { sx: { ml: 1 }, label: option.line, color: lineMap[option.line] })), isRecommended && (_jsx(Chip, { sx: { ml: 1 }, color: "green", label: "recommended" }))] }), !!option.knownIssueList && (_jsx(Callout, { severity: "warning", size: "sm", children: option.knownIssueList }))] }));
+    return (_jsxs(Stack, { flexWrap: "wrap", maxWidth: "100%", rowGap: 1, children: [_jsxs(Typography, { noWrap: true, maxWidth: "100%", variant: "titleSm", children: [option.title, !!option.line && (_jsx(Chip, { sx: { ml: 1 }, label: option.line, color: lineMap[option.line] })), isRecommended && (_jsx(Chip, { sx: { ml: 1 }, color: "green", label: "recommended" }))] }), !!option.knownIssueList && (_jsx(Callout, { severity: "warning", size: "sm", children: option.knownIssueList }))] }));
 };

package/dist/components/DownloadImageDialog/VariantSelector.js

@@ -16,7 +16,7 @@ const variantInfo = {
 };
 const BuildVariants = ['dev', 'prod'];
 export const VariantSelector = ({ version, variant, onVariantChange, }) => {
-    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select edition" }), _jsx(RadioGroup, { "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
+    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Typography, { variant: "titleSm", children: "Select edition" }) }), _jsx(RadioGroup, { "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
                     onVariantChange(event.target.value === 'true');
                 }, children: BuildVariants.map((buildVariant, index) => {
                     const isDev = buildVariant === 'dev';

package/dist/components/DownloadImageDialog/index.d.ts

@@ -11,6 +11,7 @@ export interface DownloadImageFormModel {
     deviceType: DeviceType;
     version: string;
     network: 'ethernet' | 'wifi';
+    secureboot: boolean;
     developmentMode?: boolean;
     appUpdatePollInterval?: number;
     wifiSsid?: string;

package/dist/components/DownloadImageDialog/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Avatar, Box, DialogActions, DialogContent, Divider, Grid2 as Grid, Typography, } from '@mui/material';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FALLBACK_LOGO_UNKNOWN_DEVICE, isUrlAccessible, stripVersionBuild, } from './utils';
-import { ImageForm } from './ImageForm';
+import { GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION, GENERIC_X86_SLUG, ImageForm, } from './ImageForm';
 import { ApplicationInstructions } from './ApplicationInstructions';
 import { DropDownButton } from '../DropDownButton';
 import DownloadIcon from '@mui/icons-material/Download';
@@ -15,6 +15,7 @@ import { enqueueSnackbar } from 'notistack';
 import { DialogWithCloseButton } from '../DialogWithCloseButton';
 import { Callout } from '../Callout';
 import { Spinner } from '../Spinner';
+import * as semver from 'balena-semver';
 const etcherLogoBase64 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5FdGNoZXI8L3RpdGxlPgogIDxnIGlkPSJzdmdfMSIgc3Ryb2tlPSJudWxsIj4KICAgPHBhdGggaWQ9InN2Z18yIiBjbGFzcz0ic3QxIiBkPSJtNDEyLjkwMzgzLDM1OC4wNjcxM2wwLDE3MS40OTU4M2M3LjQ5MjU0LC0xLjY2NTAxIDE0LjE1MjU3LC0zLjMzMDAyIDIwLjgxMjYsLTcuNDkyNTRsMTQyLjM1ODE5LC04MS41ODUzOWMyMC44MTI2LC0xMS42NTUwNiAzMy4zMDAxNiwtMzQuMTMyNjYgMzMuMzAwMTYsLTU4LjI3NTI4bDAsLTE2Mi4zMzgyOGMwLC02LjY2MDAzIC0wLjgzMjUsLTEzLjMyMDA2IC0zLjMzMDAyLC0xOS4xNDc1OWwtMTU0LjAxMzI0LDg5LjA3NzkzYy0zMi40Njc2NiwyMi40Nzc2MSAtMzkuMTI3NjksNDMuMjkwMjEgLTM5LjEyNzY5LDY4LjI2NTMzbDAsLTAuMDAwMDF6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z18zIiBjbGFzcz0ic3QyIiBkPSJtNjYyLjY1NTAzLDE2Ny40MjM3MWwtNTYuNjEwMjcsMzIuNDY3NjZjMS42NjUwMSw1LjgyNzUzIDMuMzMwMDIsMTIuNDg3NTYgMy4zMzAwMiwxOS4xNDc1OWwwLDE2My4xNzA3OWMwLDI0LjE0MjYyIC0xMy4zMjAwNiw0Ni42MjAyMiAtMzMuMzAwMTYsNTguMjc1MjhsLTE0Mi4zNTgxOSw4MS41ODUzOWMtNi42NjAwMywzLjMzMDAyIC0xMy4zMjAwNiw1LjgyNzUzIC0yMC44MTI2LDcuNDkyNTRsMCw2NC45MzUzMWM5Ljk5MDA1LC0xLjY2NTAxIDE5Ljk4MDEsLTQuOTk1MDIgMjguMzA1MTQsLTkuOTkwMDVsMTg0LjgxNTg5LC0xMDUuNzI4MDFjMjUuODA3NjIsLTE0Ljk4NTA3IDQxLjYyNTIsLTQyLjQ1NzcgNDEuNjI1MiwtNzIuNDI3ODVsMCwtMjExLjQ1NjAyYzAsLTkuMTU3NTQgLTEuNjY1MDEsLTE4LjMxNTA5IC00Ljk5NTAyLC0yNy40NzI2M2wtMC4wMDAwMSwweiIgZmlsbD0iI0M4RjE3OCIgc3Ryb2tlPSJudWxsIi8+CiAgIDxwYXRoIGlkPSJzdmdfNCIgY2xhc3M9InN0MSIgZD0ibTM5OS41ODM3NiwzMDMuOTU0MzZjOC4zMjUwNCwtMTMuMzIwMDYgMjAuODEyNiwtMjUuODA3NjIgMzkuMTI3NjksLTM2LjYzMDE4bDE1NS42NzgyNSwtODkuOTEwNDNjLTQuOTk1MDIsLTYuNjYwMDMgLTExLjY1NTA2LC0xMi40ODc1NiAtMTguMzE1MDksLTE2LjY1MDA4bC0xNDIuMzU4MTksLTgxLjU4NTM5Yy0yMC44MTI2LC0xMS42NTUwNiAtNDYuNjIwMjIsLTExLjY1NTA2IC02Ny40MzI4MiwwbC0xNDEuNTI1NjgsODEuNTg1MzljLTcuNDkyNTQsNC4xNjI1MiAtMTMuMzIwMDYsOS45OTAwNSAtMTkuMTQ3NTksMTYuNjUwMDhsMTU0Ljg0NTc1LDg5LjkxMDQzYzE4LjMxNTA5LDExLjY1NTA2IDMwLjgwMjY1LDIzLjMxMDExIDM5LjEyNzY5LDM2LjYzMDE4bC0wLjAwMDAxLDB6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z181IiBjbGFzcz0ic3QyIiBkPSJtMjI0Ljc1NzkyLDE2MS41OTYxOGwxNDEuNTI1NjgsLTgxLjU4NTM5YzIwLjgxMjYsLTExLjY1NTA2IDQ2LjYyMDIyLC0xMS42NTUwNiA2Ny40MzI4MiwwbDE0Mi4zNTgxOSw4MS41ODUzOWM3LjQ5MjU0LDQuMTYyNTIgMTMuMzIwMDYsOS45OTAwNSAxOC4zMTUwOSwxNi42NTAwOGw1Ni42MTAyNywtMzIuNDY3NjZjLTYuNjYwMDMsLTkuMTU3NTQgLTE0Ljk4NTA3LC0xNi42NTAwOCAtMjQuOTc1MTIsLTIxLjY0NTFsLTE4NC44MTU4OSwtMTA3LjM5MzAyYy0yNS44MDc2MiwtMTQuOTg1MDcgLTU3LjQ0Mjc4LC0xNC45ODUwNyAtODMuMjUwNCwwbC0xODMuMTUwODgsMTA2LjU2MDUxYy05Ljk5MDA1LDUuODI3NTMgLTE4LjMxNTA5LDEzLjMyMDA2IC0yNC45NzUxMiwyMi40Nzc2MWw1Ni42MTAyNywzMi40Njc2NmM0LjE2MjUyLC02LjY2MDAzIDEwLjgyMjU1LC0xMi40ODc1NiAxOC4zMTUwOSwtMTYuNjUwMDh6IiBmaWxsPSIjQzhGMTc4IiBzdHJva2U9Im51bGwiLz4KICAgPHBhdGggaWQ9InN2Z182IiBjbGFzcz0ic3QyIiBkPSJtMzY2LjI4MzYsNTIyLjA3MDQxbC0xNDEuNTI1NjgsLTgxLjU4NTM5Yy0yMC44MTI2LC0xMS42NTUwNiAtMzMuMzAwMTYsLTM0LjEzMjY2IC0zMy4zMDAxNiwtNTguMjc1MjhsMCwtMTYzLjE3MDc5YzAsLTYuNjYwMDMgMC44MzI1LC0xMi40ODc1NiAyLjQ5NzUxLC0xOC4zMTUwOWwtNTYuNjEwMjcsLTMyLjQ2NzY2Yy0zLjMzMDAyLDkuMTU3NTQgLTQuOTk1MDIsMTcuNDgyNTggLTQuOTk1MDIsMjYuNjQwMTNsMCwyMTIuMjg4NTJjMCwyOS45NzAxNCAxNS44MTc1OCw1Ny40NDI3OCA0MS42MjUyLDcxLjU5NTM0bDE4My45ODMzOSwxMDUuNzI4MDFjOC4zMjUwNCw0Ljk5NTAyIDE4LjMxNTA5LDguMzI1MDQgMjguMzA1MTQsOS45OTAwNWwwLC02NC45MzUzMWMtNi42NjAwMywtMC44MzI1IC0xMy4zMjAwNiwtMy4zMzAwMiAtMTkuOTgwMSwtNy40OTI1NGwtMC4wMDAwMSwwLjAwMDAxeiIgZmlsbD0iI0M4RjE3OCIgc3Ryb2tlPSJudWxsIi8+CiAgIDxwYXRoIGlkPSJzdmdfNyIgY2xhc3M9InN0MSIgZD0ibTM0Ny4xMzYwMSwyODguOTY5MjlsLTE1My4xODA3NCwtODguMjQ1NDJjLTEuNjY1MDEsNS44Mjc1MyAtMi40OTc1MSwxMi40ODc1NiAtMi40OTc1MSwxOC4zMTUwOWwwLDE2My4xNzA3OWMwLDI0LjE0MjYyIDEyLjQ4NzU2LDQ2LjYyMDIyIDMzLjMwMDE2LDU4LjI3NTI4bDE0MS41MjU2OCw4MS41ODUzOWM2LjY2MDAzLDMuMzMwMDIgMTMuMzIwMDYsNS44Mjc1MyAyMC44MTI2LDcuNDkyNTRsMCwtMTcxLjQ5NTgzYy0wLjgzMjUsLTI0Ljk3NTEyIC03LjQ5MjU0LC00NS43ODc3MiAtMzkuOTYwMTksLTY5LjA5NzgzbDAsLTAuMDAwMDF6IiBmaWxsPSIjQTVERTM3IiBzdHJva2U9Im51bGwiLz4KICA8L2c+CiA8L2c+Cgo8L3N2Zz4=';
 const ETCHER_OPEN_IMAGE_URL = 'https://www.balena.io/etcher/open-image-url';
 export var ActionType;
@@ -64,6 +65,7 @@ const getInitialState = (deviceType, applicationId, releaseId) => ({
     deviceType,
     version: '',
     network: 'ethernet',
+    secureboot: false,
     developmentMode: false,
     appUpdatePollInterval: 10,
     wifiSsid: undefined,
@@ -249,7 +251,11 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
             newFormModelState = getInitialState(value, applicationId, releaseId);
         }
         else {
-            newFormModelState = Object.assign(Object.assign({}, formModel), { [key]: value });
+            newFormModelState = Object.assign(Object.assign({}, formModel), { secureboot: key === 'version' &&
+                    formModel.deviceType.slug === GENERIC_X86_SLUG &&
+                    semver.lt(value, GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION)
+                    ? false
+                    : formModel.secureboot, [key]: value });
             onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(newFormModelState);
         }
         setFormModel(newFormModelState);
@@ -276,7 +282,7 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
                                             dockerImage: formModel.version
                                                 ? getDockerArtifact(formModel.deviceType.slug, stripVersionBuild(formModel.version))
                                                 : '',
-                                        } })] }), ((_d = formModel.deviceType.imageDownloadAlerts) !== null && _d !== void 0 ? _d : []).map((alert) => {
+                                        }, secureboot: formModel.secureboot })] }), ((_d = formModel.deviceType.imageDownloadAlerts) !== null && _d !== void 0 ? _d : []).map((alert) => {
                                 return (_jsx(Grid, { pt: 0, size: 12, children: _jsx(Callout, { severity: alert.type, children: alert.message }, alert.message) }, alert.message));
                             })] }) }) }), _jsx(DialogActions, { sx: {
                     display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.0.2-build-renovate-major-7-react-router-dom-591a9d391de2d33bdec9daa8f13684f5a2112f33-1",
+  "version": "12.1.0-build-secure-boot-0f91aab21d2d77cbaaebddf68775aec0ba8c81ab-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -33,6 +33,7 @@
     "ajv-formats": "^3.0.1",
     "ajv-keywords": "^5.1.0",
     "analytics-client": "^2.0.1",
+    "balena-semver": "^3.0.5",
     "color": "^5.0.0",
     "color-hash": "^2.0.2",
     "date-fns": "^4.1.0",
@@ -44,7 +45,7 @@
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
     "react-markdown": "^10.0.0",
-    "react-router-dom": "^7.0.0",
+    "react-router-dom": "^6.28.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.0",
@@ -138,6 +139,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-07T14:58:51.984Z"
+    "publishedAt": "2025-04-08T11:39:17.057Z"
   }
 }