import * as React from 'react'; import * as ReactDOM from 'react-dom'; import {DataLoader, EmptyState, Page, Paginate, SearchBar} from '../../../shared/components'; import {Context} from '../../../shared/context'; import {services} from '../../../shared/services'; import {useQuery} from '../../../shared/hooks/query'; import {useListSort} from '../../../shared/hooks/use-list-sort'; import {FlexTopBar} from '../../../shared/components'; import {useSidebarTarget} from '../../../sidebar/sidebar'; import {AccountsFilter, AccountsListPreferences, getAccountFilterResults, filterAccounts} from './accounts-filter'; export const AccountsList = () => { const ctx = React.useContext(Context); const query = useQuery(); const searchText = query.get('search') || ''; const [page, setPage] = React.useState(0); const sidebarTarget = useSidebarTarget(); const [filterPref, setFilterPref] = React.useState({ statusFilter: query.getAll('status') || [], capabilitiesFilter: query.getAll('capabilities') || [] }); type SortKey = 'name' | 'enabled' | 'capabilities'; const {sortKey, requestSort, sortIcon, compareString, compareNumber} = useListSort('name'); const updateFilterPref = (newPref: AccountsListPreferences) => { setFilterPref(newPref); ctx.navigation.goto( '.', { status: newPref.statusFilter.length > 0 ? newPref.statusFilter : null, capabilities: newPref.capabilitiesFilter.length > 0 ? newPref.capabilitiesFilter : null, search: searchText || null }, {replace: true} ); setPage(0); }; return ( { ctx.navigation.goto( '.', { status: filterPref.statusFilter.length > 0 ? filterPref.statusFilter : null, capabilities: filterPref.capabilitiesFilter.length > 0 ? filterPref.capabilitiesFilter : null, search: value || null }, {replace: true} ); setPage(0); }} placeholder='Search accounts...' /> ) }} />

services.accounts.list()}> {accounts => { const accountsWithFilter = getAccountFilterResults(accounts, filterPref); const filteredByFilter = filterAccounts(accountsWithFilter); const filteredAccounts = filteredByFilter .filter( account => searchText === '' || account.name.toLowerCase().includes(searchText.toLowerCase()) || (account.capabilities && account.capabilities.join(', ').toLowerCase().includes(searchText.toLowerCase())) ) .sort((a, b) => { switch (sortKey) { case 'name': return compareString(a.name, b.name); case 'enabled': return compareNumber(Number(!!a.enabled), Number(!!b.enabled)); case 'capabilities': return compareString((a.capabilities || []).join(', '), (b.capabilities || []).join(', ')); default: return 0; } }); return ( <> {sidebarTarget && ReactDOM.createPortal(, sidebarTarget.current)} {filteredAccounts.length > 0 ? ( {accountsToDisplay => (

requestSort('name')}> NAME {sortIcon('name')}

requestSort('enabled')}> ENABLED {sortIcon('enabled')}

requestSort('capabilities')}> CAPABILITIES {sortIcon('capabilities')}

{accountsToDisplay.map(account => (

ctx.navigation.goto(`./${account.name}`)}>

{account.name}

{(account.enabled && 'true') || 'false'}

{(account.capabilities || []).join(', ')}

))}

)} ) : accounts.length === 0 ? (

No accounts yet

Define new accounts in Argo CD configuration

) : (

No accounts matched your search

Try adjusting your search query

)} ); }}

); };