From 74bf117fe36745ad56ad6155270e387aa9084c4e Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Fri, 11 Aug 2023 19:29:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20tooltip=20for=20promotion=20a?=
 =?UTF-8?q?nd=20demotion=20of=20users?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/manage/users.json |  5 +++
 src/pages/manage/users/index.tsx    | 70 ++++++++++++++++-------------
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/public/locales/en/manage/users.json b/public/locales/en/manage/users.json
index 557f45d5f..576f072a6 100644
--- a/public/locales/en/manage/users.json
+++ b/public/locales/en/manage/users.json
@@ -10,6 +10,11 @@
             "user": "User"
         }
     },
+    "tooltips": {
+        "deleteUser": "Delete user",
+        "demoteAdmin": "Demote administrator",
+        "promoteToAdmin": "Promote to administrator"
+    },
     "modals": {
         "delete": {
             "title": "Delete user {{name}}",
diff --git a/src/pages/manage/users/index.tsx b/src/pages/manage/users/index.tsx
index 2b0fa77e7..fd5940b94 100644
--- a/src/pages/manage/users/index.tsx
+++ b/src/pages/manage/users/index.tsx
@@ -11,6 +11,7 @@ import {
   Table,
   Text,
   Title,
+  Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconPlus, IconTrash, IconUserDown, IconUserUp } from '@tabler/icons-react';
@@ -88,52 +89,59 @@ const ManageUsersPage = () => {
                       <Group spacing="xs">
                         <Avatar size="sm" />
                         <Text>{user.name}</Text>
-                        {user.isOwner ? (
+                        {user.isOwner && (
                           <Badge color="pink" size="sm">
                             Owner
                           </Badge>
-                        ) : user.isAdmin ? (
+                        )}
+                        {user.isAdmin && (
                           <Badge color="red" size="sm">
                             Admin
                           </Badge>
-                        ) : null}
+                        )}
                       </Group>
                       <Group>
                         {user.isAdmin ? (
+                          <Tooltip label={t('tooltips.demoteAdmin')} withinPortal withArrow>
+                            <ActionIcon
+                              disabled={user.id === sessionData?.user?.id || user.isOwner}
+                              onClick={() => {
+                                openRoleChangeModal({
+                                  ...user,
+                                  type: 'demote',
+                                });
+                              }}
+                            >
+                              <IconUserDown size="1rem" />
+                            </ActionIcon>
+                          </Tooltip>
+                        ) : (
+                          <Tooltip label={t('tooltips.promoteToAdmin')} withinPortal withArrow>
+                            <ActionIcon
+                              onClick={() => {
+                                openRoleChangeModal({
+                                  ...user,
+                                  type: 'promote',
+                                });
+                              }}
+                            >
+                              <IconUserUp size="1rem" />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+
+                        <Tooltip label={t('tooltips.deleteUser')} withinPortal withArrow>
                           <ActionIcon
                             disabled={user.id === sessionData?.user?.id || user.isOwner}
                             onClick={() => {
-                              openRoleChangeModal({
-                                ...user,
-                                type: 'demote',
-                              });
+                              openDeleteUserModal(user);
                             }}
+                            color="red"
+                            variant="light"
                           >
-                            <IconUserDown size="1rem" />
+                            <IconTrash size="1rem" />
                           </ActionIcon>
-                        ) : (
-                          <ActionIcon
-                            onClick={() => {
-                              openRoleChangeModal({
-                                ...user,
-                                type: 'promote',
-                              });
-                            }}
-                          >
-                            <IconUserUp size="1rem" />
-                          </ActionIcon>
-                        )}
-
-                        <ActionIcon
-                          disabled={user.id === sessionData?.user?.id || user.isOwner}
-                          onClick={() => {
-                            openDeleteUserModal(user);
-                          }}
-                          color="red"
-                          variant="light"
-                        >
-                          <IconTrash size="1rem" />
-                        </ActionIcon>
+                        </Tooltip>
                       </Group>
                     </Group>
                   </td>