feat: added webhook list section and updated api key section (#3567)
* feat: added webhook list section and updated api key ui * Fix style * Fix webhook style * Update setting path * Add soon pill on not developped features * Code review returns --------- Co-authored-by: Lakshay saini <lakshay.saini@finmo.net> Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
export const StyledApisFieldTableRow = styled(TableRow)`
|
||||
grid-template-columns: 180px 148px 148px 36px;
|
||||
grid-template-columns: 312px 132px 68px;
|
||||
`;
|
||||
|
||||
const StyledNameTableCell = styled(TableCell)`
|
||||
@ -36,7 +36,6 @@ export const SettingsApiKeysFieldItemTableRow = ({
|
||||
return (
|
||||
<StyledApisFieldTableRow onClick={() => onClick()}>
|
||||
<StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
|
||||
<TableCell color={theme.font.color.tertiary}>Internal</TableCell>{' '}
|
||||
<TableCell
|
||||
color={
|
||||
fieldItem.expiration === 'Expired'
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { WebhookFieldItem } from '@/settings/developers/types/WebhookFieldItem';
|
||||
import { IconChevronRight } from '@/ui/display/icon';
|
||||
import { SoonPill } from '@/ui/display/pill/components/SoonPill';
|
||||
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
export const StyledApisFieldTableRow = styled(TableRow)`
|
||||
grid-template-columns: 444px 68px;
|
||||
`;
|
||||
|
||||
const StyledIconTableCell = styled(TableCell)`
|
||||
justify-content: center;
|
||||
padding-right: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const StyledUrlTableCell = styled(TableCell)`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledIconChevronRight = styled(IconChevronRight)`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
`;
|
||||
|
||||
export const SettingsDevelopersWebhookTableRow = ({
|
||||
fieldItem,
|
||||
onClick,
|
||||
}: {
|
||||
fieldItem: WebhookFieldItem;
|
||||
onClick: () => void;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const soon = true; // Temporarily disabled while awaiting the development of the feature.
|
||||
const onClickAction = !soon ? () => onClick() : undefined;
|
||||
|
||||
return (
|
||||
<StyledApisFieldTableRow onClick={onClickAction}>
|
||||
<StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
|
||||
<StyledIconTableCell>
|
||||
<StyledIconChevronRight
|
||||
size={theme.icon.size.md}
|
||||
stroke={theme.icon.stroke.sm}
|
||||
/>
|
||||
{soon && <SoonPill />}
|
||||
</StyledIconTableCell>
|
||||
</StyledApisFieldTableRow>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
export type WebhookFieldItem = {
|
||||
id: string;
|
||||
targetUrl: string;
|
||||
operation: string;
|
||||
};
|
||||
Reference in New Issue
Block a user