From e0be7d29ea3708712242a5aaa9f013acc16afbb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 5 Apr 2024 11:31:16 +0200
Subject: [PATCH] Users and ServiceAccount table: UX consistency updates
 (#85624)

UsersTable: UX concistency updates
---
 .../app/features/admin/Users/UsersTable.tsx   | 24 ++++++++++++++-----
 .../serviceaccounts/ServiceAccountTable.tsx   |  6 ++---
 public/app/features/teams/TeamList.tsx        | 18 +++++++-------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/public/app/features/admin/Users/UsersTable.tsx b/public/app/features/admin/Users/UsersTable.tsx
index fd7cdbb6813..8043c6e061c 100644
--- a/public/app/features/admin/Users/UsersTable.tsx
+++ b/public/app/features/admin/Users/UsersTable.tsx
@@ -8,10 +8,12 @@ import {
   FetchDataFunc,
   Icon,
   InteractiveTable,
+  LinkButton,
   Pagination,
   Stack,
   Tag,
   Text,
+  TextLink,
   Tooltip,
 } from '@grafana/ui';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
@@ -40,6 +42,7 @@ export const UsersTable = ({
 }: UsersTableProps) => {
   const showLicensedRole = useMemo(() => users.some((user) => user.licensedRole), [users]);
   const showBelongsTo = useMemo(() => users.some((user) => user.orgs), [users]);
+
   const columns: Array<Column<UserDTO>> = useMemo(
     () => [
       {
@@ -50,7 +53,13 @@ export const UsersTable = ({
       {
         id: 'login',
         header: 'Login',
-        cell: ({ cell: { value } }: Cell<'login'>) => value,
+        cell: ({ row: { original } }: Cell<'login'>) => {
+          return (
+            <TextLink color="primary" inline={false} href={`admin/users/edit/${original.id}`} title="Edit user">
+              {original.login}
+            </TextLink>
+          );
+        },
         sortType: 'string',
       },
       {
@@ -138,11 +147,14 @@ export const UsersTable = ({
         header: '',
         cell: ({ row: { original } }: Cell) => {
           return (
-            <a href={`admin/users/edit/${original.id}`} aria-label={`Edit team ${original.name}`}>
-              <Tooltip content={'Edit user'}>
-                <Icon name={'pen'} />
-              </Tooltip>
-            </a>
+            <LinkButton
+              variant="secondary"
+              size="sm"
+              icon="pen"
+              href={`admin/users/edit/${original.id}`}
+              aria-label={`Edit user ${original.name}`}
+              tooltip={'Edit user'}
+            />
           );
         },
       },
diff --git a/public/app/features/serviceaccounts/ServiceAccountTable.tsx b/public/app/features/serviceaccounts/ServiceAccountTable.tsx
index dcb8aeec5ee..1c9b45a32dc 100644
--- a/public/app/features/serviceaccounts/ServiceAccountTable.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountTable.tsx
@@ -133,7 +133,7 @@ const getCellContent = (
       );
     case 'id':
       return (
-        <TextLink href={href} aria-label={ariaLabel} color="secondary">
+        <TextLink href={href} aria-label={ariaLabel} color="secondary" inline={false}>
           {original.login}
         </TextLink>
       );
@@ -141,14 +141,14 @@ const getCellContent = (
       return (
         <Stack alignItems="center">
           <Icon name="key-skeleton-alt" />
-          <TextLink href={href} aria-label={ariaLabel} color="primary">
+          <TextLink href={href} aria-label={ariaLabel} color="primary" inline={false}>
             {value || 'No tokens'}
           </TextLink>
         </Stack>
       );
     default:
       return (
-        <TextLink href={href} aria-label={ariaLabel} color="primary">
+        <TextLink href={href} aria-label={ariaLabel} color="primary" inline={false}>
           {value}
         </TextLink>
       );
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 2b53135a39d..43bc88375a6 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -17,7 +17,6 @@ import {
   Pagination,
   Stack,
   TextLink,
-  Tooltip,
   useStyles2,
 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
@@ -181,15 +180,14 @@ export const TeamList = ({
           return (
             <Stack direction="row" justifyContent="flex-end" gap={2}>
               {canReadTeam && (
-                <Tooltip content={'Edit team'}>
-                  <LinkButton
-                    href={`org/teams/edit/${original.id}`}
-                    aria-label={`Edit team ${original.name}`}
-                    icon="pen"
-                    size="sm"
-                    variant="secondary"
-                  />
-                </Tooltip>
+                <LinkButton
+                  href={`org/teams/edit/${original.id}`}
+                  aria-label={`Edit team ${original.name}`}
+                  icon="pen"
+                  size="sm"
+                  variant="secondary"
+                  tooltip={'Edit team'}
+                />
               )}
               <DeleteButton
                 aria-label={`Delete team ${original.name}`}