UIU-754: Users App: Implement Pane header dropdown on Detail Records (#…

…638)

* Implement pane header dropdown on detail records

src/UserForm.js

@@ -2,10 +2,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
+
 import {
   Paneset,
   Pane,
   PaneMenu,
+  Icon,
   IconButton,
   Button,
   ExpandAllButton,
@@ -172,7 +174,7 @@ class UserForm extends React.Component {
     return (
       <PaneMenu>
         <FormattedMessage id="ui-users.crud.closeNewUserDialog">
-          { ariaLabel => (
+          {ariaLabel => (
             <IconButton
               id="clickable-closenewuserdialog"
               onClick={this.props.onCancel}
@@ -187,7 +189,10 @@ class UserForm extends React.Component {
   }
 
   getLastMenu(id, label) {
-    const { pristine, submitting } = this.props;
+    const {
+      pristine,
+      submitting,
+    } = this.props;
 
     return (
       <PaneMenu>
@@ -217,13 +222,15 @@ class UserForm extends React.Component {
     this.setState((curState) => {
       const newState = cloneDeep(curState);
       newState.sections[id] = !newState.sections[id];
+
       return newState;
     });
   }
 
   toggleAllSections(expand) {
     this.setState((curState) => {
       const newSections = expandAllFunction(curState.sections, expand);
+
       return {
         sections: newSections
       };
@@ -246,11 +253,36 @@ class UserForm extends React.Component {
   }
 
   executeSave() {
-    const { handleSubmit, onSubmit } = this.props;
+    const {
+      handleSubmit,
+      onSubmit,
+    } = this.props;
+
     const submitter = handleSubmit(onSubmit);
+
     submitter();
   }
 
+  getActionMenu = ({ onToggle }) => {
+    const { onCancel } = this.props;
+    const handleClick = () => {
+      onCancel();
+      onToggle();
+    };
+
+    return (
+      <Button
+        data-test-cancel-user-form-action
+        buttonStyle="dropdownItem"
+        onClick={handleClick}
+      >
+        <Icon icon="times-circle">
+          <FormattedMessage id="ui-users.cancel" />
+        </Icon>
+      </Button>
+    );
+  };
+
   render() {
     const {
       initialValues,
@@ -259,25 +291,48 @@ class UserForm extends React.Component {
         connect,
       },
     } = this.props;
+
     const { sections } = this.state;
     const firstMenu = this.getAddFirstMenu();
     const paneTitle = initialValues.id
       ? getFullName(initialValues)
       : <FormattedMessage id="ui-users.crud.createUser" />;
+
     const lastMenu = initialValues.id
       ? this.getLastMenu('clickable-updateuser', <FormattedMessage id="ui-users.crud.updateUser" />)
       : this.getLastMenu('clickable-createnewuser', <FormattedMessage id="ui-users.crud.createUser" />);
 
     return (
       <HasCommand commands={this.keyboardCommands}>
-        <form className={css.UserFormRoot} id="form-user" onSubmit={handleSubmit}>
+        <form
+          data-test-form-page
+          className={css.UserFormRoot}
+          id="form-user"
+          onSubmit={handleSubmit}
+        >
           <Paneset isRoot>
-            <Pane defaultWidth="100%" firstMenu={firstMenu} lastMenu={lastMenu} paneTitle={paneTitle} appIcon={{ app: 'users' }}>
+            <Pane
+              defaultWidth="100%"
+              firstMenu={firstMenu}
+              lastMenu={lastMenu}
+              paneTitle={paneTitle}
+              appIcon={{ app: 'users' }}
+              actionMenu={this.getActionMenu}
+            >
               <div className={css.UserFormContent}>
-                <Headline size="xx-large" tag="h2">{getFullName(initialValues)}</Headline>
+                <Headline
+                  size="xx-large"
+                  tag="h2"
+                  data-test-header-title
+                >
+                  {getFullName(initialValues)}
+                </Headline>
                 <Row end="xs">
                   <Col xs>
-                    <ExpandAllButton accordionStatus={sections} onToggle={this.handleExpandAll} />
+                    <ExpandAllButton
+                      accordionStatus={sections}
+                      onToggle={this.handleExpandAll}
+                    />
                   </Col>
                 </Row>
                 <AccordionSet>

src/ViewUser.js

@@ -11,6 +11,7 @@ import {
   TitleManager,
 } from '@folio/stripes/core';
 import {
+  Button,
   Pane,
   PaneMenu,
   IconButton,
@@ -250,7 +251,7 @@ class ViewUser extends React.Component {
       },
       {
         name: 'expandAllSections',
-        handler:  this.expandAllSections,
+        handler: this.expandAllSections,
       },
     ];
   }
@@ -701,7 +702,7 @@ class ViewUser extends React.Component {
                 handleAddRecords={this.handleAddRecords}
                 stripes={stripes}
                 onCancel={this.onClickCloseAccountActionsHistory}
-                  // when navigating away to another user, clear all loan-related state
+                // when navigating away to another user, clear all loan-related state
                 onClickUser={() => { this.onClickCloseAccountActionsHistory(); this.onClickCloseAccountsHistory(); }}
               />
             </Layer>
@@ -869,6 +870,26 @@ class ViewUser extends React.Component {
     );
   }
 
+  getActionMenu = ({ onToggle }) => {
+    const { onEdit } = this.props;
+    const handleClick = () => {
+      onEdit();
+      onToggle();
+    };
+
+    return (
+      <Button
+        data-test-user-instance-edit-action
+        buttonStyle="dropdownItem"
+        onClick={handleClick}
+      >
+        <Icon icon="edit">
+          <FormattedMessage id="ui-users.edit" />
+        </Icon>
+      </Button>
+    );
+  }
+
   renderUser(user) {
     const {
       resources,
@@ -891,27 +912,41 @@ class ViewUser extends React.Component {
     const patronBlocks = get(resources, ['hasPatronBlocks', 'records'], []);
     const patronGroup = this.getPatronGroup(user);
     const detailMenu = this.renderDetailMenu(user);
+
     return (
       <Pane
         data-test-instance-details
         id="pane-userdetails"
         defaultWidth={paneWidth}
-        paneTitle={<span data-test-header-title>{getFullName(user)}</span>}
+        paneTitle={(
+          <span data-test-header-title>
+            {getFullName(user)}
+          </span>
+        )}
         lastMenu={detailMenu}
         dismissible
         onClose={onClose}
         appIcon={{ app: 'users' }}
+        actionMenu={this.getActionMenu}
       >
         <TitleManager record={getFullName(user)} />
-        <Headline size="xx-large" tag="h2">{getFullName(user)}</Headline>
+        <Headline
+          size="xx-large"
+          tag="h2"
+        >
+          {getFullName(user)}
+        </Headline>
         <Row>
           <Col xs={10}>
             {(hasPatronBlocks === 1 && totalPatronBlocks > 0)
               ? <PatronBlockMessage />
               : ''}
           </Col>
           <Col xs={2}>
-            <ExpandAllButton accordionStatus={this.state.sections} onToggle={this.handleExpandAll} />
+            <ExpandAllButton
+              accordionStatus={this.state.sections}
+              onToggle={this.handleExpandAll}
+            />
           </Col>
         </Row>
         <AccordionSet>

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

@@ -0,0 +1,28 @@
+import {
+  interactor,
+  clickable,
+  text,
+  isPresent,
+} from '@bigtest/interactor';
+
+@interactor class HeaderDropdown {
+  click = clickable('button');
+}
+
+@interactor class HeaderDropdownMenu {
+  clickCancel = clickable('[data-test-cancel-user-form-action]');
+}
+
+@interactor class UserFormPage {
+  isLoaded = isPresent('[class*=paneTitleLabel---]');
+
+  whenLoaded() {
+    return this.when(() => this.isLoaded);
+  }
+
+  title = text('[class*=paneTitleLabel---]');
+  headerDropdown = new HeaderDropdown('[class*=paneHeaderCenterInner---] [class*=dropdown---]');
+  headerDropdownMenu = new HeaderDropdownMenu();
+}
+
+export default new UserFormPage('[data-test-form-page]');

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

@@ -0,0 +1,21 @@
+import {
+  interactor,
+  clickable,
+  text,
+} from '@bigtest/interactor';
+
+@interactor class HeaderDropdown {
+  click = clickable('button');
+}
+
+@interactor class HeaderDropdownMenu {
+  clickEdit = clickable('[data-test-user-instance-edit-action]');
+}
+
+@interactor class InstanceViewPage {
+  title = text('[data-test-header-title]');
+  headerDropdown = new HeaderDropdown('[class*=paneHeaderCenterInner---] [class*=dropdown---]');
+  headerDropdownMenu = new HeaderDropdownMenu();
+}
+
+export default new InstanceViewPage('[data-test-instance-details]');

test/bigtest/network/factories/user-personal.js

@@ -1,8 +1,6 @@
 import { Factory, faker } from '@bigtest/mirage';
 
 export default Factory.extend({
-  lastName: () => faker.name.lastName(),
-  firstName: () => faker.name.firstName(),
   email: () => faker.internet.email(),
   phone: () => faker.phone.phoneNumber(),
   mobilePhone: () => faker.phone.phoneNumber(),

test/bigtest/network/factories/user.js

@@ -18,6 +18,7 @@ export default Factory.extend({
   expirationDate: () => '2020-04-07T00:00:00.000+0000',
   createdDate: () => '2018-11-20T11:42:53.385+0000',
   updatedDate: () => '2018-11-20T20:00:47.409+0000',
+
   afterCreate(user, server) {
     server.create('service-points-user', {
       'userId': user.id,
@@ -26,10 +27,11 @@ export default Factory.extend({
     });
 
     const personal = server.create('user-personal', {
-      lastName: 'test',
-      firstName: 'test'
+      lastName: faker.name.lastName(),
+      firstName: faker.name.firstName(),
     });
 
+    user.update('username', `${personal.lastName}, ${personal.firstName}`);
     user.update('personal', personal.toJSON());
     user.save();
   }

test/bigtest/tests/user-create-page-test.js

@@ -0,0 +1,42 @@
+import {
+  beforeEach,
+  describe,
+  it,
+} from '@bigtest/mocha';
+import { expect } from 'chai';
+
+import setupApplication from '../helpers/setup-application';
+import UserFormPage from '../interactors/user-form-page';
+import UsersInteractor from '../interactors/users';
+
+describe('ItemCreatePage', () => {
+  setupApplication();
+
+  const users = new UsersInteractor();
+
+  beforeEach(async function () {
+    this.visit('/users?layer=create');
+  });
+
+  describe('visiting the create user page', () => {
+    it('displays the title in the pane header', () => {
+      expect(UserFormPage.title).to.equal('Create User');
+    });
+
+    describe('pane header menu', () => {
+      beforeEach(async () => {
+        await UserFormPage.headerDropdown.click();
+      });
+
+      describe('clicking on cancel', () => {
+        beforeEach(async () => {
+          await UserFormPage.headerDropdownMenu.clickCancel();
+        });
+
+        it('should redirect to view users page after click', () => {
+          expect(users.$root).to.exist;
+        });
+      });
+    });
+  });
+});