export default function Clusters()

in frontend/src/old-pages/Clusters/Clusters.tsx [200:265]
62 lines of code
3 McCabe index (conditional complexity)

export default function Clusters() {
  const clusterName = useState(['app', 'clusters', 'selected'])
  const [splitOpen, setSplitOpen] = React.useState(true)
  const {t} = useTranslation()
  let {data: clusters} = useQuery('LIST_CLUSTERS', ListClusters, {
    refetchInterval: 5000,
  })

  const selectedClusterName = useState(['app', 'clusters', 'selected'])
  const oldStatus = useState(['app', 'clusters', 'selectedStatus'])
  let navigate = useNavigate()

  useHelpPanel(<ClustersHelpPanel />)

  useEffect(
    () => onClustersUpdate(selectedClusterName, clusters!, oldStatus, navigate),
    [selectedClusterName, oldStatus, clusters, navigate],
  )

  return (
    <Layout
      pageSlug={clustersSlug}
      splitPanelOpen={splitOpen}
      onSplitPanelToggle={e => {
        setSplitOpen(e.detail.open)
      }}
      splitPanel={
        <SplitPanel
          i18nStrings={{
            preferencesTitle: t('global.splitPanel.preferencesTitle'),
            preferencesPositionLabel: t(
              'global.splitPanel.preferencesPositionLabel',
            ),
            preferencesPositionDescription: t(
              'global.splitPanel.preferencesPositionDescription',
            ),
            preferencesPositionSide: t(
              'global.splitPanel.preferencesPositionSide',
            ),
            preferencesPositionBottom: t(
              'global.splitPanel.preferencesPositionBottom',
            ),
            preferencesConfirm: t('global.splitPanel.preferencesConfirm'),
            preferencesCancel: t('global.splitPanel.preferencesCancel'),
            closeButtonAriaLabel: t('global.splitPanel.closeButtonAriaLabel'),
            openButtonAriaLabel: t('global.splitPanel.openButtonAriaLabel'),
            resizeHandleAriaLabel: t('global.splitPanel.resizeHandleAriaLabel'),
          }}
          header={
            clusterName
              ? `Cluster: ${clusterName}`
              : t('cluster.list.splitPanel.noClusterSelectedText')
          }
        >
          {clusterName ? (
            <Details />
          ) : (
            <div>{t('cluster.list.splitPanel.selectClusterText')}</div>
          )}
        </SplitPanel>
      }
    >
      <ClusterList clusters={clusters!} />
    </Layout>
  )
}