From b66eed39481f26ecea3cbd9c1863369ade0149c1 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Mon, 19 Sep 2022 15:19:31 +0200
Subject: [PATCH] compilerloaded

---
 apps/remix-ide-e2e/src/commands/verifyLoad.ts |  5 ++
 .../src/lib/compiler-container.tsx            | 75 ++++++++++---------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/verifyLoad.ts b/apps/remix-ide-e2e/src/commands/verifyLoad.ts
index e7a35f21ff..89b22c3701 100644
--- a/apps/remix-ide-e2e/src/commands/verifyLoad.ts
+++ b/apps/remix-ide-e2e/src/commands/verifyLoad.ts
@@ -23,6 +23,11 @@ class VerifyLoad extends EventEmitter {
             locateStrategy: 'xpath',
             timeout: 60000
         })
+        .waitForElementPresent({
+            selector: "//span[@data-id='compilerloaded']",
+            locateStrategy: 'xpath',
+            timeout: 60000
+        })
         .perform((done) => {
             done()
             this.emit('complete')
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 5c9d67a0af..0281d505c8 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -227,13 +227,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     if (state.useFileConfiguration)
       if (state.createFileOnce) {
         api.fileExists(defaultPath).then((exists) => {
-          if (!exists || state.useFileConfiguration ) createNewConfigFile()
+          if (!exists || state.useFileConfiguration) createNewConfigFile()
         })
         setState(prevState => {
           return { ...prevState, createFileOnce: false }
         })
       }
-    
+
     setState(prevState => {
       api.setAppParameter('useFileConfiguration', !state.useFileConfiguration)
       return { ...prevState, useFileConfiguration: !state.useFileConfiguration }
@@ -281,7 +281,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           'Create',
           async () => await createNewConfigFile(),
           'Cancel',
-          () => { 
+          () => {
             setShowFilePathInput(false)
           }
         )
@@ -436,7 +436,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     compileIcon.current.setAttribute('title', 'compiler is loading, please wait a few moments.')
     compileIcon.current.classList.add('remixui_spinningIcon')
     setState(prevState => {
-      return { ...prevState, compilerLicense: 'Compiler is loading. License will be displayed once compiler is loaded'}
+      return { ...prevState, compilerLicense: 'Compiler is loading. License will be displayed once compiler is loaded' }
     })
     _updateLanguageSelector()
     setDisableCompileButton(true)
@@ -453,6 +453,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     const isDisabled = !compiledFileName || (compiledFileName && !isSolFileSelected(compiledFileName))
 
     setDisableCompileButton(isDisabled)
+
+    // just for e2e
+    // eslint-disable-next-line no-case-declarations
+    const loadedElement = document.createElement('span')
+    loadedElement.setAttribute('data-id', 'compilerloaded')
+    loadedElement.setAttribute('data-version', state.selectedVersion)
+    document.body.appendChild(loadedElement)
   }
 
   const compilationFinished = () => {
@@ -555,22 +562,22 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
 
   const _shouldBeAdded = (version) => {
     return !version.includes('nightly') ||
-           (version.includes('nightly') && state.includeNightlies)
+      (version.includes('nightly') && state.includeNightlies)
   }
 
   const promptCompiler = () => {
     // custom url https://solidity-blog.s3.eu-central-1.amazonaws.com/data/08preview/soljson.js
-    modal('Add a custom compiler', promptMessage('URL'), 'OK', addCustomCompiler, 'Cancel', () => {})
+    modal('Add a custom compiler', promptMessage('URL'), 'OK', addCustomCompiler, 'Cancel', () => { })
   }
 
   const showCompilerLicense = () => {
-    modal('Compiler License', state.compilerLicense ? state.compilerLicense : 'License not available', 'OK', () => {})
+    modal('Compiler License', state.compilerLicense ? state.compilerLicense : 'License not available', 'OK', () => { })
   }
 
   const promptMessage = (message) => {
     return (
       <>
-        <span>{ message }</span>
+        <span>{message}</span>
         <input type="text" data-id="modalDialogCustomPromptCompiler" className="form-control" ref={promptMessageInput} />
       </>
     )
@@ -709,7 +716,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     setToggleExpander(!toggleExpander)
   }
 
- return (
+  return (
     <section>
       <article>
         <div className='pt-0 remixui_compilerSection'>
@@ -717,11 +724,11 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">Compiler</label>
             <span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()} title="Add a custom compiler with URL"></span>
             <span className="fa fa-file-text-o border-0 p-0 ml-2" onClick={() => showCompilerLicense()} title="See compiler license"></span>
-            <select value={ state.selectedVersion || state.defaultVersion } onChange={(e) => handleLoadVersion(e.target.value) } className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
-              { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{ state.defaultVersion }</option> }
-              { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option> }
-              { state.customVersions.map((url, i) => <option key={i} data-id={state.selectedVersion === url ? 'selected' : ''} value={url}>custom</option>)}
-              { state.allversions.map((build, i) => {
+            <select value={state.selectedVersion || state.defaultVersion} onChange={(e) => handleLoadVersion(e.target.value)} className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
+              {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{state.defaultVersion}</option>}
+              {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option>}
+              {state.customVersions.map((url, i) => <option key={i} data-id={state.selectedVersion === url ? 'selected' : ''} value={url}>custom</option>)}
+              {state.allversions.map((build, i) => {
                 return _shouldBeAdded(build.longVersion)
                   ? <option key={i} value={build.path} data-id={state.selectedVersion === build.path ? 'selected' : ''}>{build.longVersion}</option>
                   : null
@@ -826,12 +833,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <label className="form-check-label custom-control-label" htmlFor="scFileConfig" data-id="scFileConfiguration">Use configuration file</label>
           </div>
           <div className={`pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex`}>
-            { (!showFilePathInput && state.useFileConfiguration) && <span
+            {(!showFilePathInput && state.useFileConfiguration) && <span
               title="Click to open the config file"
-              onClick={configFilePath === '' ? () => {} : async()=>{ await openFile()}}
+              onClick={configFilePath === '' ? () => { } : async () => { await openFile() }}
               className="py-2 remixui_compilerConfigPath"
-            >{configFilePath === '' ? 'No file selected.' : configFilePath}</span> }
-            { (!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span> }
+            >{configFilePath === '' ? 'No file selected.' : configFilePath}</span>}
+            {(!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span>}
             <input
               ref={configFilePathInput}
               className={`py-0 my-0 form-control ${showFilePathInput ? "d-flex" : "d-none"}`}
@@ -845,27 +852,27 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 }
               }}
             />
-            { !showFilePathInput && <button disabled={!state.useFileConfiguration} data-id="scConfigChangeFilePath" className="btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Change</button> }
+            {!showFilePathInput && <button disabled={!state.useFileConfiguration} data-id="scConfigChangeFilePath" className="btn-secondary" onClick={() => { setShowFilePathInput(true) }}>Change</button>}
           </div>
         </div>
         <div className="px-4">
-          <span id='compilerLoadedVersion' data-version={compilerLoadedVersion}></span>
+          {compilerLoadedVersion ? <span data-id='compilerLoadedVersion' data-version={compilerLoadedVersion}></span> : ''}
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}>
             <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip-compile">
                 <div className="text-left">
-                  { !(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div> }
-                  { (configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div> }
+                  {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div>}
+                  {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
                 </div>
               </Tooltip>
             }>
               <span>
-                { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
-                Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
+                {<i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i>}
+                Compile {typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>'}
               </span>
             </OverlayTrigger>
           </button>
-          <div className='d-flex align-items-center'>            
+          <div className='d-flex align-items-center'>
             <button
               id="compileAndRunBtn"
               data-id="compilerContainerCompileAndRunBtn"
@@ -876,8 +883,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <OverlayTrigger overlay={
                 <Tooltip id="overlay-tooltip-compile-run">
                   <div className="text-left">
-                    { !(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+Shift+S</b> for compiling and script execution</div> }
-                    { (configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div> }
+                    {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>}
+                    {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
                   </div>
                 </Tooltip>
               }>
@@ -885,7 +892,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                   Compile and Run script
                 </span>
               </OverlayTrigger>
-            </button>            
+            </button>
             <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip-compile-run-doc">
                 <div className="text-left p-2">
@@ -893,11 +900,11 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                   <pre>
                     <code>
                     /**<br />
-                    * @title ContractName<br />
-                    * @dev ContractDescription<br />
-                    * @custom:dev-run-script file_path<br />
-                    */<br />
-                    contract ContractName {'{}'}<br />
+                      * @title ContractName<br />
+                      * @dev ContractDescription<br />
+                      * @custom:dev-run-script file_path<br />
+                      */<br />
+                      contract ContractName {'{}'}<br />
                     </code>
                   </pre>
                   Click to know more
@@ -912,7 +919,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               </button>
             </CopyToClipboard>
           </div>
-        </div>          
+        </div>
       </article>
     </section>
   )