Files
resolutionflow/frontend/src/components/common/CreateFlowDropdown.tsx
chihlasm bf902a4f02 refactor: simplify Create Flow dropdown, remove maintenance flow from UI
- Simplify CreateFlowDropdown to 2 clean items: Troubleshooting Flow
  and Procedural Flow (removed 4 AI-assist entries + 1 orphaned duplicate)
- Rename "Troubleshooting Tree" → "Troubleshooting Flow" (per branding)
- Remove Maintenance Flow option from MyTreesPage (hidden for pilot)
- Replace MyTreesPage inline dropdown with shared CreateFlowDropdown
- Remove unused aiEnabled prop, useCachedQuota import, showCreateMenu state

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 01:51:30 +00:00

63 lines
2.3 KiB
TypeScript

import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Plus, ChevronDown, FolderTree, ListOrdered } from 'lucide-react'
import { cn } from '@/lib/utils'
interface CreateFlowDropdownProps {
className?: string
/** Button label — defaults to "Create Flow" */
label?: string
}
export function CreateFlowDropdown({
className,
label = 'Create Flow',
}: CreateFlowDropdownProps) {
const [showMenu, setShowMenu] = useState(false)
return (
<div className={cn('relative', className)}>
<button
onClick={() => setShowMenu(!showMenu)}
className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
>
<Plus size={16} />
{label}
<ChevronDown size={14} />
</button>
{showMenu && (
<>
<div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
<div className="absolute right-0 z-20 mt-1 w-60 rounded-lg border border-border bg-card p-1 shadow-xl">
<Link
to="/trees/new"
onClick={() => setShowMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
>
<FolderTree className="h-4 w-4 text-muted-foreground" />
<div className="flex-1">
<div className="font-medium">Troubleshooting Flow</div>
<div className="text-xs text-muted-foreground">Branching decision flow</div>
</div>
</Link>
<div className="my-1 border-t border-border" />
<Link
to="/flows/new"
onClick={() => setShowMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
>
<ListOrdered className="h-4 w-4 text-muted-foreground" />
<div className="flex-1">
<div className="font-medium">Procedural Flow</div>
<div className="text-xs text-muted-foreground">Step-by-step procedure</div>
</div>
</Link>
</div>
</>
)}
</div>
)
}