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:
Lakshay saini
2024-01-25 22:09:17 +05:30
committed by GitHub
parent 6004969096
commit e0405edb38
22 changed files with 402 additions and 193 deletions

View File

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

View File

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

View File

@ -0,0 +1,5 @@
export type WebhookFieldItem = {
id: string;
targetUrl: string;
operation: string;
};