@balena/ui-shared-components 14.1.0-build-limit-field-lengths-2d063da12c2b1e3b691fc126191269d24d81aae1-1 → 14.1.0-build-secure-boot-backup-4d430fef3bc217d76b648ea38883d1b586f61a8a-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,12 @@
-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, useState } from 'react';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { OrderedListItem } from '../OrderedListItem';
 import { Markdown } from '../Markdown';
+import { Chip } from '../Chip';
+import { token } from '../../utils/token';
 export const getUserOs = () => {
     const platform = window.navigator.platform.toLowerCase();
     if (platform.includes('win')) {
@@ -19,7 +20,8 @@ export const getUserOs = () => {
     }
     return 'Unknown';
 };
-export const ApplicationInstructions = memo(function ApplicationInstructions({ deviceType, templateData, }) {
+const SECURE_BOOT_INSTRUCTION_TO_REPLACE_START = 'Press the F10 key while BIOS';
+export const ApplicationInstructions = memo(function ApplicationInstructions({ deviceType, templateData, secureboot, }) {
     var _a;
     const [currentOs, setCurrentOs] = useState(getUserOs());
     const hasOsSpecificInstructions = !Array.isArray(deviceType.instructions);
@@ -52,37 +54,28 @@ export const ApplicationInstructions = memo(function ApplicationInstructions({ d
                             setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown');
                         }, "aria-label": "os tabs", children: Object.keys(deviceType.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: token('color.border.subtle'), 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: (obj: Partial<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,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Box, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, Accordion, AccordionSummary, AccordionDetails, accordionSummaryClasses, } from '@mui/material';
+import { Avatar, Box, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, Accordion, AccordionSummary, AccordionDetails, accordionSummaryClasses, Switch, Dialog, DialogTitle, DialogContent, DialogActions, Button, } from '@mui/material';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { getPreferredVersionOpts, transformVersions } from './version';
 import { OsTypeSelector } from './OsTypeSelector';
@@ -10,9 +10,14 @@ import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { FALLBACK_LOGO_UNKNOWN_DEVICE } from './utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight, faEye, faEyeSlash, faQuestionCircle, faTriangleExclamation, } from '@fortawesome/free-solid-svg-icons';
+import * as semver from 'balena-semver';
 import { Callout } from '../Callout';
+import { getFromLocalStorage, setToLocalStorage } from '../../utils/storage';
+import { NewChip } from '../NewChip';
+import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
 import { token } from '../../utils/token';
 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 : [];
@@ -32,9 +37,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');
@@ -42,6 +52,17 @@ 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;
+        setShowSecureBootConfirmationDialog(false);
+        (_a = state.webTracker) === null || _a === void 0 ? void 0 : _a.track('Application Add Device Modal Hide Secure Boot Warning', { accepted, dontShowAgain });
+        setDontShowSecureBootWarningAgain(false);
+    }, [state.webTracker]);
     const handleVariantChange = useCallback((newVariant) => {
         setVariant(newVariant);
         const newState = {
@@ -112,104 +133,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(Stack, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", ref: formElement, gap: 3, 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(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsx(Autocomplete, { fullWidth: true, 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, { label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: ["Device type", _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(FontAwesomeIcon, { icon: faQuestionCircle, color: "info", fontSize: "1rem" }) })] }), 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' } },
-                        }, sx: { flex: 1 } })), (!isInitialDefault || osType) &&
-                        hasEsrVersions &&
-                        model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && version && (_jsxs(Stack, { direction: "row", flexWrap: "wrap", maxWidth: "100%", gap: 2, alignItems: "center", children: [_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] })) }),
-                                }, label: "OS version" })));
-                        }, disableClearable: true, sx: { flex: 1 } }), showAllVersionsToggle && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions", 
-                        // TODO: Find a better way to center the checkbox with the input only (without the label)
-                        sx: { mt: 3 } }))] })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { borderStyle: 'dashed' } }), (!isInitialDefault || !variant) && (_jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
-                    handleVariantChange(v ? 'dev' : 'prod');
-                } })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { 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(Stack, { gap: 3, children: [_jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
-                                    htmlInput: {
-                                        name: 'wifiSsid',
-                                        autoComplete: 'wifiSsid-auto-complete',
-                                    },
-                                }, onChange: (event) => {
-                                    onChange({ wifiSsid: event.target.value });
-                                }, label: "WiFi SSID" }), _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(Stack, { action: downloadUrl, method: "post", component: "form", noValidate: true, autoComplete: "off", ref: formElement, gap: 3, 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(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: [compatibleDeviceTypes && compatibleDeviceTypes.length > 1 && (_jsx(Autocomplete, { fullWidth: true, 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, { label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: ["Device type", _jsx(Tooltip, { title: "Applications can support any devices that share the same architecture as their default device type.", children: _jsx(FontAwesomeIcon, { icon: faQuestionCircle, color: "info", fontSize: "1rem" }) })] }), 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' } },
+                                }, sx: { flex: 1 } })), (!isInitialDefault || osType) &&
+                                hasEsrVersions &&
+                                model.deviceType && (_jsx(OsTypeSelector, { supportedOsTypes: osTypes, hasEsrVersions: hasEsrVersions !== null && hasEsrVersions !== void 0 ? hasEsrVersions : false, selectedOsTypeSlug: osType, onSelectedOsTypeChange: onSelectedOsTypeChange }))] }), !isInitialDefault && version && (_jsxs(Stack, { direction: "row", flexWrap: "wrap", maxWidth: "100%", gap: 2, alignItems: "center", children: [_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] })) }),
+                                        }, label: "OS version" })));
+                                }, disableClearable: true, sx: { flex: 1 } }), showAllVersionsToggle && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "e2e-show-all-versions-check", checked: showAllVersions, onChange: handleShowAllVersions }), label: "Show outdated versions", 
+                                // TODO: Find a better way to center the checkbox with the input only (without the label)
+                                sx: { mt: 3 } }))] })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { borderStyle: 'dashed' } }), (!isInitialDefault || !variant) && (_jsx(VariantSelector, { version: version, variant: variant, onVariantChange: (v) => {
+                            handleVariantChange(v ? 'dev' : 'prod');
+                        } })), _jsx(Divider, { variant: "fullWidth", flexItem: true, sx: { 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(Stack, { gap: 3, children: [_jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
+                                            htmlInput: {
+                                                name: 'wifiSsid',
+                                                autoComplete: 'wifiSsid-auto-complete',
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange({ wifiSsid: event.target.value });
+                                        }, label: "WiFi SSID" }), _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(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange({ wifiKey: event.target.value });
+                                        }, label: "Wifi Passphrase" })] }))] }), 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(FontAwesomeIcon, { icon: faEyeSlash })) : (_jsx(FontAwesomeIcon, { icon: faEye })) }) })),
-                                    },
-                                }, onChange: (event) => {
-                                    onChange({ wifiKey: event.target.value });
-                                }, label: "Wifi Passphrase" })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { borderStyle: 'dashed' } }), _jsxs(Accordion, { disableGutters: true, elevation: 0, expanded: showAdvancedSettings, onChange: () => {
-                    setShowAdvancedSettings(!showAdvancedSettings);
-                }, sx: {
-                    border: 'none',
-                    '&::before': {
-                        display: 'none',
-                    },
-                    [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: {
-                        transform: 'rotate(90deg)',
-                    },
-                }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(FontAwesomeIcon, { icon: faChevronRight }), sx: { flexDirection: 'row-reverse', gap: 2 }, children: _jsx(Typography, { variant: "titleSm", children: "Advanced settings" }) }), _jsxs(AccordionDetails, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(TextField, { value: model.appUpdatePollInterval, slotProps: {
-                                    htmlInput: {
-                                        name: 'appUpdatePollInterval',
-                                        autoComplete: 'appUpdatePollInterval-auto-complete',
-                                    },
-                                }, onChange: (event) => {
-                                    onChange({
-                                        appUpdatePollInterval: parseInt(event.target.value, 10),
-                                    });
-                                }, label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                height: '1.5rem',
-                                                gap: 1,
-                                            }, children: _jsx(FontAwesomeIcon, { icon: faFileLines, fontSize: "1.15rem" }) })] }) }), _jsx(TextField, { name: "provisioningKeyName", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
-                                    htmlInput: {
-                                        name: 'provisioningKeyName',
-                                        autoComplete: 'provisioningKeyName-auto-complete',
-                                    },
-                                }, onChange: (event) => {
-                                    onChange({ provisioningKeyName: event.target.value });
-                                }, label: "Provisioning Key name" }), _jsx(TextField, { type: "date", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', slotProps: {
-                                    htmlInput: {
-                                        name: 'provisioningKeyExpiryDate',
-                                        autoComplete: 'provisioningKeyExpiryDate-auto-complete',
-                                    },
-                                }, onChange: (event) => {
-                                    onChange({ provisioningKeyExpiryDate: event.target.value });
-                                }, label: "Provisioning Key expiring on" })] })] })] }));
+                                                    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(FontAwesomeIcon, { icon: faFileLines, fontSize: "1.15rem" }) })] }) })] })] })), _jsx(Divider, { variant: "fullWidth", sx: { borderStyle: 'dashed' } }), _jsxs(Accordion, { disableGutters: true, elevation: 0, expanded: showAdvancedSettings, onChange: () => {
+                            setShowAdvancedSettings(!showAdvancedSettings);
+                        }, sx: {
+                            border: 'none',
+                            '&::before': {
+                                display: 'none',
+                            },
+                            [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: {
+                                transform: 'rotate(90deg)',
+                            },
+                        }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(FontAwesomeIcon, { icon: faChevronRight }), sx: { flexDirection: 'row-reverse', gap: 2 }, children: _jsx(Typography, { variant: "titleSm", children: "Advanced settings" }) }), _jsxs(AccordionDetails, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(TextField, { value: model.appUpdatePollInterval, slotProps: {
+                                            htmlInput: {
+                                                name: 'appUpdatePollInterval',
+                                                autoComplete: 'appUpdatePollInterval-auto-complete',
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange({ appUpdatePollInterval: Number(event.target.value) });
+                                        }, label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, 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(FontAwesomeIcon, { icon: faFileLines, fontSize: "1.15rem" }) })] }) }), _jsx(TextField, { name: "provisioningKeyName", value: (_a = model.provisioningKeyName) !== null && _a !== void 0 ? _a : '', slotProps: {
+                                            htmlInput: {
+                                                name: 'provisioningKeyName',
+                                                autoComplete: 'provisioningKeyName-auto-complete',
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange({ provisioningKeyName: event.target.value });
+                                        }, label: "Provisioning Key name" }), _jsx(TextField, { type: "date", value: (_b = model.provisioningKeyExpiryDate) !== null && _b !== void 0 ? _b : '', slotProps: {
+                                            htmlInput: {
+                                                name: 'provisioningKeyExpiryDate',
+                                                autoComplete: 'provisioningKeyExpiryDate-auto-complete',
+                                            },
+                                        }, onChange: (event) => {
+                                            onChange({ provisioningKeyExpiryDate: event.target.value });
+                                        }, label: "Provisioning Key expiring on" })] })] })] }), _jsxs(Dialog, { open: showSecureBootConfirmationDialog, onClose: () => {
+                    dismissSecureBootWarning(false, dontShowSecureBootWarningAgain);
+                }, 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: () => {
+                                    dismissSecureBootWarning(false, dontShowSecureBootWarningAgain);
+                                }, variant: "outlined", color: "secondary", children: "Cancel" }), _jsx(Button, { "aria-label": "Acknowledge Secure Boot and Full Disk Encryption warning", onClick: () => {
+                                    onChange({ secureboot: true });
+                                    if (dontShowSecureBootWarningAgain) {
+                                        setToLocalStorage(secureBootDontShowAgainKey, 'true');
+                                    }
+                                    dismissSecureBootWarning(true, dontShowSecureBootWarningAgain);
+                                }, 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/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, DialogActions, DialogContent, Divider, Grid2 as Grid, Stack, 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 pickBy from 'lodash/pickBy';
@@ -16,6 +16,7 @@ import { Callout } from '../Callout';
 import { Spinner } from '../Spinner';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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;
@@ -65,6 +66,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(updatedProps.deviceType, applicationId, releaseId);
         }
         else {
-            newFormModelState = Object.assign(Object.assign({}, formModel), updatedProps);
+            newFormModelState = Object.assign(Object.assign(Object.assign({}, formModel), { secureboot: 'version' in updatedProps &&
+                    formModel.deviceType.slug === GENERIC_X86_SLUG &&
+                    semver.lt(updatedProps['version'], GENERIC_X86_MINIMUM_SUPPORTED_SECUREBOOT_VERSION)
+                    ? false
+                    : formModel.secureboot }), updatedProps);
             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, { children: _jsx(DropDownButton, { className: "e2e-download-image-submit", items: actions, disabled: isValidatingUrl }) })] }));
 };

package/dist/components/RJST/Actions/Tags.js

@@ -8,7 +8,6 @@ import { useQuery } from '@tanstack/react-query';
 import { Spinner } from '../../Spinner';
 import { TagManagementDialog } from '../../TagManagementDialog';
 export const Tags = ({ selected, rjstContext, schema, setIsBusyMessage, refresh, onDone, }) => {
-    var _a;
     const { t } = useTranslation();
     const { sdk, internalPineFilter, checkedState } = rjstContext;
     const getAllTags = (sdk === null || sdk === void 0 ? void 0 : sdk.tags) && 'getAll' in sdk.tags ? sdk.tags.getAll : null;
@@ -82,10 +81,7 @@ export const Tags = ({ selected, rjstContext, schema, setIsBusyMessage, refresh,
     if (!rjstContext.tagField || !rjstContext.nameField || !items) {
         return null;
     }
-    const tagSchema = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[rjstContext.tagField];
-    return (_jsx(Spinner, { show: isPending, sx: { width: '100%', height: '100%' }, children: _jsx(TagManagementDialog, { items: items, itemType: rjstContext.resource, titleField: getItemName !== null && getItemName !== void 0 ? getItemName : rjstContext.nameField, tagField: rjstContext.tagField, tagSchema: tagSchema != null && typeof tagSchema === 'object'
-                ? tagSchema
-                : undefined, done: async (tagSubmitInfo) => {
+    return (_jsx(Spinner, { show: isPending, sx: { width: '100%', height: '100%' }, children: _jsx(TagManagementDialog, { items: items, itemType: rjstContext.resource, titleField: getItemName !== null && getItemName !== void 0 ? getItemName : rjstContext.nameField, tagField: rjstContext.tagField, done: async (tagSubmitInfo) => {
                 await changeTags(tagSubmitInfo);
                 onDone();
             }, cancel: () => {

package/dist/components/TagManagementDialog/AddTagForm.d.ts

@@ -1,16 +1,11 @@
 import type { ResourceTagInfo } from './models';
-import type { JSONSchema7 as JSONSchema } from 'json-schema';
+import type { TFunction } from '../../hooks/useTranslations';
 interface AddTagFormProps<T> {
+    t: TFunction;
     itemType: string;
-    /**
-     * This is atm only used for constraint validation,
-     * but in the future it would be great if this becomes mandatory
-     * and we use an autogenerated form.
-     */
-    schema?: JSONSchema;
     existingTags: Array<ResourceTagInfo<T>>;
     overridableTags?: Array<ResourceTagInfo<T>>;
     addTag: (tag: ResourceTagInfo<T>) => void;
 }
-export declare const AddTagForm: <T extends object>({ itemType, schema, existingTags, overridableTags, addTag, }: AddTagFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const AddTagForm: <T extends object>({ itemType, existingTags, overridableTags, addTag, }: AddTagFormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TagManagementDialog/AddTagForm.js

@@ -10,63 +10,33 @@ import { stopKeyDownEvent, withPreventDefault, } from '../../utils/eventHandling
 import { SimpleConfirmationDialog, } from '../SimpleConfirmationDialog';
 import { useRandomUUID } from '../../hooks/useRandomUUID';
 const RESERVED_NAMESPACES = ['io.resin.', 'io.balena.'];
-const newTagValidationRules = (t, schema, existingTags, key, value) => {
-    var _a, _b;
-    const tagKeySchema = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a.tag_key;
-    const tagValueSchema = (_b = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _b === void 0 ? void 0 : _b.value;
-    const tagKeyMaxLength = tagKeySchema != null && typeof tagKeySchema === 'object'
-        ? tagKeySchema.maxLength
-        : null;
-    const tagValueMaxLength = tagValueSchema != null && typeof tagValueSchema === 'object'
-        ? tagValueSchema.maxLength
-        : null;
+const newTagValidationRules = (t, key, existingTags) => {
     return [
         {
             test: () => !key || isEmpty(key),
-            field: 'tag_key',
             message: t('fields_errors.tag_name_cannot_be_empty'),
         },
         {
             test: () => /\s/.test(key),
-            field: 'tag_key',
             message: t('fields_errors.tag_names_cannot_contain_whitespace'),
         },
         {
             test: () => RESERVED_NAMESPACES.some((reserved) => startsWith(key, reserved)),
-            field: 'tag_key',
             message: t(`fields_errors.some_tag_keys_are_reserved`, {
                 namespace: RESERVED_NAMESPACES.join(', '),
             }),
         },
         {
             test: () => existingTags.some((tag) => tag.state !== 'deleted' && tag.tag_key === key),
-            field: 'tag_key',
             message: t('fields_errors.tag_with_same_name_exists'),
         },
-        ...(tagKeyMaxLength != null
-            ? [
-                {
-                    test: () => key.length > tagKeyMaxLength,
-                    field: 'tag_key',
-                    message: t('fields_errors.tag_name_cannot_longer_than_maximum_characters', { maximum: tagKeyMaxLength }),
-                },
-            ]
-            : []),
-        ...(tagValueMaxLength != null
-            ? [
-                {
-                    test: () => value.length > tagValueMaxLength,
-                    field: 'value',
-                    message: t('fields_errors.tag_value_cannot_longer_than_maximum_characters', { maximum: tagValueMaxLength }),
-                },
-            ]
-            : []),
     ];
 };
-export const AddTagForm = ({ itemType, schema, existingTags, overridableTags = [], addTag, }) => {
+export const AddTagForm = ({ itemType, existingTags, overridableTags = [], addTag, }) => {
     const { t } = useTranslation();
     const [tagKey, setTagKey] = React.useState('');
     const [value, setValue] = React.useState('');
+    const [tagKeyIsInvalid, setTagKeyIsInvalid] = React.useState(false);
     const [error, setError] = React.useState();
     const [canSubmit, setCanSubmit] = React.useState(false);
     const [confirmationDialogOptions, setConfirmationDialogOptions] = React.useState();
@@ -75,8 +45,9 @@ export const AddTagForm = ({ itemType, schema, existingTags, overridableTags = [
     const formId = useRandomUUID();
     const formUuid = `add-tag-form-${formId}`;
     const checkNewTagValidity = (key) => {
-        const failedRule = newTagValidationRules(t, schema, existingTags, key, value).find((rule) => rule.test());
+        const failedRule = newTagValidationRules(t, key, existingTags).find((rule) => rule.test());
         const hasErrors = !!failedRule;
+        setTagKeyIsInvalid(hasErrors);
         setError(failedRule);
         setCanSubmit(!hasErrors);
         return hasErrors;
@@ -121,6 +92,7 @@ export const AddTagForm = ({ itemType, schema, existingTags, overridableTags = [
             });
             setTagKey('');
             setValue('');
+            setTagKeyIsInvalid(false);
             setError(undefined);
             setCanSubmit(false);
             if (tagKeyInput === null || tagKeyInput === void 0 ? void 0 : tagKeyInput.current) {
@@ -140,13 +112,13 @@ export const AddTagForm = ({ itemType, schema, existingTags, overridableTags = [
                         }, fullWidth: true, ref: tagKeyInput, onChange: (e) => {
                             setTagKey(e.target.value);
                             checkNewTagValidity(e.target.value);
-                        }, value: tagKey, error: (error === null || error === void 0 ? void 0 : error.field) === 'tag_key', placeholder: t('labels.tag_name') }), _jsx(TextField, { slotProps: {
+                        }, value: tagKey, error: tagKeyIsInvalid, placeholder: t('labels.tag_name') }), _jsx(TextField, { slotProps: {
                             htmlInput: {
                                 form: formUuid,
                             },
                         }, fullWidth: true, ref: valueInput, onChange: (e) => {
                             setValue(e.target.value);
-                        }, value: value, error: (error === null || error === void 0 ? void 0 : error.field) === 'value', placeholder: t('labels.value') }), _jsx("form", { id: formUuid, onSubmit: internalAddTag, children: _jsx(Button, { sx: {
+                        }, value: value, placeholder: t('labels.value') }), _jsx("form", { id: formUuid, onSubmit: internalAddTag, children: _jsx(Button, { sx: {
                                 width: 120,
                             }, onClick: internalAddTag, disabled: !canSubmit, children: t('actions.add_tag') }) }), confirmationDialogOptions && (_jsx(SimpleConfirmationDialog, Object.assign({}, confirmationDialogOptions)))] }), error && _jsx(Callout, { severity: "danger", children: error.message })] }));
 };

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

@@ -1,4 +1,3 @@
-import type { JSONSchema7 as JSONSchema } from 'json-schema';
 import type { ResourceTagSubmitInfo, SubmitInfo, TaggedResource } from './models';
 export interface TagManagementDialogProps<T> {
     /** Selected items to tag */
@@ -9,11 +8,9 @@ export interface TagManagementDialogProps<T> {
     titleField: keyof T | ((item: T) => string);
     /** Tags property in the selected item */
     tagField: keyof T;
-    /** The schema of the tag resource */
-    tagSchema?: JSONSchema;
     /** On cancel press event */
     cancel: () => void;
     /** On done press event */
     done: (tagSubmitInfo: SubmitInfo<ResourceTagSubmitInfo, ResourceTagSubmitInfo>) => void;
 }
-export declare const TagManagementDialog: <T extends TaggedResource>({ items, itemType, titleField, tagField, tagSchema, cancel, done, }: TagManagementDialogProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TagManagementDialog: <T extends TaggedResource>({ items, itemType, titleField, tagField, cancel, done, }: TagManagementDialogProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TagManagementDialog/index.js

@@ -98,16 +98,11 @@ const PreviousTagProperty = styled(TagProperty) `
 		}
 	}
 `;
-export const TagManagementDialog = ({ items, itemType, titleField, tagField, tagSchema, cancel, done, }) => {
-    var _a;
+export const TagManagementDialog = ({ items, itemType, titleField, tagField, cancel, done, }) => {
     const { t } = useTranslation();
     const [editingTag, setEditingTag] = React.useState();
     const [tags, setTags] = React.useState();
     const [partialTags, setPartialTags] = React.useState();
-    const tagValueSchema = (_a = tagSchema === null || tagSchema === void 0 ? void 0 : tagSchema.properties) === null || _a === void 0 ? void 0 : _a.value;
-    const tagValueMaxLength = tagValueSchema != null && typeof tagValueSchema === 'object'
-        ? tagValueSchema.maxLength
-        : null;
     const tagDiffs = React.useMemo(() => getResourceTagSubmitInfo(tags !== null && tags !== void 0 ? tags : []), [tags]);
     React.useEffect(() => {
         const allTags = groupResourcesByTags(items, tagField);
@@ -196,7 +191,7 @@ export const TagManagementDialog = ({ items, itemType, titleField, tagField, tag
             : toString(item[titleField]);
         return title || `(${t('no_data.no_name_set')})`;
     };
-    return (_jsxs(DialogWithCloseButton, { open: true, title: _jsxs(Stack, { children: [_jsxs(Typography, { variant: "h3", mt: 0, mb: 10, children: [items.length > 1 && _jsxs("span", { children: [t('labels.shared'), " "] }), t('labels.tags')] }), _jsx(CollectionSummary, { items: items.map(getItemTitle).sort(), itemsType: t('resource.' + itemType, { count: items.length }), maxVisibleItemCount: 10 })] }), children: [_jsxs(DialogContent, { children: [_jsx(AddTagForm, { itemType: itemType, schema: tagSchema, existingTags: tags, overridableTags: partialTags, addTag: addTag }), _jsxs(Table, { children: [_jsxs(TableHead, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t('labels.tag_name') }), _jsx(TableCell, { children: t('labels.value') }), _jsx(TableCell, {})] }), _jsx(TableBody, { children: !tags.length ? (_jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t(`errors.no_tags_for_selected_itemtype`, {
+    return (_jsxs(DialogWithCloseButton, { open: true, title: _jsxs(Stack, { children: [_jsxs(Typography, { variant: "h3", mt: 0, mb: 10, children: [items.length > 1 && _jsxs("span", { children: [t('labels.shared'), " "] }), t('labels.tags')] }), _jsx(CollectionSummary, { items: items.map(getItemTitle).sort(), itemsType: t('resource.' + itemType, { count: items.length }), maxVisibleItemCount: 10 })] }), children: [_jsxs(DialogContent, { children: [_jsx(AddTagForm, { itemType: itemType, existingTags: tags, overridableTags: partialTags, addTag: addTag, t: t }), _jsxs(Table, { children: [_jsxs(TableHead, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t('labels.tag_name') }), _jsx(TableCell, { children: t('labels.value') }), _jsx(TableCell, {})] }), _jsx(TableBody, { children: !tags.length ? (_jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { children: t(`errors.no_tags_for_selected_itemtype`, {
                                                 count: items.length,
                                                 itemType,
                                             }) })] })) : (tags.map((tag) => {
@@ -221,9 +216,7 @@ export const TagManagementDialog = ({ items, itemType, titleField, tagField, tag
                                                             setEditingTagValue(e.target.value);
                                                         }, onBlur: () => {
                                                             endTagEdit();
-                                                        }, value: editingTag.value, placeholder: t('labels.tag_value'), inputProps: tagValueMaxLength != null
-                                                            ? { maxLength: tagValueMaxLength }
-                                                            : undefined }))] }), _jsx(TableCell, { children: tag.state && (_jsx(Button, { variant: "text", startIcon: _jsx(FontAwesomeIcon, { icon: faUndo }), onClick: () => {
+                                                        }, value: editingTag.value, placeholder: t('labels.tag_value') }))] }), _jsx(TableCell, { children: tag.state && (_jsx(Button, { variant: "text", startIcon: _jsx(FontAwesomeIcon, { icon: faUndo }), onClick: () => {
                                                         undoTagChanges(tag);
                                                     }, sx: {
                                                         width: UndoButtonMinWidth,

package/dist/hooks/useTranslations.js

@@ -31,8 +31,6 @@ const translationMap = {
     'errors.no_tags_for_selected_itemtype_plural': 'The selected {{itemType}}s have no tags in common',
     'fields_errors.tag_name_cannot_be_empty': "The tag name can't be empty.",
     'fields_errors.tag_names_cannot_contain_whitespace': 'Tag names cannot contain whitespace',
-    'fields_errors.tag_name_cannot_longer_than_maximum_characters': `The tag name can't be longer than {{maximum}} characters.`,
-    'fields_errors.tag_value_cannot_longer_than_maximum_characters': `The tag value can't be longer than {{maximum}} characters.`,
     'fields_errors.some_tag_keys_are_reserved': 'Tag names beginning with {{namespace}} are reserved',
     'fields_errors.tag_with_same_name_exists': 'A tag with the same name already exists',
     'fields_errors.does_not_satisfy_minimum': 'Must be greater than or equal to {{minimum}}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "14.1.0-build-limit-field-lengths-2d063da12c2b1e3b691fc126191269d24d81aae1-1",
+  "version": "14.1.0-build-secure-boot-backup-4d430fef3bc217d76b648ea38883d1b586f61a8a-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -32,6 +32,7 @@
     "ajv-formats": "^3.0.1",
     "ajv-keywords": "^5.1.0",
     "analytics-client": "^3.1.2",
+    "balena-semver": "^3.0.10",
     "color": "^5.0.0",
     "color-hash": "^2.0.2",
     "date-fns": "^4.1.0",
@@ -54,7 +55,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@balena/lint": "^9.3.0",
+    "@balena/lint": "^9.3.8",
     "@storybook/addon-docs": "^9.0.0",
     "@storybook/addon-links": "^9.0.0",
     "@storybook/addon-onboarding": "^9.0.0",
@@ -132,7 +133,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-09-15T12:30:23.623Z"
+    "publishedAt": "2025-09-30T12:29:36.790Z"
   },
   "overrides": {
     "storybook": "$storybook"