Function MissingModelItem

web/src/components/MissingModelItem.tsx:26–234

({
    missingModel,
    resolveMutationToUse,
    unResolveMutationToUse,
}: {
    missingModel: MissingModel
    resolveMutationToUse: UseMutationResult<
        void,
        Error,
        {
            filename: string
            node_type: string
            dest_relative_path: string
            source: Source
        },
        unknown
    >
    unResolveMutationToUse: UseMutationResult<
        void,
        Error,
        { filename: string },
        unknown
    >
})

} from '@/components/ui/collapsible'

function MissingModelItem({
    missingModel,
    resolveMutationToUse,
    unResolveMutationToUse,
}: {
    missingModel: MissingModel
    resolveMutationToUse: UseMutationResult<
        void,
        Error,
        {
            filename: string
            node_type: string
            dest_relative_path: string
            source: Source
        },
        unknown
    >
    unResolveMutationToUse: UseMutationResult<
        void,
        Error,
        { filename: string },
        unknown
    >
}) {
    const [loading, setLoading] = useState(false)
    const [resolved, setResolved] = useState(false)
    const [newFileName, setNewFileName] = useState('')
    const [isOpen, setIsOpen] = useState(true)

    if (!resolved) {
        return (
            <Collapsible
                open={isOpen}
                onOpenChange={setIsOpen}
                className="w-full flex flex-col items-start space-y-4"
            >
                <div className="w-full flex items-center justify-between space-x-4">
                    <div className="w-full flex flex-row items-center justify-between">
                        <div className="flex flex-row items-center gap-2">
                            {loading ? (
                                <Loader2Icon className=" text-orange-500 animate-spin w-5 h-5" />
                            ) : (
                                <AlertTriangle className="w-5 h-5 text-red-500" />
                            )}
                            <h3 className="text-white text-lg font-bold">
                                {missingModel.filename}
                            </h3>
                            <Badge className="flex flex-row items-center gap-2">
                                <InfoIcon className="w-4 h-4" />
                                {missingModel.node_type}
                            </Badge>
                        </div>
                    </div>
                    <CollapsibleTrigger asChild>
                        <Button className="flex flex-row items-center gap-2">
                            <ChevronsUpDown className="h-4 w-4" />
                            {isOpen ? 'hide suggestions' : 'show suggestions'}
                            <span className="sr-only">Toggle</span>