Skip to content

Commit

Permalink
fix: enhance user visibility feature on tech user profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@manojava-gk
manojava-gk committed Feb 12, 2025
1 parent 566055d commit 19ca91f
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 77 deletions.
7 changes: 4 additions & 3 deletions src/assets/locales/de/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1337,14 +1337,15 @@
"type": "Type",
"role": "Roles",
"noRoles": "Keine technischen Benutzerprofile hinzugefügt",
"action": "Action",
"visibility": "Visibility for endcustomer"
"action": "Action"
},
"form": {
"title": "Technisches Benutzerprofil konfigurieren",
"intro": "Wählen Sie interne oder externe Rollen aus und fahren Sie mit der Konfiguration des technischen Benutzerprofils fort",
"internalUserRoles": "Internes technisches Benutzerprofil",
"internalUserRolesDescription": "Interne technische Benutzerprofile werden in der direkten Umgebung des Portals erstellt und können daher mehrere Rollen haben",
"internalUserRolesDescription": "Diese Auswahl umfasst alle Rollen, die zu einem technischen Benutzerprofil hinzugefügt werden können. Die technischen Benutzer, die aus diesem Profil erstellt werden, sind sowohl für den Kunden als auch für den Anbieter sichtbar!",
"internalUserRolesOnlyVisible": "Internes technisches Benutzerprofil(Nur für Anbieter sichtbar)",
"internalUserRolesDescriptionOnlyVisible": "Diese Auswahl umfasst alle Rollen, die zu einem technischen Benutzerprofil hinzugefügt werden können. Diese Benutzerrollen haben eine eingeschränkte Sichtbarkeit. Die technischen Benutzer, die aus diesem Profil erstellt werden, sind nur für den Anbieter sichtbar!",
"externalUserRoles": "Externer technischer Benutzer",
"externalUserRolesDescription": "Externe technische Benutzerprofile werden in einer externen Umgebung erstellt und können daher nur eine Rolle haben",
"userDetailsNotVisible": "Technische Benutzerdaten sind für die abonnierenden Kunden nicht sichtbar."
Expand Down
7 changes: 4 additions & 3 deletions src/assets/locales/en/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1337,14 +1337,15 @@
"type": "Type",
"role": "Roles",
"noRoles": "No technical userprofiles added",
"action": "Action",
"visibility": "Visibility for endcustomer"
"action": "Action"
},
"form": {
"title": "Configure Technical Userprofile",
"intro": "Select internal or external roles and continue to configure technical userprofile",
"internalUserRoles": "Internal technical userprofile",
"internalUserRolesDescription": "Internal technical userprofile are created in the direct environment of the portal therefore can have multiple roles",
"internalUserRolesDescription": "This selection includes all roles that can be added to a technical user profile.The technical users created from this profile will be visible to the customer and provider!",
"internalUserRolesOnlyVisible": "Internal Technical User Profile (Visible Only to Providers)",
"internalUserRolesDescriptionOnlyVisible": "Internal technical userprofile are created in the direct environment of the portal therefore can have multiple roles",
"externalUserRoles": "External technical userprofile",
"externalUserRolesDescription": "External technical userprofile are created in external environment therefore can only have one role",
"userDetailsNotVisible": "Technical user details won't be visible to the subscribing customers"
Expand Down
99 changes: 92 additions & 7 deletions src/components/shared/basic/ReleaseProcess/TechnicalIntegration/AddTechUserForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import './style.scss'
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
import { groupBy } from 'lodash'

interface AddTechUserFormProps {
handleClose: () => void
Expand All @@ -51,6 +52,7 @@ interface AddTechUserFormProps {

enum RoleType {
Internal = 'Internal',
InternalOnlyVisible = 'InternalOnlyVisible',
External = 'External',
NONE = 'NONE',
}
Expand All @@ -66,6 +68,9 @@ export const AddTechUserForm = ({
const internalUserRoles = roles?.filter(
(role) => role.roleType === RoleType.Internal
)
const grouped = groupBy(internalUserRoles, 'onlyAccessibleByProvider')
const internalUserRolesVisible = grouped.true
const internalUserRolesNotVisible = grouped.false
const externalUserRoles = roles?.filter(
(role) => role.roleType === RoleType.External
)
Expand Down Expand Up @@ -207,7 +212,10 @@ export const AddTechUserForm = ({
name="radio-buttons"
value={selectedUserRoles}
size="small"
disabled={selectedRoleType === RoleType.Internal}
disabled={
selectedRoleType === RoleType.Internal ||
selectedRoleType === RoleType.InternalOnlyVisible
}
/>
{role.onlyAccessibleByProvider &&
renderAccessibleByProvider()}
Expand All @@ -217,7 +225,8 @@ export const AddTechUserForm = ({
sx={{
marginLeft: '30px',
color:
selectedRoleType === RoleType.External
selectedRoleType === RoleType.Internal ||
selectedRoleType === RoleType.InternalOnlyVisible
? 'rgba(0, 0, 0, 0.38)'
: 'initial',
}}
Expand Down Expand Up @@ -257,7 +266,81 @@ export const AddTechUserForm = ({
marginLeft: '30px',
}}
>
{internalUserRoles?.map((role: ServiceAccountRole) => (
{internalUserRolesNotVisible?.map(
(role: ServiceAccountRole) => (
<Box key={role.roleId}>
<Box className="roles" sx={boxStyle}>
<Checkbox
key={role.roleId}
label={role.roleName}
checked={
selectedUserRoles.indexOf(role.roleId) !== -1
}
onChange={(e) => {
selectRoles(
role.roleId,
e.target.checked,
'checkbox'
)
}}
size="medium"
value={selectedUserRoles}
disabled={
selectedRoleType === RoleType.External ||
selectedRoleType === RoleType.InternalOnlyVisible
}
/>
{role.onlyAccessibleByProvider &&
renderAccessibleByProvider()}
</Box>
<Typography
variant="body3"
sx={{
marginLeft: '30px',
color:
selectedRoleType === RoleType.External ||
selectedRoleType === RoleType.InternalOnlyVisible
? 'rgba(0, 0, 0, 0.38)'
: 'initial',
}}
>
{role.roleDescription}
</Typography>
</Box>
)
)}
</Box>
)}
<Radio
label={t(
'content.apprelease.technicalIntegration.form.internalUserRolesOnlyVisible'
)}
checked={selectedRoleType === RoleType.InternalOnlyVisible}
onChange={() => {
setSelectedRoleType(RoleType.InternalOnlyVisible)
}}
name="radio-button"
value={selectedRoleType}
size="medium"
/>
<Typography
variant="body3"
sx={{
marginLeft: '30px',
marginBottom: '10px',
}}
>
{t(
'content.apprelease.technicalIntegration.form.internalUserRolesDescriptionOnlyVisible'
)}
</Typography>
{selectedRoleType && selectedRoleType !== RoleType.NONE && (
<Box
sx={{
marginLeft: '30px',
}}
>
{internalUserRolesVisible?.map((role: ServiceAccountRole) => (
<Box key={role.roleId}>
<Box className="roles" sx={boxStyle}>
<Checkbox
Expand All @@ -269,17 +352,19 @@ export const AddTechUserForm = ({
}}
size="medium"
value={selectedUserRoles}
disabled={selectedRoleType === RoleType.External}
disabled={
selectedRoleType === RoleType.External ||
selectedRoleType === RoleType.Internal
}
/>
{role.onlyAccessibleByProvider &&
renderAccessibleByProvider()}
</Box>
<Typography
variant="body3"
sx={{
marginLeft: '30px',
color:
selectedRoleType === RoleType.External
selectedRoleType === RoleType.External ||
selectedRoleType === RoleType.Internal
? 'rgba(0, 0, 0, 0.38)'
: 'initial',
}}
Expand Down
134 changes: 72 additions & 62 deletions src/components/shared/basic/ReleaseProcess/TechnicalIntegration/TechUserTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
import { Box } from '@mui/material'
import { type TechnicalUserProfiles } from 'features/appManagement/types'
import { findIndex } from 'lodash'
import InfoIcon from '@mui/icons-material/Info'
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
interface TechUserTableProps {
userProfiles: TechnicalUserProfiles[]
handleAddTechUser?: () => void
Expand Down Expand Up @@ -103,70 +103,80 @@ export const TechUserTable = ({
? ''
: t('content.apprelease.technicalIntegration.table.action'),
flex: disableActions ? 0 : 1,
renderCell: ({ row }: { row: TechnicalUserProfiles }) => (
<>
{!disableActions && (
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
placeItems: 'center',
}}
>
<Tooltips
additionalStyles={{
cursor: 'pointer',
height: '24px',
}}
tooltipPlacement="top-start"
tooltipText={'maja maado ranga'}
children={
<div>
<InfoIcon
sx={{
color: '#adadad',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
/>
</div>
}
/>
<EditOutlinedIcon
renderCell: ({ row }: { row: TechnicalUserProfiles }) => {
const flag = row.userRoles.find(
(val) => val.accessiblyByProviderOnly
)
return (
<>
{!disableActions && (
<Box
sx={{
marginLeft: '10px',
color: '#adadad',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
onClick={() => {
handleEdit && handleEdit(row)
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
placeItems: 'center',
}}
/>
>
<EditOutlinedIcon
sx={{
color: '#adadad',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
onClick={() => {
handleEdit && handleEdit(row)
}}
/>

<DeleteOutlineIcon
sx={{
color: '#adadad',
marginLeft: '10px',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
onClick={() => {
handleDelete && handleDelete(row)
}}
/>
</Box>
)}
</>
),
<DeleteOutlineIcon
sx={{
color: '#adadad',
marginLeft: '10px',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
onClick={() => {
handleDelete && handleDelete(row)
}}
/>

{flag && (
<Tooltips
additionalStyles={{
cursor: 'pointer',
}}
tooltipPlacement="top-start"
tooltipText={t(
'content.apprelease.technicalIntegration.form.userDetailsNotVisible'
)}
children={
<div>
<VisibilityOffIcon
sx={{
marginTop: '5px',
marginLeft: '10px',
color: '#adadad',
':hover': {
color: 'blue',
cursor: 'pointer',
},
}}
/>
</div>
}
/>
)}
</Box>
)}
</>
)
},
},
]}
disableColumnMenu
Expand Down
2 changes: 1 addition & 1 deletion src/features/appManagement/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export interface UserRoleType {
roleId: string
roleName: string
type: string
onlyAccessibleByProvider: boolean
accessiblyByProviderOnly: boolean
}

export interface TechnicalUserProfiles {
Expand Down
2 changes: 1 addition & 1 deletion src/features/serviceManagement/apiSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export type technicalUserProfile = {
roleId: string
roleName: string
type: string
onlyAccessibleByProvider: boolean
accessiblyByProviderOnly: boolean
}[]
}

Expand Down

0 comments on commit 19ca91f

Please sign in to comment.