feat: more shortcuts!

frontend/src/views/AngularWorkflow.jsx

@@ -13791,7 +13791,7 @@ const AngularWorkflow = (defaultprops) => {
 	  const [hovered, setHovered] = useState(false)
 
     useEffect(() => {
-      const handleKeyDown = (event) => {        
+      const handleKeyDown = (event) => {
         if ((event.metaKey || event.ctrlKey) && event.key === '/') {
           event.preventDefault(); // Prevent default browser behavior (like opening search bar)
           if (!workflow.public && !executionRequestStarted) {
@@ -13800,9 +13800,11 @@ const AngularWorkflow = (defaultprops) => {
         }
         if ((event.ctrlKey || event.metaKey) && event.key === "'") {
           // Check if Ctrl (Windows/Linux) or Command (Mac) key is pressed along with '/'
-          if (!workflow.public) {
+          if (!workflow.public && !executionModalOpen) {
             setExecutionModalOpen(true);
             getWorkflowExecution(props.match.params.key, "");
+          } else if (!workflow.public && executionModalOpen) {
+            setExecutionModalOpen(false);
           }
         }
 
@@ -13814,6 +13816,24 @@ const AngularWorkflow = (defaultprops) => {
             //setOriginalWorkflow(workflow)
           }
         }
+
+        if (( event.ctrlKey || event.metaKey ) && event.key === ";") {
+          if (!workflow.public && executionModalOpen) {
+            getWorkflowExecution(props.match.params.key, "");
+          }
+        }
+
+        if (( event.ctrlKey || event.metaKey ) && event.shiftKey) {
+          console.log("Shift key pressed")
+          if (!workflow.public && executionModalOpen) {
+            setExecutionRunning(false);
+            stop()
+            const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+            const newitem = removeParam("execution_id", cursearch);
+            navigate(curpath + newitem)
+            setExecutionModalView(0);
+          }
+        }
       };
   
       document.addEventListener('keydown', handleKeyDown);
@@ -15188,6 +15208,7 @@ const AngularWorkflow = (defaultprops) => {
 		  		</a>
 		  	</Tooltip>
 		  </div>
+        <Tooltip title="Refresh runs (Ctrl + ;)" arrow>
           <Button
             style={{ borderRadius: "0px" }}
             variant="outlined"
@@ -15200,6 +15221,7 @@ const AngularWorkflow = (defaultprops) => {
             <CachedIcon style={{ marginRight: 10 }} />
             Refresh Runs
           </Button>
+        </Tooltip>
           <Divider
             style={{
               backgroundColor: "rgba(255,255,255,0.5)",
@@ -15427,48 +15449,51 @@ const AngularWorkflow = (defaultprops) => {
         </div>
       ) : (
         <div style={{ padding: isMobile ? "0px 10px 25px 10px" : "25px 15px 25px 15px", maxWidth: isMobile ? "100%" : 400, overflowX: "hidden" }}>
-          <Breadcrumbs
+          
-            aria-label="breadcrumb"
+            <Breadcrumbs
-            separator="›"
+              aria-label="breadcrumb"
-            style={{ color: "white", fontSize: 16 }}
+              separator="›"
-          >
+              style={{ color: "white", fontSize: 16 }}
-            <span
-              style={{ color: "rgba(255,255,255,0.5)", display: "flex" }}
-              onClick={() => {
-                setExecutionRunning(false);
-                stop();
-                getWorkflowExecution(props.match.params.key, "");
-                setExecutionModalView(0);
-                setLastExecution(executionData.execution_id);
-              }}
             >
-              <IconButton
+                <span
-                style={{
+                  style={{ color: "rgba(255,255,255,0.5)", display: "flex" }}
-                  paddingLeft: 0,
+                  onClick={() => {
-                  marginTop: "auto",
+                    setExecutionRunning(false);
-                  marginBottom: "auto",
+                    stop();
-                }}
+                    getWorkflowExecution(props.match.params.key, "");
-                onClick={() => { 
+                    setExecutionModalView(0);
-                	setExecutionRunning(false);
+                    setLastExecution(executionData.execution_id);
-					stop()
+                  }}
-				}}
+                >
-              >
+                  <IconButton
-                <ArrowBackIcon style={{ color: "rgba(255,255,255,0.5)" }} />
+                    style={{
-              </IconButton>
+                      paddingLeft: 0,
-              <h2
+                      marginTop: "auto",
-                style={{ color: "rgba(255,255,255,0.5)", cursor: "pointer" }}
+                      marginBottom: "auto",
-                onClick={() => { 
+                    }}
-          			const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+                    onClick={() => { 
-					const newitem = removeParam("execution_id", cursearch);
+                      setExecutionRunning(false);
-				  	navigate(curpath + newitem)
+              stop()
-                	setExecutionRunning(false);
+            }}
-					stop()
+                  >
-				}}
+                    <ArrowBackIcon style={{ color: "rgba(255,255,255,0.5)" }} />
-              >
+                  </IconButton>
-                See more runs 
+                  <Tooltip title="See more runs (Ctrl + Shift)" arrow>
-              </h2>
+                  <h2
-            </span>
+                    style={{ color: "rgba(255,255,255,0.5)", cursor: "pointer" }}
-          </Breadcrumbs>
+                    onClick={() => { 
+                    const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+                    const newitem = removeParam("execution_id", cursearch);
+                    navigate(curpath + newitem)
+                    setExecutionRunning(false);
+                    stop()
+                  }}
+                  >
+                    See more runs 
+                  </h2>
+                  </Tooltip>
+                </span>
+            </Breadcrumbs>
           <Divider
             style={{
               backgroundColor: "rgba(255,255,255,0.6)",