From 95729831fc1931353c6eec6fb9f914cac5c71f24 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 2 Nov 2023 15:16:49 +0100
Subject: [PATCH] Enable compiling a circuit with ctrl + s

---
 .../src/app/components/r1csBtn.tsx            |  1 +
 .../src/app/components/witness.tsx            |  6 ++-
 .../src/app/components/witnessToggler.tsx     |  2 +-
 apps/remix-ide-e2e/src/tests/circom.test.ts   | 47 +++++++++++++++++--
 .../src/lib/api/compiler-api.ts               |  2 +
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/apps/circuit-compiler/src/app/components/r1csBtn.tsx b/apps/circuit-compiler/src/app/components/r1csBtn.tsx
index 324c61e28a..f2b9b2407f 100644
--- a/apps/circuit-compiler/src/app/components/r1csBtn.tsx
+++ b/apps/circuit-compiler/src/app/components/r1csBtn.tsx
@@ -12,6 +12,7 @@ export function R1CSBtn () {
       className="btn btn-secondary btn-block d-block w-100 text-break mb-1 mt-2"
       onClick={() => { generateR1cs(plugin, appState) }}
       disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating") || (appState.status === "computing")}
+      data-id="generate_r1cs_btn"
     >
       <CustomTooltip
         placement="auto"
diff --git a/apps/circuit-compiler/src/app/components/witness.tsx b/apps/circuit-compiler/src/app/components/witness.tsx
index 587e8765d4..d4a28fc2fd 100644
--- a/apps/circuit-compiler/src/app/components/witness.tsx
+++ b/apps/circuit-compiler/src/app/components/witness.tsx
@@ -26,14 +26,16 @@ export function WitnessSection ({ plugin, signalInputs, status }: {plugin: Circo
                   <label className="circuit_inner_label form-check-label" htmlFor="circuitPrimeSelector">
                     <FormattedMessage id="circuit.signalInput" /> { input }
                   </label>
-                  <input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} />
+                  <input className="form-control m-0 txinput" placeholder={input} name={input} onChange={handleSignalInput} data-id={`circuit_input_${input}`} />
                 </div>
               ))
             }
             <button
               className="btn btn-sm btn-secondary"
               onClick={() => { computeWitness(plugin, status, witnessValues) }}
-              disabled={(status === "compiling") || (status === "generating") || (status === "computing")}>
+              disabled={(status === "compiling") || (status === "generating") || (status === "computing")}
+              data-id="compute_witness_btn"
+            >
               <RenderIf condition={status === 'computing'}>
                 <i className="fas fa-sync fa-spin mr-2" aria-hidden="true"></i>
               </RenderIf>
diff --git a/apps/circuit-compiler/src/app/components/witnessToggler.tsx b/apps/circuit-compiler/src/app/components/witnessToggler.tsx
index 3910b01c1b..60027c2ebe 100644
--- a/apps/circuit-compiler/src/app/components/witnessToggler.tsx
+++ b/apps/circuit-compiler/src/app/components/witnessToggler.tsx
@@ -11,7 +11,7 @@ export function WitnessToggler ({ children }: { children: JSX.Element }) {
 
   return (
     <div>
-      <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations}>
+      <div className="d-flex circuit_config_section justify-content-between" onClick={toggleConfigurations} data-id="witness_toggler">
         <div className="d-flex">
           <label className="mt-1 circuit_config_section">
             <FormattedMessage id="circuit.computeWitness" />
diff --git a/apps/remix-ide-e2e/src/tests/circom.test.ts b/apps/remix-ide-e2e/src/tests/circom.test.ts
index 4ff6f6f564..fcbed671c2 100644
--- a/apps/remix-ide-e2e/src/tests/circom.test.ts
+++ b/apps/remix-ide-e2e/src/tests/circom.test.ts
@@ -8,7 +8,7 @@ module.exports = {
     init(browser, done)
   },
 
-  'Should create semaphore workspace template #group1 #group2': function (browser: NightwatchBrowser) {
+  'Should create semaphore workspace template #group1 #group2 #group3': function (browser: NightwatchBrowser) {
     browser
       .clickLaunchIcon('filePanel')
       .click('*[data-id="workspacesMenuDropdown"]')
@@ -36,6 +36,23 @@ module.exports = {
       .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
       .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
   },
+  'Should compute a witness for a simple circuit #group1': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('circuit-compiler')
+      .frame(0)
+      .waitForElementVisible('[data-id="witness_toggler"]')
+      .click('[data-id="witness_toggler"]')
+      .waitForElementVisible('[data-id="compute_witness_btn"]')
+      .waitForElementVisible('[data-id="circuit_input_a"]')
+      .waitForElementVisible('[data-id="circuit_input_b"]')
+      .setValue('[data-id="circuit_input_a"]', '1')
+      .setValue('[data-id="circuit_input_b"]', '2')
+      .click('[data-id="compute_witness_btn"]')
+      .frameParent()
+      .clickLaunchIcon('filePanel')
+      .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wtn"]')
+      .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wtn"]')
+  },
   'Should compile a simple circuit using compile button in circom plugin #group2': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
@@ -43,13 +60,37 @@ module.exports = {
       .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
       .clickLaunchIcon('circuit-compiler')
       .frame(0)
-      .waitForElementPresent('button[data-id="compile_circuit_btn"]', 60000)
+      .waitForElementPresent('button[data-id="compile_circuit_btn"]')
       .waitForElementVisible('button[data-id="compile_circuit_btn"]')
       .click('button[data-id="compile_circuit_btn"]')
       .frameParent()
       .clickLaunchIcon('filePanel')
       .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
       .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
-      .end()
+  },
+  'Should generate R1CS for a simple circuit #group2': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('circuit-compiler')
+      .frame(0)
+      .waitForElementPresent('button[data-id="generate_r1cs_btn"]')
+      .waitForElementVisible('button[data-id="generate_r1cs_btn"]')
+      .click('button[data-id="generate_r1cs_btn"]')
+      .frameParent()
+      .clickLaunchIcon('filePanel')
+      .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.r1cs"]')
+      .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.r1cs"]')
+  },
+  'Should compile a simple circuit using CTRL + S from the editor #group3': function (browser: NightwatchBrowser) {
+    browser
+      .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
+      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .perform(function () {
+        const actions = this.actions({async: true})
+
+        return actions.keyDown(this.Keys.CONTROL).sendKeys('s')
+      })
+      .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
+      .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
   }
 }
diff --git a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
index e27cc7aa55..e20134f331 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
@@ -345,6 +345,8 @@ export const CompilerApiMixin = (Base) => class extends Base {
           if(await this.getAppParameter('hardhat-compilation')) this.compileTabLogic.runCompiler('hardhat')
           else if(await this.getAppParameter('truffle-compilation')) this.compileTabLogic.runCompiler('truffle')
           else this.compileTabLogic.runCompiler(undefined)
+        } else if (this.currentFile && this.currentFile.endsWith('.circom')) {
+          await this.call('circuit-compiler', 'compile', this.currentFile)
         }
       }
     }