start user dataset lineage

Co-Authored-By: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

web/src/app/app/_components/PermissionComponents/index.ts

@@ -1 +1,3 @@
 export * from './PermissionLineageBreadcrumb';
+export * from './HeaderExplanation';
+export * from './PermissionSearch';

web/src/app/app/datasets/[datasetId]/permissions/dataset-groups/_PermissionDatasetGroups/PermissionDatasetGroups.tsx

@@ -4,8 +4,7 @@ import { useDatasetListDatasetGroups } from '@/api/buster-rest';
 import React, { useState } from 'react';
 import { useDebounceSearch } from '@/hooks';
 import { useMemoizedFn } from 'ahooks';
-import { HeaderExplanation } from '../../HeaderExplanation';
-import { PermissionSearch } from '../../PermissionSearch';
+import { PermissionSearch, HeaderExplanation } from '@/app/app/_components/PermissionComponents';
 import { Button } from 'antd';
 import { AppMaterialIcons } from '@/components';
 import { PermissionListDatasetGroupContainer } from './PermissionListDatasetGroupContainer';

web/src/app/app/datasets/[datasetId]/permissions/overview/_PermissionOverview/PermissionListUserContainer.tsx

@@ -71,7 +71,7 @@ export const PermissionListUserContainer: React.FC<{
     return result;
   }, [filteredUsers]);
 
-  const rows = useMemo(
+  const rows: BusterListRowItem[] = useMemo(
     () =>
       [
         {

web/src/app/app/datasets/[datasetId]/permissions/overview/_PermissionOverview/PermissionOverview.tsx

@@ -2,8 +2,7 @@
 
 import { useGetDatasetPermissionsOverview } from '@/api/buster-rest/datasets';
 import React from 'react';
-import { HeaderExplanation } from '../../HeaderExplanation';
-import { PermissionSearch } from '../../PermissionSearch';
+import { PermissionSearch, HeaderExplanation } from '@/app/app/_components/PermissionComponents';
 import { PermissionListUserContainer } from './PermissionListUserContainer';
 import { useDebounceSearch } from '@/hooks';
 

web/src/app/app/datasets/[datasetId]/permissions/permission-groups/_PermissionPermissionGroup/PermissionPermissionGroup.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { HeaderExplanation } from '../../HeaderExplanation';
-import { PermissionSearch } from '../../PermissionSearch';
+import { PermissionSearch, HeaderExplanation } from '@/app/app/_components/PermissionComponents';
 import { useMemoizedFn } from 'ahooks';
 import { Button } from 'antd';
 import { AppMaterialIcons } from '@/components';

web/src/app/app/datasets/[datasetId]/permissions/users/_PermissionUsers/PermissionUsers.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import React from 'react';
-import { HeaderExplanation } from '../../HeaderExplanation';
-import { PermissionSearch } from '../../PermissionSearch';
+import { PermissionSearch, HeaderExplanation } from '@/app/app/_components/PermissionComponents';
 import { useDatasetListPermissionUsers } from '@/api/buster-rest';
 import { useDebounceSearch } from '@/hooks';
 import { Button } from 'antd';

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

@@ -21,8 +21,8 @@ export const UserController = React.memo(({ userId }: { userId: string }) => {
       <UserHeader user={user} />
       <UserSegments user={user} selectedApp={selectedApp} onSelectApp={setSelectedApp} />
       <UserDefaultAccess user={user} isAdmin={isAdmin} />
-      <UserLineageHeader className="!mt-[48px]" />
-      <UserDatasetSearch />
+      <UserLineageHeader className="!mt-[48px]" user={user} />
+      <UserDatasetSearch user={user} />
     </div>
   );
 });

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

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import {
+  BusterInfiniteList,
+  BusterListColumn,
+  BusterListRowItem,
+  InfiniteListContainer
+} from '@/components/list';
+import { PermissionLineageBreadcrumb } from '@/app/app/_components/PermissionComponents';
+import { DatasetPermissionOverviewUser } from '@/api/buster-rest';
+import { Text } from '@/components/text';
+
+export const UserDatasetListContainer = React.memo(
+  ({ filteredDatasets }: { filteredDatasets: any[] }) => {
+    const columns: BusterListColumn[] = useMemo(() => [], []);
+
+    const rows: BusterListRowItem[] = useMemo(() => [], []);
+
+    return (
+      <InfiniteListContainer>
+        <BusterInfiniteList
+          columns={columns}
+          rows={rows}
+          showHeader={false}
+          showSelectAll={false}
+          emptyState={<EmptyState />}
+        />
+      </InfiniteListContainer>
+    );
+  }
+);
+
+UserDatasetListContainer.displayName = 'UserDatasetListContainer';
+
+const DatasetLineageCell = React.memo(({ user }: { user: DatasetPermissionOverviewUser }) => {
+  return (
+    <div className="flex items-center justify-end">
+      {/* <PermissionLineageBreadcrumb lineage={user.lineage} canQuery={user.can_query} /> */}
+    </div>
+  );
+});
+DatasetLineageCell.displayName = 'DatasetLineageCell';
+
+const EmptyState = React.memo(() => {
+  return (
+    <div className="py-12">
+      <Text type="tertiary">No datasets found</Text>
+    </div>
+  );
+});
+EmptyState.displayName = 'EmptyState';

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

@@ -1,22 +1,19 @@
 import React from 'react';
-import { Input } from 'antd';
 import { useDebounceSearch } from '@/hooks';
-import { InfiniteListContainer } from '@/components/list';
+import { OrganizationUser } from '@/api';
+import { PermissionSearch } from '@/app/app/_components/PermissionComponents';
+import { UserDatasetListContainer } from './UserDatasetListContainer';
 
-export const UserDatasetSearch = React.memo(() => {
+export const UserDatasetSearch = React.memo(({ user }: { user: OrganizationUser }) => {
   const { filteredItems, searchText, handleSearchChange, isPending } = useDebounceSearch({
     items: [],
-    searchPredicate: (item, searchText) => true,
-    debounceTime: 500
+    searchPredicate: (item, searchText) => true
   });
 
   return (
-    <div className="flex flex-col space-y-3">
-      <Input className="w-full max-w-[280px]" placeholder="Search datasets..." />
-
-      <InfiniteListContainer>
-        <div>TEST</div>
-      </InfiniteListContainer>
+    <div className="flex h-full flex-col space-y-3 pb-12">
+      <PermissionSearch searchText={searchText} setSearchText={handleSearchChange} />
+      <UserDatasetListContainer filteredDatasets={filteredItems} />
     </div>
   );
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BusterUserAvatar, Text, Title, AppMaterialIcons } from '@/components';
-import { BusterUserResponse, OrganizationUser } from '@/api';
+import { OrganizationUser } from '@/api';
 import { Button } from 'antd';
 
 export const UserHeader = React.memo(({ user }: { user: OrganizationUser }) => {

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

@@ -1,13 +1,17 @@
 import React from 'react';
-import { Text, Title } from '@/components/text';
+import { HeaderExplanation } from '@/app/app/_components/PermissionComponents';
+import type { OrganizationUser } from '@/api/buster-rest';
 
-export const UserLineageHeader = React.memo(({ className = '' }: { className?: string }) => {
-  return (
-    <div className={`flex flex-col space-y-1.5 ${className}`}>
-      <Title level={4}>{`Dataset access & lineage`}</Title>
-      <Text type="secondary">{`View Blake Rouse’s access to all available datasets. Lineage is provided to show where access originates from.`}</Text>
-    </div>
-  );
-});
+export const UserLineageHeader = React.memo(
+  ({ className = '', user }: { className?: string; user: OrganizationUser }) => {
+    return (
+      <HeaderExplanation
+        className={className}
+        title={`Dataset access & lineage`}
+        description={`View ${user.name}’s access to all available datasets. Lineage is provided to show where access originates from.`}
+      />
+    );
+  }
+);
 
 UserLineageHeader.displayName = 'UserLineageHeader';