feat(dashboard): minor fixes to profile (#7046)

packages/admin-next/dashboard/public/locales/en-US/translation.json

@@ -802,11 +802,16 @@
   "profile": {
     "domain": "Profile",
     "manageYourProfileDetails": "Manage your profile details",
-    "editProfile": "Edit profile",
+    "fields": {
-    "languageHint": "The language you want to use in the admin dashboard. This will not change the language of your store.",
+      "languageLabel": "Language",
-    "userInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>.",
+      "usageInsightsLabel": "Usage insights"
-    "language": "Language",
+    },
-    "usageInsights": "Usage insights"
+    "edit": {
+      "header": "Edit Profile",
+      "languageHint": "The language you want to use in the admin dashboard. This will not change the language of your store.",
+      "languagePlaceholder": "Select language",
+      "usageInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>."
+    }
   },
   "users": {
     "domain": "Users",

packages/admin-next/dashboard/src/v2-routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx

@@ -10,6 +10,9 @@ type ProfileGeneralSectionProps = {
 
 export const ProfileGeneralSection = ({ user }: ProfileGeneralSectionProps) => {
   const { i18n, t } = useTranslation()
+
+  const name = [user.first_name, user.last_name].filter(Boolean).join(" ")
+
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
@@ -30,7 +33,7 @@ export const ProfileGeneralSection = ({ user }: ProfileGeneralSectionProps) => {
           {t("fields.name")}
         </Text>
         <Text size="small" leading="compact">
-          {user.first_name} {user.last_name}
+          {name || "-"}
         </Text>
       </div>
       <div className="grid grid-cols-2 items-center px-6 py-4">
@@ -43,7 +46,7 @@ export const ProfileGeneralSection = ({ user }: ProfileGeneralSectionProps) => {
       </div>
       <div className="grid grid-cols-2 items-center px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
-          {t("profile.language")}
+          {t("profile.fields.languageLabel")}
         </Text>
         <Text size="small" leading="compact">
           {languages.find((lang) => lang.code === i18n.language)
@@ -52,7 +55,7 @@ export const ProfileGeneralSection = ({ user }: ProfileGeneralSectionProps) => {
       </div>
       <div className="grid grid-cols-2 items-center px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
-          {t("profile.usageInsights")}
+          {t("profile.fields.usageInsightsLabel")}
         </Text>
         <StatusBadge color="red" className="w-fit">
           {t("general.disabled")}

packages/admin-next/dashboard/src/v2-routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx

@@ -80,7 +80,7 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
                   <Form.Item>
                     <Form.Label>{t("fields.firstName")}</Form.Label>
                     <Form.Control>
-                      <Input {...field} size="small" />
+                      <Input {...field} />
                     </Form.Control>
                     <Form.ErrorMessage />
                   </Form.Item>
@@ -93,7 +93,7 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
                   <Form.Item>
                     <Form.Label>{t("fields.lastName")}</Form.Label>
                     <Form.Control>
-                      <Input {...field} size="small" />
+                      <Input {...field} />
                     </Form.Control>
                     <Form.ErrorMessage />
                   </Form.Item>
@@ -106,18 +106,16 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
               render={({ field: { ref, ...field } }) => (
                 <Form.Item className="gap-y-4">
                   <div>
-                    <Form.Label>{t("profile.language")}</Form.Label>
+                    <Form.Label>{t("profile.fields.languageLabel")}</Form.Label>
-                    <Form.Hint>{t("profile.languageHint")}</Form.Hint>
+                    <Form.Hint>{t("profile.edit.languageHint")}</Form.Hint>
                   </div>
                   <div>
                     <Form.Control>
-                      <Select
+                      <Select {...field} onValueChange={field.onChange}>
-                        {...field}
-                        onValueChange={field.onChange}
-                        size="small"
-                      >
                         <Select.Trigger ref={ref} className="py-1 text-[13px]">
-                          <Select.Value placeholder="Choose language">
+                          <Select.Value
+                            placeholder={t("profile.edit.languagePlaceholder")}
+                          >
                             {
                               sortedLanguages.find(
                                 (language) => language.code === field.value
@@ -148,7 +146,9 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
               render={({ field: { value, onChange, ...rest } }) => (
                 <Form.Item>
                   <div className="flex items-center justify-between">
-                    <Form.Label>{t("profile.usageInsights")}</Form.Label>
+                    <Form.Label>
+                      {t("profile.fields.usageInsightsLabel")}
+                    </Form.Label>
                     <Form.Control>
                       <Switch
                         {...rest}
@@ -160,7 +160,7 @@ export const EditProfileForm = ({ user, usageInsights }: EditProfileProps) => {
                   <Form.Hint>
                     <span>
                       <Trans
-                        i18nKey="profile.userInsightsHint"
+                        i18nKey="profile.edit.usageInsightsHint"
                         components={[
                           <a
                             key="hint-link"

packages/admin-next/dashboard/src/v2-routes/profile/profile-edit/profile-edit.tsx

@@ -16,7 +16,7 @@ export const ProfileEdit = () => {
   return (
     <RouteDrawer>
       <RouteDrawer.Header className="capitalize">
-        <Heading>{t("profile.editProfile")}</Heading>
+        <Heading>{t("profile.edit.header")}</Heading>
       </RouteDrawer.Header>
       {!isLoading && user && (
         <EditProfileForm user={user} usageInsights={false} />