db73879918
* fix: Logic error in toast fix: Remove useless component * fix: Logout not clearing all stores * Add icons to notification settings * Add eslint rule to enforce spaced comment * Add eslint rule for arrow-body-style * Add eslint rule to enforce self-closing components * Add menu to api key settings Fix: Deleting webhook subscription does not remove from UI Split webhook subscriptions into active and inactive Styling updates
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { EditIcon, TrashIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import styled from "styled-components";
|
|
import WebhookSubscription from "~/models/WebhookSubscription";
|
|
import Badge from "~/components/Badge";
|
|
import Button from "~/components/Button";
|
|
import ListItem from "~/components/List/Item";
|
|
import Modal from "~/components/Modal";
|
|
import useBoolean from "~/hooks/useBoolean";
|
|
import useStores from "~/hooks/useStores";
|
|
import WebhookSubscriptionRevokeDialog from "./WebhookSubscriptionDeleteDialog";
|
|
import WebhookSubscriptionEdit from "./WebhookSubscriptionEdit";
|
|
|
|
type Props = {
|
|
webhook: WebhookSubscription;
|
|
};
|
|
|
|
const WebhookSubscriptionListItem = ({ webhook }: Props) => {
|
|
const { t } = useTranslation();
|
|
const { dialogs } = useStores();
|
|
const [
|
|
editModalOpen,
|
|
handleEditModalOpen,
|
|
handleEditModalClose,
|
|
] = useBoolean();
|
|
|
|
const showDeletionConfirmation = React.useCallback(() => {
|
|
dialogs.openModal({
|
|
title: t("Delete webhook"),
|
|
isCentered: true,
|
|
content: (
|
|
<WebhookSubscriptionRevokeDialog
|
|
onSubmit={dialogs.closeAllModals}
|
|
webhook={webhook}
|
|
/>
|
|
),
|
|
});
|
|
}, [t, dialogs, webhook]);
|
|
|
|
return (
|
|
<ListItem
|
|
key={webhook.id}
|
|
title={
|
|
<>
|
|
{webhook.name}
|
|
{!webhook.enabled && (
|
|
<StyledBadge yellow>{t("Disabled")}</StyledBadge>
|
|
)}
|
|
</>
|
|
}
|
|
subtitle={
|
|
<>
|
|
{t("Subscribed events")}: <code>{webhook.events.join(", ")}</code>
|
|
</>
|
|
}
|
|
actions={
|
|
<>
|
|
<Button
|
|
onClick={showDeletionConfirmation}
|
|
icon={<TrashIcon />}
|
|
neutral
|
|
>
|
|
{t("Delete")}
|
|
</Button>
|
|
<Button icon={<EditIcon />} onClick={handleEditModalOpen} neutral>
|
|
{t("Edit")}
|
|
</Button>
|
|
<Modal
|
|
title={t("Edit webhook")}
|
|
onRequestClose={handleEditModalClose}
|
|
isOpen={editModalOpen}
|
|
>
|
|
<WebhookSubscriptionEdit
|
|
onSubmit={handleEditModalClose}
|
|
webhookSubscription={webhook}
|
|
/>
|
|
</Modal>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const StyledBadge = styled(Badge)`
|
|
position: absolute;
|
|
`;
|
|
|
|
export default WebhookSubscriptionListItem;
|