feat: remove username from profile page.

src/profile/ProfilePage.jsx

@@ -123,10 +123,10 @@ class ProfilePage extends React.Component {
   // Inserted into the DOM in two places (for responsive layout)
   renderHeadingLockup() {
     const { dateJoined } = this.props;
-
+    const hideUserName = !!this.props.params?.hide_username;
     return (
       <span data-hj-suppress>
-        <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>
+        {!hideUserName && <h1 className="h2 mb-0 font-weight-bold text-truncate">{this.props.params.username}</h1>}
         <DateJoined date={dateJoined} />
         {this.isYOBDisabled() && <UsernameDescription />}
         <hr className="d-none d-md-block" />
@@ -400,6 +400,7 @@ ProfilePage.propTypes = {
   // Router
   params: PropTypes.shape({
     username: PropTypes.string.isRequired,
+    hide_username: PropTypes.bool,
   }).isRequired,
 
   // i18n

src/profile/ProfilePage.test.jsx

@@ -113,6 +113,25 @@ describe('<ProfilePage />', () => {
       expect(tree).toMatchSnapshot();
     });
 
+    it('renders the component without the username field when hide_username is true', () => {
+      const contextValue = {
+        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
+        config: getConfig(),
+      };
+
+      // Render the component with hide_username set to true
+      const component = (
+        <ProfilePageWrapper
+          contextValue={contextValue}
+          store={mockStore(storeMocks.viewOwnProfile)}
+          params={{ hide_username: true }}
+        />
+      );
+
+      const { container: tree } = render(component);
+      expect(tree).toMatchSnapshot();
+    });
+
     it('viewing other profile with all fields', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },