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-25 btn-primary" onClick={onClick} disabled={disabled}>
-      <button className="btn btn-sm w-31 btn-primary" onClick={onClick} disabled={disabled}>
       {buttonText}
     </button>
-    </div>
   )
 }
 

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}`} >
+      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
-        {name ? <h6>{itemName}</h6> : ''}
+        {name ? <div className="font-weight-bold">{itemName}</div> : ''}
-        <p>{label}</p>
+        {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 ErrorRenderer = ({ message, opt, editor }: ErrorRendererProps) => {
-  const [, setError] = useState(
-    {
-      row: null,
-      column: null,
-      text: null,
-      type: null,
-      errFile: null
-    }
-  )
   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,41 +82,33 @@ 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) => {
+    if (autoRun) {
-    //   await props.analysisModule.call('editor', 'discardHighlight')
-    //   await props.analysisModule.call('editor', 'highlight', location, fileName)
-    // }
       setResult({ lastCompilationResult, lastCompilationSource, currentFile })
-    if (lastCompilationResult && categoryIndex.length) {
+      if (lastCompilationResult && categoryIndex.length > 0) {
         setRunButtonState(false)
         let warningCount = 0
         const warningMessage = []
@@ -139,8 +132,8 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
               let row = 0
               let fileName = currentFile
               if (item.location) {
-              var split = item.location.split(':')
+                const split = item.location.split(':')
-              var file = split[2]
+                const file = split[2]
                 location = {
                   start: parseInt(split[0]),
                   length: parseInt(split[1])
@@ -202,7 +195,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
           const groupedCategory = groupBy(resultArray, 'warningModuleName')
           setWarningState(groupedCategory)
         })
-      if(categoryIndex.length > 0){
+        if (categoryIndex.length > 0) {
           props.event.trigger('staticAnaysisWarning', [warningCount])
         }
       } else {
@@ -213,6 +206,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
         props.event.trigger('staticAnaysisWarning', [-1])
       }
     }
+  }
 
   const handleCheckAllModules = (groupedModules) => {
     const index = groupedModuleIndex(groupedModules)
@@ -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,11 +307,10 @@ 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 >
+          <RemixUiCheckbox
-            <CheckBox
             id="checkAllEntries"
             inputType="checkbox"
             checked={Object.values(groupedModules).map((value: any) => {
@@ -329,16 +321,13 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             label="Select all"
             onClick={() => handleCheckAllModules(groupedModules)}
           />
-          </div>
+          <RemixUiCheckbox
-          <div className="" >
-            <CheckBox
             id="autorunstaticanalysis"
             inputType="checkbox"
             onClick={handleAutoRun}
             checked={autoRun}
             label="Autorun"
           />
-          </div>
           <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": {