From 068b49d95c5ca384577e93565bb8516fd84c76ab Mon Sep 17 00:00:00 2001
From: aidynoJ <azhakizhanov@ebsco.com>
Date: Fri, 19 Apr 2024 16:03:13 +0500
Subject: [PATCH] UIU-3021: conditionally show use roles accordion

---
 CHANGELOG.md                                        |  1 +
 .../EditSections/EditUserRoles/EditUserRoles.js     | 13 +++++++------
 src/views/UserEdit/UserForm.js                      |  2 +-
 translations/ui-users/en.json                       |  4 +++-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89c975a9e..452164c91 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/components/EditSections/EditUserRoles/EditUserRoles.js b/src/components/EditSections/EditUserRoles/EditUserRoles.js
index 879268eb9..709ff05d4 100644
--- a/src/components/EditSections/EditUserRoles/EditUserRoles.js
+++ b/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>
   );
diff --git a/src/views/UserEdit/UserForm.js b/src/views/UserEdit/UserForm.js
index 464537b35..39063625c 100644
--- a/src/views/UserEdit/UserForm.js
+++ b/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>
diff --git a/translations/ui-users/en.json b/translations/ui-users/en.json
index e1bd4bc33..ffb65152e 100644
--- a/translations/ui-users/en.json
+++ b/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"
 }