awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: debounced main page search and rolled back to old input component

Browse Source
This commit is contained in:
Akhil Mohan
2024-05-06 20:43:23 +05:30
parent b4f1bec1a9
commit 79e9b1b2ae
4 changed files with 28 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/lib/fn/debounce.ts Normal file
View File

@@ -0,0 +1,15 @@
export const debounce = <F extends (...args: any[]) => any>(
func: F,
delay: number
): ((...args: Parameters<F>) => void) => {
let timeoutId: ReturnType<typeof setTimeout> | null;
return function debounced(...args: Parameters<F>) {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
func(...args);
timeoutId = null;
}, delay);
};
};

27
frontend/src/pages/project/[id]/secrets/v2/[env].tsx
View File

@@ -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 (
<>
<Head>
<title>{t("common.head-title", { title: t("dashboard.title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content={String(t("dashboard.og-title"))} />
<meta name="og:description" content={String(t("dashboard.og-description"))} />
</Head>
<div className="h-full">
<SecretMainPage />
</div>
</>
);
};
export default Dashboard;
Dashboard.requireAuth = true;

12
frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
View File

@@ -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={<FontAwesomeIcon icon={faMagnifyingGlass} />}
value={filter.searchFilter}
onChange={(evt) => onSearchChange(evt.target.value)}
value={search}
onChange={(evt) => {
setSearch(evt.target.value);
debouncedOnSearch(evt.target.value);
}}
/>
</div>
<div>

10
frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
View File

@@ -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 }) => (
<InfisicalSecretInput
<SecretInput
key="value-overriden"
isVisible={isVisible}
isReadOnly={isReadOnly}
environment={environment}
secretPath={secretPath}
{...field}
containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
/>
@@ -280,12 +278,10 @@ export const SecretItem = memo(
key="secret-value"
control={control}
render={({ field }) => (
<InfisicalSecretInput
<SecretInput
isReadOnly={isReadOnly}
key="secret-value"
isVisible={isVisible}
environment={environment}
secretPath={secretPath}
{...field}
containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
/>