74 lines
2.7 KiB
JavaScript
74 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Form, Button, Input } from 'UI';
|
|
import styles from './webhookForm.module.css';
|
|
import { useStore } from 'App/mstore'
|
|
import { observer } from 'mobx-react-lite'
|
|
|
|
function WebhookForm(props) {
|
|
const { settingsStore } = useStore()
|
|
const { webhookInst: webhook, hooksLoading: loading, saveWebhook, editWebhook } = settingsStore
|
|
const write = ({ target: { value, name } }) => editWebhook({ [name]: value });
|
|
|
|
const save = () => {
|
|
saveWebhook(webhook).then(() => {
|
|
props.onClose();
|
|
});
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
|
|
<h3 className="p-5 text-2xl">{webhook.exists() ? 'Update' : 'Add'} Webhook</h3>
|
|
<Form className={styles.wrapper}>
|
|
<Form.Field>
|
|
<label>{'Name'}</label>
|
|
<Input
|
|
name="name"
|
|
value={webhook.name}
|
|
onChange={write}
|
|
placeholder="Name"
|
|
/>
|
|
</Form.Field>
|
|
|
|
<Form.Field>
|
|
<label>{'Endpoint'}</label>
|
|
<Input
|
|
name="endpoint"
|
|
value={webhook.endpoint}
|
|
onChange={write}
|
|
placeholder="Endpoint"
|
|
/>
|
|
</Form.Field>
|
|
|
|
<Form.Field>
|
|
<label>{'Auth Header (optional)'}</label>
|
|
<Input
|
|
name="authHeader"
|
|
value={webhook.authHeader}
|
|
onChange={write}
|
|
placeholder="Auth Header"
|
|
/>
|
|
</Form.Field>
|
|
|
|
<div className="flex justify-between">
|
|
<div className="flex items-center">
|
|
<Button
|
|
onClick={save}
|
|
disabled={!webhook.validate()}
|
|
loading={loading}
|
|
variant="primary"
|
|
className="float-left mr-2"
|
|
>
|
|
{webhook.exists() ? 'Update' : 'Add'}
|
|
</Button>
|
|
{webhook.exists() && <Button onClick={props.onClose}>{'Cancel'}</Button>}
|
|
</div>
|
|
{webhook.exists() &&
|
|
<Button icon="trash" variant="text" onClick={() => props.onDelete(webhook.webhookId)}></Button>}
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(WebhookForm);
|