feat(console): delete app modal checks custom domain config

apps/console/app/components/DeleteAppModal/DeleteAppModal.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import { Link, useFetcher } from '@remix-run/react'
+import type { FetcherWithComponents } from '@remix-run/react'
 
 import { Button } from '@proofzero/design-system/src/atoms/buttons/Button'
 import { Modal } from '@proofzero/design-system/src/molecules/modal/Modal'
@@ -8,29 +10,30 @@ import dangerVector from '../../images/danger.svg'
 import { Input } from '@proofzero/design-system/src/atoms/form/Input'
 import { RiLoader5Fill } from 'react-icons/ri'
 
+import type { appDetailsProps } from '~/types'
+
 export type DeleteAppModalProps = {
-  clientId: string
-  appName: string
+  appDetails: appDetailsProps
   isOpen: boolean
-  deleteAppCallback: (app: any) => void
+  deleteAppCallback: (state: boolean) => unknown
 }
 
 export const DeleteAppModal = ({
-  clientId,
-  appName,
+  appDetails,
   isOpen,
   deleteAppCallback,
 }: DeleteAppModalProps) => {
-  const [isAppNameMatches, setAppNameMatches] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const fetcher = useFetcher()
+  const [hasCustomDomain] = useState(!Boolean(appDetails.customDomain))
+
   return (
     <Modal
       isOpen={isOpen}
-      closable={!isSubmitting}
+      closable={fetcher.state !== 'submitting'}
       handleClose={() => deleteAppCallback(false)}
     >
       <div
-        className={`w-[62vw] rounded-lg bg-white px-4 pb-4 
+        className={`w-[48vw] rounded-lg bg-white px-4 pb-4
          text-left  transition-all sm:px-6 sm:pb-6 overflow-y-auto flex items-start space-x-4`}
       >
         <img src={dangerVector} />
@@ -40,62 +43,98 @@ export const DeleteAppModal = ({
             Delete Application
           </Text>
 
-          <form
-            method="post"
-            action="/apps/delete"
-            onSubmit={() => {
-              setIsSubmitting(true)
-            }}
-          >
-            <section className="mb-4">
-              <Text size="sm" weight="normal" className="text-gray-500 my-3">
-                Are you sure you want to delete <b>{appName}</b> app? This
-                action cannot be undone once confirmed.
-              </Text>
-              <Text size="sm" weight="normal" className="text-gray-500 my-3">
-                Confirm you want to delete this application by typing its name
-                below.
-              </Text>
-              <Input
-                id="client_name"
-                label="Application Name"
-                placeholder="My application"
-                required
-                className="mb-12"
-                onChange={(e) => {
-                  setAppNameMatches(appName === e?.target?.value)
-                }}
-              />
-            </section>
-            <input type="hidden" name="clientId" value={clientId} />
-
-            <div className="flex justify-end items-center space-x-3">
-              <Button
-                btnType="secondary-alt"
-                disabled={isSubmitting}
-                onClick={() => deleteAppCallback(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                disabled={!isAppNameMatches || isSubmitting}
-                type="submit"
-                btnType="dangerous"
-                className={
-                  isSubmitting
-                    ? 'flex items-center justify-between transition'
-                    : ''
-                }
-              >
-                {isSubmitting && (
-                  <RiLoader5Fill className="animate-spin" size={22} />
-                )}
-                Delete
-              </Button>
-            </div>
-          </form>
+          {hasCustomDomain && (
+            <HasCustomDomain appDetails={appDetails}></HasCustomDomain>
+          )}
+          {!hasCustomDomain && (
+            <DeleteModalAppForm
+              fetcher={fetcher}
+              appDetails={appDetails}
+              callback={deleteAppCallback}
+            />
+          )}
         </div>
       </div>
     </Modal>
   )
 }
+
+type DeleteModalAppFormProps = {
+  fetcher: FetcherWithComponents<any>
+  appDetails: appDetailsProps
+  callback: (state: boolean) => unknown
+}
+
+const DeleteModalAppForm = ({
+  fetcher,
+  appDetails,
+  callback,
+}: DeleteModalAppFormProps) => {
+  const [isAppNameMatches, setAppNameMatches] = useState(false)
+  return (
+    <fetcher.Form method="post" action="/apps/delete" reloadDocument={true}>
+      <section className="mb-4">
+        <Text size="sm" weight="normal" className="text-gray-500 my-3">
+          Are you sure you want to delete <b>{appDetails.app.name}</b> app? This
+          action cannot be undone once confirmed.
+        </Text>
+        <Text size="sm" weight="normal" className="text-gray-500 my-3">
+          Confirm you want to delete this application by typing its name below.
+        </Text>
+        <Input
+          id="client_name"
+          label="Application Name"
+          placeholder="My application"
+          required
+          className="mb-12"
+          onChange={(e) =>
+            setAppNameMatches(appDetails.app.name === e?.target?.value)
+          }
+        />
+      </section>
+      <input type="hidden" name="clientId" value={appDetails.clientId} />
+
+      <div className="flex justify-end items-center space-x-3">
+        <Button
+          btnType="secondary-alt"
+          disabled={fetcher.state === 'submitting'}
+          onClick={() => callback(false)}
+        >
+          Cancel
+        </Button>
+        <Button
+          disabled={!isAppNameMatches || fetcher.state === 'submitting'}
+          type="submit"
+          btnType="dangerous"
+          className={
+            fetcher.state === 'submitting'
+              ? 'flex items-center justify-between transition'
+              : ''
+          }
+        >
+          {fetcher.state === 'submitting' && (
+            <RiLoader5Fill className="animate-spin" size={22} />
+          )}
+          Delete
+        </Button>
+      </div>
+    </fetcher.Form>
+  )
+}
+
+type HasCustomDomainProps = {
+  appDetails: appDetailsProps
+}
+
+const HasCustomDomain = ({ appDetails }: HasCustomDomainProps) => (
+  <section className="flex flex-col mb-4">
+    <Text size="sm" weight="normal" className="text-gray-500 my-3">
+      This application has a custom domain configured. You need to delete it
+      before you can delete the application.
+    </Text>
+
+    <Link to={`/apps/${appDetails.clientId}/domain-wip`} className="self-end">
+      <Button btnType="secondary-alt">Go to Custom Domain</Button>
+    </Link>
+  </section>
+)

apps/console/app/root.tsx

@@ -224,47 +224,47 @@ export default function App() {
   )
 }
 
-export const ErrorBoundary = ({
-  error,
-}: {
-  error?: {
-    stack: any
-    message: string
-  }
-}) => {
+// https://remix.run/docs/en/v1/guides/errors
+// @ts-ignore
+export function ErrorBoundary({ error }) {
   const nonce = useContext(NonceContext)
 
   console.error('ErrorBoundary', error)
+
   return (
     <html lang="en">
       <head>
         <Meta />
         <Links />
       </head>
-
       <body className="min-h-[100dvh] flex justify-center items-center">
         <div className="w-full">
           <ErrorPage
             code="Error"
             message="Something went terribly wrong!"
             trace={error?.stack}
             error={error}
+            pepe={false}
+            backBtn={false}
           />
         </div>
 
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <LiveReload port={8002} nonce={nonce} />
       </body>
     </html>
   )
 }
 
 export function CatchBoundary() {
   const caught = useCatch()
-  console.error('CatchBoundary', { caught })
+  console.error('CaughtBoundary', caught)
+
+  const { status } = caught
 
   let secondary = 'Something went wrong'
-  switch (caught.status) {
+  switch (status) {
     case 404:
       secondary = 'Page not found'
       break
@@ -281,14 +281,22 @@ export function CatchBoundary() {
         <Meta />
         <Links />
       </head>
-
-      <body className="min-h-[100dvh] flex justify-center items-center">
-        <div className="w-full">
-          <ErrorPage code={caught.status.toString()} message={secondary} />
+      <body>
+        <div
+          className={
+            'flex flex-col h-[100dvh] gap-4 justify-center items-center'
+          }
+        >
+          <h1>{status}</h1>
+          <p>
+            {secondary}
+            {caught.data?.message && `: ${caught.data?.message}`}
+          </p>
+          <p>({caught.data?.traceparent && `${caught.data?.traceparent}`})</p>
         </div>
-
         <ScrollRestoration />
         <Scripts />
+        <LiveReload port={8002} />
       </body>
     </html>
   )

apps/console/app/routes/apps/$clientId/auth.tsx

@@ -298,12 +298,9 @@ export default function AppDetailIndexPage() {
     <>
       {isImgUploading ? <Loader /> : null}
       <DeleteAppModal
-        clientId={appDetails.clientId as string}
-        appName={appDetails.app.name}
-        deleteAppCallback={() => {
-          setDeleteModalOpen(false)
-        }}
+        appDetails={appDetails}
         isOpen={deleteModalOpen}
+        deleteAppCallback={() => setDeleteModalOpen(false)}
       />
 
       <Form
@@ -678,9 +675,7 @@ export default function AppDetailIndexPage() {
               <Button
                 type="button"
                 btnType="dangerous-alt"
-                onClick={() => {
-                  setDeleteModalOpen(true)
-                }}
+                onClick={() => setDeleteModalOpen(true)}
               >
                 Delete the Application
               </Button>

apps/console/app/routes/apps/delete.tsx

@@ -1,17 +1,23 @@
-import { ActionFunction, json, redirect } from '@remix-run/cloudflare'
+import { redirect } from '@remix-run/cloudflare'
+import type { ActionFunction } from '@remix-run/cloudflare'
 import createStarbaseClient from '@proofzero/platform-clients/starbase'
 import { requireJWT } from '~/utilities/session.server'
 import { getAuthzHeaderConditionallyFromToken } from '@proofzero/utils'
 import { generateTraceContextHeaders } from '@proofzero/platform-middleware/trace'
-import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
-import { InternalServerError } from '@proofzero/errors'
+import {
+  JsonError,
+  getErrorCause,
+  getRollupReqFunctionErrorWrapper,
+} from '@proofzero/utils/errors'
+import { BadRequestError, InternalServerError } from '@proofzero/errors'
 
 export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context }) => {
     const formData = await request.formData()
     const clientId = formData.get('clientId')?.toString()
 
-    if (!clientId) throw 'Client ID is required'
+    if (!clientId)
+      throw new BadRequestError({ message: 'Client ID is required' })
 
     const jwt = await requireJWT(request)
 
@@ -20,15 +26,25 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
       ...generateTraceContextHeaders(context.traceSpan),
     })
     try {
-      await starbaseClient.deleteApp.mutate({
-        clientId,
-      })
-      return redirect(`/`)
+      await starbaseClient.deleteApp.mutate({ clientId })
+      return redirect('/')
     } catch (error) {
-      console.error({ error })
-      return new InternalServerError({
-        message: 'Could not delete application',
-      })
+      const cause = getErrorCause(error)
+      const traceparent = context.traceSpan.getTraceParent()
+      if (cause instanceof BadRequestError) {
+        throw cause
+      } else {
+        console.error(error)
+        throw JsonError(
+          new InternalServerError({
+            message: 'Could not delete the application',
+            cause: error,
+          }),
+          traceparent
+        )
+      }
     }
   }
 )
+
+export default () => {}

apps/console/app/types.ts

@@ -2,6 +2,7 @@ import type {
   AuthorizedUser,
   AppObject,
   EdgesMetadata,
+  CustomDomain,
 } from '@proofzero/platform/starbase/src/types'
 
 export enum RollType {
@@ -20,6 +21,7 @@ export type appDetailsProps = {
   clientId?: string
   secretTimestamp?: number
   apiKeyTimestamp?: number
+  customDomain?: CustomDomain
 }
 
 export type errorsAuthProps = {