74d34a578b
Adds the ability to restore snapshots to a custom directory instead of only the original path. Closes #12. Changes: - Add target parameter to restore API endpoint - Add directory picker UI in file browser restore dialog - Add target input field in snapshot restore form - Create reusable PathSelector component Note: Run `bun run gen:api-client` after merging to regenerate types.
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
import { DirectoryBrowser } from "./directory-browser";
|
|
import { Button } from "./ui/button";
|
|
|
|
type Props = {
|
|
value: string;
|
|
onChange: (path: string) => void;
|
|
label?: string;
|
|
};
|
|
|
|
/**
|
|
* A reusable path selector component that shows the selected path
|
|
* with a "Change" button, and expands to a DirectoryBrowser when clicked.
|
|
* Matches the pattern used in the volume creation form.
|
|
*/
|
|
export const PathSelector = ({ value, onChange, label = "Selected path:" }: Props) => {
|
|
const [showBrowser, setShowBrowser] = useState(false);
|
|
|
|
if (showBrowser) {
|
|
return (
|
|
<div className="space-y-2">
|
|
<DirectoryBrowser
|
|
onSelectPath={(path) => {
|
|
onChange(path);
|
|
setShowBrowser(false);
|
|
}}
|
|
selectedPath={value}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowBrowser(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 border rounded-md p-3 bg-muted/50">
|
|
<div className="text-xs font-medium text-muted-foreground mb-1">{label}</div>
|
|
<div className="text-sm font-mono break-all">{value}</div>
|
|
</div>
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setShowBrowser(true)}>
|
|
Change
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|