Merge pull request #1783 from akhilmhdh:feat/dashboard-slug-fix

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

frontend/src/lib/fn/debounce.ts

@@ -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);
+  };
+};

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

@@ -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;

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

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 }) => (
-                      <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"
                       />