Add possibiity to remove PVM other than default ones

FluffyLabs · Dec 28, 2024 · a7b9689 · a7b9689
1 parent 40281c2
commit a7b9689
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git 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<WasmMetadata | undefined> => {
@@ -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)));
+        }}
       >
         <span className="cursor-pointer" onClick={handlePvmUrlOption}>
           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
@@ -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<HTMLButtonElement, MultiSelectProps>(
@@ -155,6 +162,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
       showOptionsAsTags,
       required,
       children,
+      removeOption,
       ...props
     },
     ref,
@@ -332,7 +340,17 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                         <CheckIcon className="h-4 w-4" />
                       </div>
                       {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
-                      <span>{option.label}</span>
+                      <span className="flex-1">{option.label}</span>
+                      {option.removable && (
+                        <XCircle
+                          className="ml-2 h-4 w-4 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            toggleOption(option.value);
+                            removeOption?.(option.value);
+                          }}
+                        />
+                      )}
                     </CommandItem>
                   );
                 })}