import { useMemo } from 'react'; import type { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens'; import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell'; import { useTable, useGlobalFilter, useSortBy } from 'react-table'; import { sortTypes } from 'utils/sortTypes'; import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList'; import Key from '@mui/icons-material/Key'; export const useApiTokenTable = ( tokens: IApiToken[], getActionCell: (props: any) => JSX.Element, ) => { const initialState = useMemo( () => ({ sortBy: [{ id: 'createdAt', desc: true }] }), [], ); const COLUMNS = useMemo(() => { return [ { id: 'Icon', width: '1%', Cell: () => } />, disableSortBy: true, disableGlobalFilter: true, }, { Header: 'Username', accessor: 'username', Cell: HighlightCell, }, { Header: 'Type', accessor: 'type', Cell: ({ value, }: { value: 'client' | 'admin' | 'frontend'; }) => ( ), minWidth: 280, }, { Header: 'Project', accessor: 'project', Cell: (props: any) => ( ), minWidth: 120, }, { Header: 'Environment', accessor: 'environment', Cell: HighlightCell, minWidth: 120, }, { Header: 'Created', accessor: 'createdAt', Cell: DateCell, minWidth: 150, disableGlobalFilter: true, }, { Header: 'Last seen', accessor: 'seenAt', Cell: TimeAgoCell, minWidth: 150, disableGlobalFilter: true, }, { Header: 'Actions', id: 'Actions', align: 'center', width: '1%', disableSortBy: true, disableGlobalFilter: true, Cell: getActionCell, }, ]; }, []); const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, state, setGlobalFilter, setHiddenColumns, } = useTable( { columns: COLUMNS as any, data: tokens as any, initialState, sortTypes, autoResetHiddenColumns: false, disableSortRemove: true, }, useGlobalFilter, useSortBy, ); return { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, state, setGlobalFilter, setHiddenColumns, columns: COLUMNS, }; }; const tokenDescriptions: { [index: string]: { label: string; title: string }; } = { client: { label: 'CLIENT', title: 'Connect server-side SDK or Unleash Proxy/Edge', }, frontend: { label: 'FRONTEND', title: 'Connect web and mobile SDK', }, admin: { label: 'ADMIN', title: 'Full access for managing Unleash', }, };