import { observer } from 'mobx-react'
import { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

import { ModifyingForTidbGroup } from './ModifyingForTidbGroup'

interface DedicatedModifyingProps {
  cluster: SharedCluster
}

export const DedicatedModifying = observer(({ cluster }: DedicatedModifyingProps) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Modifying`
  }, [])

  return <ModifyingForTidbGroup clusterId={cluster.id} />
})