Show Python code for test in a modal (#1097)

* feat: add pytestfile modal to show python code of tests

* refactor: fetch source code after opening modal each time

* refactor: do not include source code in test element

---------

Co-authored-by: Gui <guillaume.thibault.98@gmail.com>

src/api/index.ts

@@ -66,6 +66,9 @@ export default {
   ): Promise<{ filePath: string; fileContent: string }> =>
     ipcRenderer.invoke(API.openFilePicker, allowedExtensions),
 
+  getFileContent: (filepath: string): Promise<string> =>
+    ipcRenderer.invoke(API.getFileContent, filepath),
+
   openEditorWindow: (filepath: string): Promise<void> =>
     ipcRenderer.invoke(API.openEditorWindow, filepath),
 

src/main/ipc-main-handlers.ts

@@ -8,6 +8,7 @@ import {
   openFilePicker,
   pickDirectory,
   ping,
+  readFileSync,
   saveFileToFullPath,
   writeFileSync,
 } from "./utils";
@@ -156,4 +157,5 @@ export const registerIpcMainHandlers = () => {
   ipcMain.handle(API.validatePassword, validatePassword);
   ipcMain.handle(API.createUserProfile, createUserProfile);
   ipcMain.handle(API.deleteUserProfile, deleteUserProfile);
+  ipcMain.handle(API.getFileContent, readFileSync);
 };

src/main/utils.ts

@@ -174,3 +174,9 @@ export const saveFileToFullPath = async (
     return Err(error as Error);
   }
 };
+
+export const readFileSync = (_, filePath: string): Promise<string> => {
+  return Promise.resolve(
+    fs.readFileSync(filePath, { encoding: "utf-8" }).toString(),
+  );
+};

src/renderer/hooks/useTestImport.ts

@@ -34,9 +34,9 @@ export const useTestImport = () => {
         },
       });
       const data: TestDiscoverContainer = JSON.parse(response.data);
-      const new_elems = parseDiscoverContainer(data);
+      const newElems = parseDiscoverContainer(data);
       setElems((elems) => {
-        return [...elems, ...new_elems];
+        return [...elems, ...newElems];
       });
     } catch (error) {
       console.error(error);

src/renderer/routes/test_sequencer_panel/components/PythonTestFileModal.tsx

@@ -0,0 +1,51 @@
+import { flojoySyntaxTheme } from "@/renderer/assets/FlojoyTheme";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/renderer/components/ui/dialog";
+import { ScrollArea, ScrollBar } from "@/renderer/components/ui/scroll-area";
+import { Test, TestSequenceElement } from "@/renderer/types/testSequencer";
+import { Row } from "@tanstack/react-table";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import python from "react-syntax-highlighter/dist/cjs/languages/hljs/python";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+
+type Props = {
+  isModalOpen: boolean;
+  handleModalOpen: Dispatch<SetStateAction<boolean>>;
+  row: Row<TestSequenceElement>;
+};
+SyntaxHighlighter.registerLanguage("python", python);
+
+const PythonTestFileModal = ({ isModalOpen, handleModalOpen, row }: Props) => {
+  const [sourceCode, setSourceCode] = useState("");
+
+  useEffect(() => {
+    window.api
+      .getFileContent((row.original as Test).path.split("::")[0])
+      .then((content) => setSourceCode(content));
+  }, [row.original]);
+  return (
+    <Dialog open={isModalOpen} onOpenChange={handleModalOpen}>
+      <DialogContent className="my-12 max-h-screen overflow-y-scroll border-muted bg-background p-12 sm:max-w-2xl md:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>{(row.original as Test).testName}</DialogTitle>
+        </DialogHeader>
+        <h2 className="text-lg font-semibold text-muted-foreground">
+          Python code
+        </h2>
+        <ScrollArea className="h-full w-full rounded-lg">
+          <ScrollBar orientation="vertical" />
+          <ScrollBar orientation="horizontal" />
+          <SyntaxHighlighter language="python" style={flojoySyntaxTheme}>
+            {sourceCode}
+          </SyntaxHighlighter>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PythonTestFileModal;

src/renderer/routes/test_sequencer_panel/components/TestSequencerInfo.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { DataTable } from "./DataTable";
+import { DataTable } from "./data-table/DataTable";
 import { SummaryTable } from "./SummaryTable";
 import { CloudPanel } from "./CloudPanel";
 import { useTestSequencerState } from "@/renderer/hooks/useTestSequencerState";

src/renderer/routes/test_sequencer_panel/components/DataTable.tsx → src/renderer/routes/test_sequencer_panel/components/data-table/DataTable.tsx

@@ -37,43 +37,19 @@ import {
   TestSequenceElement,
   ConditionalComponent,
   Conditional,
-  Test,
   StatusTypes,
 } from "@/renderer/types/testSequencer";
 import { useTestSequencerState } from "@/renderer/hooks/useTestSequencerState";
 import { parseInt, filter, map } from "lodash";
 import {
   generateConditional,
   getIndentLevels,
-} from "../utils/ConditionalUtils";
-import {
-  ChevronUpIcon,
-  ChevronDownIcon,
-  Loader,
-  TrashIcon,
-} from "lucide-react";
-import { WriteConditionalModal } from "./AddWriteConditionalModal";
-import LockableButton from "./lockable/LockedButtons";
+} from "../../utils/ConditionalUtils";
+import { ChevronUpIcon, ChevronDownIcon, TrashIcon } from "lucide-react";
+import { WriteConditionalModal } from "../AddWriteConditionalModal";
+import LockableButton from "../lockable/LockedButtons";
 import { useRef, useState, useEffect } from "react";
-
-const IndentLine = ({
-  content: name,
-  level = 0,
-}: {
-  content: React.ReactNode;
-  level: number;
-}) => (
-  <div className="flex h-full flex-row">
-    {level == 0 ? (
-      name
-    ) : (
-      <div className="flex flex-row">
-        <div className={"mr-5 flex h-full border-l-2 border-blue-800"}></div>
-        <IndentLine content={name} level={level - 1} />
-      </div>
-    )}
-  </div>
-);
+import TestNameCell from "./test-name-cell";
 
 const mapStatusToDisplay: { [k in StatusTypes]: React.ReactNode } = {
   pass: <p className="text-green-500">PASS</p>,
@@ -115,38 +91,12 @@ export function DataTable() {
         return elem.type === "test" ? "testName" : "conditionalType";
       },
       header: "Test name",
-      cell: ({ row }) => {
-        const isTest = row.original.type === "test";
-        return isTest ? (
-          <div className="flex h-full space-x-2">
-            {/* Indent levels */}
-            <div className="flex flex-row space-x-1">
-              <IndentLine
-                content={(row.original as Test).testName}
-                level={indentLevels[row.id]}
-              />
-              {running.includes(row.original.id) && (
-                <Loader className="scale-50" />
-              )}
-            </div>
-            {/* {(row.original as Test).test_name} */}
-          </div>
-        ) : (
-          <IndentLine
-            content={
-              <div className="flex flex-col">
-                <b>
-                  {(row.original as Conditional).conditionalType.toUpperCase()}
-                </b>
-                <i>
-                  {(row.original as Conditional).condition.substring(0, 45)}
-                  {(row.original as Conditional).condition.length >= 45 && (
-                    <>...</>
-                  )}
-                </i>
-              </div>
-            }
-            level={indentLevels[row.id]}
+      cell: (props) => {
+        return (
+          <TestNameCell
+            cellProps={props}
+            running={running}
+            indentLevels={indentLevels}
           />
         );
       },

src/renderer/routes/test_sequencer_panel/components/data-table/test-name-cell.tsx

@@ -0,0 +1,80 @@
+import {
+  Conditional,
+  Test,
+  TestSequenceElement,
+} from "@/renderer/types/testSequencer";
+import { CellContext } from "@tanstack/react-table";
+import { Loader } from "lucide-react";
+import React, { useState } from "react";
+import PythonTestFileModal from "../PythonTestFileModal";
+type Props = {
+  cellProps: CellContext<TestSequenceElement, unknown>;
+  indentLevels: number[];
+  running: string[];
+};
+
+const IndentLine = ({
+  content: name,
+  level = 0,
+}: {
+  content: React.ReactNode;
+  level: number;
+}) => (
+  <div className="flex h-full flex-row">
+    {level == 0 ? (
+      name
+    ) : (
+      <div className="flex flex-row">
+        <div className={"mr-5 flex h-full border-l-2 border-blue-800"}></div>
+        <IndentLine content={name} level={level - 1} />
+      </div>
+    )}
+  </div>
+);
+
+const TestNameCell = ({ cellProps: { row }, indentLevels, running }: Props) => {
+  const [openPyTestFileModal, setOpenPyTestFileModal] = useState(false);
+
+  const isTest = row.original.type === "test";
+
+  return isTest ? (
+    <>
+      <div className="flex h-full cursor-pointer space-x-2">
+        {/* Indent levels */}
+        <div
+          className="flex flex-row space-x-1"
+          onClick={() => setOpenPyTestFileModal(true)}
+        >
+          <IndentLine
+            content={(row.original as Test).testName}
+            level={indentLevels[row.id]}
+          />
+          {running.includes(row.original.id) && <Loader className="scale-50" />}
+        </div>
+      </div>
+      {/* Conditionally add modal component to unmount it on close */}
+      {openPyTestFileModal && (
+        <PythonTestFileModal
+          isModalOpen={openPyTestFileModal}
+          handleModalOpen={setOpenPyTestFileModal}
+          row={row}
+        />
+      )}
+    </>
+  ) : (
+    <IndentLine
+      content={
+        <div className="flex flex-col">
+          <b>{(row.original as Conditional).conditionalType.toUpperCase()}</b>
+          <i>
+            {(row.original as Conditional).condition.substring(0, 45)}
+            {(row.original as Conditional).condition.length >= 45 && <>...</>}
+          </i>
+        </div>
+      }
+      level={indentLevels[row.id]}
+    />
+  );
+};
+
+export default TestNameCell;

src/types/api.ts

@@ -32,6 +32,7 @@ export const API = {
   poetryInstallDepGroup: "POETRY_INSTALL_DEP_GROUP",
   poetryUninstallDepGroup: "POETRY_UNINSTALL_DEP_GROUP",
   openFilePicker: "OPEN_FILE_PICKER",
+  getFileContent: "GET_FILE_CONTENT",
   openEditorWindow: "OPEN_EDITOR_WINDOW",
   loadFileFromFullPath: "LOAD_FILE_FROM_FULL_PATH",
   saveFileToFullPath: "SAVE_FILE_TO_FULL_PATH",