diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css index 4eefd08a6..9818c9331 100644 --- a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css +++ b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css @@ -37,7 +37,7 @@ } .backdrop { - @apply absolute left-0 top-0 z-50 size-full bg-white/90; + @apply absolute left-0 top-0 z-50 size-full bg-black opacity-40; } .contentWrapper { diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx index ea435e2d6..997b03691 100644 --- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx +++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx @@ -196,6 +196,8 @@ const ChooseDiskSchema = v.object({ type ChooseDiskForm = v.InferInput; +const installMediaRegex = new RegExp("^(?usb|mmc)-(?.*)(-(.*))?$"); + const ChooseDisk = () => { const stepSignal = useStepper(); const [store, set] = getStepStore(stepSignal); @@ -236,6 +238,34 @@ const ChooseDisk = () => { }; const stripId = (s: string) => s.split("-")[1] ?? s; + + const getOptions = async () => { + if (!systemStorageQuery.data) { + await systemStorageQuery.refetch(); + } + + const blockDevices = systemStorageQuery.data?.blockdevices ?? []; + + return ( + blockDevices + // we only want writeable block devices which are USB or MMC (SD cards) + .filter(({ id_link, ro }) => !ro && installMediaRegex.test(id_link)) + // transform each entry into an option + .map(({ id_link, size, path }) => { + const match = id_link.match(installMediaRegex)!; + const name = match.groups?.name || ""; + + const truncatedName = + name.length > 32 ? name.slice(0, 32) + "..." : name; + + return { + value: path, + label: `${truncatedName.replaceAll("_", " ")} (${size})`, + }; + }) + ); + }; + return (
{ error={field.error} required label={{ - label: "USB Stick", - description: "Select the usb stick", - }} - getOptions={async () => { - if (!systemStorageQuery.data) { - await systemStorageQuery.refetch(); - } - console.log(systemStorageQuery.data); - - return (systemStorageQuery.data?.blockdevices ?? []).map( - (dev) => ({ - value: dev.path, - label: stripId(dev.id_link), - }), - ); + label: "Install Media", + description: + "Select a USB stick or SD card from the list", }} + getOptions={getOptions} placeholder="Choose Device" name={field.name} /> @@ -287,7 +306,7 @@ const ChooseDisk = () => { footer={
- Flash USB Stick + Flash Installer
} />