chore(dashboard): nextjs 14 in dashboard (#3565)

* chore: nextjs 14 in dashboard

* chore: removed server actions from next-config

---------

Co-authored-by: Siddharth <[email protected]>

apps/dashboard/app/api-keys/api-key.types.ts

@@ -0,0 +1,6 @@
+import { ServerActionResponse } from "../index.types"
+
+type ApiKeyBody = {
+  apiKeySecret: string | undefined
+}
+export interface ApiKeyResponse extends ServerActionResponse<ApiKeyBody | null> {}

apps/dashboard/app/api-keys/server-actions.ts

@@ -2,6 +2,8 @@
 import { getServerSession } from "next-auth"
 import { revalidatePath } from "next/cache"
 
+import { ApiKeyResponse } from "./api-key.types"
+
 import { authOptions } from "@/app/api/auth/[...nextauth]/route"
 import { createApiKey, revokeApiKey } from "@/services/graphql/mutations/api-keys"
 
@@ -45,15 +47,18 @@ export const revokeApiKeyServerAction = async (id: string) => {
   }
 }
 
-export const createApiKeyServerAction = async (_prevState: unknown, form: FormData) => {
+export const createApiKeyServerAction = async (
+  _prevState: ApiKeyResponse,
+  form: FormData,
+): Promise<ApiKeyResponse> => {
   const apiKeyName = form.get("apiKeyName")
   const readOnly = form.get("apiScope") === "readOnly"
 
   if (!apiKeyName || typeof apiKeyName !== "string") {
     return {
       error: true,
       message: "API Key name to create is not present",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -68,7 +73,7 @@ export const createApiKeyServerAction = async (_prevState: unknown, form: FormDa
     return {
       error: true,
       message: "Token is not present",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -81,7 +86,7 @@ export const createApiKeyServerAction = async (_prevState: unknown, form: FormDa
       error: true,
       message:
         "Something went wrong Please try again and if error persist contact support",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -90,6 +95,6 @@ export const createApiKeyServerAction = async (_prevState: unknown, form: FormDa
   return {
     error: false,
     message: "API Key created successfully",
-    data: { apiKeySecret: data?.apiKeyCreate.apiKeySecret },
+    responsePayload: { apiKeySecret: data?.apiKeyCreate.apiKeySecret },
   }
 }

apps/dashboard/app/callback/callback.types.ts

@@ -0,0 +1,13 @@
+import { ServerActionResponse } from "../index.types"
+
+type CallBackAdditionBody = {
+  CallBackAdditionSecret: string | undefined
+}
+export interface CallBackAdditionResponse
+  extends ServerActionResponse<CallBackAdditionBody | null> {}
+
+type CallBackDeletionBody = {
+  CallBackDeletionSecret: string | undefined
+}
+export interface CallBackDeletionResponse
+  extends ServerActionResponse<CallBackDeletionBody | null> {}

apps/dashboard/app/callback/server-actions.ts

@@ -5,12 +5,17 @@ import { revalidatePath } from "next/cache"
 
 import { authOptions } from "../api/auth/[...nextauth]/route"
 
+import { CallBackAdditionResponse, CallBackDeletionResponse } from "./callback.types"
+
 import {
   callbackEndpointAdd,
   callbackEndpointDelete,
 } from "@/services/graphql/mutations/callback-mutation"
 
-export const createCallbackAction = async (_prevState: unknown, formData: FormData) => {
+export const createCallbackAction = async (
+  _prevState: CallBackAdditionResponse,
+  formData: FormData,
+): Promise<CallBackAdditionResponse> => {
   const session = await getServerSession(authOptions)
   const callBackUrl = formData.get("callBackUrl")
   console.log(callBackUrl)
@@ -23,6 +28,7 @@ export const createCallbackAction = async (_prevState: unknown, formData: FormDa
     return {
       error: true,
       message: "Please Provide a Valid Value",
+      responsePayload: null,
     }
   }
 
@@ -33,26 +39,29 @@ export const createCallbackAction = async (_prevState: unknown, formData: FormDa
     return {
       error: true,
       message: "Something went wrong!",
+      responsePayload: null,
     }
   }
 
   if (response?.callbackEndpointAdd.errors.length) {
     return {
       error: true,
       message: response?.callbackEndpointAdd.errors[0].message,
-      data: null,
+      responsePayload: null,
     }
   }
 
   revalidatePath("/callback")
   return {
     error: false,
     message: "success",
-    data: null,
+    responsePayload: null,
   }
 }
 
-export const deleteCallbackAction = async (callBackId: string) => {
+export const deleteCallbackAction = async (
+  callBackId: string,
+): Promise<CallBackDeletionResponse> => {
   const session = await getServerSession(authOptions)
   const token = session?.accessToken
   if (!token || typeof token !== "string") {
@@ -62,6 +71,7 @@ export const deleteCallbackAction = async (callBackId: string) => {
     return {
       error: true,
       message: "Please Provide a Valid Value",
+      responsePayload: null,
     }
   }
 
@@ -72,21 +82,22 @@ export const deleteCallbackAction = async (callBackId: string) => {
     return {
       error: true,
       message: "Something went wrong!",
+      responsePayload: null,
     }
   }
 
   if (response?.callbackEndpointDelete.errors.length) {
     return {
       error: true,
       message: response?.callbackEndpointDelete.errors[0].message,
-      data: null,
+      responsePayload: null,
     }
   }
 
   revalidatePath("/callback")
   return {
     error: false,
     message: "success",
-    data: null,
+    responsePayload: null,
   }
 }

apps/dashboard/app/index.types.ts

@@ -0,0 +1,5 @@
+export interface ServerActionResponse<ResponseBody> {
+  error: boolean
+  message: string | null
+  responsePayload: ResponseBody
+}

apps/dashboard/app/security/email/add/page.tsx

@@ -1,11 +1,7 @@
 "use client"
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
 
-import {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore-next-line no-implicit-any error
-  experimental_useFormState as useFormState,
-} from "react-dom"
+import { useFormState } from "react-dom"
 
 import {
   Box,
@@ -19,16 +15,21 @@ import {
 import InfoOutlined from "@mui/icons-material/InfoOutlined"
 import Link from "next/link"
 
-import { emailRegisterInitiateServerAction } from "../../server-actions"
+import { emailRegisterInitiateServerAction } from "../server-actions"
+
+import { AddEmailResponse } from "../email.types"
 
 import FormSubmitButton from "@/components/form-submit-button"
 
 export default function AddEmail() {
-  const [state, formAction] = useFormState(emailRegisterInitiateServerAction, {
-    error: null,
-    message: null,
-    data: null,
-  })
+  const [state, formAction] = useFormState<AddEmailResponse, FormData>(
+    emailRegisterInitiateServerAction,
+    {
+      error: false,
+      message: null,
+      responsePayload: null,
+    },
+  )
 
   return (
     <main
@@ -61,6 +62,7 @@ export default function AddEmail() {
         >
           <form action={formAction}>
             <Input
+              data-testid="security-add-email-input"
               name="email"
               type="email"
               sx={{
@@ -104,6 +106,7 @@ export default function AddEmail() {
               <FormSubmitButton
                 type="submit"
                 name="submit"
+                data-testid="security-add-email-send-code-btn"
                 sx={{
                   marginTop: "1em",
                   display: "flex",

apps/dashboard/app/security/email/email.types.ts

@@ -0,0 +1,8 @@
+import { ServerActionResponse } from "@/app/index.types"
+
+type AddEmailBody = null
+export interface AddEmailResponse extends ServerActionResponse<AddEmailBody | null> {}
+
+type VerifyEmailBody = null
+export interface VerifyEmailResponse
+  extends ServerActionResponse<VerifyEmailBody | null> {}

apps/dashboard/app/security/server-actions.ts → apps/dashboard/app/security/email/server-actions.ts

@@ -4,6 +4,8 @@ import { redirect } from "next/navigation"
 
 import { revalidatePath } from "next/cache"
 
+import { AddEmailResponse, VerifyEmailResponse } from "./email.types"
+
 import {
   deleteEmail,
   emailRegistrationInitiate,
@@ -17,15 +19,15 @@ import {
 } from "@/services/graphql/generated"
 
 export const emailRegisterInitiateServerAction = async (
-  _prevState: unknown,
+  _prevState: AddEmailResponse,
   form: FormData,
-) => {
+): Promise<AddEmailResponse> => {
   const email = form.get("email")
   if (!email || typeof email !== "string") {
     return {
       error: true,
       message: "Invalid Email",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -35,7 +37,7 @@ export const emailRegisterInitiateServerAction = async (
     return {
       error: true,
       message: "Invalid Token",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -48,15 +50,15 @@ export const emailRegisterInitiateServerAction = async (
       error: true,
       message:
         "Something went wrong Please try again and if error persist contact support",
-      data: null,
+      responsePayload: null,
     }
   }
 
   if (data?.userEmailRegistrationInitiate.errors.length) {
     return {
       error: true,
       message: data?.userEmailRegistrationInitiate.errors[0].message,
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -65,9 +67,9 @@ export const emailRegisterInitiateServerAction = async (
 }
 
 export const emailRegisterValidateServerAction = async (
-  _prevState: unknown,
+  _prevState: VerifyEmailResponse,
   form: FormData,
-) => {
+): Promise<VerifyEmailResponse> => {
   const code = form.get("code")
   const emailRegistrationId = form.get("emailRegistrationId")
 
@@ -80,7 +82,7 @@ export const emailRegisterValidateServerAction = async (
     return {
       error: true,
       message: "Invalid values",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -91,7 +93,7 @@ export const emailRegisterValidateServerAction = async (
     return {
       error: true,
       message: "Invalid Token",
-      data: null,
+      responsePayload: null,
     }
   }
 
@@ -108,15 +110,15 @@ export const emailRegisterValidateServerAction = async (
       error: true,
       message:
         "Something went wrong Please try again and if error persist contact support",
-      data: null,
+      responsePayload: null,
     }
   }
 
   if (codeVerificationResponse?.userEmailRegistrationValidate.errors.length) {
     return {
       error: true,
       message: codeVerificationResponse?.userEmailRegistrationValidate.errors[0].message,
-      data: null,
+      responsePayload: null,
     }
   }