tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

remove clicking outside to close recipe warning (#4502)

Browse Source
This commit is contained in:
Zane
2025-09-03 15:06:22 -07:00
committed by GitHub
parent 9374a8e29b
commit c818dc7202
1 changed files with 65 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/ui/RecipeWarningModal.tsx
+65 -53
View File
@@ -1,13 +1,16 @@
import { import {
Dialog, Dialog,
DialogContent,
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogPortal,
DialogOverlay,
} from './dialog'; } from './dialog';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Button } from './button'; import { Button } from './button';
import MarkdownContent from '../MarkdownContent'; import MarkdownContent from '../MarkdownContent';
import { cn } from '../../utils';
interface RecipeWarningModalProps { interface RecipeWarningModalProps {
isOpen: boolean; isOpen: boolean;
@@ -29,67 +32,76 @@ export function RecipeWarningModal({
hasSecurityWarnings = false, hasSecurityWarnings = false,
}: RecipeWarningModalProps) { }: RecipeWarningModalProps) {
return ( return (
<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}> <Dialog open={isOpen}>
<DialogContent className="sm:max-w-[80vw] max-h-[80vh] flex flex-col p-0"> <DialogPortal>
<DialogHeader className="flex-shrink-0 p-6 pb-0"> <DialogOverlay />
<DialogTitle> <DialogPrimitive.Content
{hasSecurityWarnings ? '⚠️ Security Warning' : '⚠️ New Recipe Warning'} className={cn(
</DialogTitle> 'bg-background-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-[80vw] max-h-[80vh] flex flex-col p-0'
<DialogDescription> )}
{!hasSecurityWarnings && onPointerDownOutside={(e) => e.preventDefault()}
"You are about to execute a recipe that you haven't run before. "} onEscapeKeyDown={(e) => e.preventDefault()}
Only proceed if you trust the source of this recipe. >
</DialogDescription> <DialogHeader className="flex-shrink-0 p-6 pb-0">
</DialogHeader> <DialogTitle>
{hasSecurityWarnings ? '⚠️ Security Warning' : '⚠️ New Recipe Warning'}
</DialogTitle>
<DialogDescription>
{!hasSecurityWarnings &&
"You are about to execute a recipe that you haven't run before. "}
Only proceed if you trust the source of this recipe.
</DialogDescription>
</DialogHeader>
{hasSecurityWarnings && ( {hasSecurityWarnings && (
<div className="px-6"> <div className="px-6">
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"> <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
<div className="flex items-start"> <div className="flex items-start">
<div className="ml-3"> <div className="ml-3">
<div className="mt-2 text-sm text-yellow-700 dark:text-yellow-300"> <div className="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
<p> <p>
This recipe contains hidden characters that will be ignored for your safety, This recipe contains hidden characters that will be ignored for your safety,
as they could be used for malicious purposes. as they could be used for malicious purposes.
</p> </p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
)}
<div className="flex-1 overflow-y-auto p-6 pt-4"> <div className="flex-1 overflow-y-auto p-6 pt-4">
<div className="bg-background-muted p-4 rounded-lg"> <div className="bg-background-muted p-4 rounded-lg">
<h3 className="font-medium mb-3 text-text-standard">Recipe Preview:</h3> <h3 className="font-medium mb-3 text-text-standard">Recipe Preview:</h3>
<div className="space-y-4"> <div className="space-y-4">
{recipeDetails.title && ( {recipeDetails.title && (
<p className="text-text-standard"> <p className="text-text-standard">
<strong>Title:</strong> {recipeDetails.title} <strong>Title:</strong> {recipeDetails.title}
</p> </p>
)} )}
{recipeDetails.description && ( {recipeDetails.description && (
<p className="text-text-standard"> <p className="text-text-standard">
<strong>Description:</strong> {recipeDetails.description} <strong>Description:</strong> {recipeDetails.description}
</p> </p>
)} )}
{recipeDetails.instructions && ( {recipeDetails.instructions && (
<div> <div>
<h4 className="font-medium text-text-standard mb-1">Instructions:</h4> <h4 className="font-medium text-text-standard mb-1">Instructions:</h4>
<MarkdownContent content={recipeDetails.instructions} className="text-sm" /> <MarkdownContent content={recipeDetails.instructions} className="text-sm" />
</div> </div>
)} )}
</div>
</div> </div>
</div> </div>
</div>
<DialogFooter className="flex-shrink-0 p-6 pt-0"> <DialogFooter className="flex-shrink-0 p-6 pt-0">
<Button variant="outline" onClick={onCancel}> <Button variant="outline" onClick={onCancel}>
Cancel Cancel
</Button> </Button>
<Button onClick={onConfirm}>Trust and Execute</Button> <Button onClick={onConfirm}>Trust and Execute</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogPrimitive.Content>
</DialogPortal>
</Dialog> </Dialog>
); );
} }