text: import React from 'react'
  import createCRUDComponents from 'core/helpers/createCRUDComponents'
  import ClusterPicklist from 'k8s/components/common/ClusterPicklist'
  import { roleActions } from './actions'
  import { createUsePrefParamsHook } from 'core/hooks/useParams'
  import { listTablePrefs } from 'app/constants'
  import { pick } from 'ramda'
  import DateCell from 'core/components/listTable/cells/DateCell'
  import { ActionDataKeys } from 'k8s/DataKeys'
  import { routes } from 'core/utils/routes'
  import { clusterActions } from '../infrastructure/clusters/actions'
  import useDataLoaderWithMessage from 'core/hooks/useDataLoaderWithMessage'
  
  const defaultParams = {
    masterNodeClusters: true,
  }
  const dataLoaderOptions = {
    requiredParams: ['clusterId'],
  }
  const usePrefParams = createUsePrefParamsHook('Roles', listTablePrefs)
  
  const ListPage = ({ ListContainer }) => {
    return () => {
      const { params, getParamsUpdater } = usePrefParams(defaultParams)
      const { data: roles, reload, loading, message } = useDataLoaderWithMessage({
        loaderFn: roleActions.list,
        params,
        options: dataLoaderOptions,
        dependentCacheKeys: [clusterActions.cacheKey],
      })
  
      return (
        <ListContainer
          loading={loading}
          loadingMessage={message}
          reload={reload}
          data={roles}
          getParamsUpdater={getParamsUpdater}
          filters={
            <ClusterPicklist
              selectFirst={false}
              onChange={getParamsUpdater('clusterId')}
              value={params.clusterId}
              onlyMasterNodeClusters
              setInitialCluster
            />
          }
          {...pick(listTablePrefs, params)}
        />
      )
    }
  }
  
  export const options = {
    addUrl: routes.rbac.addRoles.path(),
    addText: 'Add Role',
    columns: [
      { id: 'name', label: 'Name' },
      { id: 'clusterName', label: 'Cluster' },
      { id: 'namespace', label: 'Namespace' },
      { id: 'created', label: 'Created', render: (value) => <DateCell value={value} /> },
    ],
    cacheKey: ActionDataKeys.KubeRoles,
    actions: roleActions,
    deleteFn: roleActions.delete,
    editUrl: (item, id) => routes.rbac.editRoles.path({ id, clusterId: item.clusterId }),
    name: 'Roles',
    title: 'Roles',
    searchTargets: ['name', 'namespace'],
    ListPage,
  }
  const components = createCRUDComponents(options)
  export const RolesList = components.List
  
  export default components.ListPage
  