move files to match new page structure

web/src/app/app/settings/users/[userId]/_LayoutHeaderAndSegment/LayoutHeaderAndSegment.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React, { useState } from 'react';
+import { UserHeader } from './UserHeader';
+import { UserSegments, UserSegmentsApps } from './UserSegments';
+import { useGetUser } from '@/api/buster-rest';
+
+export const LayoutHeaderAndSegment = React.memo(
+  ({ children, userId }: { children: React.ReactNode; userId: string }) => {
+    const { data: user } = useGetUser({ userId });
+    const [selectedApp, setSelectedApp] = useState<UserSegmentsApps>(UserSegmentsApps.OVERVIEW);
+
+    if (!user) return null;
+
+    return (
+      <div className="flex flex-col space-y-5">
+        <UserHeader user={user} />
+        <UserSegments userId={userId} selectedApp={selectedApp} onSelectApp={setSelectedApp} />
+        {children}
+      </div>
+    );
+  }
+);
+
+LayoutHeaderAndSegment.displayName = 'LayoutHeaderAndSegment';

web/src/app/app/settings/users/[userId]/_LayoutHeaderAndSegment/index.ts

@@ -0,0 +1,2 @@
+export * from './LayoutHeaderAndSegment';
+export * from './UsersBackButton';

web/src/app/app/settings/users/[userId]/_overview/UserDatasetSearch.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDebounceSearch } from '@/hooks';
 import { OrganizationUser } from '@/api';
 import { PermissionSearch } from '@/app/app/_components/PermissionComponents';
-import { UserDatasetListContainer } from './UserDatasetListContainer';
+import { UserDatasetListContainer } from '../dataset-groups/UserDatasetListContainer';
 
 export const UserDatasetSearch = React.memo(({ user }: { user: OrganizationUser }) => {
   const { filteredItems, searchText, handleSearchChange, isPending } = useDebounceSearch({

web/src/app/app/settings/users/[userId]/_overview/UserOverviewController.tsx

@@ -1,30 +1,25 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { useGetUser } from '@/api/buster-rest';
-import { UserHeader } from './UserHeader';
-import { UserSegments, UserSegmentsApps } from './UserSegments';
 import { UserDefaultAccess } from './UserDefaultAccess';
 import { useUserConfigContextSelector } from '@/context/Users';
 import { UserLineageHeader } from './UserLineageHeader';
 import { UserDatasetSearch } from './UserDatasetSearch';
 
-export const UserController = React.memo(({ userId }: { userId: string }) => {
+export const UserOverviewController = React.memo(({ userId }: { userId: string }) => {
   const { data: user } = useGetUser({ userId });
   const isAdmin = useUserConfigContextSelector((x) => x.isAdmin);
-  const [selectedApp, setSelectedApp] = useState<UserSegmentsApps>(UserSegmentsApps.OVERVIEW);
 
   if (!user) return null;
 
   return (
-    <div className="flex flex-col space-y-5">
-      <UserHeader user={user} />
-      <UserSegments userId={userId} selectedApp={selectedApp} onSelectApp={setSelectedApp} />
+    <>
       <UserDefaultAccess user={user} isAdmin={isAdmin} />
       <UserLineageHeader className="!mt-[48px]" user={user} />
       <UserDatasetSearch user={user} />
-    </div>
+    </>
   );
 });
 
-UserController.displayName = 'UserController';
+UserOverviewController.displayName = 'UserController';

web/src/app/app/settings/users/[userId]/layout.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { UsersBackButton } from './UsersBackButton';
+import { UsersBackButton } from './_LayoutHeaderAndSegment';
 import { prefetchGetUser } from '@/api/buster-rest';
 import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { LayoutHeaderAndSegment } from './_LayoutHeaderAndSegment';
 
 export default async function Layout({
   children,
@@ -15,7 +16,9 @@ export default async function Layout({
   return (
     <div className="flex flex-col space-y-5 px-12 py-12">
       <UsersBackButton />
-      <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {<LayoutHeaderAndSegment userId={params.userId}>{children}</LayoutHeaderAndSegment>}
+      </HydrationBoundary>
     </div>
   );
 }

web/src/app/app/settings/users/[userId]/page.tsx

@@ -1,13 +1,5 @@
-import { prefetchGetUser } from '@/api/buster-rest';
-import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
-import { UserController } from './UserController';
+import { UserOverviewController } from './_overview/UserOverviewController';
 
-export default async function Page({ params }: { params: { userId: string } }) {
-  const queryClient = await prefetchGetUser(params.userId);
-
-  return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <UserController userId={params.userId} />
-    </HydrationBoundary>
-  );
+export default async function Page({ params: { userId } }: { params: { userId: string } }) {
+  return <UserOverviewController userId={userId} />;
 }

web/src/components/inputs/AppSearchInput.tsx

@@ -1,3 +1,4 @@
+import { useMemoizedFn } from 'ahooks';
 import { Input } from 'antd';
 import React, { ReactNode } from 'react';
 
@@ -20,13 +21,13 @@ export const AppSearchInput: React.FC<AppSearchInputProps> = ({
   onSearch,
   ...props
 }) => {
-  const onBlurEvent = (e: React.FocusEvent<HTMLInputElement, Element>) => {
+  const onBlurEvent = useMemoizedFn((e: React.FocusEvent<HTMLInputElement, Element>) => {
     props.onBlur?.(e.target.value);
-  };
+  });
 
-  const onPressEnterEvent = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const onPressEnterEvent = useMemoizedFn((e: React.KeyboardEvent<HTMLInputElement>) => {
     props.onPressEnter && props.onPressEnter(props.value);
-  };
+  });
 
   return (
     <Input.Search
@@ -39,3 +40,5 @@ export const AppSearchInput: React.FC<AppSearchInputProps> = ({
     />
   );
 };
+
+AppSearchInput.displayName = 'AppSearchInput';