UIU-2951: ECS - Prevent editing of specific shadow user data

folio-org · Sep 25, 2023 · c703098 · c703098
1 parent 5ec0743
commit c703098
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -84,6 +84,7 @@
 * Add auto focus to textarea on staff and patron info modal. Fixes UIU-2932.
 * ECS - Filter users by "User Type". Refs UIU-2943.
 * Users App: Consume {{FormattedDate}} and {{FormattedTime}} via stripes-component. Refs UIU-1860.
+* ECS - Prevent editing of specific shadow user data. Refs UIU-2951.
 
 ## [9.0.0](https://github.com/folio-org/ui-users/tree/v9.0.0) (2023-02-20)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v8.1.0...v9.0.0)

diff --git a/src/components/EditSections/EditContactInfo/EditContactInfo.js b/src/components/EditSections/EditContactInfo/EditContactInfo.js
@@ -25,6 +25,7 @@ const EditContactInfo = ({
   addressTypes,
   preferredContactTypeId,
   intl,
+  disabled,
 }) => {
   const contactTypeOptions = (contactTypes || []).map(g => {
     return (
@@ -64,6 +65,7 @@ const EditContactInfo = ({
             component={TextField}
             required
             fullWidth
+            disabled={disabled}
           />
         </Col>
         <Col xs={12} md={3}>
@@ -73,6 +75,7 @@ const EditContactInfo = ({
             id="adduser_phone"
             component={TextField}
             fullWidth
+            disabled={disabled}
           />
         </Col>
         <Col xs={12} md={3}>
@@ -82,6 +85,7 @@ const EditContactInfo = ({
             id="adduser_mobilePhone"
             component={TextField}
             fullWidth
+            disabled={disabled}
           />
         </Col>
         <Col xs={12} md={3}>
@@ -93,6 +97,7 @@ const EditContactInfo = ({
             fullWidth
             aria-required="true"
             required
+            disabled={disabled}
             defaultValue={selectedContactTypeId}
           >
             <FormattedMessage id="ui-users.contact.selectContactType">
@@ -108,6 +113,7 @@ const EditContactInfo = ({
         fieldComponents={addressFields}
         canDelete
         formType="final-form"
+        disabled={disabled}
       />
     </Accordion>
   );
@@ -120,6 +126,7 @@ EditContactInfo.propTypes = {
   addressTypes: PropTypes.arrayOf(PropTypes.object),
   preferredContactTypeId: PropTypes.string,
   intl: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
 };
 
 export default injectIntl(EditContactInfo);
diff --git a/src/components/EditSections/EditContactInfo/EditContactInfo.test.js b/src/components/EditSections/EditContactInfo/EditContactInfo.test.js
@@ -76,4 +76,11 @@ describe('Render Edit contact Information component', () => {
     await userEvent.type(document.querySelector('[id="adduser_email"]'), '[email protected]');
     expect(document.querySelector('[id="adduser_email"]').value).toBe('[email protected]');
   });
+  it('should render with disabled fields', () => {
+    renderEditContactInfo({ ...props, disabled: true });
+    expect(document.querySelector('[id="adduser_email"]')).toBeDisabled();
+    expect(document.querySelector('[id="adduser_phone"]')).toBeDisabled();
+    expect(document.querySelector('[id="adduser_mobilePhone"]')).toBeDisabled();
+    expect(document.querySelector('[id="adduser_preferredcontact"]')).toBeDisabled();
+  });
 });
diff --git a/...s/EditSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.css b/...s/EditSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.css
@@ -10,4 +10,9 @@
   &:focus {
     outline: none;
   }
+
+  &:disabled {
+    color: var(--checkable-disabled-fill);
+    cursor: not-allowed;
+  }
 }
diff --git a/...ts/EditSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.js b/...ts/EditSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.js
@@ -23,6 +23,7 @@ class CreateResetPasswordControl extends React.Component {
         POST: PropTypes.func.isRequired,
       }).isRequired,
     }).isRequired,
+    disabled: PropTypes.bool,
   };
 
   static manifest = Object.freeze({
@@ -111,6 +112,8 @@ class CreateResetPasswordControl extends React.Component {
   };
 
   render() {
+    const { disabled } = this.props;
+
     return (
       <Col
         xs={12}
@@ -123,6 +126,7 @@ class CreateResetPasswordControl extends React.Component {
           type="button"
           className={css.resetPasswordButton}
           onClick={this.handleLinkClick}
+          disabled={disabled}
         >
           <FormattedMessage id="ui-users.extended.sendResetPassword" />
         </button>

diff --git a/...itSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.test.js b/...itSections/EditExtendedInfo/CreateResetPasswordControl/CreateResetPasswordControl.test.js
@@ -12,7 +12,7 @@ jest.unmock('@folio/stripes/smart-components');
 
 const renderCreateResetPasswordControl = (props) => renderWithRouter(<CreateResetPasswordControl {...props} />);
 
-const propData = (postMock) => {
+const propData = (postMock, disabled = false) => {
   return {
     email: '[email protected]',
     name: 'sample',
@@ -22,6 +22,7 @@ const propData = (postMock) => {
         POST: postMock,
       }
     },
+    disabled,
   };
 };
 
@@ -42,6 +43,13 @@ describe('CreateResetPasswordControl component', () => {
     await waitFor(() => userEvent.click(screen.getByText('ui-users.extended.sendResetPassword')));
     await waitFor(() => expect(screen.getByText('ui-users.extended.copyLink')).toBeInTheDocument());
   });
+  it('should link be disabled', () => {
+    const mockFunc = jest.fn(() => new Promise((resolve, _) => {
+      resolve({ ok: true, link: 'bl-users/password-reset/link' });
+    }));
+    renderCreateResetPasswordControl(propData(mockFunc, true));
+    expect(screen.getByText('ui-users.extended.sendResetPassword')).toBeDisabled();
+  });
   /* Can be uncommented after the  createResetpasswordControl modal logic is reworked. Should add an assertion at the end after the results */
   // it('If it redirects after POST fails', async () => {
   //   const mockFunc = jest.fn(() => new Promise((_, reject) => {

diff --git a/src/components/EditSections/EditExtendedInfo/DepartmentsNameEdit/DepartmentsNameEdit.js b/src/components/EditSections/EditExtendedInfo/DepartmentsNameEdit/DepartmentsNameEdit.js
@@ -3,6 +3,7 @@ import {
   FormattedMessage,
   useIntl,
 } from 'react-intl';
+import PropTypes from 'prop-types';
 import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 
@@ -15,7 +16,7 @@ import { departmentsShape } from '../../../../shapes';
 
 import css from './DepartmentsNameEdit.css';
 
-const DepartmentsNameEdit = ({ departments }) => {
+const DepartmentsNameEdit = ({ departments, disabled }) => {
   const { formatMessage } = useIntl();
   const defaultDepartment = {
     label: formatMessage({ id: 'ui-users.extended.department.default' }),
@@ -29,16 +30,18 @@ const DepartmentsNameEdit = ({ departments }) => {
   return (
     <div className={css.repeatableFieldRemoveItem}>
       <FieldArray
-        addLabel={<FormattedMessage id="ui-users.extended.department.add" />}
+        addLabel={!disabled && <FormattedMessage id="ui-users.extended.department.add" />}
         legend={<FormattedMessage id="ui-users.extended.department.name" />}
         id="department-name"
         component={RepeatableField}
         name="departments"
         onAdd={fields => fields.push()}
+        canRemove={!disabled}
         renderField={field => (
           <Field
             component={Select}
             name={field}
+            disabled={disabled}
             dataOptions={[defaultDepartment, ...formattedDepartments]}
           />
         )}
@@ -47,6 +50,9 @@ const DepartmentsNameEdit = ({ departments }) => {
   );
 };
 
-DepartmentsNameEdit.propTypes = { departments: departmentsShape };
+DepartmentsNameEdit.propTypes = {
+  departments: departmentsShape,
+  disabled: PropTypes.bool
+};
 
 export default DepartmentsNameEdit;
diff --git a/src/components/EditSections/EditExtendedInfo/DepartmentsNameEdit/DepartmentsNameEdit.test.js b/src/components/EditSections/EditExtendedInfo/DepartmentsNameEdit/DepartmentsNameEdit.test.js
@@ -62,4 +62,8 @@ describe('Given DepartmentsNameEdit', () => {
     await userEvent.click(screen.getByText('ui-users.extended.department.add'));
     expect(screen.queryByPlaceholderText(/ui-users.extended.department.default/i));
   });
+
+  it('should not render add button with disabled prop is true', async () => {
+    expect(screen.queryByText('ui-users.extended.department.add')).not.toBeInTheDocument();
+  });
 });
diff --git a/src/components/EditSections/EditExtendedInfo/EditExtendedInfo.js b/src/components/EditSections/EditExtendedInfo/EditExtendedInfo.js
@@ -40,6 +40,7 @@ class EditExtendedInfo extends Component {
     change: PropTypes.func.isRequired,
     values: PropTypes.object,
     uniquenessValidator: PropTypes.object,
+    disabled: PropTypes.bool,
   };
 
   buildAccordionHeader = () => {
@@ -83,6 +84,7 @@ class EditExtendedInfo extends Component {
       departments,
       change,
       uniquenessValidator,
+      disabled,
     } = this.props;
 
     const accordionHeader = this.buildAccordionHeader();
@@ -110,6 +112,7 @@ class EditExtendedInfo extends Component {
               name="enrollmentDate"
               id="adduser_enrollmentdate"
               validate={validateMinDate('ui-users.errors.extended.dateEnrolled')}
+              disabled={disabled}
             />
           </Col>
           <Col
@@ -122,6 +125,7 @@ class EditExtendedInfo extends Component {
               id="adduser_externalsystemid"
               component={TextField}
               fullWidth
+              disabled={disabled}
             />
           </Col>
           <Col
@@ -136,6 +140,7 @@ class EditExtendedInfo extends Component {
               id="adduser_dateofbirth"
               timeZone="UTC"
               backendDateStandard="YYYY-MM-DD"
+              disabled={disabled}
               validate={validateMinDate('ui-users.errors.personal.dateOfBirth')}
             />
           </Col>
@@ -161,6 +166,7 @@ class EditExtendedInfo extends Component {
                 defaultDeliveryAddressTypeId={defaultDeliveryAddressTypeId}
                 deliveryAvailable={deliveryAvailable}
                 setFieldValue={change}
+                disabled={disabled}
               />
             </Row>
           </Col>
@@ -170,7 +176,7 @@ class EditExtendedInfo extends Component {
                 xs={12}
                 md={3}
               >
-                <DepartmentsNameEdit departments={departments} />
+                <DepartmentsNameEdit departments={departments} disabled={disabled} />
               </Col>
             )
             : null
@@ -188,6 +194,7 @@ class EditExtendedInfo extends Component {
               component={TextField}
               fullWidth
               validStylesEnabled
+              disabled={disabled}
               validate={asyncValidateField('username', username, uniquenessValidator)}
             />
           </Col>
@@ -199,6 +206,7 @@ class EditExtendedInfo extends Component {
                   email={userEmail}
                   name={userFirstName}
                   username={username}
+                  disabled={disabled}
                 />
               )
             }

diff --git a/src/components/EditSections/EditExtendedInfo/EditExtendedInfo.test.js b/src/components/EditSections/EditExtendedInfo/EditExtendedInfo.test.js
@@ -120,4 +120,8 @@ describe('Render Extended User Information component', () => {
     renderEditExtendedInfo(props);
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
   });
+  it('should fields to be disabled', () => {
+    renderEditExtendedInfo(props);
+    expect(screen.getByText(props.username)).toBeDisabled();
+  });
 });
diff --git a/...components/EditSections/EditExtendedInfo/RequestPreferencesEdit/RequestPreferencesEdit.js b/...components/EditSections/EditExtendedInfo/RequestPreferencesEdit/RequestPreferencesEdit.js
@@ -35,6 +35,7 @@ class RequestPreferencesEdit extends Component {
     setFieldValue: PropTypes.func.isRequired,
     defaultDeliveryAddressTypeId: nullOrStringIsRequiredTypeValidator,
     intl: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
   }
 
   componentDidUpdate(prevProps) {
@@ -76,7 +77,7 @@ class RequestPreferencesEdit extends Component {
   }
 
   renderServicePointSelect() {
-    const { servicePoints, intl } = this.props;
+    const { servicePoints, intl, disabled } = this.props;
 
     const options = servicePoints.map(servicePoint => ({
       value: servicePoint.id,
@@ -92,6 +93,7 @@ class RequestPreferencesEdit extends Component {
         label={<FormattedMessage id="ui-users.requests.defaultPickupServicePoint" />}
         dataOptions={resultOptions}
         component={Select}
+        disabled={disabled}
         parse={this.defaultServicePointFieldParser}
       />
     );
@@ -174,6 +176,7 @@ class RequestPreferencesEdit extends Component {
   render() {
     const {
       deliveryAvailable,
+      disabled,
     } = this.props;
 
     return (
@@ -209,6 +212,7 @@ class RequestPreferencesEdit extends Component {
               label={<FormattedMessage id="ui-users.requests.delivery" />}
               component={Checkbox}
               type="checkbox"
+              disabled={disabled}
             />
           </Col>
         </Row>