supabase/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx

import { FC, useState } from 'react'
import { useRouter } from 'next/router'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, IconRefreshCcw } from '@supabase/ui'
import { PermissionAction } from '@supabase/shared-types/out/constants'

import { useStore, checkPermissions } from 'hooks'
import { post } from 'lib/common/fetch'
import { API_URL } from 'lib/constants'
import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'

interface Props {
  projectId: number
  projectRef: string
}

const RestartServerButton: FC<Props> = observer(({ projectRef, projectId }) => {
  const { ui, app } = useStore()
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const openModal = () => setIsModalOpen(true)
  const closeModal = () => setIsModalOpen(false)

  const canRestartProject = checkPermissions(PermissionAction.INFRA_EXECUTE, 'reboot')

  const requestServerRestart = async () => {
    if (!canRestartProject) {
      return ui.setNotification({
        category: 'error',
        message: 'You do not have the required permissions to restart this project',
      })
    }

    setLoading(true)
    const res = await post(`${API_URL}/projects/${projectRef}/restart`, {})

    if (res.error) {
      ui.setNotification({
        error: res.error,
        category: 'error',
        message: 'Unable to restart server',
      })
      setLoading(false)
    } else {
      app.onProjectPostgrestStatusUpdated(projectId, 'OFFLINE')
      ui.setNotification({ category: 'success', message: 'Restarting server' })
      router.push(`/project/${projectRef}`)
    }
    closeModal()
  }

  return (
    <>
      <Tooltip.Root delayDuration={0}>
        <Tooltip.Trigger>
          <Button
            type="default"
            icon={<IconRefreshCcw />}
            onClick={openModal}
            loading={loading}
            disabled={!canRestartProject}
          >
            Restart server
          </Button>
        </Tooltip.Trigger>
        {!canRestartProject && (
          <Tooltip.Content side="bottom">
            <Tooltip.Arrow className="radix-tooltip-arrow" />
            <div
              className={[
                'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
                'border-scale-200 border ', //border
              ].join(' ')}
            >
              <span className="text-scale-1200 text-xs">
                You need additional permissions to restart this project
              </span>
            </div>
          </Tooltip.Content>
        )}
      </Tooltip.Root>
      <ConfirmModal
        danger
        visible={isModalOpen}
        title="Restart Server"
        description={`Are you sure you want to restart the server? There will be a few minutes of downtime.`}
        buttonLabel="Restart"
        buttonLoadingLabel="Restarting"
        onSelectCancel={closeModal}
        onSelectConfirm={requestServerRestart}
      />
    </>
  )
})

export default RestartServerButton