feat: remove username from profile page.

src/profile/ProfilePage.jsx

@@ -124,9 +124,13 @@ class ProfilePage extends React.Component {
   renderHeadingLockup() {
     const { dateJoined } = this.props;
 
+    const hideUserName = !!this.props.hideUsername;
+    const { firstName, lastName } = this.props;
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
+        <h1 className="h2 mb-0 font-weight-bold text-truncate">
+          {!hideUserName ? this.props.params.username : `${firstName} ${lastName}`}
+        </h1>
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -331,11 +335,14 @@ ProfilePage.propTypes = {
   // Account data
   requiresParentalConsent: PropTypes.bool,
   dateJoined: PropTypes.string,
+  hideUsername: PropTypes.bool,
 
   // Bio form data
   bio: PropTypes.string,
   yearOfBirth: PropTypes.number,
   visibilityBio: PropTypes.string.isRequired,
+  firstName: PropTypes.string,
+  lastName: PropTypes.string,
 
   // Certificates form data
   courseCertificates: PropTypes.arrayOf(PropTypes.shape({
@@ -423,6 +430,9 @@ ProfilePage.defaultProps = {
   courseCertificates: null,
   requiresParentalConsent: null,
   dateJoined: null,
+  hideUsername: false,
+  firstName: '',
+  lastName: '',
 };
 
 export default connect(

src/profile/ProfilePage.test.jsx

@@ -113,6 +113,48 @@ describe('<ProfilePage />', () => {
       expect(tree).toMatchSnapshot();
     });
 
+    it('renders the component without the username field when hide_username is true', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
+      storeData.profilePage.account.hideUsername = true;
+
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders the component without the username field and displays the full name when hide_username is true', () => {
+      const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
+      storeData.profilePage.account.hideUsername = true;
+      storeData.profilePage.account.firstName = 'John';
+      storeData.profilePage.account.lastName = 'D';
+
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeData)}
+        />
+      );
+
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
     it('viewing other profile with all fields', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },