import { Box , Container , Grid , GridItem , Text , Input , FormControl , FormErrorMessage , Button , Heading , } from '@chakra-ui/react' ; import { useFormik } from 'formik' ; import * as yup from 'yup' ; import { useHistory , useParams } from 'react-router' ; import { DashboardDocument , useAppByIdQuery , useDestroyAppMutation , } from '../../../generated/graphql' ; import { AppHeaderInfo } from '../../../modules/app/AppHeaderInfo' ; import { AppHeaderTabNav } from '../../../modules/app/AppHeaderTabNav' ; import { AppRebuild } from '../../../modules/app/AppRebuild' ; import { AppRestart } from '../../../modules/app/AppRestart' ; import { AppSettingsMenu } from '../../../modules/app/AppSettingsMenu' ; import { Header } from '../../../modules/layout/Header' ; import { HeaderContainer } from '../../../ui' ; import { useToast } from '../../../ui/toast' ; export const AppSettingsAdvanced = ( ) => { const { id : appId } = useParams < { id : string ; } > ( ) ; const toast = useToast ( ) ; const history = useHistory ( ) ; const { data , loading } = useAppByIdQuery ( { variables : { appId , } , } ) ; const [ destroyAppMutation , { loading : destroyAppMutationLoading } , ] = useDestroyAppMutation ( ) ; const DeleteAppNameSchema = yup . object ( ) . shape ( { appName : yup . string ( ) . required ( 'Required' ) . test ( 'Equals app name' , 'Must match app name' , ( val ) => val === data ?. app ?. name ) , } ) ; const formik = useFormik < { appName : string ; } > ( { initialValues : { appName : '' , } , validateOnChange : true , validationSchema : DeleteAppNameSchema , onSubmit : async ( values ) => { try { await destroyAppMutation ( { variables : { input : { appId } , } , refetchQueries : [ { query : DashboardDocument , } , ] , } ) ; toast . success ( 'App deleted successfully' ) ; history . push ( '/dashboard' ) ; } catch ( error ) { toast . error ( error . message ) ; } } , } ) ; if ( loading ) { return < p > Loading ... < /p>; } if ( ! data ?. app ) { return < p > App not found . < /p>; } const { app } = data ; return ( < > < HeaderContainer > < Header /> < AppHeaderInfo app = { app } / > < AppHeaderTabNav app = { app } /> < /HeaderContainer> < Container maxW = "5xl" mt = { 10 } > < Grid templateColumns = { { sm : 'repeat(1, 1fr)' , md : 'repeat(6, 1fr)' } } gap = { { sm : 0 , md : 16 } } > < GridItem colSpan = { 2 } py = { 5 } > < AppSettingsMenu app = { app } /> < /GridItem> < GridItem colSpan = { 4 } > < AppRestart appId = { app . id } /> < AppRebuild appId = { app . id } / > < Box py = "5" > < Heading as = "h2" size = "md" > Delete app < /Heading> < Text fontSize = "sm" color = "gray.400" > This action cannot be undone . This will permanently delete { ' ' } { app . name } app and everything related to it . Please type { ' ' } < b > { app . name } < /b> to confirm deletion. < /Text> < /Box> < form onSubmit = { formik . handleSubmit } > < FormControl id = "appName" isInvalid = { Boolean ( formik . errors . appName && formik . touched . appName ) } > < Input autoComplete = "off" id = "appNme" name = "appName" placeholder = "App name" value = { formik . values . appName } onChange = { formik . handleChange } onBlur = { formik . handleBlur } / > < FormErrorMessage > { formik . errors . appName } < /FormErrorMessage> < /FormControl> < Button my = { 4 } type = "submit" colorScheme = "red" isLoading = { destroyAppMutationLoading } > Delete < /Button> < /form> < /GridItem> < /Grid> < /Container> < />); } ;