Refactor: Revamp utils Folder Structure

src/frontend/src/modals/IOModal/components/IOFieldView/components/csvSelect/index.tsx

@@ -0,0 +1,40 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../../../../components/ui/select";
+
+export default function CsvSelect({ node, handleChangeSelect }): JSX.Element {
+  return (
+    <>
+      <div className="flex justify-between">
+        Expand the ouptut to see the CSV
+      </div>
+      <div className="flex items-center justify-between pt-5">
+        <span>CSV separator </span>
+        <Select
+          value={node.data.node.template.separator.value}
+          onValueChange={(e) => handleChangeSelect(e)}
+        >
+          <SelectTrigger className="w-[70px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {node?.data?.node?.template?.separator?.options.map(
+                (separator) => (
+                  <SelectItem key={separator} value={separator}>
+                    {separator}
+                  </SelectItem>
+                ),
+              )}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </>
+  );
+}

src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx

@@ -5,17 +5,10 @@ import CsvOutputComponent from "../../../../components/csvOutputComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
 import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../../../components/ui/select";
 import { Textarea } from "../../../../components/ui/textarea";
 import { PDFViewConstant } from "../../../../constants/constants";
 import { InputOutput } from "../../../../constants/enums";
+import TextOutputView from "../../../../shared/components/textOutputView";
 import useFlowStore from "../../../../stores/flowStore";
 import { IOFieldViewProps } from "../../../../types/components";
 import {
@@ -24,6 +17,7 @@ import {
 } from "../../../../utils/reactflowUtils";
 import IOFileInput from "./components/FileInput";
 import IoJsonInput from "./components/JSONInput";
+import CsvSelect from "./components/csvSelect";
 import IOKeyPairInput from "./components/keyPairInput";
 
 export default function IOFieldView({
@@ -164,19 +158,7 @@ export default function IOFieldView({
         switch (fieldType) {
           case "TextOutput":
             return (
-              <Textarea
+              <TextOutputView left={left} node={node} flowPool={flowPool} />
-                className={`w-full custom-scroll ${
-                  left ? " min-h-32" : " h-full"
-                }`}
-                placeholder={"Empty"}
-                // update to real value on flowPool
-                value={
-                  (flowPool[node.id] ?? [])[
-                    (flowPool[node.id]?.length ?? 1) - 1
-                  ]?.data.results.result ?? ""
-                }
-                readOnly
-              />
             );
           case "PDFOutput":
             return left ? (
@@ -187,31 +169,10 @@ export default function IOFieldView({
           case "CSVOutput":
             return left ? (
               <>
-                <div className="flex justify-between">
+                <CsvSelect
-                  Expand the ouptut to see the CSV
+                  node={node}
-                </div>
+                  handleChangeSelect={handleChangeSelect}
-                <div className="flex items-center justify-between pt-5">
+                />
-                  <span>CSV separator </span>
-                  <Select
-                    value={node.data.node.template.separator.value}
-                    onValueChange={(e) => handleChangeSelect(e)}
-                  >
-                    <SelectTrigger className="w-[70px]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {node?.data?.node?.template?.separator?.options.map(
-                          (separator) => (
-                            <SelectItem key={separator} value={separator}>
-                              {separator}
-                            </SelectItem>
-                          ),
-                        )}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </div>
               </>
             ) : (
               <>

src/frontend/src/modals/baseModal/index.tsx

@@ -171,7 +171,8 @@ function BaseModal({
 
     case "large-h-full":
       minWidth = "min-w-[80vw]";
-      height = "h-full";
+      height = "h-full max-h-[70vh]";
+
       break;
     default:
       minWidth = "min-w-[80vw]";

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -19,10 +19,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import {
+import { classNames, removeCountFromString } from "../../../../utils/utils";
-  classNames,
-  removeCountFromString,
-} from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import ParentDisclosureComponent from "../ParentDisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
@@ -34,7 +31,6 @@ export default function ExtraSidebar(): JSX.Element {
   const templates = useTypesStore((state) => state.templates);
   const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -45,7 +41,7 @@ export default function ExtraSidebar(): JSX.Element {
   const [search, setSearch] = useState("");
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType }
+    data: { type: string; node?: APIClassType },
   ): void {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -71,7 +67,7 @@ export default function ExtraSidebar(): JSX.Element {
         let keys = Object.keys(data[d]).filter(
           (nd) =>
             nd.toLowerCase().includes(e.toLowerCase()) ||
-            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase())
+            data[d][nd].display_name?.toLowerCase().includes(e.toLowerCase()),
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -138,7 +134,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd)
+                filtered.includes(nd),
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -175,7 +171,7 @@ export default function ExtraSidebar(): JSX.Element {
 
             if (filtered.some((x) => x !== "")) {
               let keys = Object.keys(dataClone[d]).filter((nd) =>
-                filtered.includes(nd)
+                filtered.includes(nd),
               );
               Object.keys(dataClone[d]).forEach((element) => {
                 if (!keys.includes(element)) {
@@ -204,7 +200,7 @@ export default function ExtraSidebar(): JSX.Element {
             "extra-side-bar-buttons gap-[4px] text-sm font-semibold",
             !hasApiKey || !validApiKey || !hasStore
               ? "button-disable  cursor-default text-muted-foreground"
-              : ""
+              : "",
           )}
         >
           <IconComponent
@@ -213,14 +209,14 @@ export default function ExtraSidebar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : ""
+                : "",
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore]
+    [hasApiKey, validApiKey, currentFlow, hasStore],
   );
 
   const ExportMemo = useMemo(
@@ -231,7 +227,7 @@ export default function ExtraSidebar(): JSX.Element {
         </button>
       </ExportModal>
     ),
-    []
+    [],
   );
 
   const getIcon = useMemo(() => {
@@ -315,8 +311,8 @@ export default function ExtraSidebar(): JSX.Element {
                       .sort((a, b) =>
                         sensitiveSort(
                           dataFilter[SBSectionName][a].display_name,
-                          dataFilter[SBSectionName][b].display_name
+                          dataFilter[SBSectionName][b].display_name,
-                        )
+                        ),
                       )
                       .map((SBItemName: string, index) => (
                         <ShadTooltip
@@ -360,7 +356,7 @@ export default function ExtraSidebar(): JSX.Element {
               </>
             ) : (
               <div key={index}></div>
-            )
+            ),
           )}{" "}
         <ParentDisclosureComponent
           openDisc={false}
@@ -397,8 +393,8 @@ export default function ExtraSidebar(): JSX.Element {
                         .sort((a, b) =>
                           sensitiveSort(
                             dataFilter[SBSectionName][a].display_name,
-                            dataFilter[SBSectionName][b].display_name
+                            dataFilter[SBSectionName][b].display_name,
-                          )
+                          ),
                         )
                         .map((SBItemName: string, index) => (
                           <ShadTooltip
@@ -472,7 +468,7 @@ export default function ExtraSidebar(): JSX.Element {
                 </>
               ) : (
                 <div key={index}></div>
-              )
+              ),
             )}
         </ParentDisclosureComponent>
       </div>