update(user management): Updated app access management flow (#372)

eclipse-tractusx · Nov 28, 2023 · 4252b89 · 4252b89
1 parent 8728693
commit 4252b89
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@
   - Document Hover Effect
 - Tech User Details
   - Fix crash issue
+- User management
+  - Updated app access management flow
 - Overlays
   - Change Overlay Button from "Cancel" to "Close"
 

diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
@@ -878,9 +878,14 @@
       }
     },
     "addUserRight": {
-      "headline": "Benutzer hinzufügen",
-      "subheadline": "Auswählen und hinzufügen von Benutzern",
-      "noRolesFound": "No user roles found"
+      "headline": "Assign app roles to your user(s)",
+      "noRolesFound": "No user roles found",
+      "selectUsersDescription": "[abstract] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+      "addRolesDescription": "[abstract] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+      "confirmSelectedUsers": "Confirm selected users",
+      "confirmSelectedRoles": "Confirm selected roles",
+      "selectRoles": "Select Roles:",
+      "roleDescriptions": "Role Descriptions"
     },
     "help": {
       "message": "Fügen Sie hier Inhalte hinzu"

diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
@@ -878,9 +878,14 @@
       }
     },
     "addUserRight": {
-      "headline": "Add app permissions to your company user",
-      "subheadline": "Select one or multiple user roles with the checkboxes below as well as the relevant user/s which should receive the role.",
-      "noRolesFound": "No user roles found"
+      "headline": "Assign app roles to your user(s)",
+      "noRolesFound": "No user roles found",
+      "selectUsersDescription": "[abstract] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+      "addRolesDescription": "[abstract] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+      "confirmSelectedUsers": "Confirm selected users",
+      "confirmSelectedRoles": "Confirm selected roles",
+      "selectRoles": "Select Roles:",
+      "roleDescriptions": "Role Descriptions"
     },
     "account": {
       "userAccount": "User account",

diff --git a/src/components/overlays/AddAppUserRoles/AddAppUserRoles.scss b/src/components/overlays/AddAppUserRoles/AddAppUserRoles.scss
@@ -27,11 +27,3 @@
 .add-user-overlay-content {
   padding: 0px !important;
 }
-
-.add-user-overlay-content-roles {
-  padding: 0px 112px 56px;
-}
-
-.add-user-overlay-content-content {
-  padding: 0px 32px 32px;
-}
diff --git a/src/components/overlays/AddAppUserRoles/index.tsx b/src/components/overlays/AddAppUserRoles/index.tsx
@@ -23,6 +23,7 @@ import {
   DialogContent,
   DialogHeader,
   Button,
+  Stepper,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
@@ -43,6 +44,8 @@ import {
   SuccessErrorType,
 } from 'features/admin/appuserApiSlice'
 import { setRolesToAdd } from 'features/admin/userDeprecated/actions'
+import { Box, Typography } from '@mui/material'
+import { useState } from 'react'
 
 export default function AddAppUserRoles() {
   const { t } = useTranslation()
@@ -51,7 +54,7 @@ export default function AddAppUserRoles() {
 
   const roles = useSelector(rolesToAddSelector)
   const users = useSelector(selectedUserSelector)
-
+  const [activeStep, setActiveStep] = useState(1)
   const [updateUserRoles] = useUpdateUserRolesMutation()
 
   const handleConfirm = async () => {
@@ -79,39 +82,93 @@ export default function AddAppUserRoles() {
     dispatch(setRolesToAdd([]))
   }
 
+  const AddStepsList = [
+    {
+      headline: 'Search & Select Users',
+      step: 1,
+      color: '#0F71CB',
+    },
+    {
+      headline: 'Add Roles',
+      step: 2,
+    },
+  ]
+
   return (
     <>
       <DialogHeader
         title={t('content.addUserRight.headline')}
-        intro={t('content.addUserRight.subheadline')}
+        intro={''}
         closeWithIcon={true}
         onCloseWithIcon={handleCancel}
       />
 
       <DialogContent className="add-user-overlay-content">
-        <div className="add-user-overlay-content-roles">
-          <AppRoles />
-        </div>
-
-        <div className="add-user-overlay-content-content">
-          <UserListContent />
+        <div style={{ width: '40%', margin: '0 auto 40px' }}>
+          <Stepper list={AddStepsList} showSteps={2} activeStep={activeStep} />
         </div>
+        {activeStep === 1 && (
+          <Box sx={{ margin: '50px 110px' }}>
+            <Typography variant="label3">
+              {t('content.addUserRight.selectUsersDescription')}
+            </Typography>
+            <Box sx={{ mt: '46px' }}>
+              <UserListContent />
+            </Box>
+          </Box>
+        )}
+        {activeStep === 2 && (
+          <Box sx={{ margin: '50px 110px' }}>
+            <Typography variant="label3">
+              {t('content.addUserRight.addRolesDescription')}
+            </Typography>
+            <Box sx={{ mt: '46px' }}>
+              <Typography variant="label1">
+                {t('content.addUserRight.selectRoles')}
+              </Typography>
+            </Box>
+            <Box sx={{ mb: '30px' }}>
+              <Typography variant="body2">
+                <a href="">{`> ${t(
+                  'content.addUserRight.roleDescriptions'
+                )}`}</a>
+              </Typography>
+            </Box>
+            <AppRoles />
+          </Box>
+        )}
       </DialogContent>
 
       <DialogActions>
-        <Button
-          variant="outlined"
-          onClick={() => dispatch(show(OVERLAYS.NONE))}
-        >
-          {t('global.actions.cancel')}
-        </Button>
-        <Button
-          variant="contained"
-          onClick={() => handleConfirm()}
-          disabled={!users || roles.length <= 0}
-        >
-          {t('global.actions.confirm')}
-        </Button>
+        {activeStep === 1 ? (
+          <Button
+            variant="contained"
+            onClick={() => {
+              setActiveStep(2)
+            }}
+            disabled={users.length <= 0}
+          >
+            {t('content.addUserRight.confirmSelectedUsers')}
+          </Button>
+        ) : (
+          <>
+            <Button
+              variant="outlined"
+              onClick={() => {
+                setActiveStep(1)
+              }}
+            >
+              {t('global.actions.back')}
+            </Button>
+            <Button
+              variant="contained"
+              onClick={() => handleConfirm()}
+              disabled={!users || roles.length <= 0}
+            >
+              {t('content.addUserRight.confirmSelectedRoles')}
+            </Button>
+          </>
+        )}
       </DialogActions>
     </>
   )