fix(usermanagemnt): add type to interface (#712)

eclipse-tractusx · Apr 16, 2024 · 329dfbd · 329dfbd
1 parent 7ba0ec1
commit 329dfbd
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 42 deletions.
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -736,12 +736,14 @@
         "userRoleErrorMsg": "Etwas ist schief gelaufen. Benutzerrollen wurden nicht aktualisiert.",
         "header": {
           "title": "App Rollen",
-          "subtitle": "Für die App stehen folgende Rollen zur Verfügung. Über das Feld 'Rollenbeschreibung' können sie detailierte Informationen zu den Rechten der Rollen erhalten. Um eine Rolle einem User hinzuzufügen, nutzen Sie bitte den Button 'Add Role' unter den Rollenbeschreibungen"
+          "subtitle": "Für die App stehen folgende Rollen zur Verfügung. Über das Feld 'Rollenbeschreibung' können sie detailierte Informationen zu den Rechten der Rollen erhalten. Um eine Rolle einem User hinzuzufügen, nutzen Sie bitte den Button 'Add Role' unter den Rollenbeschreibungen",
+          "noRoles": "Derzeit sind keine App-Rollen vorhanden. Keine Zuordnung möglich."
         },
         "table": {
           "headline": "Benutzermanagement",
           "title": "Benutzer Liste",
           "add": "Benutzerrolle hinzufügen",
+          "buttonTooltip": "Funktion deaktiviert, da keine App-Rollen verfügbar sind",
           "noRowsMsg": "No users assigned till now. Start to assign by clicking on Add Role"
         },
         "roles": {

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -735,12 +735,14 @@
         "userRoleErrorMsg": "Roles have not got updated.",
         "header": {
           "title": "App Roles",
-          "subtitle": "Below you can find an overview of the available app roles as well as a role description by selectiong the 'Role Description' field. To add the user role to an existing active company user, please use the 'add role' button below the 'Available Role' area."
+          "subtitle": "Below you can find an overview of the available app roles as well as a role description by selectiong the 'Role Description' field. To add the user role to an existing active company user, please use the 'add role' button below the 'Available Role' area.",
+          "noRoles": "No app roles are currently existing. No assignment possible."
         },
         "table": {
           "headline": "Identity Management",
           "title": "App Users",
           "add": "Add Role",
+          "buttonTooltip": "Function disabled since no app roles are available",
           "noRowsMsg": "No users assigned till now. Start to assign by clicking on Add Role"
         },
         "roles": {

diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
@@ -38,7 +38,6 @@ import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import {
   type ApplicationRequest,
   useFetchCheckListDetailsQuery,
-  useFetchCompanySearchQuery,
 } from 'features/admin/applicationRequestApiSlice'
 import { download } from 'utils/downloadUtils'
 import CheckListFullButtons from '../components/CheckList/CheckListFullButtons'
@@ -47,12 +46,14 @@ import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice
 
 interface CompanyDetailOverlayProps {
   openDialog?: boolean
+  selectedRequest?: ApplicationRequest
   selectedRequestId?: string
   handleOverlayClose: React.MouseEventHandler
 }
 
 const CompanyDetailOverlay = ({
   openDialog = false,
+  selectedRequest,
   selectedRequestId,
   handleOverlayClose,
 }: CompanyDetailOverlayProps) => {
@@ -69,22 +70,10 @@ const CompanyDetailOverlay = ({
   const [height, setHeight] = useState<string>('')
   const { data: checklistData } =
     useFetchCheckListDetailsQuery(selectedRequestId)
-  const { data } = useFetchCompanySearchQuery({
-    page: 0,
-    args: {
-      expr: selectedCompany?.name,
-    },
-  })
 
   useEffect(() => {
-    if (data) {
-      const selected = data?.content?.filter(
-        (company: { bpn: string }) =>
-          !company.bpn || selectedCompany.bpn === company.bpn
-      )
-      setCompany(selected[0])
-    }
-  }, [data, selectedCompany])
+    if (selectedRequest) setCompany(selectedRequest)
+  }, [selectedRequest])
 
   const getLocaleStr = (str: string) => {
     if (str === 'ACTIVE_PARTICIPANT') {

diff --git a/src/components/pages/Admin/components/RegistrationRequests/index.tsx b/src/components/pages/Admin/components/RegistrationRequests/index.tsx
@@ -28,6 +28,7 @@ import type { GridCellParams } from '@mui/x-data-grid'
 import CompanyDetailOverlay from './CompanyDetailOverlay'
 import ConfirmationOverlay from './ConfirmationOverlay/ConfirmationOverlay'
 import {
+  type ApplicationRequest,
   useApproveRequestMutation,
   useDeclineChecklistMutation,
   useFetchCompanySearchQuery,
@@ -54,6 +55,7 @@ export default function RegistrationRequests() {
   const [confirmModalOpen, setConfirmModalOpen] = useState<boolean>(false)
 
   const [selectedRequestId, setSelectedRequestId] = useState<string>()
+  const [selectedRequest, setSelectedRequest] = useState<ApplicationRequest>()
   const [actionType, setActionType] = useState<string>('approve')
 
   const [approveRequest] = useApproveRequestMutation()
@@ -83,6 +85,7 @@ export default function RegistrationRequests() {
     // Show overlay only when detail field clicked
     if (params.field === 'detail') {
       setSelectedRequestId(params.row.applicationId)
+      setSelectedRequest(params.row)
       dispatch(fetchCompanyDetail(params.row.applicationId))
       setOverlayOpen(true)
     }
@@ -181,6 +184,7 @@ export default function RegistrationRequests() {
         <CompanyDetailOverlay
           {...{
             openDialog: overlayOpen,
+            selectedRequest,
             selectedRequestId,
             handleOverlayClose: () => {
               setOverlayOpen(false)

diff --git a/...ponents/pages/AppUserManagement/components/AppUserDetailsHeader/AppUserDetailsHeader.scss b/...ponents/pages/AppUserManagement/components/AppUserDetailsHeader/AppUserDetailsHeader.scss
@@ -30,6 +30,11 @@
   max-width: 1200px;
   height: max-content;
   margin: 80px auto 0px auto;
+  .no-roles {
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+  }
 }
 
 .app-user-details-header-role {

diff --git a/src/components/pages/AppUserManagement/components/AppUserDetailsHeader/index.tsx b/src/components/pages/AppUserManagement/components/AppUserDetailsHeader/index.tsx
@@ -28,7 +28,7 @@ import type { AppRole } from 'features/admin/appuserApiSlice'
 import './AppUserDetailsHeader.scss'
 
 export interface AppUserDetailsHeaderProps {
-  roles: AppRole[]
+  roles?: AppRole[]
   error: string
 }
 
@@ -55,23 +55,29 @@ export default function AppUserDetailsHeader({
       </div>
 
       <div className="app-user-details-header-roles-section">
-        {roles?.map((role) => {
-          return (
-            <div className="wrapper" key={role.role}>
-              <div key={role.role} className="app-user-details-header-role">
-                <Typography variant="h5" className="app-user-details-role">
-                  {role.role}
-                </Typography>
-                <Typography
-                  variant="h6"
-                  className="app-user-details-header-description"
-                >
-                  {role.description}
-                </Typography>
+        {roles?.length ? (
+          roles.map((role) => {
+            return (
+              <div className="wrapper" key={role.role}>
+                <div key={role.role} className="app-user-details-header-role">
+                  <Typography variant="h5" className="app-user-details-role">
+                    {role.role}
+                  </Typography>
+                  <Typography
+                    variant="h6"
+                    className="app-user-details-header-description"
+                  >
+                    {role.description}
+                  </Typography>
+                </div>
               </div>
-            </div>
-          )
-        })}
+            )
+          })
+        ) : (
+          <Typography variant="body2" className="no-roles">
+            {t('content.usermanagement.appUserDetails.header.noRoles')}
+          </Typography>
+        )}
       </div>
       <div className="errorMsg">
         {error && (

diff --git a/src/components/pages/AppUserManagement/components/AppUserDetailsTable/index.tsx b/src/components/pages/AppUserManagement/components/AppUserDetailsTable/index.tsx
@@ -24,14 +24,21 @@ import { useState } from 'react'
 import { UserList } from 'components/shared/frame/UserList'
 import { show } from 'features/control/overlay'
 import { OVERLAYS } from 'types/Constants'
-import { useFetchAppUsersSearchQuery } from 'features/admin/appuserApiSlice'
+import {
+  type AppRole,
+  useFetchAppUsersSearchQuery,
+} from 'features/admin/appuserApiSlice'
 import type { TenantUser } from 'features/admin/userApiSlice'
+import { useTranslation } from 'react-i18next'
 
 export const AppUserDetailsTable = ({
+  roles,
   userRoleResponse,
 }: {
+  roles?: AppRole[]
   userRoleResponse: string
 }) => {
+  const { t } = useTranslation()
   const dispatch = useDispatch()
   const { appId } = useParams()
   const [expr, setExpr] = useState<string>('')
@@ -41,6 +48,12 @@ export const AppUserDetailsTable = ({
       sectionTitle={'content.usermanagement.appUserDetails.subheadline'}
       addButtonLabel={'content.usermanagement.appUserDetails.table.add'}
       addButtonClick={() => dispatch(show(OVERLAYS.ADD_APP_USER_ROLES, appId))}
+      addButtonDisabled={!roles}
+      addButtonTooltip={
+        !roles
+          ? t('content.usermanagement.appUserDetails.table.buttonTooltip')
+          : ''
+      }
       tableLabel={'content.usermanagement.appUserDetails.table.title'}
       fetchHook={useFetchAppUsersSearchQuery}
       fetchHookArgs={{ appId, expr, userRoleResponse, role: true }}

diff --git a/src/components/pages/AppUserManagement/index.tsx b/src/components/pages/AppUserManagement/index.tsx
@@ -82,13 +82,11 @@ export default function AppUserManagement() {
       >
         <PageBreadcrumb />
       </PageHeader>
-      {data && (
-        <AppUserDetailsHeader
-          roles={data}
-          error={isError ? JSON.stringify(data) : ''}
-        />
-      )}
-      <AppUserDetailsTable userRoleResponse={userRoleResponse} />
+      <AppUserDetailsHeader
+        roles={data}
+        error={isError ? JSON.stringify(data) : ''}
+      />
+      <AppUserDetailsTable roles={data} userRoleResponse={userRoleResponse} />
       {/* success or error dialog/overlay */}
       {userRoleResponse && (
         <Dialog

diff --git a/src/components/pages/Organization/index.tsx b/src/components/pages/Organization/index.tsx
@@ -87,6 +87,9 @@ export default function Organization() {
               key={item}
               color="label"
               label={t(`content.companyRolesUpdate.${item}`)}
+              sx={{
+                marginRight: '8px',
+              }}
             />
           ))}
         </>

diff --git a/src/components/shared/frame/UserList/index.tsx b/src/components/shared/frame/UserList/index.tsx
@@ -52,6 +52,8 @@ export const UserList = ({
   sectionTitle,
   addButtonLabel,
   addButtonClick,
+  addButtonDisabled,
+  addButtonTooltip,
   addMultipleButtonLabel,
   onMultipleButtonClick,
   tableLabel,
@@ -65,6 +67,8 @@ export const UserList = ({
   sectionTitle: string
   addButtonLabel: string
   addButtonClick: () => void
+  addButtonDisabled?: boolean
+  addButtonTooltip?: string
   addMultipleButtonLabel?: string
   onMultipleButtonClick?: () => void
   tableLabel: string
@@ -99,6 +103,8 @@ export const UserList = ({
         autoFocus={false}
         onButtonClick={addButtonClick}
         buttonLabel={t(addButtonLabel)}
+        buttonDisabled={addButtonDisabled}
+        buttonTooltip={addButtonTooltip}
         secondButtonLabel={addMultipleButtonLabel && t(addMultipleButtonLabel)}
         onSecondButtonClick={onMultipleButtonClick}
         toolbarVariant="premium"