make "Remove the configuration for this device" work

(the menu item only appears when I first delete the root partition from it)

except it crashes!? and I am pretty sure useDrive has worked before

> Unexpected Application Error!
> _useDrive4 is undefined
>
> RemoveDriveOption@https://localhost:10443/index.js:42094:22
> renderWithHooks@https://localhost:10443/index.js:84540:27
> updateFunctionComponent@https://localhost:10443/index.js:88666:20
> beginWork@https://localhost:10443/index.js:90689:16
> beginWork$1@https://localhost:10443/index.js:96514:14
> performUnitOfWork@https://localhost:10443/index.js:95645:12
> ...
> 💿 Hey developer 👋
> You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

web/src/components/storage/DriveEditor.tsx

@@ -384,7 +384,7 @@ const SearchSelector = ({ drive, selected, onChange }) => {
 };
 
 const RemoveDriveOption = ({ drive }) => {
-  const { isExplicitBoot } = useDrive(drive.name);
+  const { isExplicitBoot, delete: deleteDrive } = useDrive(drive.name);
 
   if (driveUtils.hasPv(drive)) return;
   if (isExplicitBoot) return;
@@ -393,7 +393,7 @@ const RemoveDriveOption = ({ drive }) => {
   return (
     <>
       <Divider component="hr" />
-      <MenuItem description={_("Remove the configuration for this device")}>
+      <MenuItem description={_("REMOVE the configuration for this device")} onClick={deleteDrive}>
         {_("Do not use")}
       </MenuItem>
     </>

web/src/queries/storage/config-model.ts

@@ -51,8 +51,9 @@ function findDrive(model: configModel.Config, driveName: string): configModel.Dr
   return drives.find((d) => d.name === driveName);
 }
 
-function removeDrive(model: configModel.Config, driveName: string) {
+function removeDrive(model: configModel.Config, driveName: string): configModel.Config {
   model.drives = model.drives.filter((d) => d.name !== driveName);
+  return model;
 }
 
 function isUsedDrive(model: configModel.Config, driveName: string) {
@@ -302,6 +303,7 @@ export type DriveHook = {
   isExplicitBoot: boolean;
   switch: (newName: string) => void;
   setSpacePolicy: (policy: configModel.SpacePolicy, actions?: SpacePolicyAction[]) => void;
+  delete: () => void;
 };
 
 export function useDrive(name: string): DriveHook | undefined {
@@ -317,5 +319,6 @@ export function useDrive(name: string): DriveHook | undefined {
     setSpacePolicy: (policy: configModel.SpacePolicy, actions?: SpacePolicyAction[]) => {
       mutate(setSpacePolicy(model, name, policy, actions));
     },
+    delete: () => mutate(removeDrive(model, name)),
   };
 }