@balena/ui-shared-components 12.3.2-build-download-image-dialog-improvements-460d9435e9fc3dcba5aa22ce4299f073e927e781-1 → 12.3.2-build-reduced-default-device-columns-experiment-d2dd6a507d829c022f95ee1c2c8afe98b21a6985-1

package/dist/components/DownloadImageDialog/ImageForm.js

@@ -1,17 +1,19 @@
 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, Button, Checkbox, Chip, Collapse, Divider, FormControl, FormControlLabel, FormLabel, InputAdornment, InputLabel, Radio, RadioGroup, TextField, Tooltip, Typography, IconButton, Autocomplete, Stack, } 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 { faChevronRight, faTriangleExclamation, } from '@fortawesome/free-solid-svg-icons';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { Callout } from '../Callout';
 import { token } from '../../utils/token';
 const POLL_INTERVAL_DOCS = 'https://www.balena.io/docs/reference/supervisor/bandwidth-reduction/#side-effects--warnings';
@@ -97,47 +99,43 @@ 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(HelpIcon, { color: "info", sx: { 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) &&
+    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(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) => {
+                        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(Stack, { gap: 3, children: [_jsx(TextField, { value: model.wifiSsid, id: "device-wifi-ssid", slotProps: {
+                                }, 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);
-                                }, label: "WiFi SSID" }), _jsx(TextField, { type: showPassword ? 'text' : 'password', id: "device-wifi-password", value: model.wifiKey, slotProps: {
+                                } }), _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',
                                     },
@@ -151,42 +149,34 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
                                     },
                                 }, 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: () => {
+                                } })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => {
                     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', event.target.value);
-                                }, label: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, { href: POLL_INTERVAL_DOCS, sx: {
+                }, 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, { 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" })] })] })] }));
+                                            }, 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);
+                            } })] }) })] }));
 });
 // TODO: We need a better way than just copying the styling. Consider creating a component to export
 const VersionSelectItem = ({ option, isRecommended, }) => {

package/dist/components/DownloadImageDialog/OsTypeSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, InputLabel, MenuItem, Select, Tooltip, Typography, Stack, } from '@mui/material';
+import { Box, InputLabel, MenuItem, Select, Tooltip, Typography, } from '@mui/material';
 import { getOsTypeName } from './utils';
 import ArticleIcon from '@mui/icons-material/Article';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
@@ -30,12 +30,12 @@ export const OsTypeSelector = ({ supportedOsTypes, hasEsrVersions, selectedOsTyp
         };
     });
     const selectedOsType = selectOsTypes.find((osType) => osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType);
-    return (_jsxs(Stack, { flex: 1, children: [_jsx(Stack, { direction: "row", alignItems: "center", gap: 1, children: _jsxs(InputLabel, { id: "newAppApplicationType-label", sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: ["OS type", _jsx(MUILinkWithTracking, { sx: { height: 12 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release", children: _jsx(ArticleIcon, { sx: { fontSize: '1rem' } }) })] }) }), _jsx(Select, { id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_a = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _a !== void 0 ? _a : OsTypesEnum.DEFAULT, renderValue: (selected) => (_jsx(Box, { display: "flex", width: "100%", children: _jsx(OsTypeOption, { osType: selectOsTypes.find((osType) => selected === osType.slug) }) })), onChange: (event) => {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, children: [_jsxs(InputLabel, { htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 }, children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, { sx: { height: 14 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release", children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) })] }), _jsx(Select, { id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_a = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _a !== void 0 ? _a : OsTypesEnum.DEFAULT, renderValue: (selected) => (_jsx(Box, { display: "flex", width: "100%", children: _jsx(OsTypeOption, { osType: selectOsTypes.find((osType) => selected === osType.slug) }) })), onChange: (event) => {
                     const osType = selectOsTypes.find((os) => os.slug === event.target.value);
                     if (!osType.disabled) {
                         onSelectedOsTypeChange(osType.slug);
                     }
-                }, sx: { flex: 1 }, children: selectOsTypes.map((option) => (
+                }, children: selectOsTypes.map((option) => (
                 // TODO: Consider adding a tooltip for the disabled options
                 _jsx(MenuItem, { value: option.slug, disabled: option.disabled, children: _jsx(OsTypeOption, { osType: option }) }, option.slug))) })] }));
 };

package/dist/components/DownloadImageDialog/VariantSelector.js

@@ -1,30 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, Tooltip, Typography, } from '@mui/material';
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography, } from '@mui/material';
 import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { getOsVariantDisplayText } from './utils';
 import { Lightbulb } from '@mui/icons-material';
 import { token } from '../../utils/token';
-import { Callout } from '../Callout';
-const variantInfo = (selected) => ({
+const variantInfo = {
     dev: {
-        title: (_jsxs(Stack, { gap: 1, direction: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: token('color.text.accent'), alignItems: "center", display: "flex", children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] })] })),
-        description: (_jsxs(Stack, { gap: 1, children: [_jsxs(Typography, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, { href: "https://balena.io/docs/development/local-mode/", children: "local mode" }), ' ', "workflow."] }), selected === 'dev' && (_jsxs(Callout, { severity: "warning", size: "sm", children: ["This variant should never be used in production for security reasons.", ' ', _jsx(MUILinkWithTracking, { href: "https://docs.balena.io/reference/OS/overview/#development-vs-production-mode", children: "Learn more" }), "."] }))] })),
+        title: (_jsxs(Box, { display: "flex", gap: 1, flexDirection: "row", alignItems: "center", children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, { variant: "bodySm", color: token('color.text'), alignItems: "center", display: "flex", children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] })] })),
+        description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, { href: "https://balena.io/docs/development/local-mode/", children: "local mode" }), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
     },
     prod: {
         title: _jsx(Typography, { children: getOsVariantDisplayText('prod') }),
         description: (_jsx(_Fragment, { children: "Production images are ready for production deployments, but don't offer easy access for local development." })),
     },
-});
+};
 const BuildVariants = ['dev', 'prod'];
 export const VariantSelector = ({ version, variant, onVariantChange, }) => {
-    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(Typography, { variant: "titleSm", children: "Edition" }) }), _jsx(RadioGroup, { "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
+    return (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Select edition" }), _jsx(RadioGroup, { "aria-labelledby": "variant-radio-buttons-group", name: "developmentMode", value: variant === 'dev', onChange: (event) => {
                     onVariantChange(event.target.value === 'true');
-                }, sx: { gap: 2 }, children: BuildVariants.map((buildVariant, index) => {
+                }, children: BuildVariants.map((buildVariant, index) => {
                     const isDev = buildVariant === 'dev';
                     const isDisabled = version == null ||
                         (version.hasPrebuiltVariants && !version.rawVersions[buildVariant]);
                     return (_jsx(Tooltip, { title: isDisabled
                             ? 'This edition is not available for the selected version'
-                            : undefined, children: _jsxs(Stack, { children: [_jsx(FormControlLabel, { sx: { opacity: isDisabled ? 0.4 : 1 }, disabled: isDisabled, value: isDev, control: _jsx(Radio, {}), label: variantInfo(variant)[buildVariant].title }), _jsx(Typography, { sx: { opacity: isDisabled ? 0.4 : 1 }, variant: "bodySm", children: variantInfo(variant)[buildVariant].description })] }) }, index));
-                }) }, "variant")] }));
+                            : undefined, children: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(FormControlLabel, { sx: { opacity: isDisabled ? 0.4 : 1 }, disabled: isDisabled, value: isDev, control: _jsx(Radio, {}), label: variantInfo[buildVariant].title }), _jsx(Typography, { sx: { opacity: isDisabled ? 0.4 : 1 }, variant: "bodySm", children: variantInfo[buildVariant].description })] }) }, index));
+                }) }, "varian")] }));
 };

package/dist/components/DownloadImageDialog/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, DialogActions, DialogContent, Divider, Grid2 as Grid, Stack, Typography, } from '@mui/material';
+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';
@@ -253,7 +253,7 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
         }
         setFormModel(newFormModelState);
     }, [formModel, applicationId, releaseId, onFieldChange]);
-    return (_jsxs(DialogWithCloseButton, { title: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 2, children: [_jsx(Avatar, { variant: "square", alt: defaultDisplayName, src: (_c = (_b = formModel.deviceType) === null || _b === void 0 ? void 0 : _b.logo) !== null && _c !== void 0 ? _c : FALLBACK_LOGO_UNKNOWN_DEVICE }), _jsx(Typography, { variant: "h5", children: "Add new device" })] }), open: open, onClose: onClose, maxWidth: "lg", fullWidth: true, children: [_jsx(DialogContent, { children: _jsx(Spinner, { show: isValidatingUrl, children: _jsxs(Grid, { container: true, spacing: [0, 0, 4], children: [_jsx(Grid, { size: {
+    return (_jsxs(DialogWithCloseButton, { title: _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Avatar, { variant: "square", alt: defaultDisplayName, src: (_c = (_b = formModel.deviceType) === null || _b === void 0 ? void 0 : _b.logo) !== null && _c !== void 0 ? _c : FALLBACK_LOGO_UNKNOWN_DEVICE, sx: { mr: 2 } }), _jsx(Typography, { variant: "h5", children: "Add new device" })] }), open: open, onClose: onClose, maxWidth: "lg", fullWidth: true, sx: { p: 4 }, children: [_jsx(DialogContent, { sx: { m: 0 }, children: _jsx(Spinner, { show: isValidatingUrl, children: _jsxs(Grid, { container: true, pb: 5, spacing: [0, 0, 4], children: [_jsx(Grid, { size: {
                                     xs: 12,
                                     sm: 12,
                                     md: 6,
@@ -277,5 +277,11 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
                                                 : '',
                                         } })] }), ((_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 }) })] }));
+                            })] }) }) }), _jsx(DialogActions, { sx: {
+                    display: 'flex',
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0,
+                    justifyContent: 'end',
+                }, children: _jsx(DropDownButton, { className: "e2e-download-image-submit", items: actions, disabled: isValidatingUrl }) })] }));
 };

package/dist/components/RJST/Lenses/types/index.d.ts

@@ -24,4 +24,5 @@ export interface CollectionLensRendererProps<T extends {
     onSort?: (sort: TableSortOptions<T>) => void;
     pagination: Pagination;
     rowKey?: keyof T;
+    useExperimentalReducedColumnLocalStorageKeyPrefix?: boolean;
 }

package/dist/components/RJST/Lenses/types/table.js

@@ -84,9 +84,9 @@ const sortData = (data, columns, sort) => {
     }
     return sortedData;
 };
-const TableRenderer = ({ filtered, selected, properties, hasUpdateActions, checkedState, changeSelected, data, rjstContext, onEntityClick, onPageChange, onSort, pagination, model, sort, rowKey = 'id', }) => {
+const TableRenderer = ({ filtered, selected, properties, hasUpdateActions, checkedState, changeSelected, data, rjstContext, onEntityClick, onPageChange, onSort, pagination, model, sort, rowKey = 'id', useExperimentalReducedColumnLocalStorageKeyPrefix, }) => {
     const { state: analytics } = useAnalyticsContext();
-    const [columns, setColumns] = useColumns(rjstContext.resource, properties, tagKeyRender);
+    const [columns, setColumns] = useColumns(rjstContext.resource, properties, tagKeyRender, useExperimentalReducedColumnLocalStorageKeyPrefix);
     const { actions, showAddTagDialog, setShowAddTagDialog, tagKeys } = useTagActions(rjstContext, data);
     const memoizedPagination = React.useMemo(() => {
         var _a, _b;

package/dist/components/RJST/components/Table/useColumns.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { TagField } from './utils';
 import type { RJSTEntityPropertyDefinition } from '../../schemaOps';
 export declare const TAG_COLUMN_PREFIX = "tag_column_";
-export declare function useColumns<T>(resourceName: string, defaultColumns: Array<RJSTEntityPropertyDefinition<T>>, tagKeyRender: (key: string) => (tags: TagField[] | undefined) => React.ReactElement | null): readonly [{
+export declare function useColumns<T>(resourceName: string, defaultColumns: Array<RJSTEntityPropertyDefinition<T>>, tagKeyRender: (key: string) => (tags: TagField[] | undefined) => React.ReactElement | null, useExperimentalReducedColumnLocalStorageKeyPrefix?: boolean): readonly [{
     render: ((tags: TagField[] | undefined) => React.ReactElement | null) | ((value: any, row: T) => string | number | JSX.Element | null | undefined);
     selected: boolean;
     index: number;

package/dist/components/RJST/components/Table/useColumns.js

@@ -1,10 +1,14 @@
 import { useState, useEffect } from 'react';
 import { getFromLocalStorage, setToLocalStorage } from '../../utils';
+import { useAnalyticsContext } from '../../../../contexts/AnalyticsContext';
 export const TAG_COLUMN_PREFIX = 'tag_column_';
+const EXPERIMENTAL_REDUCED_DEFAULT_COLUMNS_PREFIX = 'experimental_reduced_default__';
 // Move columns logic inside a dedicated hook to make the refactor easier and move this logic without effort.
-export function useColumns(resourceName, defaultColumns, tagKeyRender) {
+export function useColumns(resourceName, defaultColumns, tagKeyRender, useExperimentalReducedColumnLocalStorageKeyPrefix) {
+    var _a;
+    const { state: analyticsState } = useAnalyticsContext();
     const [columns, setColumns] = useState(() => {
-        const storedColumns = getFromLocalStorage(`${resourceName}__columns`);
+        const storedColumns = getFromLocalStorage(`${useExperimentalReducedColumnLocalStorageKeyPrefix ? EXPERIMENTAL_REDUCED_DEFAULT_COLUMNS_PREFIX : ''}${resourceName}__columns`);
         if (storedColumns) {
             const storedColumnsMap = new Map(storedColumns.map((s) => [s.key, s]));
             const tagColumns = storedColumns.filter((c) => c.key.startsWith(TAG_COLUMN_PREFIX));
@@ -26,7 +30,11 @@ export function useColumns(resourceName, defaultColumns, tagKeyRender) {
         }
     });
     useEffect(() => {
-        setToLocalStorage(`${resourceName}__columns`, columns.map((c) => (Object.assign(Object.assign({}, c), { label: typeof c.label === 'string' ? c.label : null }))));
-    }, [resourceName, columns]);
+        setToLocalStorage(`${useExperimentalReducedColumnLocalStorageKeyPrefix ? EXPERIMENTAL_REDUCED_DEFAULT_COLUMNS_PREFIX : ''}${resourceName}__columns`, columns.map((c) => (Object.assign(Object.assign({}, c), { label: typeof c.label === 'string' ? c.label : null }))));
+    }, [
+        resourceName,
+        columns,
+        (_a = analyticsState.featureFlags) === null || _a === void 0 ? void 0 : _a.reducedDefaultDeviceColumns,
+    ]);
     return [columns, setColumns];
 }

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

@@ -56,6 +56,7 @@ export interface RJSTProps<T> extends Omit<BoxProps, 'onChange'> {
     rowKey?: keyof T;
     noDataInfo?: NoDataInfo;
     persistFilters?: boolean;
+    useExperimentalReducedColumnLocalStorageKeyPrefix?: boolean;
 }
-export declare const RJST: <T extends RJSTBaseResource<T>>({ model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading, rowKey, noDataInfo, persistFilters, ...boxProps }: RJSTProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const RJST: <T extends RJSTBaseResource<T>>({ model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading, rowKey, noDataInfo, persistFilters, useExperimentalReducedColumnLocalStorageKeyPrefix, ...boxProps }: RJSTProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };

package/dist/components/RJST/index.js

@@ -37,7 +37,7 @@ const HeaderGrid = styled(Box)(({ theme }) => ({
 // any typing we have in lenses today.
 export const RJST = (_a) => {
     var _b, _c, _d, _e, _f;
-    var { model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading = false, rowKey, noDataInfo, persistFilters = true } = _a, boxProps = __rest(_a, ["model", "data", "formats", "actions", "sdk", "customSort", "refresh", "getBaseUrl", "onEntityClick", "onChange", "pagination", "customLenses", "loading", "rowKey", "noDataInfo", "persistFilters"]);
+    var { model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading = false, rowKey, noDataInfo, persistFilters = true, useExperimentalReducedColumnLocalStorageKeyPrefix } = _a, boxProps = __rest(_a, ["model", "data", "formats", "actions", "sdk", "customSort", "refresh", "getBaseUrl", "onEntityClick", "onChange", "pagination", "customLenses", "loading", "rowKey", "noDataInfo", "persistFilters", "useExperimentalReducedColumnLocalStorageKeyPrefix"]);
     const { t } = useTranslation();
     const { state: analytics } = useAnalyticsContext();
     const navigate = useNavigate();
@@ -269,7 +269,7 @@ export const RJST = (_a) => {
                                 page: currentPage,
                                 itemsPerPage,
                             });
-                        }, pagination: Object.assign(Object.assign({}, (pagination !== null && pagination !== void 0 ? pagination : {})), internalPagination), rowKey: rowKey })), (_f = (_e = actionData === null || actionData === void 0 ? void 0 : actionData.action) === null || _e === void 0 ? void 0 : _e.renderer) === null || _f === void 0 ? void 0 : _f.call(_e, {
+                        }, pagination: Object.assign(Object.assign({}, (pagination !== null && pagination !== void 0 ? pagination : {})), internalPagination), rowKey: rowKey, useExperimentalReducedColumnLocalStorageKeyPrefix: useExperimentalReducedColumnLocalStorageKeyPrefix })), (_f = (_e = actionData === null || actionData === void 0 ? void 0 : actionData.action) === null || _e === void 0 ? void 0 : _e.renderer) === null || _f === void 0 ? void 0 : _f.call(_e, {
                         schema: actionData.schema,
                         affectedEntries: actionData.affectedEntries,
                         onDone: () => {

package/dist/theme.js

@@ -227,16 +227,6 @@ export const theme = createTheme({
         full: shape.borderRadius.full.value,
     },
     components: {
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: { paddingLeft: 0, paddingRight: 0 },
-            },
-        },
-        MuiAccordionDetails: {
-            styleOverrides: {
-                root: { paddingLeft: 0, paddingRight: 0 },
-            },
-        },
         MuiAlert: {
             defaultProps: {
                 iconMapping: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "12.3.2-build-download-image-dialog-improvements-460d9435e9fc3dcba5aa22ce4299f073e927e781-1",
+  "version": "12.3.2-build-reduced-default-device-columns-experiment-d2dd6a507d829c022f95ee1c2c8afe98b21a6985-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -138,6 +138,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-04-18T15:47:01.137Z"
+    "publishedAt": "2025-04-21T12:54:48.977Z"
   }
 }