From 0e9910b6666e70dfa5afb2acccecc8aa9df33c53 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Fri, 1 Mar 2024 11:50:32 -0300
Subject: [PATCH] Feat: add shortcut to minimize/expand a node (ctrl Q)

---
 .../components/codeAreaComponent/index.tsx    |  2 ++
 .../src/components/ui/select-custom.tsx       |  2 +-
 .../src/modals/ConfirmationModal/index.tsx    |  2 +-
 .../src/modals/codeAreaModal/index.tsx        |  2 ++
 .../components/nodeToolbarComponent/index.tsx | 28 +++++++++++++++++--
 src/frontend/src/types/components/index.ts    |  2 ++
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index db94065ba..f19b4115b 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -16,6 +16,7 @@ export default function CodeAreaComponent({
   readonly = false,
   openModal,
   selected,
+  setOpenModal,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
@@ -36,6 +37,7 @@ export default function CodeAreaComponent({
       <CodeAreaModal
         selected={selected}
         openModal={openModal}
+        setOpenModal={setOpenModal}
         readonly={readonly}
         dynamic={dynamic}
         value={myValue}
diff --git a/src/frontend/src/components/ui/select-custom.tsx b/src/frontend/src/components/ui/select-custom.tsx
index 5ed2fbd45..8c5223231 100644
--- a/src/frontend/src/components/ui/select-custom.tsx
+++ b/src/frontend/src/components/ui/select-custom.tsx
@@ -33,7 +33,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index 3530a45ac..09dd35e25 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/ConfirmationModal/index.tsx
@@ -61,7 +61,7 @@ function ConfirmationModal({
   );
 
   return (
-    <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
+    <BaseModal size={size} open={open} setOpen={setModalOpen}>
       <BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 100a578ff..d4cf83780 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -37,6 +37,7 @@ export default function CodeAreaModal({
   readonly = false,
   openModal,
   selected,
+  setOpenModal,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const dark = useDarkStore((state) => state.dark);
@@ -49,6 +50,7 @@ export default function CodeAreaModal({
   } | null>(null);
   const [open, setOpen] = useState(false);
   const nodes = useFlowStore((state) => state.nodes);
+  
 
   useEffect(() => {
     // if nodeClass.template has more fields other than code and dynamic is true
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 409bd432c..b2af560fa 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -209,6 +209,24 @@ export default function NodeToolbarComponent({
 
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
+      if (
+        (selected && isMinimal) &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "q"
+      ) {
+        event.preventDefault();
+        setShowNode(data.showNode ?? true ? false : true);
+        unselectAll();
+      }
+      if (
+        selected &&
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.key === "C"
+      ) {
+        event.preventDefault();
+        setOpenModal(state => !state);
+      }
       if (
         selected &&
         (event.ctrlKey || event.metaKey) &&
@@ -270,6 +288,7 @@ export default function NodeToolbarComponent({
                 <div className="hidden">
                     <CodeAreaComponent
                     openModal={openModal}
+                    setOpenModal={setOpenModal}
                     readonly={
                       data.node?.flow && data.node.template[name].dynamic
                         ? true
@@ -494,12 +513,17 @@ export default function NodeToolbarComponent({
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">
-                    <IconComponent
+                  <IconComponent
                       name={showNode ? "Minimize2" : "Maximize2"}
                       className="relative top-0.5 mr-2 h-4 w-4"
                     />
                     {showNode ? "Minimize" : "Expand"}
-                  </div>
+                  <IconComponent
+                    name="Command"
+                    className="absolute right-[1.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                  ></IconComponent>
+                  <span className="absolute right-2 top-[0.46em]">Q</span>
+                </div>
                 </SelectItem>
               )}
               {isGroup && (
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index ac4512c29..df21a7b45 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -103,6 +103,7 @@ export type PromptAreaComponentType = {
 };
 
 export type CodeAreaComponentType = {
+  setOpenModal?: (bool: boolean) => void;
   disabled: boolean;
   onChange: (value: string[] | string) => void;
   value: string;
@@ -513,6 +514,7 @@ export type modalHeaderType = {
 
 export type codeAreaModalPropsType = {
   setValue: (value: string) => void;
+  setOpenModal?: (bool: boolean) => void;
   value: string;
   nodeClass: APIClassType | undefined;
   setNodeClass: (Class: APIClassType, code?: string) => void | undefined;