Add ability to paste c-source files

The pasted C source files need to match up
with what the verifier has or else we don't
allow the contents to be overwritten.

Author: jordalgo

src/App.tsx

@@ -62,6 +62,8 @@ function getVisibleLogLines(
 
 function getVisibleCLines(
   verifierLogState: VerifierLogState,
+  fileName: string = "",
+  pastedLines: string[] = [],
 ): [CSourceRow[], Map<string, number>] {
   const cLineIdToVisualIdx: Map<string, number> = new Map();
   const cLines: CSourceRow[] = [];
@@ -74,6 +76,24 @@ function getVisibleCLines(
     });
     ++j;
 
+    if (file === fileName && pastedLines.length > 0) {
+      pastedLines.forEach((lineText, i) => {
+        const lineNum = i + 1;
+        const sourceId = getCLineId(file, lineNum);
+        cLines.push({
+          type: "c_line",
+          file,
+          lineNum: i + 1,
+          lineText,
+          sourceId,
+          ignore: false,
+        });
+        cLineIdToVisualIdx.set(sourceId, j);
+        ++j;
+      });
+      continue;
+    }
+
     let unknownStart = 0;
     for (let i = range[0]; i < range[1]; ++i) {
       const sourceId = getCLineId(file, i);
@@ -144,6 +164,7 @@ const ContentRaw = ({
   handleLogLinesOut,
   handleFullLogToggle,
   testListHeight,
+  addPastedCSourceFile,
 }: {
   loadError: string | null;
   visualLogState: VisualLogState;
@@ -154,6 +175,7 @@ const ContentRaw = ({
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleFullLogToggle: () => void;
   testListHeight: number | undefined;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
 }) => {
   if (loadError) {
     return <div>{loadError}</div>;
@@ -167,6 +189,7 @@ const ContentRaw = ({
         handleLogLinesOut={handleLogLinesOut}
         handleFullLogToggle={handleFullLogToggle}
         testListHeight={testListHeight}
+        addPastedCSourceFile={addPastedCSourceFile}
       />
     );
   } else {
@@ -268,6 +291,24 @@ function App({ testListHeight }: { testListHeight?: number }) {
     setIsLoading(false);
   }, []);
 
+  const addPastedCSourceFile = useCallback(
+    (fileName: string, pastedLines: string[]) => {
+      setVisualLogState((prevState) => {
+        const [cLines, cLineIdToVisualIdx] = getVisibleCLines(
+          verifierLogState,
+          fileName,
+          pastedLines,
+        );
+        return {
+          ...prevState,
+          cLines,
+          cLineIdToVisualIdx,
+        };
+      });
+    },
+    [verifierLogState],
+  );
+
   const loadInputText = useCallback(
     (text: string) => {
       const rawLines = text.split("\n");
@@ -452,6 +493,7 @@ function App({ testListHeight }: { testListHeight?: number }) {
           handleLogLinesOut={handleLogLinesOut}
           handleFullLogToggle={handleFullLogToggle}
           testListHeight={testListHeight}
+          addPastedCSourceFile={addPastedCSourceFile}
         />
         <div id="hint">
           <SelectedLineHint

src/components.tsx

@@ -14,6 +14,7 @@ import {
   BpfConditionalJmpInstruction,
   BpfTargetJmpInstruction,
   InstructionLine,
+  getCLineId,
 } from "./parser";
 import {
   BpfMemSlotMap,
@@ -821,6 +822,98 @@ export function SelectedLineHint({
   );
 }
 
+function CSourcePastePopup({
+  verifierLogState,
+  fileName,
+  onHideCSourcePaste,
+  addPastedCSourceFile,
+}: {
+  verifierLogState: VerifierLogState;
+  fileName: string;
+  onHideCSourcePaste: () => void;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
+}) {
+  const [pastedContent, setPastedContent] = useState("");
+  const [mismatchError, setMismatcError] = useState(false);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      setMismatcError(false);
+      const pastedText = event.target.value;
+      setPastedContent(pastedText);
+      const pastedLines: string[] = pastedText.split("\n");
+      for (const [file] of verifierLogState.cSourceMap.fileRange) {
+        if (file !== fileName) {
+          continue;
+        }
+        pastedLines.some((lineText, i) => {
+          const lineNum = i + 1;
+          const sourceId = getCLineId(file, lineNum);
+          const sourceLine =
+            verifierLogState.cSourceMap.cSourceLines.get(sourceId);
+          if (sourceLine && !sourceLine.ignore) {
+            if (!lineText.includes(sourceLine.content)) {
+              setMismatcError(true);
+              return true;
+            }
+          }
+          return false;
+        });
+      }
+    },
+    [],
+  );
+
+  const handleConfirm = useCallback(() => {
+    addPastedCSourceFile(fileName, pastedContent.split("\n"));
+    onHideCSourcePaste();
+  }, [pastedContent]);
+
+  const handleClear = useCallback(() => {
+    setPastedContent("");
+    setMismatcError(false);
+  }, []);
+
+  const onContentClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  return (
+    <div onClick={onHideCSourcePaste} className="c-source-popup-overlay">
+      <div onClick={onContentClick} className="c-source-popup-content">
+        <h3>Paste contents of {fileName}</h3>
+        <textarea
+          className="c-source-textarea"
+          value={pastedContent}
+          onChange={handleChange}
+          placeholder="Paste the entire file contents"
+        />
+        {mismatchError && (
+          <div className="c-source-popup-error">
+            Pasted content does not match the verifier log.
+            <br />
+            Make sure the entire file contents are pasted and the line numbers
+            match
+          </div>
+        )}
+        <button
+          className="c-source-button"
+          onClick={handleConfirm}
+          disabled={mismatchError || pastedContent === ""}
+        >
+          Apply
+        </button>
+        <button className="c-source-button" onClick={handleClear}>
+          Clear
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function HideShowButton({
   isVisible,
   rightOpen,
@@ -1162,6 +1255,7 @@ type CSourceRowProps = {
   cLines: CSourceRow[];
   dependencyCLines: Set<string>;
   selectedCLine: string;
+  onShowCSourcePaste: (fileName: string) => void;
 };
 
 function CSourceRowHeight(index: number, { cLines }: CSourceRowProps) {
@@ -1181,17 +1275,29 @@ const CSourceRowComponent = ({
   cLines,
   dependencyCLines,
   selectedCLine,
+  onShowCSourcePaste,
 }: RowComponentProps<CSourceRowProps>) => {
   const item = cLines[index];
 
+  const onFilePasteClick = () => {
+    onShowCSourcePaste(item.file);
+  };
+
   if (item.type == "file_name") {
     const fileNameStyle = { ...style };
     if (index === 0) {
       fileNameStyle["borderTop"] = "0px";
     }
     return (
-      <div className="filename-header" style={fileNameStyle}>
-        {item.file}
+      <div
+        onClick={onFilePasteClick}
+        className="filename-header"
+        style={fileNameStyle}
+      >
+        {item.file} {"\u{1F4CB}"}
+        <div className="filename-tooltip">
+          Click to replace lines with actual source code
+        </div>
       </div>
     );
   }
@@ -1241,6 +1347,7 @@ function CSourceLinesRaw({
   handleFullLogToggle,
   handleCLinesClick,
   onCRowsRendered,
+  onShowCSourcePaste,
 }: {
   showFullLog: boolean;
   selectedState: LogLineState;
@@ -1251,6 +1358,7 @@ function CSourceLinesRaw({
   handleFullLogToggle: () => void;
   handleCLinesClick: (event: React.MouseEvent<HTMLDivElement>) => void;
   onCRowsRendered: (start: number, end: number) => void;
+  onShowCSourcePaste: (fileName: string) => void;
 }) {
   const buttonId = "csource-toggle";
 
@@ -1358,6 +1466,7 @@ function CSourceLinesRaw({
             cLines: visualLogState.cLines,
             dependencyCLines,
             selectedCLine,
+            onShowCSourcePaste,
           }}
         />
       </div>
@@ -1375,6 +1484,7 @@ export function MainContent({
   handleLogLinesOut,
   handleFullLogToggle,
   testListHeight,
+  addPastedCSourceFile,
 }: {
   visualLogState: VisualLogState;
   selectedState: LogLineState;
@@ -1383,6 +1493,7 @@ export function MainContent({
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleFullLogToggle: () => void;
   testListHeight: number | undefined;
+  addPastedCSourceFile: (fileName: string, pastedLines: string[]) => void;
 }) {
   const logListRef = useListRef(null);
   const cListRef = useListRef(null);
@@ -1410,6 +1521,19 @@ export function MainContent({
     visualLogEnd: number;
   }>({ visualLogStart: 0, visualLogEnd: 0 });
 
+  const [cSourcePaste, setCSourcePaste] = useState<{
+    show: boolean;
+    fileName: string;
+  }>({ show: false, fileName: "" });
+
+  const onShowCSourcePaste = useCallback((fileName: string) => {
+    setCSourcePaste({ show: true, fileName });
+  }, []);
+
+  const onHideCSourcePaste = useCallback(() => {
+    setCSourcePaste({ show: false, fileName: "" });
+  }, []);
+
   const onCRowsRendered = useCallback((start: number, end: number) => {
     setVisualCIndexRange({ visualLogStart: start, visualLogEnd: end });
   }, []);
@@ -1484,6 +1608,10 @@ export function MainContent({
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (cSourcePaste.show) {
+        return;
+      }
+
       let delta = 0;
       let areCLinesInFocus = selectedState.cLine !== "";
       let min = 0;
@@ -1931,6 +2059,7 @@ export function MainContent({
         cListRef={cListRef}
         onCRowsRendered={onCRowsRendered}
         testListHeight={testListHeight}
+        onShowCSourcePaste={onShowCSourcePaste}
       />
       <div
         id="log-container"
@@ -1977,6 +2106,14 @@ export function MainContent({
         handleStateCLineClick={handleStateCLineClick}
         handleStateRowClick={handleStateRowClick}
       />
+      {cSourcePaste.show && (
+        <CSourcePastePopup
+          verifierLogState={verifierLogState}
+          onHideCSourcePaste={onHideCSourcePaste}
+          fileName={cSourcePaste.fileName}
+          addPastedCSourceFile={addPastedCSourceFile}
+        />
+      )}
     </div>
   );
 }