+
- {value}
-
- {isMac ? (
-
- ) : (
-
- {shift ? "Ctrl" : "Ctrl +"}
-
- )}
- {shift && (
-
+ {value}
+
+
+
- )}
-
- {keyboardKey}
);
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
new file mode 100644
index 000000000..af78db50d
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx
@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+
+const useDeleteMultipleFlows = (
+ selectedFlowsComponentsCards,
+ removeFlow,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setErrorData
+) => {
+ const handleDeleteMultiple = useCallback(() => {
+ removeFlow(selectedFlowsComponentsCards)
+ .then(() => {
+ resetFilter();
+ getFoldersApi(true);
+ if (!folderId || folderId === myCollectionId) {
+ getFolderById(folderId ? folderId : myCollectionId);
+ }
+ setSuccessData({
+ title: "Selected items deleted successfully",
+ });
+ })
+ .catch(() => {
+ setErrorData({
+ title: "Error deleting items",
+ list: ["Please try again"],
+ });
+ });
+ }, [
+ selectedFlowsComponentsCards,
+ removeFlow,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setErrorData,
+ ]);
+
+ return { handleDeleteMultiple };
+};
+
+export default useDeleteMultipleFlows;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx
new file mode 100644
index 000000000..6de2ebb6d
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-description-modal.tsx
@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+
+const useDescriptionModal = (selectedFlowsComponentsCards, type) => {
+ const getDescriptionModal = useMemo(() => {
+ const getTypeLabel = (type) => {
+ const labels = {
+ all: "item",
+ component: "component",
+ flow: "flow",
+ };
+ return labels[type] || "";
+ };
+
+ const getPluralizedLabel = (type) => {
+ const labels = {
+ all: "items",
+ component: "components",
+ flow: "flows",
+ };
+ return labels[type] || "";
+ };
+
+ if (selectedFlowsComponentsCards?.length === 1) {
+ return getTypeLabel(type);
+ }
+ return getPluralizedLabel(type);
+ }, [selectedFlowsComponentsCards, type]);
+
+ return getDescriptionModal;
+};
+
+export default useDescriptionModal;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
new file mode 100644
index 000000000..b391d9c8e
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-filtered-flows.tsx
@@ -0,0 +1,27 @@
+import cloneDeep from "lodash/cloneDeep";
+import { useEffect } from "react";
+
+const useFilteredFlows = (
+ flowsFromFolder,
+ searchFlowsComponents,
+ setAllFlows
+) => {
+ useEffect(() => {
+ const newFlows = cloneDeep(flowsFromFolder || []);
+ const filteredFlows = newFlows.filter(
+ (f) =>
+ f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
+ f.description
+ .toLowerCase()
+ .includes(searchFlowsComponents.toLowerCase())
+ );
+
+ if (searchFlowsComponents === "") {
+ setAllFlows(flowsFromFolder);
+ } else {
+ setAllFlows(filteredFlows);
+ }
+ }, [flowsFromFolder, searchFlowsComponents, setAllFlows]);
+};
+
+export default useFilteredFlows;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
new file mode 100644
index 000000000..97e966b91
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-duplicate.tsx
@@ -0,0 +1,53 @@
+import { useCallback } from "react";
+
+const useDuplicateFlows = (
+ selectedFlowsComponentsCards,
+ addFlow,
+ allFlows,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes
+) => {
+ const handleDuplicate = useCallback(() => {
+ Promise.all(
+ selectedFlowsComponentsCards.map((selectedFlow) =>
+ addFlow(
+ true,
+ allFlows.find((flow) => flow.id === selectedFlow)
+ )
+ )
+ ).then(() => {
+ resetFilter();
+ getFoldersApi(true);
+ if (!folderId || folderId === myCollectionId) {
+ getFolderById(folderId ? folderId : myCollectionId);
+ }
+ setSuccessData({ title: `${cardTypes} duplicated successfully` });
+ setSelectedFlowsComponentsCards([]);
+ handleSelectAll(false);
+ });
+ }, [
+ selectedFlowsComponentsCards,
+ addFlow,
+ allFlows,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes,
+ ]);
+
+ return { handleDuplicate };
+};
+
+export default useDuplicateFlows;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
new file mode 100644
index 000000000..446525f13
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-export.tsx
@@ -0,0 +1,50 @@
+import { useCallback } from "react";
+
+const useExportFlows = (
+ selectedFlowsComponentsCards,
+ allFlows,
+ downloadFlow,
+ removeApiKeys,
+ version,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes
+) => {
+ const handleExport = useCallback(() => {
+ selectedFlowsComponentsCards.forEach((selectedFlowId) => {
+ const selectedFlow = allFlows.find((flow) => flow.id === selectedFlowId);
+ if (selectedFlow) {
+ downloadFlow(
+ removeApiKeys({
+ id: selectedFlow.id,
+ data: selectedFlow.data,
+ description: selectedFlow.description,
+ name: selectedFlow.name,
+ last_tested_version: version,
+ is_component: false,
+ }),
+ selectedFlow.name,
+ selectedFlow.description
+ );
+ }
+ });
+ setSuccessData({ title: `${cardTypes} exported successfully` });
+ setSelectedFlowsComponentsCards([]);
+ handleSelectAll(false);
+ }, [
+ selectedFlowsComponentsCards,
+ allFlows,
+ downloadFlow,
+ removeApiKeys,
+ version,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes,
+ ]);
+
+ return { handleExport };
+};
+
+export default useExportFlows;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
new file mode 100644
index 000000000..5b20a4ddc
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-handle-select-all.tsx
@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+const useSelectAll = (flowsFromFolder, getValues, setValue) => {
+ const handleSelectAll = useCallback(
+ (select) => {
+ const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
+ if (select) {
+ Object.keys(getValues()).forEach((key) => {
+ if (!flowsFromFolderIds?.includes(key)) return;
+ setValue(key, true);
+ });
+ return;
+ }
+
+ Object.keys(getValues()).forEach((key) => {
+ setValue(key, false);
+ });
+ },
+ [flowsFromFolder, getValues, setValue]
+ );
+
+ return { handleSelectAll };
+};
+
+export default useSelectAll;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
new file mode 100644
index 000000000..b19ec4f4f
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-select-options-change.tsx
@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+
+const useSelectOptionsChange = (
+ selectedFlowsComponentsCards,
+ setErrorData,
+ setOpenDelete,
+ handleDuplicate,
+ handleExport
+) => {
+ const handleSelectOptionsChange = useCallback(
+ (action) => {
+ const hasSelected = selectedFlowsComponentsCards?.length > 0;
+ if (!hasSelected) {
+ setErrorData({
+ title: "No items selected",
+ list: ["Please select items to delete"],
+ });
+ return;
+ }
+ if (action === "delete") {
+ setOpenDelete(true);
+ } else if (action === "duplicate") {
+ handleDuplicate();
+ } else if (action === "export") {
+ handleExport();
+ }
+ },
+ [
+ selectedFlowsComponentsCards,
+ setErrorData,
+ setOpenDelete,
+ handleDuplicate,
+ handleExport,
+ ]
+ );
+
+ return { handleSelectOptionsChange };
+};
+
+export default useSelectOptionsChange;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
new file mode 100644
index 000000000..aa70b025f
--- /dev/null
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-selected-flows.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+const useSelectedFlows = (
+ entireFormValues,
+ setSelectedFlowsComponentsCards
+) => {
+ useEffect(() => {
+ if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
+
+ const selectedFlows = Object.keys(entireFormValues).filter((key) => {
+ return entireFormValues[key] === true;
+ });
+
+ setSelectedFlowsComponentsCards(selectedFlows);
+ }, [entireFormValues, setSelectedFlowsComponentsCards]);
+};
+
+export default useSelectedFlows;
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index fa5524891..432496fd7 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -1,28 +1,33 @@
-import { cloneDeep } from "lodash";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { Link, useLocation, useNavigate } from "react-router-dom";
import CollectionCardComponent from "../../../../components/cardComponent";
import CardsWrapComponent from "../../../../components/cardsWrapComponent";
-import IconComponent, {
- ForwardedIconComponent,
-} from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/genericIconComponent";
import PaginatorComponent from "../../../../components/paginatorComponent";
import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
import { Button } from "../../../../components/ui/button";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
import useAlertStore from "../../../../stores/alertStore";
+import { useDarkStore } from "../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
import { FlowType } from "../../../../types/flow";
+import { downloadFlow, removeApiKeys } from "../../../../utils/reactflowUtils";
import useFileDrop from "../../hooks/use-on-file-drop";
import { getNameByType } from "../../utils/get-name-by-type";
import { sortFlows } from "../../utils/sort-flows";
import EmptyComponent from "../emptyComponent";
import HeaderComponent from "../headerComponent";
-import { downloadFlow, removeApiKeys } from "../../../../utils/reactflowUtils";
-import { useDarkStore } from "../../../../stores/darkStore";
-import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
+import useDeleteMultipleFlows from "./hooks/use-delete-multiple";
+import useDescriptionModal from "./hooks/use-description-modal";
+import useFilteredFlows from "./hooks/use-filtered-flows";
+import useDuplicateFlows from "./hooks/use-handle-duplicate";
+import useExportFlows from "./hooks/use-handle-export";
+import useSelectAll from "./hooks/use-handle-select-all";
+import useSelectOptionsChange from "./hooks/use-select-options-change";
+import useSelectedFlows from "./hooks/use-selected-flows";
export default function ComponentsComponent({
type = "all",
@@ -36,22 +41,22 @@ export default function ComponentsComponent({
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const flowsFromFolder = useFolderStore(
- (state) => state.selectedFolder?.flows,
+ (state) => state.selectedFolder?.flows
);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const [openDelete, setOpenDelete] = useState(false);
const searchFlowsComponents = useFlowsManagerStore(
- (state) => state.searchFlowsComponents,
+ (state) => state.searchFlowsComponents
);
const setSelectedFlowsComponentsCards = useFlowsManagerStore(
- (state) => state.setSelectedFlowsComponentsCards,
+ (state) => state.setSelectedFlowsComponentsCards
);
const selectedFlowsComponentsCards = useFlowsManagerStore(
- (state) => state.selectedFlowsComponentsCards,
+ (state) => state.selectedFlowsComponentsCards
);
const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
@@ -73,6 +78,16 @@ export default function ComponentsComponent({
const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
const addFlow = useFlowsManagerStore((state) => state.addFlow);
+ const cardTypes = useMemo(() => {
+ if (window.location.pathname.includes("components")) {
+ return "Components";
+ }
+ if (window.location.pathname.includes("flows")) {
+ return "Flows";
+ }
+ return "Items";
+ }, [window.location]);
+
useEffect(() => {
setFolderUrl(folderId ?? "");
setSelectedFlowsComponentsCards([]);
@@ -80,22 +95,7 @@ export default function ComponentsComponent({
getFolderById(folderId ? folderId : myCollectionId);
}, [location]);
- useEffect(() => {
- const newFlows = cloneDeep(flowsFromFolder!);
- const filteredFlows = newFlows?.filter(
- (f) =>
- f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
- f.description
- .toLowerCase()
- .includes(searchFlowsComponents.toLowerCase()),
- );
-
- if (searchFlowsComponents === "") {
- setAllFlows(flowsFromFolder!);
- }
-
- setAllFlows(filteredFlows);
- }, [searchFlowsComponents]);
+ useFilteredFlows(flowsFromFolder, searchFlowsComponents, setAllFlows);
const resetFilter = () => {
setPageIndex(1);
@@ -106,20 +106,12 @@ export default function ComponentsComponent({
const entireFormValues = useWatch({ control });
const methods = useForm();
- const handleSelectAll = (select) => {
- const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
- if (select) {
- Object.keys(getValues()).forEach((key) => {
- if (!flowsFromFolderIds?.includes(key)) return;
- setValue(key, true);
- });
- return;
- }
- Object.keys(getValues()).forEach((key) => {
- setValue(key, false);
- });
- };
+ const { handleSelectAll } = useSelectAll(
+ flowsFromFolder,
+ getValues,
+ setValue
+ );
const handleSelectOptionsChange = (action: string) => {
const hasSelected = selectedFlowsComponentsCards?.length > 0;
@@ -144,9 +136,9 @@ export default function ComponentsComponent({
selectedFlowsComponentsCards.map((selectedFlow) =>
addFlow(
true,
- allFlows.find((flow) => flow.id === selectedFlow),
- ),
- ),
+ allFlows.find((flow) => flow.id === selectedFlow)
+ )
+ )
).then(() => {
resetFilter();
getFoldersApi(true);
@@ -194,7 +186,7 @@ export default function ComponentsComponent({
is_component: false,
}),
selectedFlow!.name,
- selectedFlow!.description,
+ selectedFlow!.description
);
});
setSuccessData({ title: "Flows exported successfully" });
@@ -219,51 +211,67 @@ export default function ComponentsComponent({
});
});
};
+ const { handleDuplicate } = useDuplicateFlows(
+ selectedFlowsComponentsCards,
+ addFlow,
+ allFlows,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes
+ );
- useEffect(() => {
- if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
- const selectedFlows: string[] = Object.keys(entireFormValues).filter(
- (key) => {
- if (entireFormValues[key] === true) {
- return true;
- }
- return false;
- },
- );
+ const version = useDarkStore((state) => state.version);
- setSelectedFlowsComponentsCards(selectedFlows);
- }, [entireFormValues]);
+ const { handleExport } = useExportFlows(
+ selectedFlowsComponentsCards,
+ allFlows,
+ downloadFlow,
+ removeApiKeys,
+ version,
+ setSuccessData,
+ setSelectedFlowsComponentsCards,
+ handleSelectAll,
+ cardTypes
+ );
- const getDescriptionModal = useMemo(() => {
- const getTypeLabel = (type) => {
- const labels = {
- all: "item",
- component: "component",
- flow: "flow",
- };
- return labels[type] || "";
- };
+ const { handleSelectOptionsChange } = useSelectOptionsChange(
+ selectedFlowsComponentsCards,
+ setErrorData,
+ setOpenDelete,
+ handleDuplicate,
+ handleExport
+ );
- const getPluralizedLabel = (type) => {
- const labels = {
- all: "items",
- component: "components",
- flow: "flows",
- };
- return labels[type] || "";
- };
+ const { handleDeleteMultiple } = useDeleteMultipleFlows(
+ selectedFlowsComponentsCards,
+ removeFlow,
+ resetFilter,
+ getFoldersApi,
+ folderId,
+ myCollectionId,
+ getFolderById,
+ setSuccessData,
+ setErrorData
+ );
- if (selectedFlowsComponentsCards?.length === 1) {
- return getTypeLabel(type);
- }
- return getPluralizedLabel(type);
- }, [selectedFlowsComponentsCards, type]);
+ useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards);
+
+ const descriptionModal = useDescriptionModal(
+ selectedFlowsComponentsCards,
+ type
+ );
const getTotalRowsCount = () => {
if (type === "all") return allFlows?.length;
return allFlows?.filter(
- (f) => (f.is_component ?? false) === (type === "component"),
+ (f) => (f.is_component ?? false) === (type === "component")
)?.length;
};
@@ -370,7 +378,7 @@ export default function ComponentsComponent({
open={openDelete}
setOpen={setOpenDelete}
onConfirm={handleDeleteMultiple}
- description={getDescriptionModal}
+ description={descriptionModal}
>
<>>
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index 78979c23d..bd8c7d107 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -1,11 +1,9 @@
import { useState } from "react";
-import IconComponent, {
- ForwardedIconComponent,
-} from "../../../../components/genericIconComponent";
+import IconComponent from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent";
+import { Button } from "../../../../components/ui/button";
import { Checkbox } from "../../../../components/ui/checkbox";
import { cn } from "../../../../utils/utils";
-import { Button } from "../../../../components/ui/button";
type HeaderComponentProps = {
handleSelectAll: (select) => void;
@@ -109,7 +107,7 @@ const HeaderComponent = ({
name="Trash2"
className={cn(
"h-5 w-5 text-primary transition-all",
- disableFunctions ? "" : "hover:text-destructive",
+ disableFunctions ? "" : "hover:text-destructive"
)}
/>
diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
index ce2b653a2..0daa61257 100644
--- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
@@ -16,7 +16,7 @@ import useDropdownOptions from "../../hooks/use-dropdown-options";
export default function HomePage(): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
+ (state) => state.setCurrentFlowId
);
const location = useLocation();
diff --git a/src/frontend/src/pages/MainPage/services/index.ts b/src/frontend/src/pages/MainPage/services/index.ts
index 3e1286d5e..fbfc34389 100644
--- a/src/frontend/src/pages/MainPage/services/index.ts
+++ b/src/frontend/src/pages/MainPage/services/index.ts
@@ -30,12 +30,12 @@ export async function addFolder(data: AddFolderType): Promise
{
export async function updateFolder(
body: FolderType,
- folderId: string,
+ folderId: string
): Promise {
try {
const response = await api.patch(
`${BASE_URL_API}folders/${folderId}`,
- body,
+ body
);
return response?.data;
} catch (error) {
@@ -68,7 +68,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
}> {
try {
const response = await api.get(
- `${BASE_URL_API}folders/download/${folderId}`,
+ `${BASE_URL_API}folders/download/${folderId}`
);
if (response?.status !== 200) {
throw new Error(`HTTP error! status: ${response?.status}`);
@@ -82,7 +82,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
}
export async function uploadFlowsFromFolders(
- flows: FormData,
+ flows: FormData
): Promise {
try {
const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
@@ -99,11 +99,11 @@ export async function uploadFlowsFromFolders(
export async function moveFlowToFolder(
flowId: string,
- folderId: string,
+ folderId: string
): Promise {
try {
const response = await api.patch(
- `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
+ `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`
);
return response?.data;
} catch (error) {
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index a7af7c86a..c1635dc9e 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -2,7 +2,6 @@ import * as Form from "@radix-ui/react-form";
import { cloneDeep } from "lodash";
import { useContext, useEffect, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
-import GradientChooserComponent from "../../components/gradientChooserComponent";
import Header from "../../components/headerComponent";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
@@ -22,6 +21,7 @@ import {
patchUserInputStateType,
} from "../../types/components";
import { gradients } from "../../utils/styleUtils";
+import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
export default function ProfileSettingsPage(): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index d201d2596..353b7a17c 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function SettingsPage(): JSX.Element {
const pathname = location.pathname;
const setCurrentFlowId = useFlowsManagerStore(
- (state) => state.setCurrentFlowId,
+ (state) => state.setCurrentFlowId
);
useEffect(() => {
setCurrentFlowId("");
diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
index cdd7c7c27..4138d621f 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
@@ -2,17 +2,14 @@ import ForwardedIconComponent from "../../../../../../components/genericIconComp
import { Button } from "../../../../../../components/ui/button";
import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
import SecretKeyModal from "../../../../../../modals/secretKeyModal";
-import { cn } from "../../../../../../utils/utils";
type ApiKeyHeaderComponentProps = {
selectedRows: string[];
- handleDeleteKey: () => void;
fetchApiKeys: () => void;
userId: string;
};
const ApiKeyHeaderComponent = ({
selectedRows,
- handleDeleteKey,
fetchApiKeys,
userId,
}: ApiKeyHeaderComponentProps) => {
@@ -30,20 +27,6 @@ const ApiKeyHeaderComponent = ({
{API_PAGE_PARAGRAPH}