1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00

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)
This commit is contained in:
Nuno Góis 2024-01-16 08:43:14 +00:00 committed by GitHub
parent 9d370ad85d
commit 3b5b1ec020
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 86 additions and 5 deletions

View File

@ -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;

View File

@ -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,
},
],

View File

@ -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>
);
};

View File

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