chore: add tokens column to incoming webhooks table (#5903)

https://linear.app/unleash/issue/2-1827/add-remaining-columns-to-the-incoming-webhooks-table

Adds the "tokens" column to the incoming webhooks table.

Also includes some slight adjustments to the table, including a fix to
center the actions button.


![image](https://github.com/Unleash/unleash/assets/14320932/2ca63b17-c20e-41d0-9065-db8bcad33c24)

frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksActionsCell.tsx

@@ -18,11 +18,10 @@ import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { defaultBorderRadius } from 'themes/themeStyles';
 
-const StyledBoxCell = styled(Box)(({ theme }) => ({
+const StyledBoxCell = styled(Box)({
     display: 'flex',
     justifyContent: 'center',
-    paddingRight: theme.spacing(2),
+});
-}));
 
 interface IIncomingWebhooksActionsCellProps {
     incomingWebhookId: number;

frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTable.tsx

@@ -19,6 +19,7 @@ import { ToggleCell } from 'component/common/Table/cells/ToggleCell/ToggleCell';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import copy from 'copy-to-clipboard';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { IncomingWebhookTokensCell } from './IncomingWebhooksTokensCell';
 // import { IncomingWebhooksModal } from '../IncomingWebhooksModal/IncomingWebhooksModal';
 
 interface IIncomingWebhooksTableProps {
@@ -92,7 +93,7 @@ export const IncomingWebhooksTable = ({
                         subtitle={incomingWebhook.description}
                     />
                 ),
-                minWidth: 200,
+                width: 240,
             },
             {
                 Header: 'URL',
@@ -100,6 +101,30 @@ export const IncomingWebhooksTable = ({
                     `${uiConfig.unleashUrl}/api/incoming-webhook/${row.name}`,
                 minWidth: 200,
             },
+            {
+                id: 'tokens',
+                Header: 'Tokens',
+                accessor: (row: IIncomingWebhook) =>
+                    row.tokens?.map(({ name }) => name).join('\n') || '',
+                Cell: ({
+                    row: { original: incomingWebhook },
+                    value,
+                }: {
+                    row: { original: IIncomingWebhook };
+                    value: string;
+                }) => (
+                    <IncomingWebhookTokensCell
+                        incomingWebhook={incomingWebhook}
+                        value={value}
+                        onCreateToken={() => {
+                            setSelectedIncomingWebhook(incomingWebhook);
+                            setModalOpen(true);
+                        }}
+                    />
+                ),
+                searchable: true,
+                maxWidth: 100,
+            },
             {
                 Header: 'Created',
                 accessor: 'createdAt',
@@ -152,7 +177,7 @@ export const IncomingWebhooksTable = ({
                         }}
                     />
                 ),
-                width: 100,
+                width: 90,
                 disableSortBy: true,
             },
         ],

frontend/src/component/incomingWebhooks/IncomingWebhooksTable/IncomingWebhooksTokensCell.tsx

@@ -0,0 +1,56 @@
+import { styled, Typography } from '@mui/material';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
+import { Highlighter } from 'component/common/Highlighter/Highlighter';
+import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { IIncomingWebhook } from 'interfaces/incomingWebhook';
+import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+
+const StyledItem = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+}));
+
+interface IIncomingWebhookTokensCellProps {
+    incomingWebhook: IIncomingWebhook;
+    value: string;
+    onCreateToken?: () => void;
+}
+
+export const IncomingWebhookTokensCell = ({
+    incomingWebhook,
+    value,
+    onCreateToken,
+}: IIncomingWebhookTokensCellProps) => {
+    const { searchQuery } = useSearchHighlightContext();
+
+    if (!incomingWebhook.tokens || incomingWebhook.tokens.length === 0) {
+        if (!onCreateToken) return <TextCell>0 tokens</TextCell>;
+        else return <LinkCell title='Create token' onClick={onCreateToken} />;
+    }
+
+    return (
+        <TextCell>
+            <TooltipLink
+                tooltip={
+                    <>
+                        {incomingWebhook.tokens?.map(({ id, name }) => (
+                            <StyledItem key={id}>
+                                <Highlighter search={searchQuery}>
+                                    {name}
+                                </Highlighter>
+                            </StyledItem>
+                        ))}
+                    </>
+                }
+                highlighted={
+                    searchQuery.length > 0 &&
+                    value.toLowerCase().includes(searchQuery.toLowerCase())
+                }
+            >
+                {incomingWebhook.tokens?.length === 1
+                    ? '1 token'
+                    : `${incomingWebhook.tokens?.length} tokens`}
+            </TooltipLink>
+        </TextCell>
+    );
+};

frontend/src/interfaces/incomingWebhook.ts

@@ -5,6 +5,7 @@ export interface IIncomingWebhook {
     createdAt: string;
     createdByUserId: number;
     description: string;
+    tokens: IIncomingWebhookToken[];
 }
 
 export interface IIncomingWebhookToken {