yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move bulk of webhook logic to plugin (#4866)

Browse Source 
* Move bulk of webhook logic to plugin

* Re-enable cleanup task

* cron tasks
This commit is contained in:
Tom Moor
2023-02-12 19:28:11 -05:00
committed by GitHub
parent 7895ee207c
commit 60101c507a
30 changed files with 74 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/hooks/useSettingsConfig.ts
View File

@@ -10,7 +10,6 @@ import {
TeamIcon,
BeakerIcon,
BuildingBlocksIcon,
WebhooksIcon,
SettingsIcon,
ExportIcon,
ImportIcon,
@@ -32,7 +31,6 @@ import Security from "~/scenes/Settings/Security";
import SelfHosted from "~/scenes/Settings/SelfHosted";
import Shares from "~/scenes/Settings/Shares";
import Tokens from "~/scenes/Settings/Tokens";
import Webhooks from "~/scenes/Settings/Webhooks";
import Zapier from "~/scenes/Settings/Zapier";
import GoogleIcon from "~/components/Icons/GoogleIcon";
import ZapierIcon from "~/components/Icons/ZapierIcon";
@@ -172,14 +170,6 @@ const useSettingsConfig = () => {
icon: plugin.icon,
} as ConfigItem;
}),
Webhooks: {
name: t("Webhooks"),
path: "/settings/webhooks",
component: Webhooks,
enabled: can.createWebhookSubscription,
group: t("Integrations"),
icon: WebhooksIcon,
},
SelfHosted: {
name: t("Self Hosted"),
path: integrationSettingsPath("self-hosted"),

75
app/scenes/Settings/Webhooks.tsx
View File

@@ -1,75 +0,0 @@
import { observer } from "mobx-react";
import { WebhooksIcon } from "outline-icons";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import WebhookSubscription from "~/models/WebhookSubscription";
import { Action } from "~/components/Actions";
import Button from "~/components/Button";
import Heading from "~/components/Heading";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import Text from "~/components/Text";
import env from "~/env";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import usePolicy from "~/hooks/usePolicy";
import useStores from "~/hooks/useStores";
import WebhookSubscriptionListItem from "./components/WebhookSubscriptionListItem";
import WebhookSubscriptionNew from "./components/WebhookSubscriptionNew";
function Webhooks() {
const team = useCurrentTeam();
const { t } = useTranslation();
const { webhookSubscriptions } = useStores();
const [newModalOpen, handleNewModalOpen, handleNewModalClose] = useBoolean();
const can = usePolicy(team);
const appName = env.APP_NAME;
return (
<Scene
title={t("Webhooks")}
icon={<WebhooksIcon color="currentColor" />}
actions={
<>
{can.createWebhookSubscription && (
<Action>
<Button
type="submit"
value={`${t("New webhook")}…`}
onClick={handleNewModalOpen}
/>
</Action>
)}
</>
}
>
<Heading>{t("Webhooks")}</Heading>
<Text type="secondary">
<Trans>
Webhooks can be used to notify your application when events happen in{" "}
{{ appName }}. Events are sent as a https request with a JSON payload
in near real-time.
</Trans>
</Text>
<PaginatedList
fetch={webhookSubscriptions.fetchPage}
items={webhookSubscriptions.orderedData}
heading={<Subheading sticky>{t("Webhooks")}</Subheading>}
renderItem={(webhook: WebhookSubscription) => (
<WebhookSubscriptionListItem key={webhook.id} webhook={webhook} />
)}
/>
<Modal
title={t("Create a webhook")}
onRequestClose={handleNewModalClose}
isOpen={newModalOpen}
>
<WebhookSubscriptionNew onSubmit={handleNewModalClose} />
</Modal>
</Scene>
);
}
export default observer(Webhooks);

34
app/scenes/Settings/components/WebhookSubscriptionDeleteDialog.tsx
View File

@@ -1,34 +0,0 @@
import * as React from "react";
import { useTranslation } from "react-i18next";
import WebhookSubscription from "~/models/WebhookSubscription";
import ConfirmationDialog from "~/components/ConfirmationDialog";
type Props = {
webhook: WebhookSubscription;
onSubmit: () => void;
};
export default function WebhookSubscriptionRevokeDialog({
webhook,
onSubmit,
}: Props) {
const { t } = useTranslation();
const handleSubmit = async () => {
await webhook.delete();
onSubmit();
};
return (
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("Delete")}
savingText={`${t("Deleting")}…`}
danger
>
{t("Are you sure you want to delete the {{ name }} webhook?", {
name: webhook.name,
})}
</ConfirmationDialog>
);
}

57
app/scenes/Settings/components/WebhookSubscriptionEdit.tsx
View File

@@ -1,57 +0,0 @@
import * as React from "react";
import { useTranslation } from "react-i18next";
import WebhookSubscription from "~/models/WebhookSubscription";
import useToasts from "~/hooks/useToasts";
import WebhookSubscriptionForm from "./WebhookSubscriptionForm";
type Props = {
onSubmit: () => void;
webhookSubscription: WebhookSubscription;
};
interface FormData {
name: string;
url: string;
events: string[];
}
function WebhookSubscriptionEdit({ onSubmit, webhookSubscription }: Props) {
const { showToast } = useToasts();
const { t } = useTranslation();
const handleSubmit = React.useCallback(
async (data: FormData) => {
try {
const events = Array.isArray(data.events) ? data.events : [data.events];
const toSend = {
...data,
events,
};
await webhookSubscription.save(toSend);
showToast(
t("Webhook updated", {
type: "success",
})
);
onSubmit();
} catch (err) {
showToast(err.message, {
type: "error",
});
}
},
[t, showToast, onSubmit, webhookSubscription]
);
return (
<WebhookSubscriptionForm
handleSubmit={handleSubmit}
webhookSubscription={webhookSubscription}
/>
);
}
export default WebhookSubscriptionEdit;

298
app/scenes/Settings/components/WebhookSubscriptionForm.tsx
View File

@@ -1,298 +0,0 @@
import { isEqual, filter, includes } from "lodash";
import randomstring from "randomstring";
import * as React from "react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useTranslation, Trans } from "react-i18next";
import styled from "styled-components";
import WebhookSubscription from "~/models/WebhookSubscription";
import Button from "~/components/Button";
import Input from "~/components/Input";
import Text from "~/components/Text";
import useMobile from "~/hooks/useMobile";
const WEBHOOK_EVENTS = {
user: [
"users.create",
"users.signin",
"users.update",
"users.suspend",
"users.activate",
"users.delete",
"users.invite",
"users.promote",
"users.demote",
],
document: [
"documents.create",
"documents.publish",
"documents.unpublish",
"documents.delete",
"documents.permanent_delete",
"documents.archive",
"documents.unarchive",
"documents.restore",
"documents.move",
"documents.update",
"documents.title_change",
],
revision: ["revisions.create"],
fileOperation: [
"fileOperations.create",
"fileOperations.update",
"fileOperations.delete",
],
collection: [
"collections.create",
"collections.update",
"collections.delete",
"collections.add_user",
"collections.remove_user",
"collections.add_group",
"collections.remove_group",
"collections.move",
"collections.permission_changed",
],
group: [
"groups.create",
"groups.update",
"groups.delete",
"groups.add_user",
"groups.remove_user",
],
integration: ["integrations.create", "integrations.update"],
share: ["shares.create", "shares.update", "shares.revoke"],
team: ["teams.update"],
pin: ["pins.create", "pins.update", "pins.delete"],
webhookSubscription: [
"webhookSubscriptions.create",
"webhookSubscriptions.delete",
"webhookSubscriptions.update",
],
view: ["views.create"],
};
const EventCheckboxLabel = styled.label`
display: flex;
align-items: center;
font-size: 15px;
padding: 0.2em 0;
`;
const GroupEventCheckboxLabel = styled(EventCheckboxLabel)`
font-weight: 500;
font-size: 1.2em;
`;
const AllEventCheckboxLabel = styled(GroupEventCheckboxLabel)`
font-size: 1.4em;
`;
const EventCheckboxText = styled.span`
margin-left: 0.5rem;
`;
interface FieldProps {
disabled?: boolean;
}
const FieldSet = styled.fieldset<FieldProps>`
padding: 0;
margin: 0;
border: none;
${({ disabled }) =>
disabled &&
`
opacity: 0.5;
`}
`;
interface MobileProps {
isMobile?: boolean;
}
const GroupGrid = styled.div<MobileProps>`
display: grid;
grid-template-columns: 1fr 1fr;
${({ isMobile }) =>
isMobile &&
`
grid-template-columns: 1fr;
`}
`;
const GroupWrapper = styled.div<MobileProps>`
padding-bottom: 2rem;
${({ isMobile }) =>
isMobile &&
`
padding-bottom: 1rem;
`}
`;
const TextFields = styled.div`
display: flex;
flex-direction: column;
margin-bottom: 1em;
`;
type Props = {
handleSubmit: (data: FormData) => void;
webhookSubscription?: WebhookSubscription;
};
interface FormData {
name: string;
url: string;
secret: string;
events: string[];
}
function generateSigningSecret() {
return `ol_whs_${randomstring.generate(32)}`;
}
function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
const { t } = useTranslation();
const {
register,
handleSubmit: formHandleSubmit,
formState,
watch,
setValue,
} = useForm<FormData>({
mode: "all",
defaultValues: {
events: webhookSubscription ? [...webhookSubscription.events] : [],
name: webhookSubscription?.name,
url: webhookSubscription?.url,
secret: webhookSubscription?.secret ?? generateSigningSecret(),
},
});
const events = watch("events");
const selectedGroups = filter(events, (e) => !e.includes("."));
const isAllEventSelected = includes(events, "*");
const filteredEvents = filter(events, (e) => {
const [beforePeriod] = e.split(".");
return (
selectedGroups.length === 0 ||
e === beforePeriod ||
!selectedGroups.includes(beforePeriod)
);
});
const isMobile = useMobile();
useEffect(() => {
if (isAllEventSelected) {
setValue("events", ["*"]);
}
}, [isAllEventSelected, setValue]);
useEffect(() => {
if (!isEqual(events, filteredEvents)) {
setValue("events", filteredEvents);
}
}, [events, filteredEvents, setValue]);
const verb = webhookSubscription ? t("Update") : t("Create");
const inProgressVerb = webhookSubscription ? t("Updating") : t("Creating");
function EventCheckbox({ label, value }: { label: string; value: string }) {
const LabelComponent =
value === "*"
? AllEventCheckboxLabel
: Object.keys(WEBHOOK_EVENTS).includes(value)
? GroupEventCheckboxLabel
: EventCheckboxLabel;
return (
<LabelComponent>
<input
type="checkbox"
defaultValue={value}
{...register("events", {})}
/>
<EventCheckboxText>{label}</EventCheckboxText>
</LabelComponent>
);
}
return (
<form onSubmit={formHandleSubmit(handleSubmit)}>
<Text type="secondary">
<Trans>
Provide a descriptive name for this webhook and the URL we should send
a POST request to when matching events are created.
</Trans>
</Text>
<TextFields>
<Input
required
autoFocus
flex
label={t("Name")}
placeholder={t("A memorable identifer")}
{...register("name", {
required: true,
})}
/>
<Input
required
autoFocus
flex
pattern="https://.*"
placeholder="https://…"
label={t("URL")}
{...register("url", { required: true })}
/>
<Input
flex
spellCheck={false}
label={t("Signing secret")}
{...register("secret", {
required: false,
})}
/>
</TextFields>
<Text type="secondary">
<Trans>
Subscribe to all events, groups, or individual events. We recommend
only subscribing to the minimum amount of events that your application
needs to function.
</Trans>
</Text>
<EventCheckbox label={t("All events")} value="*" />
<FieldSet disabled={isAllEventSelected}>
<GroupGrid isMobile={isMobile}>
{Object.entries(WEBHOOK_EVENTS).map(([group, events], i) => (
<GroupWrapper key={i} isMobile={isMobile}>
<EventCheckbox
label={t(`All {{ groupName }} events`, { groupName: group })}
value={group}
/>
<FieldSet disabled={selectedGroups.includes(group)}>
{events.map((event) => (
<EventCheckbox label={event} value={event} key={event} />
))}
</FieldSet>
</GroupWrapper>
))}
</GroupGrid>
</FieldSet>
<Button
type="submit"
disabled={formState.isSubmitting || !formState.isValid}
>
{formState.isSubmitting ? `${inProgressVerb}…` : verb}
</Button>
</form>
);
}
export default WebhookSubscriptionForm;

89
app/scenes/Settings/components/WebhookSubscriptionListItem.tsx
View File

@@ -1,89 +0,0 @@
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={true}>{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;

51
app/scenes/Settings/components/WebhookSubscriptionNew.tsx
View File

@@ -1,51 +0,0 @@
import * as React from "react";
import { useTranslation } from "react-i18next";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import WebhookSubscriptionForm from "./WebhookSubscriptionForm";
type Props = {
onSubmit: () => void;
};
interface FormData {
name: string;
url: string;
events: string[];
}
function WebhookSubscriptionNew({ onSubmit }: Props) {
const { webhookSubscriptions } = useStores();
const { showToast } = useToasts();
const { t } = useTranslation();
const handleSubmit = React.useCallback(
async (data: FormData) => {
try {
const events = Array.isArray(data.events) ? data.events : [data.events];
const toSend = {
...data,
events,
};
await webhookSubscriptions.create(toSend);
showToast(
t("Webhook created", {
type: "success",
})
);
onSubmit();
} catch (err) {
showToast(err.message, {
type: "error",
});
}
},
[t, showToast, onSubmit, webhookSubscriptions]
);
return <WebhookSubscriptionForm handleSubmit={handleSubmit} />;
}
export default WebhookSubscriptionNew;