fix: show pre-selected user after role selector navigation (#1605)

* fix: show pre-selected user after role selector navigation

* chore: changelog

* chore: revert changelog change

Author: Usmanfee

src/components/overlays/AddAppUserRoles/UserListContent.tsx

@@ -77,15 +77,19 @@ export default function UserListContent() {
         {
           field: 'name',
           headerName: t('global.field.name'),
-          flex: 4,
+          width: 300,
           valueGetter: (_value_, row: TenantUser) =>
             `${row.firstName} ${row.lastName}`,
         },
-        { field: 'email', headerName: t('global.field.email'), flex: 5 },
+        {
+          field: 'email',
+          headerName: t('global.field.email'),
+          width: 300,
+        },
         {
           field: 'status',
           headerName: t('global.field.status'),
-          flex: 2,
+          width: 200,
           renderCell: ({ value: status }) => {
             return (
               <StatusTag color="label" label={t(`global.field.${status}`)} />

src/components/overlays/AddAppUserRoles/index.tsx

@@ -116,36 +116,40 @@ export default function AddAppUserRoles() {
         <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')}
+        <Box
+          sx={{
+            margin: '50px 110px',
+            display: activeStep === 1 ? 'block' : 'none',
+          }}
+        >
+          <Typography variant="label3">
+            {t('content.addUserRight.selectUsersDescription')}
+          </Typography>
+          <Box sx={{ mt: '46px' }}>
+            <UserListContent />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            margin: '50px 110px',
+            display: activeStep === 2 ? 'block' : 'none',
+          }}
+        >
+          <Typography variant="label3">
+            {t('content.addUserRight.addRolesDescription')}
+          </Typography>
+          <Box sx={{ mt: '46px' }}>
+            <Typography variant="label1">
+              {t('content.addUserRight.selectRoles')}
             </Typography>
-            <Box sx={{ mt: '46px' }}>
-              <UserListContent />
-            </Box>
           </Box>
-        )}
-        {activeStep === 2 && (
-          <Box sx={{ margin: '50px 110px' }}>
-            <Typography variant="label3">
-              {t('content.addUserRight.addRolesDescription')}
+          <Box sx={{ mb: '30px' }}>
+            <Typography variant="body2">
+              <a href="">{`> ${t('content.addUserRight.roleDescriptions')}`}</a>
             </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>
-        )}
+          <AppRoles />
+        </Box>
       </DialogContent>
 
       <DialogActions>