UIU-3021: conditionally show use roles accordion

CHANGELOG.md

@@ -5,6 +5,7 @@
 * UX consistency: Use Save & close button label stripes-component translation key. Refs UIU-3078.
 * Fix two "triangle down" icons in select element of "Copy existing fee/fine owner table entries" modal. Refs UIU-2929.
 * Show Roles assigned to users. Refs UIU-3110.
+* Add edit user roles accordion on edit role modal view. Refs UIU-3021.    
 
 ## [10.1.0](https://github.com/folio-org/ui-users/tree/v10.1.0) (2024-03-20)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v10.0.4...v10.1.0)

src/components/EditSections/EditUserRoles/EditUserRoles.js

@@ -3,15 +3,16 @@ import { Accordion, Headline, Badge, Row, Col, List, Button, Icon, Loading } fro
 import { useIntl, FormattedMessage } from 'react-intl';
 import { withRouter } from 'react-router';
 import PropTypes from 'prop-types';
+import { useStripes } from '@folio/stripes/core';
 import { useUserTenantRoles } from '../../../hooks';
 
 function EditUserRoles({ match, accordionId }) {
-  const userId = match.params.id;
-
+  const { okapi } = useStripes();
   const intl = useIntl();
-  const [open, setOpen] = useState(false);
 
-  const { userRoles, isLoading } = useUserTenantRoles({ userId, tenantId: 'diku2' });
+  const userId = match.params.id;
+
+  const { userRoles, isLoading } = useUserTenantRoles({ userId, tenantId: okapi.tenant });
 
   const renderRoles = (role) => {
     return (
@@ -36,9 +37,7 @@ function EditUserRoles({ match, accordionId }) {
   return (
     <Accordion
       label={<Headline size="large" tag="h3"><FormattedMessage id="ui-users.roles.userRoles" /></Headline>}
-      open={open}
       id={accordionId}
-      onToggle={() => { setOpen(!open); }}
       displayWhenClosed={isLoading ? <Loading /> : <Badge>{userRoles.length}</Badge>}
     >
       <Row>
@@ -49,6 +48,8 @@ function EditUserRoles({ match, accordionId }) {
             isEmptyMessage={<FormattedMessage id="ui-users.roles.empty" />}
           />
         </Col>
+        <Button><FormattedMessage id="ui-users.roles.addRoles" /></Button>
+        <Button><FormattedMessage id="ui-users.roles.unassignAllRoles" /></Button>
       </Row>
     </Accordion>
   );

src/views/UserEdit/UserForm.js

@@ -449,7 +449,7 @@ class UserForm extends React.Component {
                       />
                     </div>
                   }
-                  <EditUserRoles accordionId="userRoles" />
+                  {!this.showPermissionsAccordion() && <EditUserRoles accordionId="userRoles" />}
                 </AccordionSet>
               </AccordionStatus>
             </Pane>

translations/ui-users/en.json

@@ -1172,5 +1172,7 @@
 
   "roles.userRoles": "Roles",
   "roles.empty": "No roles found",
-  "roles.deleteRole": "Delete user role"
+  "roles.deleteRole": "Delete user role",
+  "roles.addRoles": "Add roles",
+  "roles.unassignAllRoles": "Unassign all roles"
 }