fix: SA UI/UX improvements and fixes (#2875)

https://linear.app/unleash/issue/2-559/check-if-uiux-and-overall-design-looks-correct

We're happy with the overall design and behaviour for a first iteration,
only identified these small changes for now.


![image](https://user-images.githubusercontent.com/14320932/211798037-7b6a74c5-fbc9-434a-a848-9efd00094a9c.png)


![image](https://user-images.githubusercontent.com/14320932/211798093-44db9330-f767-4790-964a-e94f8cf3ed87.png)


![image](https://user-images.githubusercontent.com/14320932/211798148-9a1ddb5a-5564-47f4-aeed-2857ac186896.png)

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountDeleteDialog/ServiceAccountDeleteDialog.tsx

@@ -25,6 +25,13 @@ export const ServiceAccountDeleteDialog = ({
     setOpen,
     onConfirm,
 }: IServiceAccountDeleteDialogProps) => {
+    const deleteMessage = (
+        <>
+            You are about to delete service account:{' '}
+            <strong>{serviceAccount?.name}</strong>
+        </>
+    );
+
     return (
         <Dialogue
             title="Delete service account?"
@@ -36,15 +43,16 @@ export const ServiceAccountDeleteDialog = ({
                 setOpen(false);
             }}
         >
-            <Alert severity="error">
-                Deleting this service account may break any existing
-                implementations currently using it.
-            </Alert>
             <ConditionallyRender
                 condition={Boolean(serviceAccount?.tokens.length)}
                 show={
                     <>
-                        <StyledLabel>Service account tokens</StyledLabel>
+                        <Alert severity="error">
+                            Deleting this service account may break any existing
+                            implementations currently using it.
+                        </Alert>
+                        <StyledLabel>{deleteMessage}</StyledLabel>
+                        <StyledLabel>Service account tokens:</StyledLabel>
                         <StyledTableContainer>
                             <ServiceAccountTokens
                                 serviceAccount={serviceAccount!}
@@ -53,11 +61,8 @@ export const ServiceAccountDeleteDialog = ({
                         </StyledTableContainer>
                     </>
                 }
+                elseShow={<p>{deleteMessage}</p>}
             />
-            <StyledLabel>
-                You are about to delete service account:{' '}
-                <strong>{serviceAccount?.name}</strong>
-            </StyledLabel>
         </Dialogue>
     );
 };

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokensCell/ServiceAccountTokensCell.tsx

@@ -5,6 +5,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { IServiceAccount } from 'interfaces/service-account';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 
 const StyledItem = styled(Typography)(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -17,27 +18,27 @@ const StyledLink = styled(Link, {
 }));
 
 interface IServiceAccountTokensCellProps {
-    row: {
+    serviceAccount: IServiceAccount;
-        original: IServiceAccount;
-    };
     value: string;
+    onCreateToken: () => void;
 }
 
 export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
-    row,
+    serviceAccount,
     value,
+    onCreateToken,
 }) => {
     const { searchQuery } = useSearchHighlightContext();
 
-    if (!row.original.tokens || row.original.tokens.length === 0)
+    if (!serviceAccount.tokens || serviceAccount.tokens.length === 0)
-        return <TextCell />;
+        return <LinkCell title="Create token" onClick={onCreateToken} />;
 
     return (
         <TextCell>
             <HtmlTooltip
                 title={
                     <>
-                        {row.original.tokens?.map(({ id, description }) => (
+                        {serviceAccount.tokens?.map(({ id, description }) => (
                             <StyledItem key={id}>
                                 <Highlighter search={searchQuery}>
                                     {description}
@@ -54,9 +55,9 @@ export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
                         value.toLowerCase().includes(searchQuery.toLowerCase())
                     }
                 >
-                    {row.original.tokens?.length === 1
+                    {serviceAccount.tokens?.length === 1
                         ? '1 token'
-                        : `${row.original.tokens?.length} tokens`}
+                        : `${serviceAccount.tokens?.length} tokens`}
                 </StyledLink>
             </HtmlTooltip>
         </TextCell>

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -65,9 +65,9 @@ export const ServiceAccountsTable = () => {
             {
                 Header: 'Avatar',
                 accessor: 'imageUrl',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: ({ row: { original: serviceAccount } }: any) => (
                     <TextCell>
-                        <UserAvatar user={user} />
+                        <UserAvatar user={serviceAccount} />
                     </TextCell>
                 ),
                 disableSortBy: true,
@@ -78,8 +78,11 @@ export const ServiceAccountsTable = () => {
                 Header: 'Name',
                 accessor: (row: any) => row.name || '',
                 minWidth: 200,
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: ({ row: { original: serviceAccount } }: any) => (
-                    <HighlightCell value={user.name} subtitle={user.username} />
+                    <HighlightCell
+                        value={serviceAccount.name}
+                        subtitle={serviceAccount.username}
+                    />
                 ),
                 searchable: true,
             },
@@ -98,7 +101,22 @@ export const ServiceAccountsTable = () => {
                     row.tokens
                         ?.map(({ description }) => description)
                         .join('\n') || '',
-                Cell: ServiceAccountTokensCell,
+                Cell: ({
+                    row: { original: serviceAccount },
+                    value,
+                }: {
+                    row: { original: IServiceAccount };
+                    value: string;
+                }) => (
+                    <ServiceAccountTokensCell
+                        serviceAccount={serviceAccount}
+                        value={value}
+                        onCreateToken={() => {
+                            setSelectedServiceAccount(serviceAccount);
+                            setModalOpen(true);
+                        }}
+                    />
+                ),
                 searchable: true,
             },
             {
@@ -126,14 +144,14 @@ export const ServiceAccountsTable = () => {
                 Header: 'Actions',
                 id: 'Actions',
                 align: 'center',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: ({ row: { original: serviceAccount } }: any) => (
                     <ServiceAccountsActionsCell
                         onEdit={() => {
-                            setSelectedServiceAccount(user);
+                            setSelectedServiceAccount(serviceAccount);
                             setModalOpen(true);
                         }}
                         onDelete={() => {
-                            setSelectedServiceAccount(user);
+                            setSelectedServiceAccount(serviceAccount);
                             setDeleteOpen(true);
                         }}
                     />