function ClusterList()

in frontend/src/old-pages/Clusters/Clusters.tsx [73:139]
62 lines of code
5 McCabe index (conditional complexity)

function ClusterList({clusters}: {clusters: ClusterInfoSummary[]}) {
  const selectedClusterName = useState(['app', 'clusters', 'selected'])
  let navigate = useNavigate()
  let params = useParams()
  const {t} = useTranslation()

  React.useEffect(() => {
    if (params.clusterName && selectedClusterName !== params.clusterName)
      selectCluster(params.clusterName, DescribeCluster, GetConfiguration)
  }, [navigate, params.clusterName, selectedClusterName])

  const onSelectionChangeCallback = React.useCallback(
    ({detail}) => {
      navigate(`/clusters/${detail.selectedItems[0].clusterName}`)
    },
    [navigate],
  )

  const configure = () => {
    wizardShow(navigate)
  }

  const clustersCount = (clusters || []).length

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    clusters || [],
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('cluster.list.filtering.empty.title')}
            subtitle={t('cluster.list.filtering.empty.subtitle')}
            action={
              <Button onClick={configure}>
                {t('cluster.list.filtering.empty.action')}
              </Button>
            }
          />
        ),
        noMatch: (
          <EmptyState
            title={t('cluster.list.filtering.noMatch.title')}
            subtitle={t('cluster.list.filtering.noMatch.subtitle')}
            action={
              <Button onClick={() => actions.setFiltering('')}>
                {t('cluster.list.filtering.noMatch.action')}
              </Button>
            }
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'clusterName',
          },
        },
      },
      selection: {},
    }),