added config with file option to ui

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -39,10 +39,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     language: 'Solidity',
     evmVersion: ''
   })
-  const [toggleExpander, setToggleExpander] = useState<boolean>(true)
+  const [manualConfig, setManualConfig] = useState<boolean>(true)
+  const [configFilePath, setConfigFilePath] = useState<string>("/compiler_config.json")
+  const [showFilePathInput, setShowFilePathInput] = useState<boolean>(false)
+
   const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
   const promptMessageInput = useRef(null)
+  const configFilePathInput = useRef(null)
   const [hhCompilation, sethhCompilation] = useState(false)
   const [truffleCompilation, setTruffleCompilation] = useState(false)
   const [compilerContainer, dispatch] = useReducer(compilerReducer, compilerInitialState)
@@ -147,8 +151,27 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     }
   }, [configurationSettings])
 
-  const toggleClass = () => {
+  const toggleConfigType = () => {
-    setToggleExpander(!toggleExpander)
+    setManualConfig(!manualConfig)
+  }
+
+  const createNewConfigFile = async () => {
+      await api.writeFile(configFilePathInput.current.value, "")
+      setConfigFilePath(configFilePathInput.current.value)
+  }
+  const handleConfigPathChange = async () => {
+    if (await api.fileExists(configFilePathInput.current.value))
+      setConfigFilePath(configFilePathInput.current.value)
+    else {
+      modal(
+        'New configuration file', 'The file you entered does not exist. Do you want to create a new one?',
+        'Create',
+        async () => await createNewConfigFile,
+        'Cancel',
+        () => {}
+      )
+    }
+    setShowFilePathInput(false)
   }
 
   const _retrieveVersion = (version?) => {
@@ -546,6 +569,11 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     <section>
       <article>
         <header className='remixui_compilerSection border-bottom'>
+          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
+            <input type="radio" value="manual" checked={manualConfig} name="configType" />
+            <label className="font-weight-bold ml-1 remixui_compilerLabel">Compiler Configuration</label>
+          </div>
+          <div className={`pt-2 ml-3 flex-column ${manualConfig ? 'd-flex' : 'd-none'}`}>
             <div className="mb-2">
               <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">
                 Compiler
@@ -581,13 +609,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               </select>
             </div>
             <div className="mt-3">
-            <div className="d-flex justify-content-between">
+              <div className="border-dark pb-3 flex-column">
-              <label className="mt-1 remixui_compilerLabel" onClick={toggleClass}>Compiler Configuration</label>
-              <span data-id='compilerConfigUiTitleExpander' onClick={toggleClass}>
-                <i className={`fas ${!toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
-              </span>
-            </div>
-            <div className={`border-dark pb-3 flex-column ${toggleExpander ? 'd-flex' : 'd-none'}`}>
                 <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
                   <input className="remixui_autocompile custom-control-input" type="checkbox" onChange={handleAutoCompile} data-id="compilerContainerAutoCompile" id="autoCompile" title="Auto compile" checked={state.autoCompile} />
                   <label className="form-check-label custom-control-label" htmlFor="autoCompile">Auto compile</label>
@@ -615,6 +637,40 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 </div>
               </div>
             </div>
+            {
+              isHardhatProject &&
+              <div className="mt-3 remixui_compilerConfig custom-control custom-checkbox">
+                <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
+                <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
+                <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
+                  <OverlayTrigger placement={'right'} overlay={
+                    <Tooltip className="text-nowrap" id="overlay-tooltip">
+                      <span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
+                    </Tooltip>
+                  }>
+                    <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
+                  </OverlayTrigger>
+                </a>
+              </div>
+            }
+          </div>
+          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
+            <input type="radio" value="file" checked={!manualConfig} name="configType" />
+            <label className="font-weight-bold ml-1 remixui_compilerLabel">Use configuration file</label>
+          </div>
+          <div className={`pt-2 ml-3 align-items-start flex-column ${!manualConfig ? 'd-flex' : 'd-none'}`}>
+            { !showFilePathInput && <span>{configFilePath}</span> }
+              { showFilePathInput && <input
+                ref={configFilePathInput}
+                placeholder={"Enter new path"}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    handleConfigPathChange()
+                  }
+                }}
+              /> }
+              { !showFilePathInput && <button className="mt-2 btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Set new config file</button> }
+          </div>
           {
             isHardhatProject &&
             <div className="mt-3 remixui_compilerConfig custom-control custom-checkbox">