jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix webhooks update

Browse source
This commit is contained in:
nick-delirium 2023-01-27 12:42:14 +01:00
parent d29ceb0926
commit e50ca4d386
3 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Client/Webhooks/ListItem.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Button } from 'UI'; import { Button } from 'UI';
const ListItem = ({ webhook, onEdit, onDelete }) => { const ListItem = ({ webhook, onEdit }) => {
return ( return (
<div className="border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer" onClick={onEdit}> <div className="border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer" onClick={onEdit}>
<div> <div>

17
frontend/app/components/Client/Webhooks/Webhooks.js → frontend/app/components/Client/Webhooks/Webhooks.tsx
View file

@ -11,23 +11,24 @@ import { toast } from 'react-toastify';
import { useModal } from 'App/components/Modal'; import { useModal } from 'App/components/Modal';
import { useStore } from 'App/mstore'; import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite' import { observer } from 'mobx-react-lite'
import { IWebhook } from 'Types/webhook';
function Webhooks() { function Webhooks() {
const { settingsStore } = useStore() const { settingsStore } = useStore()
const { webhooks, hooksLoading: loading } = settingsStore; const { webhooks, hooksLoading: loading } = settingsStore;
const { showModal, hideModal } = useModal(); const { showModal, hideModal } = useModal();
const noSlackWebhooks = webhooks.filter((hook) => hook.type === 'webhook'); const customWebhooks = webhooks.filter((hook) => hook.type === 'webhook');
useEffect(() => { useEffect(() => {
void settingsStore.fetchWebhooks(); void settingsStore.fetchWebhooks();
}, []); }, []);
const init = (v) => { const init = (webhookInst?: Partial<IWebhook>) => {
settingsStore.initWebhook(v); settingsStore.initWebhook(webhookInst);
showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />); showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />, { right: true });
}; };
const removeWebhook = async (id) => { const removeWebhook = async (id: string) => {
if ( if (
await confirm({ await confirm({
header: 'Confirm', header: 'Confirm',
@ -63,11 +64,11 @@ function Webhooks() {
</div> </div>
} }
size="small" size="small"
show={noSlackWebhooks.length === 0} show={customWebhooks.length === 0}
> >
<div className="cursor-pointer"> <div className="cursor-pointer">
{noSlackWebhooks.map((webhook) => ( {customWebhooks.map((webhook) => (
<ListItem key={webhook.key} webhook={webhook} onEdit={() => init(webhook)} /> <ListItem key={webhook.webhookId} webhook={webhook} onEdit={() => init(webhook)} />
))} ))}
</div> </div>
</NoContent> </NoContent>

3
frontend/app/mstore/settingsStore.ts
View file

@ -62,7 +62,7 @@ export default class SettingsStore {
}) })
} }
initWebhook = (inst: Partial<IWebhook> | Webhook) => { initWebhook = (inst?: Partial<IWebhook> | Webhook) => {
this.webhookInst = inst instanceof Webhook ? inst : new Webhook(inst) this.webhookInst = inst instanceof Webhook ? inst : new Webhook(inst)
} }
@ -71,6 +71,7 @@ export default class SettingsStore {
return webhookService.saveWebhook(inst) return webhookService.saveWebhook(inst)
.then(data => { .then(data => {
this.webhookInst = new Webhook(data) this.webhookInst = new Webhook(data)
this.webhooks = [...this.webhooks, this.webhookInst]
this.hooksLoading = false this.hooksLoading = false
}) })
} }