Show Python code for test in a modal

src/renderer/hooks/useTestImport.ts

@@ -5,10 +5,14 @@ import { map } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { ImportTestSettings } from "@/renderer/routes/test_sequencer_panel/components/ImportTestModal";
 
-function parseDiscoverContainer(data: TestDiscoverContainer) {
+function parseDiscoverContainer(
+  data: TestDiscoverContainer,
+  sourceCode: string,
+) {
   return map(data.response, (container) => {
     const new_elem: Test = {
       ...container,
+      sourceCode,
       type: "test",
       id: uuidv4(),
       groupId: uuidv4(),
@@ -25,7 +29,11 @@ function parseDiscoverContainer(data: TestDiscoverContainer) {
 export const useTestImport = () => {
   const { setElems } = useTestSequencerState();
 
-  async function getTests(path: string, settings: ImportTestSettings) {
+  async function getTests(
+    path: string,
+    sourceCode: string,
+    settings: ImportTestSettings,
+  ) {
     try {
       const response = await baseClient.get("discover-pytest", {
         params: {
@@ -34,9 +42,9 @@ export const useTestImport = () => {
         },
       });
       const data: TestDiscoverContainer = JSON.parse(response.data);
-      const new_elems = parseDiscoverContainer(data);
+      const newElems = parseDiscoverContainer(data, sourceCode);
       setElems((elems) => {
-        return [...elems, ...new_elems];
+        return [...elems, ...newElems];
       });
     } catch (error) {
       console.error(error);
@@ -48,8 +56,8 @@ export const useTestImport = () => {
       .openTestPicker()
       .then((result) => {
         if (!result) return;
-        const { filePath } = result;
-        getTests(filePath, settings);
+        const { filePath, fileContent } = result;
+        getTests(filePath, fileContent, settings);
       })
       .catch((errors) => {
         console.error("Errors when trying to load file: ", errors);

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

@@ -0,0 +1,44 @@
+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 } 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) => {
+  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}>
+            {(row.original as Test).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,44 +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 { AddConditionalModal } from "./AddConditionalModal";
 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>,
@@ -116,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,78 @@
+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>
+        {/* {(row.original as Test).test_name} */}
+      </div>
+      <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/renderer/types/testSequencer.ts

@@ -29,6 +29,7 @@ export type BackendMsg = {
 
 export type Test = {
   type: "test";
+  sourceCode: string;
   id: string;
   groupId: string;
   path: string;