diff --git a/pkgs/clan-app/ui/src/components/Select/Select.tsx b/pkgs/clan-app/ui/src/components/Select/Select.tsx
index f2b624348..e680591c0 100644
--- a/pkgs/clan-app/ui/src/components/Select/Select.tsx
+++ b/pkgs/clan-app/ui/src/components/Select/Select.tsx
@@ -18,6 +18,7 @@ export type SelectProps = {
// Kobalte Select props, for modular forms
name: string;
placeholder?: string | undefined;
+ noOptionsText?: string | undefined;
value: string | undefined;
error: string;
required?: boolean | undefined;
@@ -135,15 +136,33 @@ export const Select = (props: SelectProps) => {
}
>
- 0}
+ fallback={
+
+ {props.noOptionsText || "No options available"}
+
+ }
>
- {props.placeholder}
-
+
+
+ {props.placeholder}
+
+
+
}
>
diff --git a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
index 4d8f429e0..5a8c9150a 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
@@ -30,12 +30,14 @@ const mockFetcher: Fetcher = (
{
name: "sda_bla_bla",
path: "/dev/sda",
- id_link: "sda_bla_bla",
+ id_link: "usb-bla-bla",
+ size: "12gb",
},
{
name: "sdb_foo_foo",
path: "/dev/sdb",
- id_link: "sdb_foo_foo",
+ id_link: "usb-boo-foo",
+ size: "16gb",
},
] as SuccessQuery<"list_system_storage_devices">["data"]["blockdevices"],
},
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 5752d89b4..9f0e829df 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -230,8 +230,6 @@ const ChooseDisk = () => {
stepSignal.next();
};
- const stripId = (s: string) => s.split("-")[1] ?? s;
-
const getOptions = async () => {
if (!systemStorageQuery.data) {
await systemStorageQuery.refetch();
@@ -239,24 +237,24 @@ const ChooseDisk = () => {
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 options = 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;
+ const truncatedName =
+ name.length > 32 ? name.slice(0, 32) + "..." : name;
- return {
- value: path,
- label: `${truncatedName.replaceAll("_", " ")} (${size})`,
- };
- })
- );
+ return {
+ value: path,
+ label: `${truncatedName.replaceAll("_", " ")} (${size})`,
+ };
+ });
+
+ return options;
};
return (
@@ -280,6 +278,7 @@ const ChooseDisk = () => {
}}
getOptions={getOptions}
placeholder="Choose Device"
+ noOptionsText="No devices found"
name={field.name}
/>
)}