3272 add a page to create and edit webhook (#3859)
* Reorganize files * Add new webhook form * Reorganize files * Add Webhook update * Fix paths * Code review returns
This commit is contained in:
martmull
@ -0,0 +1,73 @@
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
|
||||
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { IconSettings, IconTrash } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Button } from '@/ui/input/button/components/Button';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
|
||||
export const SettingsDevelopersWebhooksDetail = () => {
|
||||
const navigate = useNavigate();
|
||||
const { webhookId = '' } = useParams();
|
||||
const { record: webhookData } = useFindOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
objectRecordId: webhookId,
|
||||
});
|
||||
const { deleteOneRecord: deleteOneWebhook } = useDeleteOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
const deleteWebhook = () => {
|
||||
deleteOneWebhook(webhookId);
|
||||
navigate('/settings/developers');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{webhookData?.targetUrl && (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'Developers', href: '/settings/developers' },
|
||||
{ children: 'Webhook' },
|
||||
]}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Endpoint URL"
|
||||
description="We will send POST requests to this endpoint for every new event"
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="URL"
|
||||
value={webhookData.targetUrl}
|
||||
disabled
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Danger zone"
|
||||
description="Delete this integration"
|
||||
/>
|
||||
<Button
|
||||
accent="danger"
|
||||
variant="secondary"
|
||||
title="Disable"
|
||||
Icon={IconTrash}
|
||||
onClick={() => deleteWebhook()}
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,76 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
|
||||
import { WebhookFieldItem } from '@/settings/developers/types/webhook/WebhookFieldItem';
|
||||
import { IconPlus } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Button } from '@/ui/input/button/components/Button';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableBody } from '@/ui/layout/table/components/TableBody';
|
||||
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
grid-template-columns: 444px 68px;
|
||||
`;
|
||||
|
||||
const StyledTableBody = styled(TableBody)`
|
||||
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
`;
|
||||
|
||||
export const SettingsDevelopersWebhooks = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { records: webhooks } = useFindManyRecords({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Webhooks"
|
||||
description="Establish Webhook endpoints for notifications on asynchronous events."
|
||||
/>
|
||||
<Table>
|
||||
<StyledTableRow>
|
||||
<TableHeader>Url</TableHeader>
|
||||
<TableHeader></TableHeader>
|
||||
</StyledTableRow>
|
||||
{!!webhooks.length && (
|
||||
<StyledTableBody>
|
||||
{webhooks.map((fieldItem) => (
|
||||
<SettingsDevelopersWebhookTableRow
|
||||
key={fieldItem.id}
|
||||
fieldItem={fieldItem as WebhookFieldItem}
|
||||
onClick={() => {
|
||||
navigate(`/settings/developers/webhooks/${fieldItem.id}`);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</StyledTableBody>
|
||||
)}
|
||||
</Table>
|
||||
<StyledDiv>
|
||||
<Button
|
||||
Icon={IconPlus}
|
||||
title="Create Webhook"
|
||||
size="small"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
navigate('/settings/developers/webhooks/new');
|
||||
}}
|
||||
/>
|
||||
</StyledDiv>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,75 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
|
||||
import { IconSettings } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
|
||||
export const SettingsDevelopersWebhooksNew = () => {
|
||||
const navigate = useNavigate();
|
||||
const [formValues, setFormValues] = useState<{
|
||||
targetUrl: string;
|
||||
operation: string;
|
||||
}>({
|
||||
targetUrl: '',
|
||||
operation: '*.*',
|
||||
});
|
||||
const { createOneRecord: createOneWebhook } = useCreateOneRecord<Webhook>({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
const handleSave = async () => {
|
||||
const newWebhook = await createOneWebhook?.(formValues);
|
||||
if (!newWebhook) {
|
||||
return;
|
||||
}
|
||||
navigate(`/settings/developers/webhooks/${newWebhook.id}`);
|
||||
};
|
||||
const canSave = !!formValues.targetUrl && createOneWebhook;
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'Developers', href: '/settings/developers' },
|
||||
{ children: 'New webhook' },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() => {
|
||||
navigate('/settings/developers');
|
||||
}}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Endpoint URL"
|
||||
description="We will send POST requests to this endpoint for every new event"
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="URL"
|
||||
value={formValues.targetUrl}
|
||||
onChange={(value) => {
|
||||
setFormValues((prevState) => ({
|
||||
...prevState,
|
||||
targetUrl: value,
|
||||
}));
|
||||
}}
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user