Merged PR 2207: user managmenent documentation

- small changes, manage users documentation init
- small improvements in text
- capital letters & new img docs
- its imposible to delete own acount & user with free acount cannot edit and delete users
- deleted default blue color from input field
- changed color of buttons if user cannot perform any action
- displaying user roles in table
- Improvement in user management description in docs

docs/working-with-dqo/access-management/access-management.md

@@ -0,0 +1,46 @@
+# User and access management
+
+DQOps allows you to manage user roles which determine who can operate data quality checks and edit them. The level of 
+access control varies depending on the type of license and is only available in multi-user accounts.
+
+**There are five types of user roles available:**
+
+| User role | Description                                                                                  |
+|:----------|:---------------------------------------------------------------------------------------------|
+| Admin     | An Admin has complete control over the account and can manage users and perform all actions. |
+| Editor    | An Editor can configure and run data quality checks.                                         |
+| Operator  | An Operator can run data quality checks but is unable to make changes.                       |
+| Viewer    | Viewer has read-only access to the data quality checks.                                      |
+| None      | And None represents no access rights role.                                                   |
+
+To manage user, go to the **Configuration** section and click on **Manage users** from the tree view on the left.
+This will display a list of all users along with their roles, and options to edit, delete and change passwords. 
+Note that only a user with an Admin role can change other users, and options to edit or delete would be inactive for 
+other users. If you are using a single-user license, you will see only one user.
+
+
+![Users-List](https://dqops.com/docs/images/working-with-dqo/users-managment/userList3.png)
+
+
+## Add a new user
+
+Only an Admin has the authority to add a new user. To do so, click on the **Add user** button. This will open a new tab 
+where you can enter a new email address and set a password. Once you have entered the details, click the **Add user** button
+again to create the new user account.
+
+
+![Add-user](https://dqops.com/docs/images/working-with-dqo/users-managment/addUser2.png)
+
+## Change user role
+
+Users with admin roles can edit existing user accounts by clicking on the edit button next to the user's name. This will
+enable you to change the user's role. Please note that DQO does not support changing a user's email address. Once you have
+made the desired changes, click the Save button to save the new settings.
+
+## Delete a user
+
+An admin can also delete user and change user's password by clicking on the change password button. This will open the
+pop-up with a random generated password. You may choose to enter your own password, provided that it is at least 8 characters
+long and contains both uppercase and lowercase letters as well as digits.
+
+![Change-users-password](https://dqops.com/docs/images/working-with-dqo/users-managment/changePassword.png)

dqops/src/main/frontend/src/components/UserProfile/ChangePrincipalPasswordDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Dialog, DialogBody, DialogFooter, Input } from '@material-tailwind/react'; 
+import { Dialog, DialogBody, DialogFooter } from '@material-tailwind/react'; 
 import Button from '../../components/Button';
+import Input from '../Input';
 
 interface AddColumnDialogProps {
   open: boolean;

dqops/src/main/frontend/src/pages/UserListDetail/ChangeUserPasswordDialog.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Dialog, DialogBody, DialogFooter, Input } from '@material-tailwind/react'; 
+import { Dialog, DialogBody, DialogFooter} from '@material-tailwind/react'; 
 import Button from '../../components/Button';
+import Input from '../../components/Input';
 
 interface AddColumnDialogProps {
   open: boolean;

dqops/src/main/frontend/src/pages/UserListDetail/UserDetail.tsx

@@ -50,7 +50,7 @@ export default function UserDetail() {
   return (
     <DefinitionLayout>
       <div className='w-full border-b border-b-gray-400 flex justify-end '>  
-        <Button label={(create===true || email === undefined) ? 'Add user' : 'Edit user'}
+        <Button label={'Save'}
          color='primary'
          variant='contained'
          className=' w-40 mr-10 my-3'

dqops/src/main/frontend/src/pages/UserListDetail/index.tsx

@@ -58,18 +58,26 @@ export default function UserListDetail() {
         .catch((err) => console.error(err))
     }
 
+    const changePrincipalPassword = async (password: string) => {
+        await UsersApi.changeCallerPassword(selectedEmailToChangePassword, password)
+        .then(() => setRefreshUsersIndicator(!reshreshUsersIndicator))
+        .catch((err) => console.error(err))
+    }
+
     const addDqoCloudUser = () => {
          dispatch(
            addFirstLevelTab({
              url: ROUTES.USER_DETAIL("new"),
              value: ROUTES.USER_DETAIL_VALUE("new"),
              label: "Create User",
-             state: {create: true
-             }
+             state: {create: true}
            })
          )
     }
-    if(loading){
+
+    const canUserPerformActions = userProfile.license_type === 'TEAM' || userProfile.license_type === 'ENTERPRISE' || userProfile.can_manage_users === true
+
+    if (loading) {
         return(
         <DefinitionLayout>
             <div className='w-full h-screen flex items-center justify-center'>
@@ -84,41 +92,47 @@ export default function UserListDetail() {
             <thead className='border-b w-full border-b-gray-400 relative flex items-center'>
                 <th className="px-6 py-4 text-left block w-100">User email</th>
                 <th className="px-6 py-4 text-left block w-50">User role</th>
+                {userProfile.license_type?.toLowerCase() !== 'free' ? 
                 <Button label='Add user'
                  color='primary'
                  variant='contained'
                  className='absolute right-2 top-2 w-40'
                  onClick={addDqoCloudUser}
                  disabled={!!(userProfile.users_limit && userProfile.users_limit <= dqoCloudUsers?.length  &&
-                 (userProfile.license_type === 'TEAM' || userProfile.license_type === 'ENTERPRISE') || userProfile.can_manage_users !== true)} 
+                 canUserPerformActions)} 
                 />
+                : null}
             </thead>
             <tbody>
                 {dqoCloudUsers?.map((user, index) => 
                 <tr key={index} className='flex items-center'>
                     <td className='px-6 py-2 text-left block w-100'>{user.email}</td>
                     <td className='px-6 py-2 text-left block w-50'>{user.accountRole}</td>
                     <td className='px-6 py-2 text-left block max-w-100'>
-                        <Button label='edit' variant='text' color='primary' 
+                        {userProfile.license_type?.toLowerCase() !== 'free' ? 
+                        <Button label='Edit' variant='text' color={canUserPerformActions ? 'primary' : 'secondary'} 
                         onClick={() =>user.email ?  editDqoCloudUser(user.email, user.accountRole) : null}
-                        disabled={!(userProfile.license_type === 'TEAM' || userProfile.license_type === 'ENTERPRISE' || userProfile.can_manage_users === true)}
+                        disabled={!canUserPerformActions}
                         />
+                        : <div className='w-24'></div> }
                     </td>
                     <td className="px-6 py-2 text-left block max-w-100">
-                        <Button label='delete' variant='text' color='primary' 
+                        { userProfile.user !== user.email && userProfile.license_type?.toLowerCase() !== 'free' ? 
+                        <Button label='Delete' variant='text' color={canUserPerformActions ? 'primary' : 'secondary'}  
                         onClick={() => setSelectedEmailToDelete(user.email ?? '')}
-                        disabled={!(userProfile.license_type === 'TEAM' || userProfile.license_type === 'ENTERPRISE' || userProfile.can_manage_users === true)}/>
+                        disabled={!canUserPerformActions}/> 
+                        : <div className='w-24'></div> }
                     </td>
                     <td className="px-6 py-2 text-left block max-w-100">
-                        <Button label='change password' variant='text' color='primary' onClick={() => setSelectedEmailToChangePassword(user.email ?? '')} 
-                        disabled={userProfile.account_role !== "admin" && !(userProfile.license_type === 'TEAM' || userProfile.license_type === 'ENTERPRISE' || userProfile.can_manage_users === true)}/>
+                        <Button label='Change password' variant='text' color={!(userProfile.account_role !== "admin" && !canUserPerformActions) ? 'primary' : 'secondary'} onClick={() => setSelectedEmailToChangePassword(user.email ?? '')} 
+                        disabled={userProfile.account_role !== "admin" && !canUserPerformActions}/>
                     </td>
                 </tr>
                 )}
             </tbody>
         </table>
         <ConfirmDialog open={selectedEmailToDelete.length!==0} onClose={() => setSelectedEmailToDelete('')} onConfirm={deleteDqoCloudUser} message={`Are you sure you want to delete ${selectedEmailToDelete} user?`}/>
-        <ChangeUserPasswordDialog open={selectedEmailToChangePassword.length!==0} onClose={() => setSelectedEmailToChangePassword('')} handleSubmit={changeDqoCloudUserPassword}  />
+        <ChangeUserPasswordDialog open={selectedEmailToChangePassword.length!==0} onClose={() => setSelectedEmailToChangePassword('')} handleSubmit={userProfile.user !== selectedEmailToChangePassword ? changeDqoCloudUserPassword : changePrincipalPassword}  />
     </DefinitionLayout>
   )
 }

mkdocs.yml

@@ -89,6 +89,7 @@ nav:
       - Incidents and notifications: "working-with-dqo/incidents-and-notifications/incidents.md"
       - Set up data grouping: "working-with-dqo/set-up-data-grouping/set-up-data-grouping.md"
       - Compare tables: "working-with-dqo/table-comparison/table-comparison.md"
+      - User and access management: "working-with-dqo/access-management/access-management.md"
       - Working with DQOps Shell: "working-with-dqo/working-with-dqo-shell/working-with-dqo-shell.md"
   - Integrations:
       - "integrations/index.md"