feat_fix_n_refactor: exptracted checkbox as a reusable component and fix selec all and auto run,

libs/remix-ui/checkbox/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/checkbox/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"  
+  }
+} 

libs/remix-ui/checkbox/README.md

@@ -0,0 +1,7 @@
+# remix-ui-checkbox
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-checkbox` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/checkbox/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-checkbox'

libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx

@@ -0,0 +1,47 @@
+import React from 'react'  //eslint-disable-line
+import './remix-ui-checkbox.css'
+
+/* eslint-disable-next-line */
+export interface RemixUiCheckboxProps {
+  onClick?: (event) => void
+  onChange?: (event) => void
+  label?: string
+  inputType?: string
+  name?: string
+  checked?: boolean
+  id?: string
+  itemName?: string
+  categoryId?: string
+}
+
+export const RemixUiCheckbox = ({
+  id,
+  label,
+  onClick,
+  inputType,
+  name,
+  checked,
+  onChange,
+  itemName,
+  categoryId
+}: RemixUiCheckboxProps) => {
+  return (
+    <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: 'flex', alignItems: 'center' }} onClick={onClick}>
+      <input
+        id={id}
+        type={inputType}
+        onChange={onChange}
+        style={{ verticalAlign: 'bottom' }}
+        name={name}
+        className="custom-control-input"
+        checked={checked}
+      />
+      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
+        {name ? <div className="font-weight-bold">{itemName}</div> : ''}
+        {label}
+      </label>
+    </div>
+  )
+}
+
+export default RemixUiCheckbox

libs/remix-ui/checkbox/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/checkbox/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

@@ -12,11 +12,9 @@ const StaticAnalyserButton = ({
   disabled
 }: StaticAnalyserButtonProps) => {
   return (
-    <div className="remixui-button-container" id='staticanalysisButton'>
-      <button className="btn btn-sm w-31 btn-primary" onClick={onClick} disabled={disabled}>
-        {buttonText}
-      </button>
-    </div>
+    <button className="btn btn-sm w-25 btn-primary" onClick={onClick} disabled={disabled}>
+      {buttonText}
+    </button>
   )
 }
 

libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx

@@ -24,7 +24,7 @@ const StaticAnalyserCheckedBox = ({
   categoryId
 }: StaticAnalyserCheckBoxProps) => {
   return (
-    <div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork_2A0YE0 custom-control custom-checkbox " onClick={onClick}>
+    <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: 'flex', alignItems: 'center' }} onClick={onClick}>
       <input
         id={id}
         type={inputType}
@@ -34,9 +34,9 @@ const StaticAnalyserCheckedBox = ({
         className="custom-control-input"
         checked={checked}
       />
-      <label className="pt-1 form-check-label custom-control-label" id={`heading${categoryId}`} >
-        {name ? <h6>{itemName}</h6> : ''}
-        <p>{label}</p>
+      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
+        {name ? <div className="font-weight-bold">{itemName}</div> : ''}
+        {label}
       </label>
     </div>
   )

libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx

@@ -4,20 +4,12 @@ interface ErrorRendererProps {
   message: any;
   opt: any,
   warningErrors: any
+  editor: any
 }
 
-const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
-  const [, setError] = useState(
-    {
-      row: null,
-      column: null,
-      text: null,
-      type: null,
-      errFile: null
-    }
-  )
+const ErrorRenderer = ({ message, opt, editor }: ErrorRendererProps) => {
   const getPositionDetails = (msg: any) => {
-    const result = { } as any
+    const result = { } as Record<string, number | string>
 
     // To handle some compiler warning without location like SPDX license warning etc
     if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
@@ -32,6 +24,12 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
     result.errFile = position ? position[1] : ''
     return result
   }
+
+  const handlePointToErrorOnClick = () => {
+    const result = opt.locationString.split(':')
+    editor._components.registry.get('editor').api.gotoLine(parseInt(result[0]) - 1, parseInt(result[1]))
+  }
+
   if (!message) return
   let position = getPositionDetails(message)
   if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
@@ -43,15 +41,6 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
   opt.errLine = position.errLine
   opt.errCol = position.errCol
   opt.errFile = position.errFile.trim()
-  if (!opt.noAnnotations && opt.errFile) {
-    setError({
-      errFile: opt.errFile,
-      row: opt.errLine,
-      column: opt.errCol,
-      text: message,
-      type: opt.type
-    })
-  }
   const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
   return (
     <div>
@@ -59,7 +48,7 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
         <div className="close" data-id="renderer">
           <i className="fas fa-times"></i>
         </div>
-        <span className='d-flex flex-column'>
+        <span className='d-flex flex-column' onClick={handlePointToErrorOnClick}>
           <span className='h6 font-weight-bold'>{opt.name}</span>
           { opt.item.warning }
           {opt.item.more

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -5,6 +5,7 @@ import Button from './Button/StaticAnalyserButton' // eslint-disable-line
 import remixLib from '@remix-project/remix-lib'
 import _ from 'lodash'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
+import { RemixUiCheckbox } from '@remix-ui/checkbox' // eslint-disable-line
 import ErrorRenderer from './ErrorRenderer' // eslint-disable-line
 const StaticAnalysisRunner = require('@remix-project/remix-analyzer').CodeAnalysis
 const utils = remixLib.util
@@ -60,12 +61,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
     }
     return indexOfCategory
   }
-
+  const [autoRun, setAutoRun] = useState(true)
   const [categoryIndex, setCategoryIndex] = useState(groupedModuleIndex(groupedModules))
 
   const warningContainer = React.useRef(null)
   const [runButtonState, setRunButtonState] = useState(true)
-  const [autoRun, setAutoRun] = useState(false)
+
   const [result, setResult] = useState({
     lastCompilationResult: null,
     lastCompilationSource: null,
@@ -81,136 +82,129 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   const [warningState, setWarningState] = useState([])
 
   useEffect(() => {
-    
     if (autoRun) {
       const setCompilationResult = async (data, source, file) => {
         await setResult({ lastCompilationResult: data, lastCompilationSource: source, currentFile: file })
       }
 
       if (props.analysisModule) {
-       
         props.analysisModule.on(
           'solidity',
           'compilationFinished',
           (file, source, languageVersion, data) => {
             if (languageVersion.indexOf('soljson') !== 0) return
             setCompilationResult(data, source, file)
-            if(categoryIndex.length > 0){
+            if (categoryIndex.length > 0) {
               run(data, source, file)
             }
-
           }
         )
       }
-    } else {
-      setAutoRun(true)
     }
 
     return () => { }
   }, [autoRun, categoryIndex])
 
   const run = (lastCompilationResult, lastCompilationSource, currentFile) => {
-    // const highlightLocation = async (location, fileName) => {
-    //   await props.analysisModule.call('editor', 'discardHighlight')
-    //   await props.analysisModule.call('editor', 'highlight', location, fileName)
-    // }
-    setResult({ lastCompilationResult, lastCompilationSource, currentFile })
-    if (lastCompilationResult && categoryIndex.length) {
-      setRunButtonState(false)
-      let warningCount = 0
-      const warningMessage = []
+    if (autoRun) {
+      setResult({ lastCompilationResult, lastCompilationSource, currentFile })
+      if (lastCompilationResult && categoryIndex.length > 0) {
+        setRunButtonState(false)
+        let warningCount = 0
+        const warningMessage = []
 
-      runner.run(lastCompilationResult, categoryIndex, results => {
-        results.map((result) => {
-          let moduleName
-          Object.keys(groupedModules).map(key => {
-            groupedModules[key].forEach(el => {
-              if (el.name === result.name) {
-                moduleName = groupedModules[key][0].categoryDisplayName
-              }
+        runner.run(lastCompilationResult, categoryIndex, results => {
+          results.map((result) => {
+            let moduleName
+            Object.keys(groupedModules).map(key => {
+              groupedModules[key].forEach(el => {
+                if (el.name === result.name) {
+                  moduleName = groupedModules[key][0].categoryDisplayName
+                }
+              })
             })
-          })
-          setModuleNameResult(moduleName)
-          const warningErrors = []
-          result.report.map((item) => {
-            let location: any = {}
-            let locationString = 'not available'
-            let column = 0
-            let row = 0
-            let fileName = currentFile
-            if (item.location) {
-              var split = item.location.split(':')
-              var file = split[2]
-              location = {
-                start: parseInt(split[0]),
-                length: parseInt(split[1])
+            setModuleNameResult(moduleName)
+            const warningErrors = []
+            result.report.map((item) => {
+              let location: any = {}
+              let locationString = 'not available'
+              let column = 0
+              let row = 0
+              let fileName = currentFile
+              if (item.location) {
+                const split = item.location.split(':')
+                const file = split[2]
+                location = {
+                  start: parseInt(split[0]),
+                  length: parseInt(split[1])
+                }
+                location = props.analysisModule._deps.offsetToLineColumnConverter.offsetToLineColumn(
+                  location,
+                  parseInt(file),
+                  lastCompilationSource.sources,
+                  lastCompilationResult.sources
+                )
+                row = location.start.line
+                column = location.start.column
+                locationString = row + 1 + ':' + column + ':'
+                fileName = Object.keys(lastCompilationResult.contracts)[file]
               }
-              location = props.analysisModule._deps.offsetToLineColumnConverter.offsetToLineColumn(
-                location,
-                parseInt(file),
-                lastCompilationSource.sources,
-                lastCompilationResult.sources
-              )
-              row = location.start.line
-              column = location.start.column
-              locationString = row + 1 + ':' + column + ':'
-              fileName = Object.keys(lastCompilationResult.contracts)[file]
-            }
-            warningCount++
-            const msg = `
-              <span class='d-flex flex-column'>
-                <span class='h6 font-weight-bold'>${result.name}</span>
-                ${item.warning}
-                ${item.more
-                ? `<span><a href=${item.more} target='_blank'>more</a></span>`
-                : '<span> </span>'
+              warningCount++
+              const msg = `
+                <span class='d-flex flex-column'>
+                  <span class='h6 font-weight-bold'>${result.name}</span>
+                  ${item.warning}
+                  ${item.more
+                  ? `<span><a href=${item.more} target='_blank'>more</a></span>`
+                  : '<span> </span>'
+                }
+                  <span class="" title="Position in ${fileName}">Pos: ${locationString}</span>
+                </span>`
+              const options = {
+                type: 'warning',
+                useSpan: true,
+                errFile: fileName,
+                errLine: row,
+                errCol: column,
+                item: item,
+                name: result.name,
+                locationString,
+                more: item.more
               }
-                <span class="" title="Position in ${fileName}">Pos: ${locationString}</span>
-              </span>`
-            const options = {
-              type: 'warning',
-              useSpan: true,
-              errFile: fileName,
-              errLine: row,
-              errCol: column,
-              item: item,
-              name: result.name,
-              locationString,
-              more: item.more
-            }
-            warningErrors.push(options)
-            setWarning({ msg, hasWarning: true, options, warningErrors: warningErrors })
-            warningMessage.push({ msg, options, hasWarning: true, warningModuleName: moduleName })
+              warningErrors.push(options)
+              setWarning({ msg, hasWarning: true, options, warningErrors: warningErrors })
+              warningMessage.push({ msg, options, hasWarning: true, warningModuleName: moduleName })
+            })
           })
+          const resultArray = []
+          warningMessage.map(x => {
+            resultArray.push(x)
+          })
+          function groupBy (objectArray, property) {
+            return objectArray.reduce((acc, obj) => {
+              const key = obj[property]
+              if (!acc[key]) {
+                acc[key] = []
+              }
+              // Add object to list for given key's value
+              acc[key].push(obj)
+              return acc
+            }, {})
+          }
+
+          const groupedCategory = groupBy(resultArray, 'warningModuleName')
+          setWarningState(groupedCategory)
         })
-        const resultArray = []
-        warningMessage.map(x => {
-          resultArray.push(x)
-        })
-        function groupBy (objectArray, property) {
-          return objectArray.reduce((acc, obj) => {
-            const key = obj[property]
-            if (!acc[key]) {
-              acc[key] = []
-            }
-            // Add object to list for given key's value
-            acc[key].push(obj)
-            return acc
-          }, {})
+        if (categoryIndex.length > 0) {
+          props.event.trigger('staticAnaysisWarning', [warningCount])
         }
-
-        const groupedCategory = groupBy(resultArray, 'warningModuleName')
-        setWarningState(groupedCategory)
-      })
-      if(categoryIndex.length > 0){
-        props.event.trigger('staticAnaysisWarning', [warningCount])
-      }
-    } else {
-      setRunButtonState(true)
-      if (categoryIndex.length) {
-        warningContainer.current.innerText = 'No compiled AST available'
+      } else {
+        setRunButtonState(true)
+        if (categoryIndex.length) {
+          warningContainer.current.innerText = 'No compiled AST available'
+        }
+        props.event.trigger('staticAnaysisWarning', [-1])
       }
-      props.event.trigger('staticAnaysisWarning', [-1])
     }
   }
 
@@ -223,9 +217,8 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
         })
       )
     } else {
-      setCategoryIndex(_.uniq([...categoryIndex]))
+      setCategoryIndex(_.uniq([...categoryIndex, ...index]))
     }
-
   }
 
   const handleCheckOrUncheckCategory = (category) => {
@@ -261,7 +254,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   const categoryItem = (categoryId, item, i) => {
     return (
       <div className="form-check" key={i}>
-        <CheckBox
+        <RemixUiCheckbox
           categoryId={categoryId}
           id={`staticanalysismodule_${categoryId}_${i}`}
           inputType="checkbox"
@@ -285,7 +278,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                 <label
                   htmlFor={`heading${categoryId}`}
                   style={{ cursor: 'pointer' }}
-                  className="pl-3 card-header h6 d-flex justify-content-between font-weight-bold border-left px-1 py-2 w-100"
+                  className="pl-3 card-header h6 d-flex justify-content-between font-weight-bold px-1 py-2 w-100"
                   data-bs-toggle="collapse"
                   data-bs-expanded="false"
                   data-bs-controls={`heading${categoryId}`}
@@ -294,10 +287,10 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                   {category[0].categoryDisplayName}
                 </label>
               }
-              expand={true}
+              expand={false}
             >
               <div>
-                <CheckBox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
+                <RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
               </div>
               <div className="w-100 d-block px-2 my-1 entries collapse multi-collapse" id={`heading${categoryId}`}>
                 {category.map((item, i) => {
@@ -314,31 +307,27 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   }
 
   return (
-    <div style={{ marginLeft: '10px', marginRight: '10px' }}>
+    <div className="analysis_3ECCBV px-3 pb-1">
       <div className="my-2 d-flex flex-column align-items-left">
         <div className="d-flex justify-content-between">
-          <div >
-            <CheckBox
-              id="checkAllEntries"
-              inputType="checkbox"
-              checked={Object.values(groupedModules).map((value: any) => {
-                return (value.map(x => {
-                  return x._index.toString()
-                }))
-              }).flat().every(el => categoryIndex.includes(el))}
-              label="Select all"
-              onClick={() => handleCheckAllModules(groupedModules)}
-            />
-          </div>
-          <div className="" >
-            <CheckBox
-              id="autorunstaticanalysis"
-              inputType="checkbox"
-              onClick={handleAutoRun}
-              checked={autoRun}
-              label="Autorun"
-            />
-          </div>
+          <RemixUiCheckbox
+            id="checkAllEntries"
+            inputType="checkbox"
+            checked={Object.values(groupedModules).map((value: any) => {
+              return (value.map(x => {
+                return x._index.toString()
+              }))
+            }).flat().every(el => categoryIndex.includes(el))}
+            label="Select all"
+            onClick={() => handleCheckAllModules(groupedModules)}
+          />
+          <RemixUiCheckbox
+            id="autorunstaticanalysis"
+            inputType="checkbox"
+            onClick={handleAutoRun}
+            checked={autoRun}
+            label="Autorun"
+          />
           <Button buttonText="Run" onClick={() => run(result.lastCompilationResult, result.lastCompilationSource, result.currentFile)} disabled={runButtonState || categoryIndex.length === 0}/>
         </div>
       </div>
@@ -368,7 +357,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                 <>
                   <span className="text-dark h6">{element[0]}</span>
                   {element[1].map(x => (
-                    x.hasWarning ? (<ErrorRenderer message={x.msg} opt={x.options} warningErrors={ x.warningErrors}/>) : null
+                    x.hasWarning ? (
+                      <div id={`staticAnalysisModule${element[1].warningModuleName}`}>
+                        <ErrorRenderer message={x.msg} opt={x.options} warningErrors={ x.warningErrors} editor={props.analysisModule}/>
+                      </div>
+
+                    ) : null
                   ))}
                 </>
               )))

nx.json

@@ -98,6 +98,9 @@
     },
     "remix-ui-static-analyser": {
       "tags": []
+    },
+    "remix-ui-checkbox": {
+      "tags": []
     }
   }
 }

package.json

@@ -41,7 +41,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace",
+    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs",

tsconfig.json

@@ -39,7 +39,8 @@
       "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
       "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
       "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
-      "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"]
+      "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"],
+      "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -744,6 +744,22 @@
           }
         }
       }
+    },
+    "remix-ui-checkbox": {
+      "root": "libs/remix-ui/checkbox",
+      "sourceRoot": "libs/remix-ui/checkbox/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/checkbox/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/checkbox/**/*"]
+          }
+        }
+      }
     }
   },
   "cli": {