DownloadImageDialog: Use Autocomplete for device type selector

Change-type: minor
balena-io-modules · Oct 24, 2024 · 2d6dddd · 2d6dddd
1 parent 8d94bad
commit 2d6dddd
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 38 deletions.
diff --git a/src/components/DownloadImageDialog/ImageForm.tsx b/src/components/DownloadImageDialog/ImageForm.tsx
@@ -19,6 +19,7 @@ import {
 	Tooltip,
 	Typography,
 	IconButton,
+	Autocomplete,
 } from '@mui/material';
 import HelpIcon from '@mui/icons-material/Help';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
@@ -226,45 +227,53 @@ export const ImageForm: React.FC<ImageFormProps> = memo(
 									/>
 								</Tooltip>
 							</InputLabel>
-							<Select
+							<Autocomplete
 								fullWidth
 								id="device-type-select"
-								value={model.deviceType.slug}
-								inputProps={{
-									name: 'deviceType',
-								}}
-								renderValue={(dt) => (
-									<DeviceTypeItem
-										deviceType={
-											compatibleDeviceTypes.find((c) => c.slug === dt)!
-										}
+								value={model.deviceType}
+								options={compatibleDeviceTypes}
+								getOptionLabel={(option) => option.slug}
+								renderOption={(props, option) => (
+									<Box component="li" {...props}>
+										<Avatar
+											variant="square"
+											src={option.logo ?? FALLBACK_LOGO_UNKNOWN_DEVICE}
+											sx={{ mr: 3, width: '20px', height: '20px' }}
+										/>
+										<Typography noWrap>{option.name}</Typography>
+									</Box>
+								)}
+								renderInput={({ InputProps, ...params }) => (
+									<TextField
+										{...params}
+										InputProps={{
+											...InputProps,
+											name: 'deviceType',
+											startAdornment: (
+												<Avatar
+													variant="square"
+													src={
+														model.deviceType.logo ??
+														FALLBACK_LOGO_UNKNOWN_DEVICE
+													}
+													sx={{ mr: 3, width: '20px', height: '20px' }}
+												/>
+											),
+										}}
 									/>
 								)}
-								onChange={(event) => {
-									return handleSelectedDeviceTypeChange(
-										compatibleDeviceTypes.find(
-											(c) => c.slug === event?.target.value,
-										)!,
-									);
+								onChange={(_event, value) => {
+									if (!value) {
+										return;
+									}
+									return handleSelectedDeviceTypeChange(value);
 								}}
-							>
-								{compatibleDeviceTypes?.map((dt) => {
-									return (
-										<MenuItem
-											value={dt.slug}
-											key={dt.slug}
-											sx={{ maxWidth: '100%' }}
-										>
-											<Avatar
-												variant="square"
-												src={dt.logo ?? FALLBACK_LOGO_UNKNOWN_DEVICE}
-												sx={{ mr: 3, width: '20px', height: '20px' }}
-											/>
-											<Typography noWrap>{dt.name}</Typography>
-										</MenuItem>
-									);
-								})}
-							</Select>
+								disableClearable
+								// TODO: consider whether there is a better solution than letting the width vary as you search
+								componentsProps={{
+									popper: { sx: { width: 'fit-content' } },
+								}}
+							/>
 						</Box>
 					)}
 					{(!isInitialDefault || osType) &&

diff --git a/src/components/DownloadImageDialog/index.tsx b/src/components/DownloadImageDialog/index.tsx
@@ -207,7 +207,7 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 	authToken,
 }) => {
 	const formElement = useRef<HTMLFormElement | null>(null);
-	const [formModel, setFromModel] = useState(
+	const [formModel, setFormModel] = useState(
 		getInitialState(initialDeviceType, applicationId, releaseId),
 	);
 
@@ -400,12 +400,12 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 			key: keyof DownloadImageFormModel,
 			value: DownloadImageFormModel[keyof DownloadImageFormModel],
 		) => {
-			setFromModel((oldState) => ({
+			setFormModel((oldState) => ({
 				...oldState,
 				[key]: value,
 			}));
 		},
-		[setFromModel],
+		[setFormModel],
 	);
 
 	return (
@@ -455,7 +455,7 @@ export const DownloadImageDialog: React.FC<DownloadImageDialogProps> = ({
 										model={formModel}
 										onSelectedOsTypeChange={setOsTypeCallback}
 										onSelectedDeviceTypeChange={(deviceType) =>
-											setFromModel(
+											setFormModel(
 												getInitialState(deviceType, applicationId, releaseId),
 											)
 										}