fix personas list

assets/src/components/settings/usermanagement/personas/Persona.tsx → assets/src/components/settings/usermanagement/personas/PersonaActions.tsx

@@ -11,14 +11,13 @@ import {
 import { DeleteIconButton } from 'components/utils/IconButtons'
 
 import { removeConnection, updateCache } from '../../../../utils/graphql'
-import { Info } from '../../../utils/Info'
 import { Permissions, hasRbac } from '../misc'
 
 import { EditPersonaAttributes } from './PersonaAttributesEdit'
 import PersonaView from './PersonaView'
 import { EditPersonaBindings } from './PersonaBindingsEdit'
 
-export default function Persona({ persona }: { persona: PersonaT }) {
+export default function PersonaActions({ persona }: { persona: PersonaT }) {
   const { me } = useContext<any>(LoginContext)
   const editable = !!me.roles?.admin || hasRbac(me, Permissions.USERS)
 
@@ -43,10 +42,6 @@ export default function Persona({ persona }: { persona: PersonaT }) {
       flexDirection="row"
       alignItems="center"
     >
-      <Info
-        text={persona.name}
-        description={persona.description || 'no description'}
-      />
       <Flex
         flex={false}
         direction="row"

assets/src/components/settings/usermanagement/personas/PersonasList.tsx

@@ -1,63 +1,83 @@
 import isEmpty from 'lodash/isEmpty'
-import { EmptyState } from '@pluralsh/design-system'
-import { useState } from 'react'
-import { Div } from 'honorable'
+import { EmptyState, Table } from '@pluralsh/design-system'
+import { useMemo } from 'react'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
-import { usePersonasQuery } from 'generated/graphql'
+import { PersonaFragment, usePersonasQuery } from 'generated/graphql'
+import { createColumnHelper } from '@tanstack/react-table'
 
-import { extendConnection } from '../../../../utils/graphql'
-import { List, ListItem } from '../../../utils/List'
-import { StandardScroller } from '../../../utils/SmoothScroller'
+import { GridTableWrapper } from '../../../utils/layout/ResponsiveGridLayouts'
+import { useFetchPaginatedData } from '../../../cd/utils/useFetchPaginatedData'
+import { GqlError } from '../../../utils/Alert'
 
+import { Info } from '../../../utils/Info'
+
+import PersonaActions from './PersonaActions'
 import PersonaCreate from './PersonaCreate'
-import Persona from './Persona'
 
-export function PersonasList() {
-  const { data, loading, fetchMore } = usePersonasQuery()
-  const [listRef, setListRef] = useState<any>(null)
-
-  if (!data?.personas) return <LoadingIndicator />
-
-  const { edges, pageInfo } = data.personas
-
-  return (
-    <List background="fill-zero-selected">
-      {!isEmpty(edges) ? (
-        <StandardScroller
-          listRef={listRef}
-          setListRef={setListRef}
-          items={edges}
-          mapper={({ node: persona }) => (
-            <ListItem key={persona.id}>
-              <Persona persona={persona} />
-            </ListItem>
-          )}
-          loadNextPage={() =>
-            pageInfo.hasNextPage &&
-            fetchMore({
-              variables: { cursor: pageInfo.endCursor },
-              updateQuery: (prev, { fetchMoreResult: { personas } }) =>
-                extendConnection(prev, personas, 'personas'),
-            })
-          }
-          hasNextPage={pageInfo.hasNextPage}
-          loading={loading}
-          placeholder={() => (
-            <Div
-              flex={false}
-              height="50px"
-              padding="small"
-            />
-          )}
-          handleScroll={undefined}
-          refreshKey={undefined}
-          setLoader={undefined}
+export const pageSize = 100
+
+const columnHelper = createColumnHelper<PersonaFragment>()
+const columns = [
+  columnHelper.accessor((persona) => persona, {
+    id: 'info',
+    cell: ({ getValue }) => {
+      const persona = getValue()
+
+      return (
+        <Info
+          text={persona.name}
+          description={persona.description}
         />
-      ) : (
-        <EmptyState message={"Looks like you don't have any personas yet."}>
-          <PersonaCreate />
-        </EmptyState>
-      )}
-    </List>
+      )
+    },
+  }),
+  columnHelper.accessor((persona) => persona, {
+    id: 'actions',
+    meta: { gridTemplate: `fit-content(100px)` },
+    cell: function Cell({ getValue }) {
+      return <PersonaActions persona={getValue()} />
+    },
+  }),
+]
+
+export function PersonasList() {
+  const { data, loading, error, pageInfo, fetchNextPage, setVirtualSlice } =
+    useFetchPaginatedData({
+      queryHook: usePersonasQuery,
+      keyPath: ['personas'],
+      pageSize,
+    })
+
+  const personas = useMemo(
+    () => data?.personas?.edges?.map((edge) => edge?.node),
+    [data?.personas?.edges]
+  )
+
+  if (error) return <GqlError error={error} />
+  if (!data?.personas?.edges) return <LoadingIndicator />
+
+  return !isEmpty(personas) ? (
+    <GridTableWrapper>
+      <Table
+        virtualizeRows
+        rowBg="raised"
+        data={personas || []}
+        columns={columns}
+        hideHeader
+        hasNextPage={pageInfo?.hasNextPage}
+        fetchNextPage={fetchNextPage}
+        isFetchingNextPage={loading}
+        onVirtualSliceChange={setVirtualSlice}
+        reactVirtualOptions={{ overscan: 10 }}
+        css={{
+          maxHeight: 'unset',
+          height: '100%',
+        }}
+      />
+    </GridTableWrapper>
+  ) : (
+    <EmptyState message={"Looks like you don't have any personas yet."}>
+      <PersonaCreate />
+    </EmptyState>
   )
 }