fix position on alert card for warnings

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

@@ -1,71 +1,97 @@
-import { CustomTooltip } from '@remix-ui/helper';
-import React from 'react' //eslint-disable-line
+import { CustomTooltip } from "@remix-ui/helper";
+import React from "react"; //eslint-disable-line
+import { RemixUiStaticAnalyserState } from "../staticanalyser";
 
 interface ErrorRendererProps {
   message: any;
-  opt: any,
-  warningErrors: any
-  editor: any,
-  name: string,
+  opt: any;
+  warningErrors: any;
+  editor: any;
+  name: string;
+  ssaState: RemixUiStaticAnalyserState
 }
 
-const ErrorRenderer = ({ message, opt, editor, name }: ErrorRendererProps) => {
+const ErrorRenderer = ({ message, opt, editor, name, ssaState }: ErrorRendererProps) => {
   const getPositionDetails = (msg: any) => {
-    const result = { } as Record<string, number | string>
+    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 }
+    if (!msg.includes(":")) return { errLine: -1, errCol: -1, errFile: msg };
 
     // extract line / column
-    let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
-    result.errLine = position ? parseInt(position[2]) - 1 : -1
-    result.errCol = position ? parseInt(position[3]) : -1
+    let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/);
+    result.errLine = position ? parseInt(position[2]) - 1 : -1;
+    result.errCol = position ? parseInt(position[3]) : -1;
 
     // extract file
-    position = msg.match(/^(https:.*?|http:.*?|.*?):/)
-    result.errFile = position ? position[1] : ''
-    return result
-  }
+    position = msg.match(/^(https:.*?|http:.*?|.*?):/);
+    result.errFile = position ? position[1] : "";
+    return result;
+  };
 
   const handlePointToErrorOnClick = async (location, fileName) => {
-    await editor.call('editor', 'discardHighlight')
-    await editor.call('editor', 'highlight', location, fileName, '', { focus: true })
-  }
+    await editor.call("editor", "discardHighlight");
+    await editor.call("editor", "highlight", location, fileName, "", {
+      focus: true,
+    });
+  };
 
-  if (!message) return
-  let position = getPositionDetails(message)
-  if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
+  if (!message) return;
+  let position = getPositionDetails(message);
+  if (
+    !position.errFile ||
+    (opt.errorType && opt.errorType === position.errFile)
+  ) {
     // Updated error reported includes '-->' before file details
-    const errorDetails = message.split('-->')
+    const errorDetails = message.split("-->");
     // errorDetails[1] will have file details
-    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
+    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1]);
   }
-  opt.errLine = position.errLine
-  opt.errCol = position.errCol
-  opt.errFile = position.errFile.trim()
-  const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
+  opt.errLine = position.errLine;
+  opt.errCol = position.errCol;
+  opt.errFile = position.errFile.trim();
+  const classList =
+    opt.type === "error" ? "alert alert-danger" : "alert alert-warning";
   return (
     <div>
       <div className={`sol ${opt.type} ${classList}`}>
-        <span className='d-flex flex-column' data-id={`${name}Button`} onClick={async () => await handlePointToErrorOnClick(opt.location, opt.fileName)} style={{ cursor: "pointer", overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          <span className='h6 font-weight-bold'>{opt.name}</span>
-          <span>{ opt.item.warning }</span>
-          {opt.item.more
-            ? <span><a href={opt.item.more} target='_blank'>more</a></span>
-            : <span> </span>
+        <div
+          className="d-flex flex-column"
+          data-id={`${name}Button`}
+          onClick={async () =>
+            await handlePointToErrorOnClick(opt.location, opt.fileName)
           }
+          style={{
+            cursor: "pointer",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          <span className="h6 font-weight-bold">{opt.name}</span>
+          <span>{opt.item.warning}</span>
+          {opt.item.more ? (
+            <span>
+              <a href={opt.item.more} target="_blank">
+                more
+              </a>
+            </span>
+          ) : (
+            <span> </span>
+          )}
+          <div>
             <CustomTooltip
               placement="right"
               tooltipId="errorTooltip"
-            tooltipText={`Position in ${opt.errFile}`}
+              tooltipText={`Position in ${ssaState.file}`}
               tooltipClasses="text-nowrap"
             >
               <span>Pos: {opt.locationString}</span>
             </CustomTooltip>
-        </span>
           </div>
         </div>
-  )
-}
+      </div>
+    </div>
+  );
+};
 
-export default ErrorRenderer
+export default ErrorRenderer;

libs/remix-ui/static-analyser/src/lib/actions/staticAnalysisActions.ts

@@ -103,11 +103,11 @@ slitherEnabled: boolean, setStartAnalysis: React.Dispatch<React.SetStateAction<b
             const {file, provider} = await props.analysisModule.call('fileManager', 'getPathFromUrl', fileName)
             if (file.startsWith('.deps') || (provider.type === 'localhost' && file.startsWith('localhost/node_modules'))) isLibrary = true
           }
-          const msg = message(result.name, item.warning, item.more, fileName, locationString)
+          const msg = message(result.name, item.warning, item.more, state.file, locationString)
           const options = {
             type: 'warning',
             useSpan: true,
-            errFile: fileName,
+            errFile: state.file,
             fileName,
             isLibrary,
             errLine: row,

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

@@ -29,6 +29,7 @@ import {
   calculateWarningStateEntries,
 } from "./components/BasicTitle";
 import { Nav, TabContainer } from "react-bootstrap";
+import { CustomTooltip } from "@remix-ui/helper";
 
 declare global {
   interface Window {
@@ -623,7 +624,14 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               {hint.formattedMessage}
                             </span>
                             <br />
-                            <span>{`${hint.column}:${hint.line}`}</span>
+                            <CustomTooltip
+                              placement="right"
+                              tooltipId="errorTooltip"
+                              tooltipText={`Position in ${state.file}`}
+                              tooltipClasses="text-nowrap"
+                            >
+                              <span>{`Pos: ${hint.column}:${hint.line}`}</span>
+                            </CustomTooltip>
                           </div>
                         </div>
                       ))
@@ -751,6 +759,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               message={x.msg}
                               opt={x.options}
                               warningErrors={""}
+                              ssaState={state}
                               editor={props.analysisModule}
                             />
                           </div>
@@ -767,6 +776,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                             message={x.msg}
                             opt={x.options}
                             warningErrors={""}
+                            ssaState={state}
                             editor={props.analysisModule}
                           />
                         </div>
@@ -838,6 +848,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               name={`staticAnalysisModule${warning.warningModuleName}${index}`}
                               message={warning.msg}
                               opt={warning.options}
+                              ssaState={state}
                               warningErrors={""}
                               editor={props.analysisModule}
                             />
@@ -854,6 +865,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               message={warning.msg}
                               opt={warning.options}
                               warningErrors={""}
+                              ssaState={state}
                               editor={props.analysisModule}
                             />
                           </div>
@@ -870,6 +882,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                               name={`staticAnalysisModule${warning.warningModuleName}${index}`}
                               message={warning.msg}
                               opt={warning.options}
+                              ssaState={state}
                               warningErrors={""}
                               editor={props.analysisModule}
                             />