tests: organize playwright tests by feature suites and optimize CI runtime (#4687)

* starting realocating components FE

* tagging tests

* 📝 (.github/workflows/typescript_test.yml): remove unnecessary comment before the Playwright test execution step to improve readability and maintainability

* 📝 (.github/changes-filter.yaml): Update paths in changes-filter.yaml to categorize different sections of the project for testing purposes
🔧 (.github/workflows/typescript_test.yml): Refactor workflow to use paths-filter action for determining test suites based on changes in different project sections

* ✨ (changes-filter.yaml): reorganize and update paths for test categories, starter projects, components, workspace, api, and database
✨ (components): add new components for GradientWrapper, pageLayout, and paginatorComponent
🔧 (MainPage): update import path for PageLayout component
🔧 (SettingsPage): update import path for PageLayout component
🔧 (StorePage): update import path for PageLayout component

* ✨ (frontend): Update import paths for components to use common directory instead of core directory for better organization and consistency
🔧 (frontend): Remove duplicate import of PaginatorComponent in various files and import it from the common directory to reduce redundancy and improve maintainability

* 🔧 (changes-filter.yaml): remove unnecessary release section from changes-filter.yaml
🔧 (typescript_test.yml): refactor workflow to support input suites and release flag for test runs

* 📝 (changes-filter.yaml): remove unnecessary entries from components section and add missing entries to workspace section for better organization and filtering of changes
🔧 (changes-filter.yaml): update changes-filter.yaml to include missing utils files in the frontend/src/utils directory
🔧 (typescript_test.yml): remove redundant code block that sets SUITES variable to default values as it is no longer needed due to changes in the changes-filter.yaml file

* ✨ (actionsMainPage-shard-1.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (store-shard-2.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (generalBugs-shard-4.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (generalBugs-shard-9.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (deleteComponents.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (deleteFlows.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity

✨ (dragAndDrop.spec.ts): Refactor drag and drop test to improve readability and maintainability
✨ (flowPage.spec.ts): Refactor save test in Flow Page to improve readability and maintainability
✨ (store-shard-0.spec.ts): Refactor Store test to improve readability and maintainability
✨ (store-shard-1.spec.ts): Refactor Store test to improve readability and maintainability

✨ (store-shard-3.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency
✨ (userSettings.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency
✨ (general-bugs-shard-3909.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency

📝 (frontend): Update test tags in regression tests to remove unnecessary tags for better organization and clarity
📝 (frontend): Update test file paths in tsconfig.json to match the new file structure for consistency and maintainability

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* Update paths-filter action to v3 and adjust filter configuration file

* Add logging to matrix setup in TypeScript test workflow

* Refactor decisionFlow.spec.ts to improve test setup and execution flow

* Refactor import paths for genericIconComponent and shadTooltipComponent in PlaygroundButton component

* feat: add release input to CI workflows for enhanced deployment control

* Fix: Correct 'release' input type in CI workflow configuration

* [autofix.ci] apply automated fixes

* Refactor Blog Writer test: streamline setup and interaction steps

* Refactor test cases to improve modal handling and streamline API key input logic

* Add test grep pattern to GitHub Actions workflow for targeted test execution

- Introduced `test_grep` output in the `determine-test-suite` job to generate a grep pattern based on changed files or input suites.
- Updated Playwright test execution to use the generated grep pattern, allowing for more targeted test runs.
- Enhanced the `Set Matrix` step to include tag processing for test filtering.

* Enhance tag filtering in test workflow with regex lookaheads

* Fix syntax for default suite input in GitHub Actions workflow

* Update GitHub Actions to handle empty suite input for release builds

* Escape regex lookaheads and quotes for GitHub Actions in test workflow

* Update regex pattern and quote escaping in TypeScript test workflow

* Use single quotes for echo command in GitHub Actions script

* Refactor tag handling in GitHub Actions to use OR logic for grep patterns

* 🔧 (FlowPage/index.tsx): Remove unnecessary empty line to improve code readability and consistency

* 📝 (FlowPage/index.tsx): add missing line break for better code readability

* Refactor import path and reorder CSS classes for consistency in UpdateAllComponents component

* [autofix.ci] apply automated fixes

* Update import path for PaginatorComponent in AdminPage index.tsx

* ✨ (logs.spec.ts): introduce a new variable 'modalCount' to keep track of the number of modals opened in the test suite

* 📝 (filterSidebar.spec.ts): remove unnecessary test steps related to filter removal and sidebar interactions to simplify and improve test focus on main functionality

* ✅ (logs.spec.ts): add tests to ensure proper interaction with logs feature in the frontend application

* ✅ (similarity.spec.ts): add a test tag for release and components to categorize the test case
💡 (similarity.spec.ts): add a comment to explain the purpose of the test case and the condition for skipping the test

* ✅ (decisionFlow.spec.ts): add missing newline before async function declaration to improve code readability

* ✅ (textInputOutput.spec.ts): skip the test for TextInputOutputComponent to exclude it from the test suite temporarily

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.github/changes-filter.yaml

@@ -16,3 +16,39 @@ frontend:
   - "**/typescript_test.yml"
 docs:
   - "docs/**"
+
+# Test categories and their associated paths
+starter-projects:
+  - "src/backend/base/langflow/initial_setup/**"
+  - "src/frontend/src/pages/MainPage/**"
+  - "src/frontend/src/utils/reactflowUtils.ts"
+
+components:
+  - "src/frontend/src/components/**"
+  - "src/frontend/src/modals/**"
+  - "src/frontend/src/pages/FlowPage/**"
+  - "src/frontend/src/shared/**"
+  - "src/frontend/src/hooks/**"
+  - "src/frontend/src/CustomNodes/**"
+  - "src/frontend/src/style/**"
+  - "src/frontend/src/utils/styleUtils.ts"
+  - "src/backend/base/langflow/components/**"
+
+workspace:
+  - "src/backend/base/langflow/inputs/**"
+  - "src/frontend/src/components/core/parameterRenderComponent/**"
+  - "src/frontend/src/CustomNodes/**"
+  - "src/frontend/src/modals/**"
+  - "src/frontend/src/style/**"
+  - "src/frontend/src/CustomEdges/**"
+  - "src/frontend/src/utils/reactflowUtils.ts"
+  - "src/frontend/src/utils/buildUtils.ts"
+
+api:
+  - "src/backend/base/langflow/api/**"
+  - "src/frontend/src/controllers/**"
+
+database:
+  - "src/backend/base/langflow/services/database/**"
+  - "src/backend/base/langflow/alembic/**"
+  - "src/frontend/src/controllers/**"

.github/workflows/ci.yml

@@ -13,6 +13,11 @@ on:
         required: false
         type: string
         default: "tests/core"
+      release:
+        description: "Release"
+        required: false
+        type: boolean
+        default: false
   workflow_dispatch:
     inputs:
       branch:
@@ -89,6 +94,7 @@ jobs:
     uses: ./.github/workflows/typescript_test.yml
     with:
       tests_folder: ${{ inputs.frontend-tests-folder }}
+      release: ${{ inputs.release || false }}
     secrets:
       OPENAI_API_KEY: "${{ secrets.OPENAI_API_KEY }}"
       STORE_API_KEY: "${{ secrets.STORE_API_KEY }}"
@@ -99,6 +105,7 @@ jobs:
     name: Lint Backend
     uses: ./.github/workflows/lint-py.yml
 
+
   test-docs-build:
     needs: path-filter
     if: ${{ needs.path-filter.outputs.docs == 'true' }}

.github/workflows/release.yml

@@ -49,6 +49,7 @@ jobs:
     with:
       python-versions: "['3.10', '3.11', '3.12']"
       frontend-tests-folder: "tests"
+      release: true
 
   release-base:
     name: Release Langflow Base

.github/workflows/typescript_test.yml

@@ -8,6 +8,16 @@ on:
       STORE_API_KEY:
         required: true
     inputs:
+      suites:
+        description: "Test suites to run (JSON array)"
+        required: false
+        type: string
+        default: '["starter-projects", "components", "workspace", "api", "database"]'
+      release:
+        description: "Whether this is a release build"
+        required: false
+        type: boolean
+        default: false
       tests_folder:
         description: "(Optional) Tests to run"
         required: false
@@ -19,6 +29,16 @@ on:
         type: string
   workflow_dispatch:
     inputs:
+      suites:
+        description: "Test suites to run (JSON array)"
+        required: false
+        type: string
+        default: '["starter-projects", "components", "workspace", "api", "database"]'
+      release:
+        description: "Whether this is a release build"
+        required: false
+        type: boolean
+        default: false
       tests_folder:
         description: "(Optional) Tests to run"
         required: false
@@ -33,9 +53,114 @@ env:
   PLAYWRIGHT_BROWSERS_PATH: "ms-playwright"
 
 jobs:
+  determine-test-suite:
+    runs-on: ubuntu-latest
+    outputs:
+      suites: ${{ steps.set-matrix.outputs.matrix }}
+      test_grep: ${{ steps.set-matrix.outputs.test_grep }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
+          fetch-depth: 0
+
+      - name: Paths Filter
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: .github/changes-filter.yaml
+
+      - name: Set Matrix and Test Grep
+        id: set-matrix
+        run: |
+          # Start with input suites if provided, otherwise empty array
+          SUITES='${{ inputs.suites }}'
+          echo "Initial suites: $SUITES"
+          TEST_GREP=""
+
+          RELEASE="${{ inputs.release || 'false' }}"
+          echo "Release build: $RELEASE"
+
+          if [[ "$RELEASE" == "true" || "$SUITES" == "[]" ]]; then
+            SUITES='["release"]'
+            echo "Release build detected - setting suites to: $SUITES"
+            # No grep pattern for release - run all tests
+            TEST_GREP=""
+          else
+            # If input suites were not provided, determine based on changes
+            if [[ "$SUITES" == "[]" ]]; then
+              echo "No input suites provided - determining from changes"
+              TAGS=()
+              # Add suites and tags based on changed files
+              if [[ "${{ steps.filter.outputs.components }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq '. += ["components"]')
+                TAGS+=("@components")
+                echo "Added components suite"
+              fi
+              if [[ "${{ steps.filter.outputs.starter-projects }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq '. += ["starter-projects"]')
+                TAGS+=("@starter-projects")
+                echo "Added starter-projects suite"
+              fi
+              if [[ "${{ steps.filter.outputs.workspace }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq '. += ["workspace"]')
+                TAGS+=("@workspace")
+                echo "Added workspace suite"
+              fi
+              if [[ "${{ steps.filter.outputs.api }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq '. += ["api"]')
+                TAGS+=("@api")
+                echo "Added api suite"
+              fi
+              if [[ "${{ steps.filter.outputs.database }}" == "true" ]]; then
+                SUITES=$(echo $SUITES | jq '. += ["database"]')
+                TAGS+=("@database")
+                echo "Added database suite"
+              fi
+
+              # Create grep pattern if we have tags
+              if [ ${#TAGS[@]} -gt 0 ]; then
+                # Join tags with | for OR logic
+                REGEX_PATTERN=$(IFS='|'; echo "${TAGS[*]}")
+                TEST_GREP="--grep=\"${REGEX_PATTERN}\""
+              fi
+            else
+              # Process input suites to tags
+              TAGS=()
+              if echo "$SUITES" | jq -e 'contains(["components"])' > /dev/null; then
+                TAGS+=("@components")
+              fi
+              if echo "$SUITES" | jq -e 'contains(["starter-projects"])' > /dev/null; then
+                TAGS+=("@starter-projects")
+              fi
+              if echo "$SUITES" | jq -e 'contains(["workspace"])' > /dev/null; then
+                TAGS+=("@workspace")
+              fi
+              if echo "$SUITES" | jq -e 'contains(["api"])' > /dev/null; then
+                TAGS+=("@api")
+              fi
+              if echo "$SUITES" | jq -e 'contains(["database"])' > /dev/null; then
+                TAGS+=("@database")
+              fi
+
+              if [ ${#TAGS[@]} -gt 0 ]; then
+                # Join tags with | for OR logic
+                REGEX_PATTERN=$(IFS='|'; echo "${TAGS[*]}")
+                TEST_GREP="--grep=\"${REGEX_PATTERN}\""
+              fi
+            fi
+          fi
+
+          echo "Final test suites to run: $SUITES"
+          echo "Test grep pattern: $TEST_GREP"
+          echo "matrix=$SUITES" >> $GITHUB_OUTPUT
+          echo "test_grep=$TEST_GREP" >> $GITHUB_OUTPUT
+
   setup-and-test:
     name: Playwright Tests - Group ${{ matrix.shardIndex }}
     runs-on: ubuntu-latest
+    needs: determine-test-suite
+    if: ${{ fromJson(needs.determine-test-suite.outputs.suites)[0] != null }}
     strategy:
       fail-fast: false
       matrix:
@@ -120,8 +245,9 @@ jobs:
           max_attempts: 2
           command: |
             cd src/frontend
-            npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
-            npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
+            echo 'Running tests with pattern: ${{ needs.determine-test-suite.outputs.test_grep }}'
+            npx playwright test ${{ inputs.tests_folder }} ${{ needs.determine-test-suite.outputs.test_grep }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
+            npx playwright test ${{ inputs.tests_folder }} ${{ needs.determine-test-suite.outputs.test_grep }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
 
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()

src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx

@@ -1,4 +1,4 @@
-import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
+import { convertTestName } from "@/components/common/storeCardComponent/utils/convert-test-name";
 import { Badge } from "@/components/ui/badge";
 
 export default function HandleTooltipComponent({

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -7,8 +7,8 @@ import {
 } from "@/customization/components/custom-parameter";
 import { cn } from "@/utils/utils";
 import { useEffect, useRef } from "react";
-import { default as IconComponent } from "../../../../components/genericIconComponent";
-import ShadTooltip from "../../../../components/shadTooltipComponent";
+import { default as IconComponent } from "../../../../components/common/genericIconComponent";
+import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import {
   DEFAULT_TOOLSET_PLACEHOLDER,
   FLEX_VIEW_TYPES,

src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx

@@ -2,8 +2,8 @@ import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import { cloneDeep } from "lodash";
 import { useEffect, useRef } from "react";
 import { useUpdateNodeInternals } from "reactflow";
-import { default as IconComponent } from "../../../../components/genericIconComponent";
-import ShadTooltip from "../../../../components/shadTooltipComponent";
+import { default as IconComponent } from "../../../../components/common/genericIconComponent";
+import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
 import useFlowStore from "../../../../stores/flowStore";
 import { useTypesStore } from "../../../../stores/typesStore";

src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx

@@ -2,7 +2,7 @@ import { getSpecificClassFromBuildStatus } from "@/CustomNodes/helpers/get-class
 import useIconStatus from "@/CustomNodes/hooks/use-icons-status";
 import useUpdateValidationStatus from "@/CustomNodes/hooks/use-update-validation-status";
 import useValidationStatusString from "@/CustomNodes/hooks/use-validation-status-string";
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,7 +24,7 @@ import { classNames, cn } from "@/utils/utils";
 import { Check } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import IconComponent from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/common/genericIconComponent";
 import { normalizeTimeString } from "./utils/format-run-time";
 
 export default function NodeStatus({

src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx

@@ -1,4 +1,4 @@
-import ShadTooltip from "../../../../components/shadTooltipComponent";
+import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import { outputComponentType } from "../../../../types/components";
 import { cn } from "../../../../utils/utils";
 

src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx

@@ -2,7 +2,7 @@ import { useDarkStore } from "@/stores/darkStore";
 import useFlowStore from "@/stores/flowStore";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Handle, Position } from "reactflow";
-import ShadTooltip from "../../../../components/shadTooltipComponent";
+import ShadTooltip from "../../../../components/common/shadTooltipComponent";
 import {
   isValidConnection,
   scapedJSONStringfy,

src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx

@@ -10,7 +10,7 @@ import emojiRegex from "emoji-regex";
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import { checkLucideIcons } from "@/CustomNodes/helpers/check-lucide-icons";
 import { cn } from "@/utils/utils";
-import IconComponent from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/common/genericIconComponent";
 
 export function NodeIcon({
   icon,

src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx

@@ -1,8 +1,8 @@
 import { MAX_TEXT_LENGTH } from "@/constants/constants";
 import { LogsLogType, OutputLogType } from "@/types/api";
 import { useMemo } from "react";
-import DataOutputComponent from "../../../../../../components/dataOutputComponent";
-import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+import ForwardedIconComponent from "../../../../../../components/common/genericIconComponent";
+import DataOutputComponent from "../../../../../../components/core/dataOutputComponent";
 import {
   Alert,
   AlertDescription,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,9 +1,9 @@
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
-import { ForwardedIconComponent } from "../../components/genericIconComponent";
-import ShadTooltip from "../../components/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import {
   TOOLTIP_HIDDEN_OUTPUTS,

src/frontend/src/CustomNodes/NoteNode/NoteToolbarComponent/index.tsx

@@ -1,4 +1,4 @@
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import {
   Popover,
@@ -20,7 +20,7 @@ import { useShortcutsStore } from "@/stores/shortcuts";
 import { noteDataType } from "@/types/flow";
 import { classNames, cn, openInNewTab } from "@/utils/utils";
 import { cloneDeep } from "lodash";
-import IconComponent from "../../../components/genericIconComponent";
+import IconComponent from "../../../components/common/genericIconComponent";
 
 export default function NoteToolbarComponent({
   data,

src/frontend/src/CustomNodes/hooks/use-icons-status.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "../../components/genericIconComponent";
+import ForwardedIconComponent from "../../components/common/genericIconComponent";
 import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,6 +1,6 @@
 import { CustomLink } from "@/customization/components/custom-link";
 import { useState } from "react";
-import IconComponent from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/common/genericIconComponent";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
 export default function SingleAlert({

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,6 +1,6 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { useEffect, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
+import IconComponent from "../../components/common/genericIconComponent";
 import {
   Popover,
   PopoverContent,

src/frontend/src/alerts/error/index.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
+import IconComponent from "../../components/common/genericIconComponent";
 import { ErrorAlertType } from "../../types/alerts";
 
 export default function ErrorAlert({

src/frontend/src/alerts/notice/index.tsx

@@ -1,7 +1,7 @@
 import { CustomLink } from "@/customization/components/custom-link";
 import { Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
+import IconComponent from "../../components/common/genericIconComponent";
 import { NoticeAlertType } from "../../types/alerts";
 
 export default function NoticeAlert({

src/frontend/src/alerts/success/index.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
+import IconComponent from "../../components/common/genericIconComponent";
 import { SuccessAlertType } from "../../types/alerts";
 
 export default function SuccessAlert({

src/frontend/src/components/authorization/authAdminGuard/index.tsx

@@ -1,8 +1,8 @@
+import { AuthContext } from "@/contexts/authContext";
 import { CustomNavigate } from "@/customization/components/custom-navigate";
 import { LoadingPage } from "@/pages/LoadingPage";
 import useAuthStore from "@/stores/authStore";
 import { useContext } from "react";
-import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedAdminRoute = ({ children }) => {
   const { userData } = useContext(AuthContext);

src/frontend/src/components/authorization/storeGuard/index.tsx

@@ -1,5 +1,5 @@
 import { CustomNavigate } from "@/customization/components/custom-navigate";
-import { useStoreStore } from "../../stores/storeStore";
+import { useStoreStore } from "../../../stores/storeStore";
 
 export const StoreGuard = ({ children }) => {
   const hasStore = useStoreStore((state) => state.hasStore);

src/frontend/src/components/common/ImageViewer/index.tsx

@@ -1,10 +1,13 @@
 import { saveAs } from "file-saver";
 import OpenSeadragon from "openseadragon";
 import { useEffect, useRef, useState } from "react";
-import { IMGViewErrorMSG, IMGViewErrorTitle } from "../../constants/constants";
-import useAlertStore from "../../stores/alertStore";
+import {
+  IMGViewErrorMSG,
+  IMGViewErrorTitle,
+} from "../../../constants/constants";
+import useAlertStore from "../../../stores/alertStore";
+import { Separator } from "../../ui/separator";
 import ForwardedIconComponent from "../genericIconComponent";
-import { Separator } from "../ui/separator";
 
 export default function ImageViewer({ image }: { image: string }) {
   const viewerRef = useRef(null);

src/frontend/src/components/common/accordionComponent/composite/folderAccordionComponent/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import IconComponent from "../../../../components/genericIconComponent";
 import { AccordionComponentType } from "../../../../types/components";
+import IconComponent from "../../../common/genericIconComponent";
 import {
   Accordion,
   AccordionContent,

src/frontend/src/components/common/accordionComponent/index.tsx

@@ -1,12 +1,12 @@
-import { useState } from "react";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "../../components/ui/accordion";
-import { AccordionComponentType } from "../../types/components";
-import { cn } from "../../utils/utils";
+} from "@/components/ui/accordion";
+import { AccordionComponentType } from "@/types/components";
+import { cn } from "@/utils/utils";
+import { useState } from "react";
 
 export default function AccordionComponent({
   trigger,

src/frontend/src/components/common/crashErrorComponent/index.tsx

@@ -1,7 +1,7 @@
 import { XCircle } from "lucide-react";
-import { crashComponentPropsType } from "../../types/components";
-import { Button } from "../ui/button";
-import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
+import { crashComponentPropsType } from "../../../types/components";
+import { Button } from "../../ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "../../ui/card";
 
 export default function CrashErrorComponent({
   error,

src/frontend/src/components/common/fetchErrorComponent/index.tsx

@@ -1,5 +1,5 @@
-import BaseModal from "../../modals/baseModal";
-import { fetchErrorComponentType } from "../../types/components";
+import BaseModal from "../../../modals/baseModal";
+import { fetchErrorComponentType } from "../../../types/components";
 import IconComponent from "../genericIconComponent";
 
 export default function FetchErrorComponent({

src/frontend/src/components/common/genericIconComponent/index.tsx

@@ -1,9 +1,9 @@
 import dynamicIconImports from "lucide-react/dynamicIconImports";
 import { Suspense, forwardRef, lazy, memo } from "react";
-import { IconComponentProps } from "../../types/components";
-import { nodeIconsLucide } from "../../utils/styleUtils";
-import { cn } from "../../utils/utils";
-import Loading from "../ui/loading";
+import { IconComponentProps } from "../../../types/components";
+import { nodeIconsLucide } from "../../../utils/styleUtils";
+import { cn } from "../../../utils/utils";
+import Loading from "../../ui/loading";
 
 import { useEffect, useState } from "react";
 

src/frontend/src/components/common/loadingComponent/index.tsx

@@ -1,4 +1,4 @@
-import { LoadingComponentProps } from "../../types/components";
+import { LoadingComponentProps } from "../../../types/components";
 
 export default function LoadingComponent({
   remSize,

src/frontend/src/components/common/objectRender/index.tsx

@@ -1,4 +1,4 @@
-import DictAreaModal from "../../modals/dictAreaModal";
+import DictAreaModal from "../../../modals/dictAreaModal";
 
 export default function ObjectRender({
   object,

src/frontend/src/components/common/pageLayout/index.tsx

@@ -1,8 +1,8 @@
 import { CustomBanner } from "@/customization/components/custom-banner";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import { Button } from "../../ui/button";
+import { Separator } from "../../ui/separator";
 import ForwardedIconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
-import { Separator } from "../ui/separator";
 
 export default function PageLayout({
   title,

src/frontend/src/components/common/paginatorComponent/index.tsx

@@ -4,16 +4,16 @@ import {
   PAGINATION_SIZE,
 } from "@/constants/constants";
 import { useEffect, useState } from "react";
-import { PaginatorComponentType } from "../../types/components";
-import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
+import { PaginatorComponentType } from "../../../types/components";
+import IconComponent from "../../common/genericIconComponent";
+import { Button } from "../../ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
+} from "../../ui/select";
 
 export default function PaginatorComponent({
   pageSize = PAGINATION_SIZE,

src/frontend/src/components/common/renderIconComponent/components/renderKey/index.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "@/components/genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { IS_MAC } from "@/constants/constants";
 import { cn } from "@/utils/utils";
 

src/frontend/src/components/common/sanitizedHTMLWrapper/index.tsx

@@ -1,6 +1,6 @@
 import DOMPurify from "dompurify";
 import { forwardRef } from "react";
-import { SanitizedHTMLWrapperType } from "../../types/components";
+import { SanitizedHTMLWrapperType } from "../../../types/components";
 
 const SanitizedHTMLWrapper = forwardRef<
   HTMLDivElement,

src/frontend/src/components/common/shadTooltipComponent/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ShadToolTipType } from "../../types/components";
-import { cn } from "../../utils/utils";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ShadToolTipType } from "../../../types/components";
+import { cn } from "../../../utils/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
 
 const ShadTooltip: React.FC<ShadToolTipType> = ({
   content,

src/frontend/src/components/common/skeletonCardComponent/index.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "../ui/skeleton";
+import { Skeleton } from "../../ui/skeleton";
 
 export const SkeletonCardComponent = (): JSX.Element => {
   return (

src/frontend/src/components/common/storeCardComponent/hooks/use-data-effect.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { storeComponent } from "../../../types/store";
+import { storeComponent } from "../../../../types/store";
 
 const useDataEffect = (
   data: storeComponent,

src/frontend/src/components/common/storeCardComponent/hooks/use-handle-install.tsx

@@ -1,7 +1,7 @@
 import useAddFlow from "@/hooks/flows/use-add-flow";
-import { getComponent } from "../../../controllers/API";
-import { storeComponent } from "../../../types/store";
-import cloneFlowWithParent from "../../../utils/storeUtils";
+import { getComponent } from "../../../../controllers/API";
+import { storeComponent } from "../../../../types/store";
+import cloneFlowWithParent from "../../../../utils/storeUtils";
 
 const useInstallComponent = (
   data: storeComponent,

src/frontend/src/components/common/storeCardComponent/index.tsx

@@ -1,28 +1,28 @@
 import { usePostLikeComponent } from "@/controllers/API/queries/store";
 import { useState } from "react";
-import { getComponent } from "../../controllers/API";
-import IOModalOld from "../../modals/IOModal";
-import IOModalNew from "../../modals/IOModal/newModal";
-import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { useStoreStore } from "../../stores/storeStore";
-import { FlowType } from "../../types/flow";
-import { storeComponent } from "../../types/store";
+import { getComponent } from "../../../controllers/API";
+import IOModalOld from "../../../modals/IOModal";
+import IOModalNew from "../../../modals/IOModal/newModal";
+import useAlertStore from "../../../stores/alertStore";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { useStoreStore } from "../../../stores/storeStore";
+import { FlowType } from "../../../types/flow";
+import { storeComponent } from "../../../types/store";
 import cloneFLowWithParent, {
   getInputsAndOutputs,
-} from "../../utils/storeUtils";
-import { cn } from "../../utils/utils";
-import IconComponent from "../genericIconComponent";
-import ShadTooltip from "../shadTooltipComponent";
-import { Button } from "../ui/button";
+} from "../../../utils/storeUtils";
+import { cn } from "../../../utils/utils";
+import { Button } from "../../ui/button";
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "../ui/card";
-import Loading from "../ui/loading";
+} from "../../ui/card";
+import Loading from "../../ui/loading";
+import IconComponent from "../genericIconComponent";
+import ShadTooltip from "../shadTooltipComponent";
 import useDataEffect from "./hooks/use-data-effect";
 import useInstallComponent from "./hooks/use-handle-install";
 import { convertTestName } from "./utils/convert-test-name";

src/frontend/src/components/common/stringReaderComponent/index.tsx

@@ -1,4 +1,4 @@
-import TextModal from "../../modals/textModal";
+import TextModal from "../../../modals/textModal";
 
 export default function StringReader({
   string,

src/frontend/src/components/common/tagsSelectorComponent/index.tsx

@@ -1,6 +1,6 @@
-import { cn } from "../../utils/utils";
+import { cn } from "../../../utils/utils";
+import { Badge } from "../../ui/badge";
 import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
-import { Badge } from "../ui/badge";
 
 export function TagsSelector({
   tags,

src/frontend/src/components/common/timeoutErrorComponent/index.tsx

@@ -1,7 +1,7 @@
-import BaseModal from "../../modals/baseModal";
-import { fetchErrorComponentType } from "../../types/components";
+import BaseModal from "../../../modals/baseModal";
+import { fetchErrorComponentType } from "../../../types/components";
+import Loading from "../../ui/loading";
 import IconComponent from "../genericIconComponent";
-import Loading from "../ui/loading";
 
 export default function TimeoutErrorComponent({
   message,

src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx

@@ -6,22 +6,23 @@ import {
 import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields";
 import { GlobalVariable } from "@/types/global_variables";
 import { useEffect, useState } from "react";
-import BaseModal from "../../modals/baseModal";
-import useAlertStore from "../../stores/alertStore";
-import { useTypesStore } from "../../stores/typesStore";
-import { ResponseErrorDetailAPI } from "../../types/api";
-import ForwardedIconComponent from "../genericIconComponent";
-import InputComponent from "../inputComponent";
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
+
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
-import { Textarea } from "../ui/textarea";
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import BaseModal from "@/modals/baseModal";
+import useAlertStore from "@/stores/alertStore";
+import { useTypesStore } from "@/stores/typesStore";
+import { ResponseErrorDetailAPI } from "@/types/api";
+import InputComponent from "../parameterRenderComponent/components/inputComponent";
 import sortByName from "./utils/sort-by-name";
 
 //TODO IMPLEMENT FORM LOGIC

src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "@/components/genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { useLogout } from "@/controllers/API/queries/auth";
 import { CustomFeedbackDialog } from "@/customization/components/custom-feedback-dialog";
 import { CustomHeaderMenuItemsTitle } from "@/customization/components/custom-header-menu-items-title";

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

@@ -7,8 +7,8 @@ import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { customStringify } from "@/utils/reactflowUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 
-import IconComponent from "@/components/genericIconComponent";
-import ShadTooltip from "@/components/shadTooltipComponent";
+import IconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,

src/frontend/src/components/core/appHeaderComponent/components/GithubStarButton/index.tsx

@@ -1,4 +1,4 @@
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { useDarkStore } from "@/stores/darkStore";
 import { FaGithub } from "react-icons/fa";
 

src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/index.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "@/components/genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import {
   DropdownMenu,
   DropdownMenuContent,

src/frontend/src/components/core/appHeaderComponent/components/ThemeButtons/index.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "@/components/genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import useTheme from "@/customization/hooks/use-custom-theme";
 import { useEffect, useState } from "react";

src/frontend/src/components/core/appHeaderComponent/index.tsx

@@ -1,7 +1,10 @@
 import AlertDropdown from "@/alerts/alertDropDown";
 import DataStaxLogo from "@/assets/DataStaxLogo.svg?react";
 import LangflowLogo from "@/assets/LangflowLogo.svg?react";
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { CustomOrgSelector } from "@/customization/components/custom-org-selector";
 import { CustomProductSelector } from "@/customization/components/custom-product-selector";
 import {
@@ -12,9 +15,6 @@ import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import useTheme from "@/customization/hooks/use-custom-theme";
 import useAlertStore from "@/stores/alertStore";
 import { useEffect, useRef, useState } from "react";
-import ForwardedIconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
-import { Separator } from "../ui/separator";
 import { AccountMenu } from "./components/AccountMenu";
 import FlowMenu from "./components/FlowMenu";
 import GithubStarComponent from "./components/GithubStarButton";

src/frontend/src/components/core/canvasControlsComponent/index.tsx

@@ -1,5 +1,5 @@
-import IconComponent from "@/components/genericIconComponent";
-import ShadTooltip from "@/components/shadTooltipComponent";
+import IconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { cn } from "@/utils/utils";
 import {
   ControlButton,

src/frontend/src/components/core/cardComponent/components/dragCardComponent/index.tsx

@@ -1,8 +1,8 @@
 import { FlowType } from "@/types/flow";
-import { storeComponent } from "../../../../types/store";
-import { cn } from "../../../../utils/utils";
-import ForwardedIconComponent from "../../../genericIconComponent";
-import { Card, CardHeader, CardTitle } from "../../../ui/card";
+import { storeComponent } from "../../../../../types/store";
+import { cn } from "../../../../../utils/utils";
+import ForwardedIconComponent from "../../../../common/genericIconComponent";
+import { Card, CardHeader, CardTitle } from "../../../../ui/card";
 
 export default function DragCardComponent({ data }: { data: FlowType }) {
   return (

src/frontend/src/components/core/cardComponent/hooks/use-handle-install.tsx

@@ -1,7 +1,7 @@
 import useAddFlow from "@/hooks/flows/use-add-flow";
-import { getComponent } from "../../../controllers/API";
-import { storeComponent } from "../../../types/store";
-import cloneFlowWithParent from "../../../utils/storeUtils";
+import { getComponent } from "../../../../controllers/API";
+import { storeComponent } from "../../../../types/store";
+import cloneFlowWithParent from "../../../../utils/storeUtils";
 
 const useInstallComponent = (
   data: storeComponent,

src/frontend/src/components/core/cardComponent/hooks/use-on-drag-start.tsx

@@ -1,8 +1,8 @@
 import { FlowType } from "@/types/flow";
 import { useCallback } from "react";
 import { createRoot } from "react-dom/client";
-import useFlowsManagerStore from "../../../stores/flowsManagerStore";
-import { storeComponent } from "../../../types/store";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { storeComponent } from "../../../../types/store";
 import DragCardComponent from "../components/dragCardComponent";
 
 const useDragStart = (data: FlowType) => {

src/frontend/src/components/core/cardComponent/index.tsx

@@ -1,24 +1,24 @@
 import { track } from "@/customization/utils/analytics";
 import { useState } from "react";
 import { Control } from "react-hook-form";
-import useAlertStore from "../../stores/alertStore";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
-import { FlowType } from "../../types/flow";
-import { getInputsAndOutputs } from "../../utils/storeUtils";
-import { cn } from "../../utils/utils";
-import IconComponent from "../genericIconComponent";
-import ShadTooltip from "../shadTooltipComponent";
-import { Button } from "../ui/button";
+import useAlertStore from "../../../stores/alertStore";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { FlowType } from "../../../types/flow";
+import { getInputsAndOutputs } from "../../../utils/storeUtils";
+import { cn } from "../../../utils/utils";
+import IconComponent from "../../common/genericIconComponent";
+import ShadTooltip from "../../common/shadTooltipComponent";
+import { Button } from "../../ui/button";
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "../ui/card";
-import { Checkbox } from "../ui/checkbox";
-import { FormControl, FormField } from "../ui/form";
-import Loading from "../ui/loading";
+} from "../../ui/card";
+import { Checkbox } from "../../ui/checkbox";
+import { FormControl, FormField } from "../../ui/form";
+import Loading from "../../ui/loading";
 import useDragStart from "./hooks/use-on-drag-start";
 import { convertTestName } from "./utils/convert-test-name";
 

src/frontend/src/components/core/cardsWrapComponent/index.tsx

@@ -1,7 +1,7 @@
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useEffect, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import { cn } from "../../utils/utils";
+import { cn } from "../../../utils/utils";
+import IconComponent from "../../common/genericIconComponent";
 
 export default function CardsWrapComponent({
   onFileDrop,

src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx

@@ -8,8 +8,8 @@ import { useState } from "react";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
-import ForwardedIconComponent from "../genericIconComponent";
-import { Separator } from "../ui/separator";
+import ForwardedIconComponent from "../../common/genericIconComponent";
+import { Separator } from "../../ui/separator";
 import ContentDisplay from "./ContentDisplay";
 import DurationDisplay from "./DurationDisplay";
 

src/frontend/src/components/core/chatComponents/ContentDisplay.tsx

@@ -4,8 +4,8 @@ import { ReactNode } from "react";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
+import ForwardedIconComponent from "../../common/genericIconComponent";
 import SimplifiedCodeTabComponent from "../codeTabsComponent/ChatCodeTabComponent";
-import ForwardedIconComponent from "../genericIconComponent";
 import DurationDisplay from "./DurationDisplay";
 
 export default function ContentDisplay({

src/frontend/src/components/core/chatComponents/DurationDisplay.tsx

@@ -1,8 +1,8 @@
 import { useDurationStore } from "@/stores/durationStore";
 import { useEffect } from "react";
-import { AnimatedNumber } from "../animatedNumbers";
-import ForwardedIconComponent from "../genericIconComponent";
-import Loading from "../ui/loading";
+import { AnimatedNumber } from "../../common/animatedNumbers";
+import ForwardedIconComponent from "../../common/genericIconComponent";
+import Loading from "../../ui/loading";
 
 interface DurationDisplayProps {
   duration?: number;

src/frontend/src/components/core/codeTabsComponent/ChatCodeTabComponent.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { useDarkStore } from "../../stores/darkStore";
-import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
+import { useDarkStore } from "../../../stores/darkStore";
+import IconComponent from "../../common/genericIconComponent";
+import { Button } from "../../ui/button";
 
 type SimplifiedCodeTabProps = {
   code: string;

src/frontend/src/components/core/codeTabsComponent/components/tweakComponent/index.tsx

@@ -1,5 +1,5 @@
-import AccordionComponent from "@/components/accordionComponent";
-import ShadTooltip from "@/components/shadTooltipComponent";
+import AccordionComponent from "@/components/common/accordionComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { EditNodeComponent } from "@/modals/editNodeModal/components/editNodeComponent";
 import { APIClassType } from "@/types/api";
 import { NodeType } from "@/types/flow";

src/frontend/src/components/core/codeTabsComponent/index.tsx

@@ -1,20 +1,15 @@
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { useTweaksStore } from "@/stores/tweaksStore";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
-import { useDarkStore } from "../../stores/darkStore";
-import { codeTabsPropsType } from "../../types/components";
-import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
-import { Label } from "../ui/label";
-import { Switch } from "../ui/switch";
+import { useDarkStore } from "../../../stores/darkStore";
+import { codeTabsPropsType } from "../../../types/components";
+import IconComponent from "../../common/genericIconComponent";
+import { Button } from "../../ui/button";
+import { Label } from "../../ui/label";
+import { Switch } from "../../ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
 import { TweaksComponent } from "./components/tweaksComponent";
 
 export default function CodeTabsComponent({

src/frontend/src/components/core/csvOutputComponent/index.tsx

@@ -5,13 +5,13 @@ import {
   CSVError,
   CSVNoDataError,
   CSVViewErrorTitle,
-} from "../../constants/constants";
-import { useDarkStore } from "../../stores/darkStore";
-import { VertexBuildTypeAPI } from "../../types/api";
-import { NodeType } from "../../types/flow";
-import ForwardedIconComponent from "../genericIconComponent";
-import TableComponent from "../tableComponent";
-import Loading from "../ui/loading";
+} from "../../../constants/constants";
+import { useDarkStore } from "../../../stores/darkStore";
+import { VertexBuildTypeAPI } from "../../../types/api";
+import { NodeType } from "../../../types/flow";
+import ForwardedIconComponent from "../../common/genericIconComponent";
+import Loading from "../../ui/loading";
+import TableComponent from "../parameterRenderComponent/components/tableComponent";
 import { convertCSVToData } from "./helpers/convert-data-function";
 
 function CsvOutputComponent({

src/frontend/src/components/core/dataOutputComponent/index.tsx

@@ -1,8 +1,8 @@
+import TableComponent from "@/components/core/parameterRenderComponent/components/tableComponent";
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
-import { extractColumnsFromRows } from "../../utils/utils";
-import TableComponent from "../tableComponent";
+import { extractColumnsFromRows } from "../../../utils/utils";
 
 function DataOutputComponent({
   pagination,

src/frontend/src/components/core/dropdownButtonComponent/index.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
-import { dropdownButtonPropsType } from "../../types/components";
-import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
+import { dropdownButtonPropsType } from "../../../types/components";
+import IconComponent from "../../common/genericIconComponent";
+import { Button } from "../../ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+} from "../../ui/dropdown-menu";
 
 export default function DropdownButton({
   firstButtonName,

src/frontend/src/components/core/dropdownComponent/index.tsx

@@ -2,24 +2,24 @@ import { PopoverAnchor } from "@radix-ui/react-popover";
 import Fuse from "fuse.js";
 import { cloneDeep } from "lodash";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
-import { DropDownComponent } from "../../types/components";
-import { cn, formatPlaceholderName } from "../../utils/utils";
-import { default as ForwardedIconComponent } from "../genericIconComponent";
-import ShadTooltip from "../shadTooltipComponent";
-import { Button } from "../ui/button";
+import { DropDownComponent } from "../../../types/components";
+import { cn, formatPlaceholderName } from "../../../utils/utils";
+import { default as ForwardedIconComponent } from "../../common/genericIconComponent";
+import ShadTooltip from "../../common/shadTooltipComponent";
+import { Button } from "../../ui/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandItem,
   CommandList,
-} from "../ui/command";
+} from "../../ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverContentWithoutPortal,
   PopoverTrigger,
-} from "../ui/popover";
+} from "../../ui/popover";
 
 export default function Dropdown({
   disabled,

src/frontend/src/components/core/editFlowSettingsComponent/index.tsx

@@ -1,9 +1,9 @@
 import React, { ChangeEvent, useState } from "react";
-import { Input } from "../../components/ui/input";
-import { Label } from "../../components/ui/label";
-import { Textarea } from "../../components/ui/textarea";
-import { InputProps } from "../../types/components";
-import { cn, isEndpointNameValid } from "../../utils/utils";
+import { InputProps } from "../../../types/components";
+import { cn, isEndpointNameValid } from "../../../utils/utils";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+import { Textarea } from "../../ui/textarea";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,

src/frontend/src/components/core/flowToolbarComponent/index.tsx

@@ -1,21 +1,20 @@
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import PlaygroundButton from "@/components/flowToolbarComponent/components/playground-button";
 import {
   ENABLE_API,
   ENABLE_LANGFLOW_STORE,
 } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
-import IOModal from "@/modals/IOModal/newModal";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Panel } from "reactflow";
-import ApiModal from "../../modals/apiModal";
-import ShareModal from "../../modals/shareModal";
-import useFlowStore from "../../stores/flowStore";
-import { useShortcutsStore } from "../../stores/shortcuts";
-import { useStoreStore } from "../../stores/storeStore";
-import { classNames, isThereModal } from "../../utils/utils";
-import ForwardedIconComponent from "../genericIconComponent";
-import PlaygroundButton from "./components/playground-button";
+import ApiModal from "../../../modals/apiModal";
+import ShareModal from "../../../modals/shareModal";
+import useFlowStore from "../../../stores/flowStore";
+import { useShortcutsStore } from "../../../stores/shortcuts";
+import { useStoreStore } from "../../../stores/storeStore";
+import { classNames, isThereModal } from "../../../utils/utils";
+import ForwardedIconComponent from "../../common/genericIconComponent";
 
 export default function FlowToolbar(): JSX.Element {
   const preventDefault = true;

src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -1,4 +1,4 @@
-import ShadTooltip from "@/components/shadTooltipComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import {
   Select,
   SelectContent,
@@ -31,15 +31,15 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { useIsFetching, useIsMutating } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
-import { FolderType } from "../../../../pages/MainPage/entities";
-import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { useFolderStore } from "../../../../stores/foldersStore";
-import { handleKeyDown } from "../../../../utils/reactflowUtils";
-import { cn } from "../../../../utils/utils";
-import IconComponent from "../../../genericIconComponent";
-import { Button } from "../../../ui/button";
-import { Input } from "../../../ui/input";
+import { FolderType } from "../../../../../pages/MainPage/entities";
+import useAlertStore from "../../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../../stores/foldersStore";
+import { handleKeyDown } from "../../../../../utils/reactflowUtils";
+import { cn } from "../../../../../utils/utils";
+import IconComponent from "../../../../common/genericIconComponent";
+import { Button } from "../../../../ui/button";
+import { Input } from "../../../../ui/input";
 import useFileDrop from "../../hooks/use-on-file-drop";
 import { SidebarFolderSkeleton } from "../sidebarFolderSkeleton";
 

src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx

@@ -3,11 +3,11 @@ import useSaveFlow from "@/hooks/flows/use-save-flow";
 import {
   UPLOAD_ALERT_LIST,
   WRONG_FILE_ERROR_ALERT,
-} from "../../../constants/alerts_constants";
-import useAlertStore from "../../../stores/alertStore";
-import useFlowsManagerStore from "../../../stores/flowsManagerStore";
-import { useFolderStore } from "../../../stores/foldersStore";
-import { addVersionToDuplicates } from "../../../utils/reactflowUtils";
+} from "../../../../constants/alerts_constants";
+import useAlertStore from "../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
+import { addVersionToDuplicates } from "../../../../utils/reactflowUtils";
 
 const useFileDrop = (folderId: string) => {
   const setFolderDragging = useFolderStore((state) => state.setFolderDragging);

src/frontend/src/components/core/folderSidebarComponent/index.tsx

@@ -1,5 +1,5 @@
 import { useLocation } from "react-router-dom";
-import { FolderType } from "../../pages/MainPage/entities";
+import { FolderType } from "../../../pages/MainPage/entities";
 import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
 
 type SidebarNavProps = {

src/frontend/src/components/core/parameterRenderComponent/components/TableNodeComponent/index.tsx

@@ -4,8 +4,8 @@ import { DataTypeDefinition, SelectionChangedEvent } from "ag-grid-community";
 import { AgGridReact } from "ag-grid-react";
 import { cloneDeep } from "lodash";
 import { useMemo, useRef, useState } from "react";
-import { ForwardedIconComponent } from "../../../genericIconComponent";
-import { Button } from "../../../ui/button";
+import { ForwardedIconComponent } from "../../../../common/genericIconComponent";
+import { Button } from "../../../../ui/button";
 import { InputProps, TableComponentType } from "../../types";
 
 export default function TableNodeComponent({

src/frontend/src/components/core/parameterRenderComponent/components/codeAreaComponent/index.tsx

@@ -1,8 +1,8 @@
 import { GRADIENT_CLASS } from "@/constants/constants";
 import CodeAreaModal from "@/modals/codeAreaModal";
-import { cn } from "../../../../utils/utils";
-import IconComponent from "../../../genericIconComponent";
-import { Button } from "../../../ui/button";
+import { cn } from "../../../../../utils/utils";
+import IconComponent from "../../../../common/genericIconComponent";
+import { Button } from "../../../../ui/button";
 import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
 import { InputProps } from "../../types";
 

src/frontend/src/components/core/parameterRenderComponent/components/dictComponent/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
 
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
-import DictAreaModal from "../../../../modals/dictAreaModal";
-import { classNames, cn, toTitleCase } from "../../../../utils/utils";
-import ForwardedIconComponent from "../../../genericIconComponent";
-import { Button } from "../../../ui/button";
+import DictAreaModal from "../../../../../modals/dictAreaModal";
+import { classNames, cn, toTitleCase } from "../../../../../utils/utils";
+import ForwardedIconComponent from "../../../../common/genericIconComponent";
+import { Button } from "../../../../ui/button";
 import { InputProps } from "../../types";
 
 export default function DictComponent({

src/frontend/src/components/core/parameterRenderComponent/components/floatComponent/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/number-input";
 import { MinusIcon, PlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { handleKeyDown } from "../../../../utils/reactflowUtils";
+import { handleKeyDown } from "../../../../../utils/reactflowUtils";
 import { FloatComponentType, InputProps } from "../../types";
 
 export default function FloatComponent({

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx

@@ -1,4 +1,4 @@
-import ForwardedIconComponent from "@/components/genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { Badge } from "@/components/ui/badge";
 import {
   Command,

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popoverObject/index.tsx

@@ -1,19 +1,19 @@
-import { PopoverAnchor } from "@radix-ui/react-popover";
-import { classNames, cn } from "../../../../utils/utils";
-import ForwardedIconComponent from "../../../genericIconComponent";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import {
   Command,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
-} from "../../../ui/command";
-import { Input } from "../../../ui/input";
+} from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverContentWithoutPortal,
-} from "../../../ui/popover";
+} from "@/components/ui/popover";
+import { classNames, cn } from "@/utils/utils";
+import { PopoverAnchor } from "@radix-ui/react-popover";
 const CustomInputPopoverObject = ({
   id,
   refInput,

src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/index.tsx

@@ -1,11 +1,11 @@
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Input } from "@/components/ui/input";
 import { ICON_STROKE_WIDTH } from "@/constants/constants";
+import { InputComponentType } from "@/types/components";
+import { handleKeyDown } from "@/utils/reactflowUtils";
+import { classNames, cn } from "@/utils/utils";
 import * as Form from "@radix-ui/react-form";
 import { useEffect, useRef, useState } from "react";
-import { InputComponentType } from "../../types/components";
-import { handleKeyDown } from "../../utils/reactflowUtils";
-import { classNames, cn } from "../../utils/utils";
-import ForwardedIconComponent from "../genericIconComponent";
-import { Input } from "../ui/input";
 import { getIconName } from "./components/helpers/get-icon-name";
 import CustomInputPopover from "./components/popover";
 import CustomInputPopoverObject from "./components/popoverObject";