Refactor: Remove unused imports across multiple frontend components (#6232)

* refactor: Remove unused imports across multiple frontend components

* update outdated components

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 
 import { getNodeOutputColors } from "../../../helpers/get-node-output-colors";
 import { getNodeOutputColorsName } from "../../../helpers/get-node-output-colors-name";

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

@@ -1,9 +1,6 @@
 import ForwardedIconComponent from "../../components/common/genericIconComponent";
-import Checkmark from "../../components/ui/checkmark";
-import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
-import { VertexBuildTypeAPI } from "../../types/api";
 
 const useIconStatus = (buildStatus: BuildStatus | undefined) => {
   const conditionError = buildStatus === BuildStatus.ERROR;

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

@@ -18,7 +18,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../ui/card";
-import Loading from "../../ui/loading";
 import IconComponent from "../genericIconComponent";
 import ShadTooltip from "../shadTooltipComponent";
 import useDataEffect from "./hooks/use-data-effect";

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

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

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

@@ -1,4 +1,3 @@
-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/cardComponent/components/dragCardComponent/index.tsx

@@ -1,5 +1,4 @@
 import { FlowType } from "@/types/flow";
-import { storeComponent } from "../../../../../types/store";
 import { cn } from "../../../../../utils/utils";
 import ForwardedIconComponent from "../../../../common/genericIconComponent";
 import { Card, CardHeader, CardTitle } from "../../../../ui/card";

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

@@ -2,7 +2,6 @@ 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 DragCardComponent from "../components/dragCardComponent";
 
 const useDragStart = (data: FlowType) => {

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

@@ -8,7 +8,6 @@ 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,

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

@@ -1,7 +1,6 @@
 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 "../../common/genericIconComponent";
 import { Button } from "../../ui/button";
 

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

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "../../../../ui/input";
 import { ButtonInputList } from "./components/button-input-list";
-import { DropdownMenuInputList } from "./components/dropdown-menu";
 
 import { GRADIENT_CLASS } from "@/constants/constants";
 import { cn } from "../../../../../utils/utils";
@@ -139,7 +138,7 @@ export default function InputListComponent({
                 </div>
               )}
 
-              {/* 
+              {/*
               We will add this back in a future release
               {!disabled && (
                 <DropdownMenuInputList

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

@@ -7,7 +7,7 @@ import {
 } from "@/utils/reactflowUtils";
 import { cn } from "@/utils/utils";
 import { cloneDeep } from "lodash";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import IconComponent from "../../../../common/genericIconComponent";
 
 const KeypairListComponent = ({

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

@@ -1,4 +1,3 @@
-import { PopoverAnchor } from "@radix-ui/react-popover";
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../../../../utils/utils";

src/frontend/src/components/ui/disclosure.tsx

@@ -13,7 +13,6 @@ import {
   memo,
   useCallback,
   useContext,
-  useEffect,
   useId,
   useMemo,
 } from "react";

src/frontend/src/components/ui/textAnimation.tsx

@@ -6,7 +6,7 @@ import {
   TargetAndTransition,
   Variants,
 } from "framer-motion";
-import React, { ReactElement } from "react";
+import React from "react";
 
 type PresetType = "blur" | "shake" | "scale" | "fade" | "slide";
 

src/frontend/src/controllers/API/index.ts

@@ -3,13 +3,11 @@ import { AxiosRequestConfig, AxiosResponse } from "axios";
 import { BASE_URL_API } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
-  Component,
   VertexBuildTypeAPI,
   VerticesOrderTypeAPI,
 } from "../../types/api/index";
 import { FlowStyleType, FlowType } from "../../types/flow";
 import { StoreComponentResponse } from "../../types/store";
-import { FlowPoolType } from "../../types/zustand/flow";
 
 const GITHUB_API_URL = "https://api.github.com";
 

src/frontend/src/controllers/API/queries/auth/use-patch-reset-password.ts

@@ -1,8 +1,4 @@
-import {
-  changeUser,
-  resetPasswordType,
-  useMutationFunctionType,
-} from "@/types/api";
+import { resetPasswordType, useMutationFunctionType } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";

src/frontend/src/controllers/API/queries/auth/use-post-login-user.ts

@@ -1,4 +1,4 @@
-import { LoginType, changeUser, useMutationFunctionType } from "@/types/api";
+import { LoginType, useMutationFunctionType } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";

src/frontend/src/controllers/API/queries/files/use-download-files.ts

@@ -1,9 +1,4 @@
-import { keepPreviousData } from "@tanstack/react-query";
-import {
-  useMutationFunctionType,
-  useQueryFunctionType,
-} from "../../../../types/api";
-import { api } from "../../api";
+import { useMutationFunctionType } from "../../../../types/api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 

src/frontend/src/controllers/API/queries/variables/use-get-mutation-global-variables.ts

@@ -2,7 +2,7 @@ import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVar
 import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields";
 import { useMutationFunctionType } from "@/types/api";
 import { GlobalVariable } from "@/types/global_variables";
-import { UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
+import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";

src/frontend/src/controllers/API/queries/variables/use-patch-global-variables.ts

@@ -1,5 +1,4 @@
 import { useMutationFunctionType } from "@/types/api";
-import { GlobalVariable } from "@/types/global_variables";
 import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";

src/frontend/src/hooks/flows/use-upload-flow.ts

@@ -1,4 +1,3 @@
-import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
 import useFlowStore from "@/stores/flowStore";

src/frontend/src/icons/ArXiv/ArXivIcon.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const ArXivIcon = (props) => {
   return (
     <svg

src/frontend/src/icons/Upstash/UpstashIcon.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const UpstashIcon = (props) => (
   <svg
     width="256px"

src/frontend/src/icons/Youtube/youtube.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const YouTubeIcon = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx

@@ -5,7 +5,7 @@ import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
 import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
 import { useUtilityStore } from "@/stores/utilityStore";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import ShortUniqueId from "short-unique-id";
 import {
   ALLOWED_IMAGE_INPUT_EXTENSIONS,

src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/file-preview.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import IconComponent, {
   ForwardedIconComponent,
 } from "../../../../../../components/common/genericIconComponent";

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -10,7 +10,6 @@ import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
 import IconComponent from "../../components/common/genericIconComponent";
-import { CODE_DICT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
 

src/frontend/src/modals/newFlowModal/components/hooks/use-redirect-flow-card-click.tsx

@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { track } from "../../../../customization/utils/analytics";
 import useAddFlow from "../../../../hooks/flows/use-add-flow";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
 import { updateIds } from "../../../../utils/reactflowUtils";
 

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -18,7 +18,6 @@ import {
 } from "../../../../components/ui/card";
 import { useFolderStore } from "../../../../stores/foldersStore";
 import { UndrawCardComponentProps } from "../../../../types/components";
-import { updateIds } from "../../../../utils/reactflowUtils";
 import { useFlowCardClick } from "../hooks/use-redirect-flow-card-click";
 
 export default function UndrawCardComponent({

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

@@ -1,7 +1,4 @@
-import {
-  ENABLE_INTEGRATIONS,
-  ENABLE_MVPS,
-} from "@/customization/feature-flags";
+import { ENABLE_INTEGRATIONS } from "@/customization/feature-flags";
 import { useStoreStore } from "@/stores/storeStore";
 import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/emptySearchComponent/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 const NoResultsMessage = ({
   onClearSearch,
   message = "No components found.",

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx

@@ -1,6 +1,5 @@
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
-import React from "react";
 
 const FeatureToggles = ({
   showBeta,

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFooterButtons/index.tsx

@@ -2,7 +2,6 @@ import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { Button } from "@/components/ui/button";
 import { SidebarMenuButton } from "@/components/ui/sidebar";
 import { CustomLink } from "@/customization/components/custom-link";
-import React from "react";
 
 const SidebarMenuButtons = ({
   hasStore = false,

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/filtered-data.ts

@@ -1,5 +1,4 @@
 import { APIDataType } from "@/types/api";
-import { FuseResult } from "fuse.js";
 
 export const filteredDataFn = (
   data: APIDataType,

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/traditional-search-metadata.ts

@@ -1,5 +1,4 @@
 import { APIDataType } from "@/types/api";
-import { normalizeString } from "./normalize-string";
 import { searchInMetadata } from "./search-on-metadata";
 
 export const traditionalSearchMetadata = (

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-modals.tsx

@@ -4,7 +4,7 @@ import EditNodeModal from "@/modals/editNodeModal";
 import ShareModal from "@/modals/shareModal";
 import { APIClassType } from "@/types/api";
 import { FlowType } from "@/types/flow";
-import React, { memo } from "react";
+import { memo } from "react";
 
 interface ToolbarModalsProps {
   // Modal visibility states

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

@@ -1,6 +1,5 @@
 import ForwardedIconComponent from "../../../../../components/common/genericIconComponent";
 import RenderIcons from "../../../../../components/common/renderIconComponent";
-import { IS_MAC } from "../../../../../constants/constants";
 import { toolbarSelectItemProps } from "../../../../../types/components";
 
 export default function ToolbarSelectItem({

src/frontend/src/pages/MainPage/oldComponents/myCollectionComponent/index.tsx

@@ -2,7 +2,7 @@ import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-fol
 import useDeleteFlow from "@/hooks/flows/use-delete-flow";
 import { useFolderStore } from "@/stores/foldersStore";
 import { useIsFetching, useIsMutating } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import ComponentsComponent from "../componentsComponent";
 import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent";

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx

@@ -10,7 +10,7 @@ import {
   useGetApiKeysQuery,
 } from "@/controllers/API/queries/api-keys";
 import { SelectionChangedEvent } from "ag-grid-community";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import TableComponent from "../../../../components/core/parameterRenderComponent/components/tableComponent";
 import { AuthContext } from "../../../../contexts/authContext";
 import useAlertStore from "../../../../stores/alertStore";

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,6 +1,4 @@
-import { useGetRefreshFlows } from "@/controllers/API/queries/flows/use-get-refresh-flows";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { useTypesStore } from "@/stores/typesStore";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";

src/frontend/src/types/utils/functions.ts

@@ -1,5 +1,3 @@
-import { FieldParserType, FieldValidatorType } from "../api";
-
 export type getCodesObjProps = {
   runCurlCode: string;
   webhookCurlCode: string;

src/frontend/src/types/zustand/folders/index.ts

@@ -1,4 +1,3 @@
-import { FlowType } from "@/types/flow";
 import { FolderType } from "../../../pages/MainPage/entities";
 
 export type FoldersStoreType = {

src/frontend/src/types/zustand/messages/index.ts

@@ -1,4 +1,3 @@
-import { ColDef, ColGroupDef } from "ag-grid-community";
 import { Message } from "../../messages";
 
 export type MessagesStoreType = {

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -2,7 +2,6 @@ import { expect, Page, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { evaluateReactStateChanges } from "../../utils/evaluate-input-react-state-changes";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
 
 test(

src/frontend/tests/core/unit/floatComponent.spec.ts

@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(

src/frontend/tests/extended/features/edit-flow-name.spec.ts

@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { readFileSync } from "fs";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { simulateDragAndDrop } from "../../utils/simulate-drag-and-drop";
 test(
   "user should be able to edit flow name by clicking on the header or on the main page",
   { tag: ["@release"] },

src/frontend/tests/extended/features/langflowShortcuts.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page, test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 

src/frontend/tests/extended/features/lock-flow.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";

src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page, test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";