diff --git a/frontend/src/lib/fn/debounce.ts b/frontend/src/lib/fn/debounce.ts new file mode 100644 index 000000000..16d7b4ceb --- /dev/null +++ b/frontend/src/lib/fn/debounce.ts @@ -0,0 +1,15 @@ +export const debounce = any>( + func: F, + delay: number +): ((...args: Parameters) => void) => { + let timeoutId: ReturnType | null; + return function debounced(...args: Parameters) { + if (timeoutId) { + clearTimeout(timeoutId); + } + timeoutId = setTimeout(() => { + func(...args); + timeoutId = null; + }, delay); + }; +}; diff --git a/frontend/src/pages/project/[id]/secrets/v2/[env].tsx b/frontend/src/pages/project/[id]/secrets/v2/[env].tsx deleted file mode 100644 index bba0704dd..000000000 --- a/frontend/src/pages/project/[id]/secrets/v2/[env].tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useTranslation } from "react-i18next"; -import Head from "next/head"; - -import { SecretMainPage } from "@app/views/SecretMainPage"; - -const Dashboard = () => { - const { t } = useTranslation(); - - return ( - <> - - {t("common.head-title", { title: t("dashboard.title") })} - - - - - -
- -
- - ); -}; - -export default Dashboard; - -Dashboard.requireAuth = true; diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx index f670ea496..61c7cf8c0 100644 --- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx +++ b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { subject } from "@casl/ability"; import { faAngleDown, @@ -45,6 +46,7 @@ import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from import { usePopUp } from "@app/hooks"; import { useCreateFolder, useDeleteSecretBatch } from "@app/hooks/api"; import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types"; +import { debounce } from "@app/lib/fn/debounce"; import { PopUpNames, @@ -106,6 +108,7 @@ export const ActionBar = ({ ] as const); const { subscription } = useSubscription(); const { openPopUp } = usePopUpAction(); + const [search, setSearch] = useState(filter.searchFilter); const { mutateAsync: createFolder } = useCreateFolder(); const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch(); @@ -114,6 +117,8 @@ export const ActionBar = ({ const { reset: resetSelectedSecret } = useSelectedSecretActions(); const isMultiSelectActive = Boolean(Object.keys(selectedSecrets).length); + const debouncedOnSearch = debounce(onSearchChange, 500); + const handleFolderCreate = async (folderName: string) => { try { await createFolder({ @@ -199,8 +204,11 @@ export const ActionBar = ({ className="bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80" placeholder="Search by folder name, key name, comment..." leftIcon={} - value={filter.searchFilter} - onChange={(evt) => onSearchChange(evt.target.value)} + value={search} + onChange={(evt) => { + setSearch(evt.target.value); + debouncedOnSearch(evt.target.value); + }} />
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx index 455b7bbe6..7996d932c 100644 --- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx @@ -14,6 +14,7 @@ import { Popover, PopoverContent, PopoverTrigger, + SecretInput, Spinner, TextArea, Tooltip @@ -48,7 +49,6 @@ import { memo, useEffect } from "react"; import { Controller, useFieldArray, useForm } from "react-hook-form"; import { twMerge } from "tailwind-merge"; -import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { CreateReminderForm } from "./CreateReminderForm"; import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils"; @@ -263,12 +263,10 @@ export const SecretItem = memo( key="value-overriden" control={control} render={({ field }) => ( - @@ -280,12 +278,10 @@ export const SecretItem = memo( key="secret-value" control={control} render={({ field }) => ( -