feat: update displayname field

ONEARMY · Aug 13, 2024 · 989bf5a · 989bf5a
1 parent 158f4d0
commit 989bf5a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
@@ -36,7 +36,7 @@ describe('[Settings]', () => {
       cy.step('Go to User Settings')
       cy.clickMenuItem(UserMenuItem.Settings)
 
-      cy.get('[data-cy=username').clear().type('Wrong user')
+      cy.get('[data-cy=displayName').clear().type('Wrong user')
 
       cy.step('Confirm shown when attempting to go to another page')
       cy.get('[data-cy=page-link]').contains('How-to').click()
@@ -74,7 +74,7 @@ describe('[Settings]', () => {
 
       cy.step('Can set the required fields')
       cy.setSettingBasicUserInfo({
-        username: displayName,
+        displayName,
         country,
         description,
       })
@@ -186,7 +186,7 @@ describe('[Settings]', () => {
       cy.step('Populate profile')
       cy.get('[data-cy=shredder').click()
       cy.setSettingBasicUserInfo({
-        username: displayName,
+        displayName,
         description,
       })
 
@@ -261,7 +261,7 @@ describe('[Settings]', () => {
 
       cy.step('Populate profile')
       cy.setSettingBasicUserInfo({
-        username: displayName,
+        displayName,
         description,
       })
       cy.setSettingImage(coverImage, 'coverImages-0')
@@ -326,7 +326,7 @@ describe('[Settings]', () => {
       cy.setSettingFocus(profileType)
 
       cy.setSettingBasicUserInfo({
-        username: displayName,
+        displayName,
         description,
       })
       cy.setSettingImage(coverImage, 'coverImages-0')
@@ -405,7 +405,7 @@ describe('[Settings]', () => {
 
       cy.step('Populate profile')
       cy.setSettingBasicUserInfo({
-        username: displayName,
+        displayName,
         description,
       })
       cy.setSettingImage(coverImage, 'coverImages-0')

diff --git a/packages/cypress/src/support/commandsUi.ts b/packages/cypress/src/support/commandsUi.ts
@@ -10,7 +10,7 @@ export enum UserMenuItem {
 }
 
 interface IInfo {
-  username: string
+  displayName: string
   country?: string
   description: string
 }
@@ -134,10 +134,12 @@ Cypress.Commands.add(
 )
 
 Cypress.Commands.add('setSettingBasicUserInfo', (info: IInfo) => {
+  const { country, description, displayName } = info
+
   cy.step('Update Info section')
-  cy.get('[data-cy=username').clear().type(info.username)
-  cy.get('[data-cy=info-description').clear().type(info.description)
-  info.country && cy.selectTag(info.country, '[data-cy=location-dropdown]')
+  cy.get('[data-cy=displayName').clear().type(displayName)
+  cy.get('[data-cy=info-description').clear().type(description)
+  country && cy.selectTag(country, '[data-cy=location-dropdown]')
 })
 
 Cypress.Commands.add(

diff --git a/src/pages/UserSettings/content/sections/UserInfos.section.tsx b/src/pages/UserSettings/content/sections/UserInfos.section.tsx
@@ -38,11 +38,14 @@ export const UserInfosSection = ({ formValues }: IProps) => {
         <Heading as="h2">{headings.infos}</Heading>
         <Flex sx={{ flexDirection: 'column', gap: 1 }}>
           <Text>{`${displayName.title} *`}</Text>
+          <Text variant="quiet" sx={{ fontSize: 2 }}>
+            {displayName.description}
+          </Text>
           <Field
-            data-cy="username"
+            data-cy="displayName"
             name="displayName"
             component={FieldInput}
-            placeholder="Pick a unique username"
+            placeholder="Pick a name to display on your profile"
             validate={required}
             validateFields={[]}
           />

diff --git a/src/pages/UserSettings/labels.ts b/src/pages/UserSettings/labels.ts
@@ -64,6 +64,8 @@ export const fields: ILabels = {
   },
   displayName: {
     title: 'Display Name',
+    description:
+      'Shown on your profile page. You can use spaces and everything!',
   },
   email: {
     title: 'Current email address',