MRVA: Display alert text even if location is undefined (#1407)

extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx

@@ -55,71 +55,61 @@ const MessageContainer = styled.div`
   padding-bottom: 0.5em;
 `;
 
-const PlainLine = ({ text }: { text: string }) => {
+const PlainCode = ({ text }: { text: string }) => {
   return <span>{replaceSpaceAndTabChar(text)}</span>;
 };
 
-const HighlightedLine = ({ text }: { text: string }) => {
+const HighlightedCode = ({ text }: { text: string }) => {
   return <span style={{ backgroundColor: highlightColor }}>{replaceSpaceAndTabChar(text)}</span>;
 };
 
 const Message = ({
   message,
-  currentLineNumber,
-  highlightedRegion,
   borderLeftColor,
   children
 }: {
   message: AnalysisMessage,
-  currentLineNumber: number,
-  highlightedRegion?: HighlightedRegion,
   borderLeftColor: string,
   children: React.ReactNode
 }) => {
-  if (!highlightedRegion || highlightedRegion.endLine !== currentLineNumber) {
+  return <div style={{
-    return <></>;
+    borderColor: borderColor,
-  }
+    borderWidth: '0.1em',
-
+    borderStyle: 'solid',
-  return <MessageContainer>
+    borderLeftColor: borderLeftColor,
-    <div style={{
+    borderLeftWidth: '0.3em',
-      borderColor: borderColor,
+    paddingTop: '1em',
-      borderWidth: '0.1em',
+    paddingBottom: '1em'
-      borderStyle: 'solid',
+  }}>
-      borderLeftColor: borderLeftColor,
+    <MessageText>
-      borderLeftWidth: '0.3em',
+      {message.tokens.map((token, index) => {
-      paddingTop: '1em',
+        switch (token.t) {
-      paddingBottom: '1em'
+          case 'text':
-    }}>
+            return <span key={`token-${index}`}>{token.text}</span>;
-      <MessageText>
+          case 'location':
-        {message.tokens.map((token, index) => {
+            return <VSCodeLink
-          switch (token.t) {
+              style={{ fontFamily: 'var(--vscode-editor-font-family)' }}
-            case 'text':
+              key={`token-${index}`}
-              return <span key={`token-${index}`}>{token.text}</span>;
+              href={createRemoteFileRef(
-            case 'location':
+                token.location.fileLink,
-              return <VSCodeLink
+                token.location.highlightedRegion?.startLine,
-                style={{ fontFamily: 'var(--vscode-editor-font-family)' }}
+                token.location.highlightedRegion?.endLine)}>
-                key={`token-${index}`}
+              {token.text}
-                href={createRemoteFileRef(
+            </VSCodeLink>;
-                  token.location.fileLink,
+          default:
-                  token.location.highlightedRegion?.startLine,
+            return <></>;
-                  token.location.highlightedRegion?.endLine)}>
-                {token.text}
-              </VSCodeLink>;
-            default:
-              return <></>;
-          }
-        })}
-        {children && <>
-          <VerticalSpace size={2} />
-          {children}
-        </>
         }
-      </MessageText>
+      })}
-    </div>
+      {children && <>
-  </MessageContainer>;
+        <VerticalSpace size={2} />
+        {children}
+      </>
+      }
+    </MessageText>
+  </div>;
 };
 
-const CodeLine = ({
+const Code = ({
   line,
   lineNumber,
   highlightedRegion
@@ -129,20 +119,80 @@ const CodeLine = ({
   highlightedRegion?: HighlightedRegion
 }) => {
   if (!highlightedRegion || !shouldHighlightLine(lineNumber, highlightedRegion)) {
-    return <PlainLine text={line} />;
+    return <PlainCode text={line} />;
   }
 
   const partiallyHighlightedLine = parseHighlightedLine(line, lineNumber, highlightedRegion);
 
   return (
     <>
-      <PlainLine text={partiallyHighlightedLine.plainSection1} />
+      <PlainCode text={partiallyHighlightedLine.plainSection1} />
-      <HighlightedLine text={partiallyHighlightedLine.highlightedSection} />
+      <HighlightedCode text={partiallyHighlightedLine.highlightedSection} />
-      <PlainLine text={partiallyHighlightedLine.plainSection2} />
+      <PlainCode text={partiallyHighlightedLine.plainSection2} />
     </>
   );
 };
 
+const Line = ({
+  line,
+  lineIndex,
+  startingLineIndex,
+  highlightedRegion,
+  severity,
+  message,
+  messageChildren
+}: {
+  line: string,
+  lineIndex: number,
+  startingLineIndex: number,
+  highlightedRegion?: HighlightedRegion,
+  severity?: ResultSeverity,
+  message?: AnalysisMessage,
+  messageChildren?: React.ReactNode,
+}) => {
+  const shouldShowMessage = message &&
+    severity &&
+    highlightedRegion &&
+    highlightedRegion.endLine == startingLineIndex + lineIndex;
+
+  return <div>
+    <div style={{ display: 'flex' }} >
+      <div style={{
+        borderStyle: 'none',
+        paddingTop: '0.01em',
+        paddingLeft: '0.5em',
+        paddingRight: '0.5em',
+        paddingBottom: '0.2em'
+      }}>
+        {startingLineIndex + lineIndex}
+      </div>
+      <div style={{
+        flexGrow: 1,
+        borderStyle: 'none',
+        paddingTop: '0.01em',
+        paddingLeft: '1.5em',
+        paddingRight: '0.5em',
+        paddingBottom: '0.2em',
+        wordBreak: 'break-word'
+      }}>
+        <Code
+          line={line}
+          lineNumber={startingLineIndex + lineIndex}
+          highlightedRegion={highlightedRegion} />
+      </div>
+    </div>
+    {shouldShowMessage &&
+      <MessageContainer>
+        <Message
+          message={message}
+          borderLeftColor={getSeverityColor(severity)}>
+          {messageChildren}
+        </Message>
+      </MessageContainer>
+    }
+  </div>;
+};
+
 const FileCodeSnippet = ({
   fileLink,
   codeSnippet,
@@ -173,6 +223,12 @@ const FileCodeSnippet = ({
         <TitleContainer>
           <VSCodeLink href={titleFileUri}>{fileLink.filePath}</VSCodeLink>
         </TitleContainer>
+        {message && severity &&
+          <Message
+            message={message}
+            borderLeftColor={getSeverityColor(severity)}>
+            {messageChildren}
+          </Message>}
       </Container>
     );
   }
@@ -186,40 +242,16 @@ const FileCodeSnippet = ({
       </TitleContainer>
       <CodeContainer>
         {code.map((line, index) => (
-          <div key={index}>
+          <Line
-            <div style={{ display: 'flex' }} >
+            key={`line-${index}`}
-              <div style={{
+            line={line}
-                borderStyle: 'none',
+            lineIndex={index}
-                paddingTop: '0.01em',
+            startingLineIndex={startingLine}
-                paddingLeft: '0.5em',
+            highlightedRegion={highlightedRegion}
-                paddingRight: '0.5em',
+            severity={severity}
-                paddingBottom: '0.2em'
+            message={message}
-              }}>
+            messageChildren={messageChildren}
-                {startingLine + index}
+          />
-              </div>
-              <div style={{
-                flexGrow: 1,
-                borderStyle: 'none',
-                paddingTop: '0.01em',
-                paddingLeft: '1.5em',
-                paddingRight: '0.5em',
-                paddingBottom: '0.2em',
-                wordBreak: 'break-word'
-              }}>
-                <CodeLine
-                  line={line}
-                  lineNumber={startingLine + index}
-                  highlightedRegion={highlightedRegion} />
-              </div>
-            </div>
-            {message && severity && <Message
-              message={message}
-              currentLineNumber={startingLine + index}
-              highlightedRegion={highlightedRegion}
-              borderLeftColor={getSeverityColor(severity)}>
-              {messageChildren}
-            </Message>}
-          </div>
         ))}
       </CodeContainer>
     </Container>