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. 
This commit is contained in:
parent
9d370ad85d
commit
3b5b1ec020
@ -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;
|
||||
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
@ -5,6 +5,7 @@ export interface IIncomingWebhook {
|
||||
createdAt: string;
|
||||
createdByUserId: number;
|
||||
description: string;
|
||||
tokens: IIncomingWebhookToken[];
|
||||
}
|
||||
|
||||
export interface IIncomingWebhookToken {
|
||||
|
Loading…
Reference in New Issue
Block a user