UIU-2081: Show user-readable message when user is not found (#1687)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-users
 
+## 6.0.4 IN PROGRESS
+
+* Show user-readable message when user is not found. Fixes UIU-2081.
+
 ## [6.0.3](https://github.com/folio-org/ui-users/tree/v6.0.3) (2021-04-23)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v6.0.2...v6.0.3)
 
@@ -19,7 +23,6 @@
 
 * Configure Jest/RTL. Refs UIU-2112.
 * Lock stripes-cli to ~2.1.1, and thus stripes-webpack to ~1.1.0. Refs UIU-2137.
-* Show user-readable message when user is not found. Fixes UIU-2081.
 * Fix Custom Fields error message by adding a missing permission. Fixes UIU-2104.
 * Fix Notify patron box behavior for New fee/fine when default patron notice is set. Refs UIU-2111.
 * Fix disabling "Save & close" button for Manual patron block. Refs UIU-2123.

karma.conf.js

@@ -1,2 +1,6 @@
 /** @param {import('karma').Config} config */
-module.exports = config => config.set({ client: { captureConsole: false } });
+module.exports = config => config.set({
+  client: {
+    captureConsole: false
+  },
+});

src/components/ErrorPane/ErrorPane.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+import {
+  Pane,
+  Layout,
+} from '@folio/stripes/components';
+
+const ErrorPane = ({ children, ...props }) => (
+  <Pane defaultWidth="fill" {...props}>
+    <Layout element="p" className="textCentered">
+      {children}
+    </Layout>
+  </Pane>
+);
+
+ErrorPane.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ErrorPane;

src/components/ErrorPane/index.js

@@ -0,0 +1 @@
+export { default } from './ErrorPane';

src/routes/UserRecordContainer.js

@@ -25,6 +25,7 @@ class UserRecordContainer extends React.Component {
         const { path } = action.meta;
         return refresh || (path && path.match(/link/));
       },
+      throwErrors: false,
     },
     hasManualPatronBlocks: {
       type: 'okapi',

src/views/UserDetail/UserDetail.js

@@ -63,6 +63,7 @@ import RequestFeeFineBlockButtons from '../../components/RequestFeeFineBlockButt
 import { departmentsShape } from '../../shapes';
 
 import ExportFeesFinesReportButton from './components';
+import ErrorPane from '../../components/ErrorPane';
 
 class UserDetail extends React.Component {
   static propTypes = {
@@ -407,6 +408,10 @@ class UserDetail extends React.Component {
     });
   }
 
+  userNotFound = () => {
+    return this.props.resources?.selUser?.failed?.httpStatus === 404;
+  }
+
   render() {
     const {
       resources,
@@ -459,6 +464,20 @@ class UserDetail extends React.Component {
       .map(departmentId => departments.find(({ id }) => id === departmentId)?.name);
     const accounts = resources?.accounts;
 
+    if (this.userNotFound()) {
+      return (
+        <ErrorPane
+          id="pane-user-not-found"
+          defaultWidth={paneWidth}
+          paneTitle={<FormattedMessage id="ui-users.information.userDetails" />}
+          dismissible
+          onClose={this.onClose}
+        >
+          <FormattedMessage id="ui-users.errors.userNotFound" />
+        </ErrorPane>
+      );
+    }
+
     if (!user) {
       return (
         <LoadingPane

test/bigtest/interactors/user-not-found-page.js

@@ -0,0 +1,14 @@
+import {
+  interactor,
+  isPresent,
+} from '@bigtest/interactor';
+
+@interactor class UserNotFoundPage {
+  userNotFoundPanePresent = isPresent('#pane-user-not-found-content');
+
+  whenLoaded() {
+    return this.when(() => this.isPresent).timeout(5000);
+  }
+}
+
+export default new UserNotFoundPage('#pane-user-not-found');

test/bigtest/interactors/user-view-page.js

@@ -63,12 +63,17 @@ import proxyItemCSS from '../../../src/components/ProxyGroup/ProxyItem/ProxyItem
   actionMenuEditUserButton = scoped('[data-test-actions-menu-edit]');
   actionMenuExportFeeFineReport = scoped('[data-test-export-fee-fine-report]');
   actionMenuExportFeeFineReportButton = scoped('[data-test-export-fee-fine-report]', ButtonInteractor);
+  userNotFoundPanePresent = isPresent('#pane-user-not-found-content');
 
   callout = new CalloutInteractor();
 
   whenLoaded() {
     return this.when(() => this.isPresent).timeout(5000);
   }
+
+  whenNotFoundPaneLoaded() {
+    return this.when(() => this.userNotFoundPanePresent);
+  }
 }
 
 export default new InstanceViewPage('[data-test-instance-details]');

test/bigtest/tests/user-not-found-test.js

@@ -0,0 +1,29 @@
+import {
+  beforeEach,
+  describe,
+  it,
+} from '@bigtest/mocha';
+import { expect } from 'chai';
+
+import setupApplication from '../helpers/setup-application';
+import UserNotFoundPage from '../interactors/user-not-found-page';
+
+describe('User not found', () => {
+  setupApplication();
+
+  describe('visit users details for not existing user', () => {
+    beforeEach(async function () {
+      this.server.get('/users/not-found', () => {
+        return new Response(404, {});
+      }, 404);
+
+      this.visit('/users/view/not-found');
+
+      await UserNotFoundPage.whenLoaded();
+    });
+
+    it('shows user not found pane', () => {
+      expect(UserNotFoundPage.userNotFoundPanePresent).to.equal(true);
+    });
+  });
+});

translations/ui-users/en.json

@@ -326,6 +326,7 @@
   "errors.sponsors.duplicateUserMessage": "Duplicate sponsor has been entered.",
   "errors.reviewBeforeRenewal": "{message} Please review {policyName} before retrying renewal.",
   "errors.loanNotRenewedReason": "Loan cannot be renewed because: {message}.",
+  "errors.userNotFound": "User not found",
   "hide": "Hide",
   "show": "Show",
   "active": "Active",