TeamsTable: Improve user experiance with links (#84973)

go.work.sum

@@ -836,4 +836,4 @@ rsc.io/binaryregexp v0.2.0 h1:HfqmD5MEmC0zvwBuF187nq9mdnXjXsSivRiXN7SmRkE=
 rsc.io/pdf v0.1.1 h1:k1MczvYDUvJBe93bYd7wrZLLUEcLZAuF824/I4e5Xr4=
 rsc.io/quote/v3 v3.1.0 h1:9JKUTTIUgS6kzR9mK1YuGKv6Nl+DijDNIc0ghT58FaY=
 rsc.io/sampler v1.3.0 h1:7uVkIFmeBqHfdjD+gZwtXXI+RODJ2Wc4O7MPEh/QiW4=
-sourcegraph.com/sourcegraph/appdash v0.0.0-20190731080439-ebfcffb1b5c0 h1:ucqkfpjg9WzSUubAO62csmucvxl4/JeW3F4I4909XkM=
+sourcegraph.com/sourcegraph/appdash v0.0.0-20190731080439-ebfcffb1b5c0 h1:ucqkfpjg9WzSUubAO62csmucvxl4/JeW3F4I4909XkM=

public/app/features/teams/TeamList.tsx

@@ -10,12 +10,12 @@ import {
   Column,
   DeleteButton,
   FilterInput,
-  Icon,
   InlineField,
   InteractiveTable,
   LinkButton,
   Pagination,
   Stack,
+  TextLink,
   Tooltip,
   useStyles2,
 } from '@grafana/ui';
@@ -92,11 +92,21 @@ export const TeamList = ({
       {
         id: 'name',
         header: 'Name',
-        cell: ({ cell: { value } }: Cell<'name'>) => {
+        cell: ({ cell: { value }, row: { original } }: Cell<'name'>) => {
           if (!hasFetched) {
             return <Skeleton width={100} />;
           }
-          return value;
+
+          const canReadTeam = contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsRead, original);
+          if (!canReadTeam) {
+            return value;
+          }
+
+          return (
+            <TextLink color="primary" inline={false} href={`/org/teams/edit/${original.id}`} title="Edit team">
+              {value}
+            </TextLink>
+          );
         },
         sortType: 'string',
       },
@@ -168,12 +178,16 @@ export const TeamList = ({
           const canReadTeam = contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsRead, original);
           const canDelete = contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsDelete, original);
           return (
-            <Stack direction="row" justifyContent="flex-end">
+            <Stack direction="row" justifyContent="flex-end" gap={2}>
               {canReadTeam && (
                 <Tooltip content={'Edit team'}>
-                  <a href={`org/teams/edit/${original.id}`} aria-label={`Edit team ${original.name}`}>
-                    <Icon name={'pen'} />
-                  </a>
+                  <LinkButton
+                    href={`org/teams/edit/${original.id}`}
+                    aria-label={`Edit team ${original.name}`}
+                    icon="pen"
+                    size="sm"
+                    variant="secondary"
+                  />
                 </Tooltip>
               )}
               <DeleteButton