fix(console): treat null value as empty in the user details form (#2520)

packages/console/src/pages/UserDetails/components/UserSettings.tsx

@@ -1,6 +1,5 @@
 import type { User } from '@logto/schemas';
 import { arbitraryObjectGuard } from '@logto/schemas';
-import type { Nullable } from '@silverhand/essentials';
 import { useEffect } from 'react';
 import { useForm, useController } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -16,21 +15,12 @@ import useApi from '@/hooks/use-api';
 import { safeParseJson } from '@/utilities/json';
 import { uriValidator } from '@/utilities/validator';
 
+import type { UserDetailsForm } from '../types';
 import UserConnectors from './UserConnectors';
 
-type FormData = {
-  primaryEmail: Nullable<string>;
-  primaryPhone: Nullable<string>;
-  username: Nullable<string>;
-  name: Nullable<string>;
-  avatar: Nullable<string>;
-  roleNames: string[];
-  customData: string;
-};
-
 type Props = {
   userData: User;
-  userFormData: FormData;
+  userFormData: UserDetailsForm;
   onUserUpdated: (user?: User) => void;
   isDeleted: boolean;
 };
@@ -45,7 +35,7 @@ const UserSettings = ({ userData, userFormData, isDeleted, onUserUpdated }: Prop
     reset,
     formState: { isSubmitting, errors, isDirty },
     getValues,
-  } = useForm<FormData>();
+  } = useForm<UserDetailsForm>();
 
   const {
     field: { onChange, value },

packages/console/src/pages/UserDetails/index.tsx

@@ -30,6 +30,7 @@ import ResetPasswordForm from './components/ResetPasswordForm';
 import UserLogs from './components/UserLogs';
 import UserSettings from './components/UserSettings';
 import * as styles from './index.module.scss';
+import { userDetailsParser } from './utils';
 
 const UserDetails = () => {
   const location = useLocation();
@@ -53,10 +54,7 @@ const UserDetails = () => {
       return;
     }
 
-    return {
-      ...data,
-      customData: JSON.stringify(data.customData, null, 2),
-    };
+    return userDetailsParser.toLocalForm(data);
   }, [data]);
 
   const onDelete = async () => {

packages/console/src/pages/UserDetails/types.ts

@@ -0,0 +1,9 @@
+export type UserDetailsForm = {
+  primaryEmail: string;
+  primaryPhone: string;
+  username: string;
+  name: string;
+  avatar: string;
+  roleNames: string[];
+  customData: string;
+};

packages/console/src/pages/UserDetails/utils.ts

@@ -0,0 +1,19 @@
+import type { User } from '@logto/schemas';
+
+import type { UserDetailsForm } from './types';
+
+export const userDetailsParser = {
+  toLocalForm: (data: User): UserDetailsForm => {
+    const { primaryEmail, primaryPhone, username, name, avatar, roleNames, customData } = data;
+
+    return {
+      primaryEmail: primaryEmail ?? '',
+      primaryPhone: primaryPhone ?? '',
+      username: username ?? '',
+      name: name ?? '',
+      avatar: avatar ?? '',
+      roleNames,
+      customData: JSON.stringify(customData, null, 2),
+    };
+  },
+};