From b13cb1f923087fb3027a9b2fc629efd4fc832697 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 7 Aug 2024 14:20:55 -0300 Subject: [PATCH 1/7] add onEscapeKeyDown --- src/frontend/src/modals/baseModal/index.tsx | 34 +++++++++++---------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 1ce1a20f3ea1..74d97479c634 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -128,26 +128,27 @@ interface BaseModalProps { open?: boolean; setOpen?: (open: boolean) => void; size?: - | "x-small" - | "smaller" - | "small" - | "medium" - | "medium-tall" - | "large" - | "three-cards" - | "large-thin" - | "large-h-full" - | "small-h-full" - | "medium-h-full" - | "md-thin" - | "sm-thin" - | "smaller-h-full" - | "medium-log"; + | "x-small" + | "smaller" + | "small" + | "medium" + | "medium-tall" + | "large" + | "three-cards" + | "large-thin" + | "large-h-full" + | "small-h-full" + | "medium-h-full" + | "md-thin" + | "sm-thin" + | "smaller-h-full" + | "medium-log"; disable?: boolean; onChangeOpenModal?: (open?: boolean) => void; type?: "modal" | "dialog"; onSubmit?: () => void; + onEscapeKeyDown?: (e:KeyboardEvent) => void; } function BaseModal({ open, @@ -157,6 +158,7 @@ function BaseModal({ onChangeOpenModal, type = "dialog", onSubmit, + onEscapeKeyDown }: BaseModalProps) { const headerChild = React.Children.toArray(children).find( (child) => (child as React.ReactElement).type === Header, @@ -204,7 +206,7 @@ function BaseModal({ ) : ( {triggerChild} - + {onSubmit ? ( { From 52bdc2804ea8214f9eb3cec7af3dd7cc023f0082 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 7 Aug 2024 15:09:46 -0300 Subject: [PATCH 2/7] refactor: Add ConfirmationModal to CodeAreaModal for better user experience --- .../src/modals/codeAreaModal/index.tsx | 31 ++++++++++++++----- .../src/modals/confirmationModal/index.tsx | 9 +++--- src/frontend/src/types/components/index.ts | 1 + 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index f7a3f6cdbc47..a784cf479004 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -4,7 +4,7 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; // import "ace-builds/webpack-resolver"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import AceEditor from "react-ace"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; @@ -26,6 +26,8 @@ import { useDarkStore } from "../../stores/darkStore"; import { CodeErrorDataTypeAPI } from "../../types/api"; import { codeAreaModalPropsType } from "../../types/components"; import BaseModal from "../baseModal"; +import ConfirmationModal from "../confirmationModal"; +import ReactAce from "react-ace/lib/ace"; export default function CodeAreaModal({ value, @@ -47,6 +49,8 @@ export default function CodeAreaModal({ const [height, setHeight] = useState(null); const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); + const [openConfirmation, setOpenConfirmation] = useState(false); + const codeRef = useRef(null); const [error, setError] = useState<{ detail: CodeErrorDataTypeAPI; } | null>(null); @@ -123,10 +127,6 @@ export default function CodeAreaModal({ } } - function handleClick() { - processCode(); - } - useEffect(() => { // Function to be executed after the state changes const delayedFunction = setTimeout(() => { @@ -148,7 +148,15 @@ export default function CodeAreaModal({ }, [value, open]); return ( - + { + e.preventDefault(); + if(code!==value){ + setOpenConfirmation(true); + } + else{ + setOpen(false); + } + }} open={open} setOpen={setOpen}> {children} {EDIT_CODE_TITLE} @@ -160,6 +168,7 @@ export default function CodeAreaModal({ - {e.preventDefault();e.stopPropagation();setOpenConfirmation(false);}} size="x-small" open={openConfirmation} icon="AlertTriangle" confirmationText="Check & Save" cancelText="Discard Changes"   onCancel={()=>setOpen(false)} onConfirm={()=>{ + {e.stopPropagation();setOpenConfirmation(false);}} size="x-small" icon="AlertTriangle" confirmationText="Check & Save" cancelText="Discard Changes" open={openConfirmation} onCancel={()=>setOpen(false)} onConfirm={()=>{ processCode(); setOpenConfirmation(false); }} title="Caution"> From 5a06cc6c45295d7da13964026436c0942bc08adf Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 7 Aug 2024 17:00:25 -0300 Subject: [PATCH 5/7] refactor: Update CodeAreaModal to use ReactAce for code editing --- src/frontend/src/modals/codeAreaModal/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 82170c66e03a..4539afffc758 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -143,6 +143,12 @@ export default function CodeAreaModal({ }; }, [error, setHeight]); + useEffect(()=>{ + if(!openConfirmation){ + codeRef.current?.editor.focus(); + } + },[openConfirmation]) + useEffect(() => { setCode(value); }, [value, open]); From 6ab8703013617cbf18ee026ef6cace4d56958279 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 7 Aug 2024 20:03:26 +0000 Subject: [PATCH 6/7] [autofix.ci] apply automated fixes --- src/frontend/src/modals/baseModal/index.tsx | 39 ++++++------ .../src/modals/codeAreaModal/index.tsx | 61 +++++++++++++------ .../src/modals/confirmationModal/index.tsx | 11 +++- src/frontend/src/types/components/index.ts | 2 +- 4 files changed, 71 insertions(+), 42 deletions(-) diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 74d97479c634..29919d82e08e 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -128,27 +128,27 @@ interface BaseModalProps { open?: boolean; setOpen?: (open: boolean) => void; size?: - | "x-small" - | "smaller" - | "small" - | "medium" - | "medium-tall" - | "large" - | "three-cards" - | "large-thin" - | "large-h-full" - | "small-h-full" - | "medium-h-full" - | "md-thin" - | "sm-thin" - | "smaller-h-full" - | "medium-log"; + | "x-small" + | "smaller" + | "small" + | "medium" + | "medium-tall" + | "large" + | "three-cards" + | "large-thin" + | "large-h-full" + | "small-h-full" + | "medium-h-full" + | "md-thin" + | "sm-thin" + | "smaller-h-full" + | "medium-log"; disable?: boolean; onChangeOpenModal?: (open?: boolean) => void; type?: "modal" | "dialog"; onSubmit?: () => void; - onEscapeKeyDown?: (e:KeyboardEvent) => void; + onEscapeKeyDown?: (e: KeyboardEvent) => void; } function BaseModal({ open, @@ -158,7 +158,7 @@ function BaseModal({ onChangeOpenModal, type = "dialog", onSubmit, - onEscapeKeyDown + onEscapeKeyDown, }: BaseModalProps) { const headerChild = React.Children.toArray(children).find( (child) => (child as React.ReactElement).type === Header, @@ -206,7 +206,10 @@ function BaseModal({ ) : ( {triggerChild} - + {onSubmit ? ( { diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 4539afffc758..997ca97b87a8 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -6,6 +6,7 @@ import "ace-builds/src-noconflict/theme-twilight"; // import "ace-builds/webpack-resolver"; import { useEffect, useRef, useState } from "react"; import AceEditor from "react-ace"; +import ReactAce from "react-ace/lib/ace"; import IconComponent from "../../components/genericIconComponent"; import { Button } from "../../components/ui/button"; import { Input } from "../../components/ui/input"; @@ -27,7 +28,6 @@ import { CodeErrorDataTypeAPI } from "../../types/api"; import { codeAreaModalPropsType } from "../../types/components"; import BaseModal from "../baseModal"; import ConfirmationModal from "../confirmationModal"; -import ReactAce from "react-ace/lib/ace"; export default function CodeAreaModal({ value, @@ -50,7 +50,7 @@ export default function CodeAreaModal({ const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const [openConfirmation, setOpenConfirmation] = useState(false); - const codeRef = useRef(null); + const codeRef = useRef(null); const [error, setError] = useState<{ detail: CodeErrorDataTypeAPI; } | null>(null); @@ -143,29 +143,36 @@ export default function CodeAreaModal({ }; }, [error, setHeight]); - useEffect(()=>{ - if(!openConfirmation){ + useEffect(() => { + if (!openConfirmation) { codeRef.current?.editor.focus(); } - },[openConfirmation]) + }, [openConfirmation]); useEffect(() => { setCode(value); }, [value, open]); return ( - { - e.preventDefault(); - if(code===value){ - setOpen(false); - } - else{ - if(!(codeRef.current?.editor.completer.popup && codeRef.current?.editor.completer.popup.isOpen)) - { + { + e.preventDefault(); + if (code === value) { + setOpen(false); + } else { + if ( + !( + codeRef.current?.editor.completer.popup && + codeRef.current?.editor.completer.popup.isOpen + ) + ) { setOpenConfirmation(true); } - } - }} open={open} setOpen={setOpen}> + } + }} + open={open} + setOpen={setOpen} + > {children} {EDIT_CODE_TITLE} @@ -185,7 +192,7 @@ export default function CodeAreaModal({
- {e.stopPropagation();setOpenConfirmation(false);}} size="x-small" icon="AlertTriangle" confirmationText="Check & Save" cancelText="Discard Changes" open={openConfirmation} onCancel={()=>setOpen(false)} onConfirm={()=>{ - processCode(); - setOpenConfirmation(false); - }} title="Caution"> + { + e.stopPropagation(); + setOpenConfirmation(false); + }} + size="x-small" + icon="AlertTriangle" + confirmationText="Check & Save" + cancelText="Discard Changes" + open={openConfirmation} + onCancel={() => setOpen(false)} + onConfirm={() => { + processCode(); + setOpenConfirmation(false); + }} + title="Caution" + >

Are you sure you want to exit without saving your changes?

 diff --git a/src/frontend/src/modals/confirmationModal/index.tsx b/src/frontend/src/modals/confirmationModal/index.tsx index a97097b18522..54c45c91f7f0 100644 --- a/src/frontend/src/modals/confirmationModal/index.tsx +++ b/src/frontend/src/modals/confirmationModal/index.tsx @@ -1,3 +1,4 @@ +import GenericIconComponent from "@/components/genericIconComponent"; import React, { useEffect, useState } from "react"; import ShadTooltip from "../../components/shadTooltipComponent"; import { Button } from "../../components/ui/button"; @@ -8,7 +9,6 @@ import { } from "../../types/components"; import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; -import GenericIconComponent from "@/components/genericIconComponent"; const Content: React.FC = ({ children }) => { return
{children}
; @@ -42,7 +42,7 @@ function ConfirmationModal({ open, onClose, onCancel, - onEscapeKeyDown + onEscapeKeyDown, }: ConfirmationModalType) { const [modalOpen, setModalOpen] = useState(open ?? false); @@ -62,7 +62,12 @@ function ConfirmationModal({ ); return ( - + {triggerChild} {title} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 3eb3b329b112..32080a10d46a 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -456,7 +456,7 @@ export type ConfirmationModalType = { | "large-h-full" | "small-h-full" | "medium-h-full"; - onEscapeKeyDown?: (e:KeyboardEvent) => void; + onEscapeKeyDown?: (e: KeyboardEvent) => void; }; export type UserManagementType = { From ec5efc20bf99e57f5f8e39abe22a1f79571d4688 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 7 Aug 2024 17:07:18 -0300 Subject: [PATCH 7/7] decompose object --- src/frontend/src/modals/confirmationModal/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/modals/confirmationModal/index.tsx b/src/frontend/src/modals/confirmationModal/index.tsx index 54c45c91f7f0..1f8b907b44db 100644 --- a/src/frontend/src/modals/confirmationModal/index.tsx +++ b/src/frontend/src/modals/confirmationModal/index.tsx @@ -38,11 +38,10 @@ function ConfirmationModal({ data, index, onConfirm, - size, open, onClose, onCancel, - onEscapeKeyDown, + ...props }: ConfirmationModalType) { const [modalOpen, setModalOpen] = useState(open ?? false); @@ -62,12 +61,7 @@ function ConfirmationModal({ ); return ( - + {triggerChild} {title}