add shortcut keys for windows platform

Author: jsajal

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-import": "^2.29.1",
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
+    "mousetrap": "^1.6.5",
     "notistack": "^3.0.1",
     "postcss": "^8.4.35",
     "react": "^18.2.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { BUTTON_TYPES, OBJ_TYPES } from 'constants/Common';
 import EditEnvVariableModal from '../modals/EditEnvVariableModal';
 import { useKeyPress } from 'reactflow';
 import { saveHandle } from '../modals/SaveFlowModal';
+import Mousetrap from 'mousetrap';
 
 const Env = ({ tab }) => {
   const variables = useEnvStore((state) => state.variables);
@@ -23,45 +24,50 @@ const Env = ({ tab }) => {
   const [editKey, setEditKey] = useState('');
   const [editValue, setEditValue] = useState('');
 
-  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+  //const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+  // Bind Ctrl+S and Cmd+S
+  Mousetrap.bind(['ctrl+s', 'command+s'], function (e) {
+    e.preventDefault();
+    saveHandle(tab);
+    return false;
+  });
 
   return (
     <div className='p-4'>
-      {cmdAndSPressed && saveHandle(tab)}
       <table className='w-full leading-normal'>
         <thead>
-          <tr className='text-xs font-bold tracking-wider text-left uppercase bg-ghost-50 text-ghost-600'>
-            <th className='p-5 border border-ghost-200 max-w-4'>S. No.</th>
-            <th className='p-5 border border-ghost-200 '>Key</th>
-            <th className='p-5 border border-ghost-200'>Value</th>
-            <th className='p-5 border border-ghost-200 max-w-4'>Action</th>
+          <tr className='bg-ghost-50 text-ghost-600 text-left text-xs font-bold uppercase tracking-wider'>
+            <th className='border-ghost-200 max-w-4 border p-5'>S. No.</th>
+            <th className='border-ghost-200 border p-5 '>Key</th>
+            <th className='border-ghost-200 border p-5'>Value</th>
+            <th className='border-ghost-200 max-w-4 border p-5'>Action</th>
           </tr>
         </thead>
         <tbody>
           {Object.entries(variables).map(([key, value], index) => (
-            <tr key={index} className='text-sm border-b border-gray-200 text-ghost-700 hover:bg-ghost-50'>
-              <td className='p-5 whitespace-no-wrap max-w-4'>{index + 1}</td>
-              <td className='p-5 whitespace-no-wrap'>{key}</td>
-              <td className='p-5 whitespace-no-wrap'>{value}</td>
-              <td className='p-5 whitespace-no-wrap max-w-4'>
+            <tr key={index} className='text-ghost-700 hover:bg-ghost-50 border-b border-gray-200 text-sm'>
+              <td className='whitespace-no-wrap max-w-4 p-5'>{index + 1}</td>
+              <td className='whitespace-no-wrap p-5'>{key}</td>
+              <td className='whitespace-no-wrap p-5'>{value}</td>
+              <td className='whitespace-no-wrap max-w-4 p-5'>
                 <div
-                  className='relative inline-block p-2 text-left transition duration-200 ease-out rounded-md cursor-pointer hover:bg-ghost-200'
+                  className='hover:bg-ghost-200 relative inline-block cursor-pointer rounded-md p-2 text-left transition duration-200 ease-out'
                   onClick={() => {
                     setDeleteKey(key);
                     setConfirmActionModalOpen(true);
                   }}
                 >
-                  <TrashIcon className='w-4 h-4' aria-hidden='true' />
+                  <TrashIcon className='h-4 w-4' aria-hidden='true' />
                 </div>
                 <div
-                  className='relative inline-block p-2 text-left transition duration-200 ease-out rounded-md cursor-pointer hover:bg-ghost-200'
+                  className='hover:bg-ghost-200 relative inline-block cursor-pointer rounded-md p-2 text-left transition duration-200 ease-out'
                   onClick={() => {
                     setEditKey(key);
                     setEditValue(value);
                     setEditVariableModalOpen(true);
                   }}
                 >
-                  <PencilSquareIcon className='w-4 h-4' aria-hidden='true' />
+                  <PencilSquareIcon className='h-4 w-4' aria-hidden='true' />
                 </div>
               </td>
             </tr>
@@ -75,7 +81,7 @@ const Env = ({ tab }) => {
           onClickHandle={() => setAddVariableModalOpen(true)}
           fullWidth={true}
         >
-          <PlusIcon className='w-5 h-5' />
+          <PlusIcon className='h-5 w-5' />
           <span>Add Variable</span>
         </Button>
       </div>

src/components/molecules/environment/index.js

@@ -26,6 +26,7 @@ import { saveHandle } from '../modals/SaveFlowModal';
 import Button from 'components/atoms/common/Button';
 import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
 import GraphLogger, { LogLevel } from './graph/GraphLogger';
+import Mousetrap from 'mousetrap';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
@@ -203,11 +204,16 @@ const Flow = ({ tab, collectionId }) => {
 
   reactFlowInstance?.setViewport(viewport);
 
-  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+  //const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s', 'Ctrl+s']);
+  // Bind Ctrl+S and Cmd+S
+  Mousetrap.bind(['ctrl+s', 'command+s'], function (e) {
+    e.preventDefault();
+    saveHandle(tab);
+    return false;
+  });
 
   return (
     <div className='flex-auto'>
-      {cmdAndSPressed && saveHandle(tab)}
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -233,7 +239,7 @@ const Flow = ({ tab, collectionId }) => {
       >
         <Background variant='dots' gap={12} size={1} />
         <Controls
-          className='flex shadow-none border-cyan-900'
+          className='flex border-cyan-900 shadow-none'
           onFitView={() => setViewport(reactFlowInstance.getViewport())}
         ></Controls>
         <Button

src/components/molecules/flow/index.js

@@ -6,7 +6,6 @@ import { getAllFlowTests } from 'stores/utils';
 import useCollectionStore from 'stores/CollectionStore';
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
-import { useKeyPress } from 'reactflow';
 import { readFlowTest } from 'service/collection';
 import { toast } from 'react-toastify';
 
@@ -27,10 +26,8 @@ const NestedFlowNode = ({ id, data }) => {
     }
   }
 
-  const cmdPressed = useKeyPress('Meta'); // 'Meta' key for Cmd on Mac
-
   const handleMouseClick = (event, relativePath) => {
-    if (cmdPressed && event.type === 'click') {
+    if ((event.metaKey || event.ctrlKey) && event.type === 'click') {
       if (relativePath && relativePath.trim() != '') {
         readFlowTest(ipcRenderer.join(collection.pathname, relativePath), collectionId)
           .then((result) => {
@@ -66,7 +63,7 @@ const NestedFlowNode = ({ id, data }) => {
               }}
               name='flow'
               value={data.relativePath ? data.relativePath : ''}
-              className='h-12 p-2 border rounded outline-none cursor-default max-w-48 border-cyan-950 bg-background-light'
+              className='h-12 max-w-48 cursor-default rounded border border-cyan-950 bg-background-light p-2 outline-none'
             >
               <option key='None' value=''>
                 Select a flow