@balena/ui-shared-components 12.3.2-build-reduced-default-device-columns-experiment-d2dd6a507d829c022f95ee1c2c8afe98b21a6985-1 → 12.3.2-build-fix-non-unified-os-release-variant-selection-c6aa80ca41df6028f60420084ff0be1ab0a19b9b-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DownloadImageDialog/ImageForm.d.ts +1 -1
- package/dist/components/DownloadImageDialog/ImageForm.js +32 -18
- package/dist/components/DownloadImageDialog/index.js +4 -4
- package/dist/components/RJST/Lenses/types/index.d.ts +0 -1
- package/dist/components/RJST/Lenses/types/table.js +2 -2
- package/dist/components/RJST/components/Table/useColumns.d.ts +1 -1
- package/dist/components/RJST/components/Table/useColumns.js +4 -12
- package/dist/components/RJST/index.d.ts +1 -2
- package/dist/components/RJST/index.js +2 -2
- package/package.json +2 -2
|
@@ -14,7 +14,7 @@ interface ImageFormProps {
|
|
|
14
14
|
model: DownloadImageFormModel;
|
|
15
15
|
hasEsrVersions?: boolean;
|
|
16
16
|
onSelectedOsTypeChange: (osType: string) => void;
|
|
17
|
-
onChange: (
|
|
17
|
+
onChange: (obj: Partial<DownloadImageFormModel>) => void;
|
|
18
18
|
}
|
|
19
19
|
export declare const ImageForm: import("react").NamedExoticComponent<ImageFormProps>;
|
|
20
20
|
export {};
|
|
@@ -46,25 +46,37 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
|
|
|
46
46
|
const { selectionOpts, preferredSelectionOpts } = useMemo(() => getCategorizedVersions(osVersions, model.deviceType, osType), [osVersions, model.deviceType, osType]);
|
|
47
47
|
const versionSelectionOpts = useMemo(() => (showAllVersions ? selectionOpts : preferredSelectionOpts), [preferredSelectionOpts, selectionOpts, showAllVersions]);
|
|
48
48
|
const showAllVersionsToggle = useMemo(() => preferredSelectionOpts.length < selectionOpts.length, [preferredSelectionOpts.length, selectionOpts.length]);
|
|
49
|
-
const handleVariantChange = useCallback((
|
|
50
|
-
setVariant(
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
const handleVariantChange = useCallback((newVariant) => {
|
|
50
|
+
setVariant(newVariant);
|
|
51
|
+
const newState = {
|
|
52
|
+
developmentMode: newVariant === 'dev',
|
|
53
|
+
};
|
|
54
|
+
if (version === null || version === void 0 ? void 0 : version.hasPrebuiltVariants) {
|
|
55
|
+
const rawVersionForVariant = version.rawVersions[newVariant];
|
|
56
|
+
if (rawVersionForVariant != null) {
|
|
57
|
+
newState.version = rawVersionForVariant;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
onChange(newState);
|
|
61
|
+
}, [onChange, version]);
|
|
53
62
|
const handleVersionChange = useCallback((ver) => {
|
|
54
63
|
var _a;
|
|
55
64
|
ver !== null && ver !== void 0 ? ver : (ver = (_a = versionSelectionOpts.find((v) => v.isRecommended)) !== null && _a !== void 0 ? _a : versionSelectionOpts[0]);
|
|
65
|
+
const newState = {
|
|
66
|
+
developmentMode: variant === 'dev',
|
|
67
|
+
};
|
|
56
68
|
if (ver === null || ver === void 0 ? void 0 : ver.hasPrebuiltVariants) {
|
|
57
69
|
const rawVersionForVariant = ver.rawVersions[variant];
|
|
58
|
-
if (rawVersionForVariant) {
|
|
59
|
-
onChange('version', rawVersionForVariant);
|
|
60
|
-
setVersion(ver);
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
70
|
+
if (!rawVersionForVariant) {
|
|
63
71
|
handleVariantChange(variant === 'dev' ? 'prod' : 'dev');
|
|
72
|
+
return;
|
|
64
73
|
}
|
|
65
|
-
|
|
74
|
+
newState.version = rawVersionForVariant;
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
newState.version = ver === null || ver === void 0 ? void 0 : ver.rawVersion;
|
|
66
78
|
}
|
|
67
|
-
onChange(
|
|
79
|
+
onChange(newState);
|
|
68
80
|
setVersion(ver);
|
|
69
81
|
}, [versionSelectionOpts, variant, onChange, handleVariantChange]);
|
|
70
82
|
// TODO: Revisit this as it is clearly not using hooks as intended
|
|
@@ -96,7 +108,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
|
|
|
96
108
|
if (!newDeviceType) {
|
|
97
109
|
return;
|
|
98
110
|
}
|
|
99
|
-
onChange(
|
|
111
|
+
onChange({ deviceType: newDeviceType });
|
|
100
112
|
}, [compatibleDeviceTypes, model.deviceType.slug, onChange]);
|
|
101
113
|
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]);
|
|
102
114
|
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) => {
|
|
@@ -127,14 +139,14 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
|
|
|
127
139
|
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) => {
|
|
128
140
|
handleVariantChange(v ? 'dev' : 'prod');
|
|
129
141
|
} }) })), _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) => {
|
|
130
|
-
onChange(
|
|
142
|
+
onChange({ network: event.target.value });
|
|
131
143
|
}, 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: {
|
|
132
144
|
htmlInput: {
|
|
133
145
|
name: 'wifiSsid',
|
|
134
146
|
autoComplete: 'wifiSsid-auto-complete',
|
|
135
147
|
},
|
|
136
148
|
}, onChange: (event) => {
|
|
137
|
-
onChange(
|
|
149
|
+
onChange({ wifiSsid: event.target.value });
|
|
138
150
|
} }), _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: {
|
|
139
151
|
htmlInput: {
|
|
140
152
|
name: 'wifiKey',
|
|
@@ -148,7 +160,7 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
|
|
|
148
160
|
}, edge: "end", children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) }) })),
|
|
149
161
|
},
|
|
150
162
|
}, onChange: (event) => {
|
|
151
|
-
onChange(
|
|
163
|
+
onChange({ wifiKey: event.target.value });
|
|
152
164
|
} })] }))] }), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, { onClick: () => {
|
|
153
165
|
setShowAdvancedSettings(!showAdvancedSettings);
|
|
154
166
|
}, 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: {
|
|
@@ -161,21 +173,23 @@ export const ImageForm = memo(function ImageForm({ compatibleDeviceTypes, osVers
|
|
|
161
173
|
autoComplete: 'appUpdatePollInterval-auto-complete',
|
|
162
174
|
},
|
|
163
175
|
}, onChange: (event) => {
|
|
164
|
-
onChange(
|
|
176
|
+
onChange({
|
|
177
|
+
appUpdatePollInterval: parseInt(event.target.value, 10),
|
|
178
|
+
});
|
|
165
179
|
} })] }), _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: {
|
|
166
180
|
htmlInput: {
|
|
167
181
|
name: 'provisioningKeyName',
|
|
168
182
|
autoComplete: 'provisioningKeyName-auto-complete',
|
|
169
183
|
},
|
|
170
184
|
}, onChange: (event) => {
|
|
171
|
-
onChange(
|
|
185
|
+
onChange({ provisioningKeyName: event.target.value });
|
|
172
186
|
} }), _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: {
|
|
173
187
|
htmlInput: {
|
|
174
188
|
name: 'provisioningKeyExpiryDate',
|
|
175
189
|
autoComplete: 'provisioningKeyExpiryDate-auto-complete',
|
|
176
190
|
},
|
|
177
191
|
}, onChange: (event) => {
|
|
178
|
-
onChange(
|
|
192
|
+
onChange({ provisioningKeyExpiryDate: event.target.value });
|
|
179
193
|
} })] }) })] }));
|
|
180
194
|
});
|
|
181
195
|
// TODO: We need a better way than just copying the styling. Consider creating a component to export
|
|
@@ -242,13 +242,13 @@ export const DownloadImageDialog = ({ open, applicationId, releaseId, compatible
|
|
|
242
242
|
const setOsTypeCallback = useCallback((osT) => {
|
|
243
243
|
setOsType(osT);
|
|
244
244
|
}, []);
|
|
245
|
-
const handleChange = useCallback((
|
|
245
|
+
const handleChange = useCallback((updatedProps) => {
|
|
246
246
|
let newFormModelState;
|
|
247
|
-
if (
|
|
248
|
-
newFormModelState = getInitialState(
|
|
247
|
+
if (updatedProps.deviceType != null) {
|
|
248
|
+
newFormModelState = getInitialState(updatedProps.deviceType, applicationId, releaseId);
|
|
249
249
|
}
|
|
250
250
|
else {
|
|
251
|
-
newFormModelState = Object.assign(Object.assign({}, formModel),
|
|
251
|
+
newFormModelState = Object.assign(Object.assign({}, formModel), updatedProps);
|
|
252
252
|
onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(newFormModelState);
|
|
253
253
|
}
|
|
254
254
|
setFormModel(newFormModelState);
|
|
@@ -84,9 +84,9 @@ const sortData = (data, columns, sort) => {
|
|
|
84
84
|
}
|
|
85
85
|
return sortedData;
|
|
86
86
|
};
|
|
87
|
-
const TableRenderer = ({ filtered, selected, properties, hasUpdateActions, checkedState, changeSelected, data, rjstContext, onEntityClick, onPageChange, onSort, pagination, model, sort, rowKey = 'id',
|
|
87
|
+
const TableRenderer = ({ filtered, selected, properties, hasUpdateActions, checkedState, changeSelected, data, rjstContext, onEntityClick, onPageChange, onSort, pagination, model, sort, rowKey = 'id', }) => {
|
|
88
88
|
const { state: analytics } = useAnalyticsContext();
|
|
89
|
-
const [columns, setColumns] = useColumns(rjstContext.resource, properties, tagKeyRender
|
|
89
|
+
const [columns, setColumns] = useColumns(rjstContext.resource, properties, tagKeyRender);
|
|
90
90
|
const { actions, showAddTagDialog, setShowAddTagDialog, tagKeys } = useTagActions(rjstContext, data);
|
|
91
91
|
const memoizedPagination = React.useMemo(() => {
|
|
92
92
|
var _a, _b;
|
|
@@ -2,7 +2,7 @@ import type React from 'react';
|
|
|
2
2
|
import type { TagField } from './utils';
|
|
3
3
|
import type { RJSTEntityPropertyDefinition } from '../../schemaOps';
|
|
4
4
|
export declare const TAG_COLUMN_PREFIX = "tag_column_";
|
|
5
|
-
export declare function useColumns<T>(resourceName: string, defaultColumns: Array<RJSTEntityPropertyDefinition<T>>, tagKeyRender: (key: string) => (tags: TagField[] | undefined) => React.ReactElement | null
|
|
5
|
+
export declare function useColumns<T>(resourceName: string, defaultColumns: Array<RJSTEntityPropertyDefinition<T>>, tagKeyRender: (key: string) => (tags: TagField[] | undefined) => React.ReactElement | null): readonly [{
|
|
6
6
|
render: ((tags: TagField[] | undefined) => React.ReactElement | null) | ((value: any, row: T) => string | number | JSX.Element | null | undefined);
|
|
7
7
|
selected: boolean;
|
|
8
8
|
index: number;
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
2
|
import { getFromLocalStorage, setToLocalStorage } from '../../utils';
|
|
3
|
-
import { useAnalyticsContext } from '../../../../contexts/AnalyticsContext';
|
|
4
3
|
export const TAG_COLUMN_PREFIX = 'tag_column_';
|
|
5
|
-
const EXPERIMENTAL_REDUCED_DEFAULT_COLUMNS_PREFIX = 'experimental_reduced_default__';
|
|
6
4
|
// Move columns logic inside a dedicated hook to make the refactor easier and move this logic without effort.
|
|
7
|
-
export function useColumns(resourceName, defaultColumns, tagKeyRender
|
|
8
|
-
var _a;
|
|
9
|
-
const { state: analyticsState } = useAnalyticsContext();
|
|
5
|
+
export function useColumns(resourceName, defaultColumns, tagKeyRender) {
|
|
10
6
|
const [columns, setColumns] = useState(() => {
|
|
11
|
-
const storedColumns = getFromLocalStorage(`${
|
|
7
|
+
const storedColumns = getFromLocalStorage(`${resourceName}__columns`);
|
|
12
8
|
if (storedColumns) {
|
|
13
9
|
const storedColumnsMap = new Map(storedColumns.map((s) => [s.key, s]));
|
|
14
10
|
const tagColumns = storedColumns.filter((c) => c.key.startsWith(TAG_COLUMN_PREFIX));
|
|
@@ -30,11 +26,7 @@ export function useColumns(resourceName, defaultColumns, tagKeyRender, useExperi
|
|
|
30
26
|
}
|
|
31
27
|
});
|
|
32
28
|
useEffect(() => {
|
|
33
|
-
setToLocalStorage(`${
|
|
34
|
-
}, [
|
|
35
|
-
resourceName,
|
|
36
|
-
columns,
|
|
37
|
-
(_a = analyticsState.featureFlags) === null || _a === void 0 ? void 0 : _a.reducedDefaultDeviceColumns,
|
|
38
|
-
]);
|
|
29
|
+
setToLocalStorage(`${resourceName}__columns`, columns.map((c) => (Object.assign(Object.assign({}, c), { label: typeof c.label === 'string' ? c.label : null }))));
|
|
30
|
+
}, [resourceName, columns]);
|
|
39
31
|
return [columns, setColumns];
|
|
40
32
|
}
|
|
@@ -56,7 +56,6 @@ export interface RJSTProps<T> extends Omit<BoxProps, 'onChange'> {
|
|
|
56
56
|
rowKey?: keyof T;
|
|
57
57
|
noDataInfo?: NoDataInfo;
|
|
58
58
|
persistFilters?: boolean;
|
|
59
|
-
useExperimentalReducedColumnLocalStorageKeyPrefix?: boolean;
|
|
60
59
|
}
|
|
61
|
-
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,
|
|
60
|
+
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;
|
|
62
61
|
export { rjstRunTransformers, rjstDefaultPermissions, rjstGetModelForCollection, rjstAddToSchema, type RJSTAction, type RJSTBaseResource, type RJSTRawModel, type RJSTModel, rjstJsonSchemaPick, rjstGetDisabledReason, getPropertyScheme, getSubSchemaFromRefScheme, parseDescription, parseDescriptionProperty, generateSchemaFromRefScheme, };
|
|
@@ -37,7 +37,7 @@ const HeaderGrid = styled(Box)(({ theme }) => ({
|
|
|
37
37
|
// any typing we have in lenses today.
|
|
38
38
|
export const RJST = (_a) => {
|
|
39
39
|
var _b, _c, _d, _e, _f;
|
|
40
|
-
var { model: modelRaw, data, formats, actions, sdk, customSort, refresh, getBaseUrl, onEntityClick, onChange, pagination, customLenses, loading = false, rowKey, noDataInfo, persistFilters = true
|
|
40
|
+
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"]);
|
|
41
41
|
const { t } = useTranslation();
|
|
42
42
|
const { state: analytics } = useAnalyticsContext();
|
|
43
43
|
const navigate = useNavigate();
|
|
@@ -269,7 +269,7 @@ export const RJST = (_a) => {
|
|
|
269
269
|
page: currentPage,
|
|
270
270
|
itemsPerPage,
|
|
271
271
|
});
|
|
272
|
-
}, pagination: Object.assign(Object.assign({}, (pagination !== null && pagination !== void 0 ? pagination : {})), internalPagination), rowKey: rowKey
|
|
272
|
+
}, 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, {
|
|
273
273
|
schema: actionData.schema,
|
|
274
274
|
affectedEntries: actionData.affectedEntries,
|
|
275
275
|
onDone: () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@balena/ui-shared-components",
|
|
3
|
-
"version": "12.3.2-build-
|
|
3
|
+
"version": "12.3.2-build-fix-non-unified-os-release-variant-selection-c6aa80ca41df6028f60420084ff0be1ab0a19b9b-1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"files": [
|
|
@@ -138,6 +138,6 @@
|
|
|
138
138
|
},
|
|
139
139
|
"homepage": "https://github.com/balena-io/ui-shared-components#readme",
|
|
140
140
|
"versionist": {
|
|
141
|
-
"publishedAt": "2025-04-
|
|
141
|
+
"publishedAt": "2025-04-23T16:40:18.642Z"
|
|
142
142
|
}
|
|
143
143
|
}
|