feat(dashboard): add basic search to profiles

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/profiles.tsx

@@ -1,6 +1,9 @@
 'use client';
 
+import { TableButtons } from '@/components/data-table';
 import { ProfilesTable } from '@/components/profiles/table';
+import { Input } from '@/components/ui/input';
+import { useDebounceValue } from '@/hooks/useDebounceValue';
 import { api } from '@/trpc/client';
 import { parseAsInteger, useQueryState } from 'nuqs';
 
@@ -14,12 +17,17 @@ const Events = ({ projectId }: Props) => {
     'cursor',
     parseAsInteger.withDefault(0)
   );
+  const [search, setSearch] = useQueryState('search', {
+    defaultValue: '',
+    shallow: true,
+  });
+  const debouncedSearch = useDebounceValue(search, 500);
   const query = api.profile.list.useQuery(
     {
       cursor,
       projectId,
       take: 50,
-      // filters,
+      search: debouncedSearch,
     },
     {
       keepPreviousData: true,
@@ -28,6 +36,13 @@ const Events = ({ projectId }: Props) => {
 
   return (
     <div>
+      <TableButtons>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search profiles"
+        />
+      </TableButtons>
       <ProfilesTable query={query} cursor={cursor} setCursor={setCursor} />
     </div>
   );

apps/dashboard/src/components/profiles/table/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { DataTable } from '@/components/data-table';
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
@@ -5,6 +6,7 @@ import { Pagination } from '@/components/pagination';
 import { Button } from '@/components/ui/button';
 import { TableSkeleton } from '@/components/ui/table';
 import type { UseQueryResult } from '@tanstack/react-query';
+import isEqual from 'lodash.isequal';
 import { GanttChartIcon } from 'lucide-react';
 
 import type { IServiceProfile } from '@openpanel/db';
@@ -22,44 +24,53 @@ type Props =
       setCursor: Dispatch<SetStateAction<number>>;
     });
 
-export const ProfilesTable = ({ type, query, ...props }: Props) => {
-  const columns = useColumns(type);
-  const { data, isFetching, isLoading } = query;
+export const ProfilesTable = memo(
+  ({ type, query, ...props }: Props) => {
+    console.log('re-render');
 
-  if (isLoading) {
-    return <TableSkeleton cols={columns.length} />;
-  }
+    const columns = useColumns(type);
+    const { data, isFetching, isLoading } = query;
+
+    if (isLoading) {
+      return <TableSkeleton cols={columns.length} />;
+    }
+
+    if (data?.length === 0) {
+      return (
+        <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
+          <p>Could not find any profiles</p>
+          {'cursor' in props && props.cursor !== 0 && (
+            <Button
+              className="mt-8"
+              variant="outline"
+              onClick={() => props.setCursor((p) => p - 1)}
+            >
+              Go to previous page
+            </Button>
+          )}
+        </FullPageEmptyState>
+      );
+    }
 
-  if (data?.length === 0) {
     return (
-      <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
-        <p>Could not find any profiles</p>
-        {'cursor' in props && props.cursor !== 0 && (
-          <Button
-            className="mt-8"
-            variant="outline"
-            onClick={() => props.setCursor((p) => p - 1)}
-          >
-            Go to previous page
-          </Button>
+      <>
+        <DataTable data={data ?? []} columns={columns} />
+        {'cursor' in props && (
+          <Pagination
+            className="mt-2"
+            setCursor={props.setCursor}
+            cursor={props.cursor}
+            count={Infinity}
+            take={50}
+            loading={isFetching}
+          />
         )}
-      </FullPageEmptyState>
+      </>
     );
+  },
+  (prevProps, nextProps) => {
+    return isEqual(prevProps.query.data, nextProps.query.data);
   }
+);
 
-  return (
-    <>
-      <DataTable data={data ?? []} columns={columns} />
-      {'cursor' in props && (
-        <Pagination
-          className="mt-2"
-          setCursor={props.setCursor}
-          cursor={props.cursor}
-          count={Infinity}
-          take={50}
-          loading={isFetching}
-        />
-      )}
-    </>
-  );
-};
+ProfilesTable.displayName = 'ProfilesTable';