diff --git a/src/components/PvmSelect/index.tsx b/src/components/PvmSelect/index.tsx index 40a8aa5..a9dcfe4 100644 --- a/src/components/PvmSelect/index.tsx +++ b/src/components/PvmSelect/index.tsx @@ -42,6 +42,7 @@ export interface SelectedPvmWithPayload { lang?: SupportedLangs; url?: string; }; + removable?: boolean; } const fetchWasmMetadata = async (url: string): Promise => { @@ -102,7 +103,8 @@ export const PvmSelect = () => { lang: selectedLang, file: await serializeFile(file), }, - label: `${id} v${file.lastModified}`, + label: `${id} - last modified: ${new Date(file.lastModified).toUTCString()}`, + removable: true, }, ]; @@ -137,6 +139,7 @@ export const PvmSelect = () => { url: path.join(url, "../", wasmMetadata.wasmBlobUrl), }, label: `${id} v${wasmMetadata.version}` as string, + removable: true, }, ]; dispatch(setPvmOptions(newValues)); @@ -198,12 +201,15 @@ export const PvmSelect = () => { maxCount={1} required className={classNames({ "border-red-500": !!error })} - options={pvmsWithPayload.map((pvm) => ({ value: pvm.id, label: pvm.label }))} + options={pvmsWithPayload.map((pvm) => ({ value: pvm.id, label: pvm.label, removable: pvm.removable }))} selectedValues={selectedPvms} defaultValue={[AvailablePvms.TYPEBERRY]} onValueChange={async (values) => { dispatch(setSelectedPvms(values)); }} + removeOption={(value) => { + dispatch(setPvmOptions(pvmsWithPayload.filter((pvm) => pvm.id !== value))); + }} > Load custom PVM from URL as a WASM file diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx index b7e7e3d..d0c1c27 100644 --- a/src/components/ui/multi-select.tsx +++ b/src/components/ui/multi-select.tsx @@ -56,6 +56,8 @@ interface MultiSelectProps value: string; /** Optional icon component to display alongside the option. */ icon?: React.ComponentType<{ className?: string }>; + /** Optional removable flag. */ + removable?: boolean; }[]; /** @@ -133,6 +135,11 @@ interface MultiSelectProps * (Custom) */ children?: React.ReactNode; + + /** + * (Custom) + */ + removeOption?: (value: string) => void; } export const MultiSelect = React.forwardRef( @@ -155,6 +162,7 @@ export const MultiSelect = React.forwardRef showOptionsAsTags, required, children, + removeOption, ...props }, ref, @@ -332,7 +340,17 @@ export const MultiSelect = React.forwardRef {option.icon && } - {option.label} + {option.label} + {option.removable && ( + { + event.stopPropagation(); + toggleOption(option.value); + removeOption?.(option.value); + }} + /> + )} ); })}