feat(services): improve bulk move project selection UX

- Add empty state handling when no other projects are available
- Disable move button when no target projects exist
- Provide clear guidance for users to create a new project before moving services
This commit is contained in:
Mauricio Siu
2025-03-08 18:40:23 -06:00
parent b34987530e
commit fc1dbcf51a

View File

@@ -587,26 +587,40 @@ const Project = (
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Select {allProjects?.filter(
value={selectedTargetProject} (p) => p.projectId !== projectId,
onValueChange={setSelectedTargetProject} ).length === 0 ? (
> <div className="flex flex-col items-center justify-center gap-2 py-4">
<SelectTrigger> <FolderInput className="h-8 w-8 text-muted-foreground" />
<SelectValue placeholder="Select target project" /> <p className="text-sm text-muted-foreground text-center">
</SelectTrigger> No other projects available. Create a new
<SelectContent> project first to move services.
{allProjects </p>
?.filter((p) => p.projectId !== projectId) </div>
.map((project) => ( ) : (
<SelectItem <Select
key={project.projectId} value={selectedTargetProject}
value={project.projectId} onValueChange={setSelectedTargetProject}
> >
{project.name} <SelectTrigger>
</SelectItem> <SelectValue placeholder="Select target project" />
))} </SelectTrigger>
</SelectContent> <SelectContent>
</Select> {allProjects
?.filter(
(p) => p.projectId !== projectId,
)
.map((project) => (
<SelectItem
key={project.projectId}
value={project.projectId}
>
{project.name}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div> </div>
<DialogFooter> <DialogFooter>
<Button <Button
@@ -618,6 +632,11 @@ const Project = (
<Button <Button
onClick={handleBulkMove} onClick={handleBulkMove}
isLoading={isBulkActionLoading} isLoading={isBulkActionLoading}
disabled={
allProjects?.filter(
(p) => p.projectId !== projectId,
).length === 0
}
> >
Move Services Move Services
</Button> </Button>