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,6 +587,17 @@ const Project = (
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{allProjects?.filter(
(p) => p.projectId !== projectId,
).length === 0 ? (
<div className="flex flex-col items-center justify-center gap-2 py-4">
<FolderInput className="h-8 w-8 text-muted-foreground" />
<p className="text-sm text-muted-foreground text-center">
No other projects available. Create a new
project first to move services.
</p>
</div>
) : (
<Select <Select
value={selectedTargetProject} value={selectedTargetProject}
onValueChange={setSelectedTargetProject} onValueChange={setSelectedTargetProject}
@@ -596,7 +607,9 @@ const Project = (
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{allProjects {allProjects
?.filter((p) => p.projectId !== projectId) ?.filter(
(p) => p.projectId !== projectId,
)
.map((project) => ( .map((project) => (
<SelectItem <SelectItem
key={project.projectId} key={project.projectId}
@@ -607,6 +620,7 @@ const Project = (
))} ))}
</SelectContent> </SelectContent>
</Select> </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>