From 989bf5a11b26140d8054e8e9d8bfd791adc382b7 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Thu, 8 Aug 2024 16:37:35 +0100
Subject: [PATCH] feat: update displayname field

---
 packages/cypress/src/integration/settings.spec.ts    | 12 ++++++------
 packages/cypress/src/support/commandsUi.ts           | 10 ++++++----
 .../content/sections/UserInfos.section.tsx           |  7 +++++--
 src/pages/UserSettings/labels.ts                     |  2 ++
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
index 098c87d663..fdd721ac34 100644
--- 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
index 2f2a138b4a..15278bff8a 100644
--- 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
index afa408f850..2167aeb846 100644
--- 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
index fcf0f5c7af..732580240e 100644
--- 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',