UIU-3119: Pronoun Field - User Record Edit

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change history for ui-users
 
-## [11.1.0] In progress
+## [12.0.0] In progress
 * `useUserTenantRoles` supplies `tenantId` in all its queries. Refs UIU-3279.
 * Leverage API supported sorting of columns on pre-registrations records list. Refs UIU-3249.
 * Fix issue with `Proxy borrower` field value. Refs UIU-3290.
@@ -12,6 +12,7 @@
 * Change import of `exportToCsv` from `stripes-util` to `stripes-components`. Refs UIU-3202.
 * Provide `itemToString` to create unique `key` attributes. Refs UIU-3312.
 * Return appropriate error message when item for manual fee/fine can't be found. Refs UIU-2701.
+* *BREAKING* Add `pronouns` field to user edit form. Refs UIU-3119.
 
 ## [11.0.11](https://github.com/folio-org/ui-users/tree/v11.0.11) (2025-01-15)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.10...v11.0.11)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/users",
-  "version": "11.0.9",
+  "version": "12.0.0",
   "description": "User management",
   "repository": "folio-org/ui-users",
   "publishConfig": {
@@ -29,7 +29,7 @@
       }
     ],
     "okapiInterfaces": {
-      "users": "16.3",
+      "users": "16.4",
       "configuration": "2.0",
       "permissions": "5.7",
       "login": "7.3",

src/components/EditSections/EditUserInfo/EditUserInfo.js

@@ -429,6 +429,15 @@ class EditUserInfo extends React.Component {
                 </OnChange>
               </Field>
             </Col>
+            <Col xs={12} md={3}>
+              <Field
+                label={<FormattedMessage id="ui-users.information.pronouns" />}
+                name="personal.pronouns"
+                id="adduser_pronouns"
+                component={TextField}
+                fullWidth
+              />
+            </Col>
           </Row>
 
         </Accordion>

src/components/util/util.js

@@ -36,6 +36,12 @@ export function getFullName(user) {
   return fullName;
 }
 
+export function getFormattedPronouns(user) {
+  const pronouns = user?.personal?.pronouns;
+
+  return pronouns ? `(${pronouns})` : undefined;
+}
+
 export const formatActionDescription = (action) => {
   return action.typeAction +
     (action.paymentMethod

src/components/util/util.test.js

@@ -29,6 +29,7 @@ import {
   isAffiliationsEnabled,
   isDcbItem,
   isAValidImageUrl,
+  getFormattedPronouns,
 } from './util';
 
 const STRIPES = {
@@ -538,3 +539,9 @@ describe('isAValidImageUrl', () => {
   });
 });
 
+describe('getFormattedPronouns', () => {
+  it('returns formatted pronouns', () => {
+    expect(getFormattedPronouns({ personal: { pronouns: 'e2/e2' } })).toEqual('(e2/e2)');
+  });
+});
+

src/views/UserEdit/UserForm.css

@@ -6,3 +6,14 @@
 .UserFormEditIcon {
   display: inline-block;
 }
+
+.NameContainer {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.Pronouns {
+  font-weight: normal;
+  word-wrap: break-word;
+}

src/views/UserEdit/UserForm.js

@@ -36,7 +36,7 @@ import {
   EditReadingRoomAccess,
   EditUserRoles,
 } from '../../components/EditSections';
-import { getFullName } from '../../components/util';
+import { getFormattedPronouns, getFullName } from '../../components/util';
 import RequestFeeFineBlockButtons from '../../components/RequestFeeFineBlockButtons';
 import { addressTypesShape } from '../../shapes';
 import getProxySponsorWarning from '../../components/util/getProxySponsorWarning';
@@ -340,6 +340,7 @@ class UserForm extends React.Component {
     const firstMenu = this.getAddFirstMenu();
     const footer = this.getPaneFooter();
     const fullName = getFullName(initialValues);
+    const pronouns = getFormattedPronouns(initialValues);
     const paneTitle = initialValues.id
       ? <FormattedMessage id="ui-users.edit" />
       : <FormattedMessage id="ui-users.crud.createUser" />;
@@ -373,9 +374,11 @@ class UserForm extends React.Component {
                 <Headline
                   size="xx-large"
                   tag="h2"
+                  className={css.NameContainer}
                   data-test-header-title
                 >
                   {fullName}
+                  {pronouns && <span className={css.Pronouns}>{pronouns}</span>}
                 </Headline>
               )}
               <AccordionStatus ref={this.accordionStatusRef}>

src/views/UserEdit/UserForm.test.js

@@ -158,7 +158,7 @@ describe('UserForm', () => {
   });
 
 
-  describe('renders accordions', () => {
+  describe('renders accordions and other values', () => {
     const props = {
       formData: {
         patronGroups: [],
@@ -207,6 +207,25 @@ describe('UserForm', () => {
 
       expect(screen.queryByText('EditUserRoles accordion')).toBeInTheDocument();
     });
+
+    it('renders pronouns', () => {
+      renderWithRouter(
+        <UserForm
+          {...props}
+          initialValues={
+            {
+              ...props.initialValues,
+              personal: {
+                ...props.initialValues.personal,
+                pronouns: 'r2/d2',
+              },
+            }
+          }
+        />
+      );
+
+      expect(screen.getByText('(r2/d2)')).toBeInTheDocument();
+    });
   });
 
   // this fails:

translations/ui-users/en.json

@@ -309,6 +309,7 @@
   "contact.addressTypes": "Address Types",
   "contact.addressType": "Address Type",
   "contact.addresses": "Addresses",
+  "information.pronouns": "Pronouns",
   "information.userInformation": "User information",
   "information.userDetails": "User details",
   "information.name": "Name",