492 lines
17 KiB
JavaScript
492 lines
17 KiB
JavaScript
import {
|
|
useWebhooks
|
|
} from "./chunk-CI2U7W4K.js";
|
|
import {
|
|
ConfirmDialog
|
|
} from "./chunk-NP53ZCXD.js";
|
|
import {
|
|
useRBAC
|
|
} from "./chunk-CMLQV3Z2.js";
|
|
import {
|
|
Layouts
|
|
} from "./chunk-TIVRAWTC.js";
|
|
import "./chunk-PQINNV4N.js";
|
|
import "./chunk-VYSYYPOB.js";
|
|
import {
|
|
ForwardRef$J,
|
|
Page,
|
|
useAPIErrorHandler
|
|
} from "./chunk-5CAWUBTQ.js";
|
|
import "./chunk-W2TBR6J3.js";
|
|
import {
|
|
useTypedSelector
|
|
} from "./chunk-QEGMJR7H.js";
|
|
import "./chunk-LCL5TIBZ.js";
|
|
import "./chunk-WOQNBAGN.js";
|
|
import "./chunk-BHLYCXQ7.js";
|
|
import "./chunk-76QM3EFM.js";
|
|
import "./chunk-CE4VABH2.js";
|
|
import "./chunk-5VODLFKF.js";
|
|
import {
|
|
useNotification
|
|
} from "./chunk-N55RVBRV.js";
|
|
import {
|
|
Button,
|
|
CheckboxImpl,
|
|
Dialog,
|
|
EmptyStateLayout,
|
|
Flex,
|
|
IconButton,
|
|
LinkButton,
|
|
SwitchImpl,
|
|
TFooter,
|
|
Table,
|
|
Tbody,
|
|
Td,
|
|
Th,
|
|
Thead,
|
|
Tr,
|
|
Typography,
|
|
VisuallyHidden,
|
|
useIntl,
|
|
useNotifyAT
|
|
} from "./chunk-7XB6XSWQ.js";
|
|
import {
|
|
NavLink,
|
|
useNavigate
|
|
} from "./chunk-TUXTO2Z5.js";
|
|
import "./chunk-FOD4ENRR.js";
|
|
import {
|
|
ForwardRef$1h,
|
|
ForwardRef$1v,
|
|
ForwardRef$j
|
|
} from "./chunk-WRD5KPDH.js";
|
|
import {
|
|
require_jsx_runtime
|
|
} from "./chunk-NIAJZ5MX.js";
|
|
import "./chunk-ACIMPXWY.js";
|
|
import {
|
|
require_react
|
|
} from "./chunk-MADUDGYZ.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-PLDDJCW6.js";
|
|
|
|
// node_modules/@strapi/admin/dist/admin/admin/src/pages/Settings/pages/Webhooks/ListPage.mjs
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
var React = __toESM(require_react(), 1);
|
|
var ListPage = () => {
|
|
const [showModal, setShowModal] = React.useState(false);
|
|
const [webhooksToDelete, setWebhooksToDelete] = React.useState([]);
|
|
const permissions = useTypedSelector((state) => {
|
|
var _a;
|
|
return (_a = state.admin_app.permissions.settings) == null ? void 0 : _a.webhooks;
|
|
});
|
|
const { formatMessage } = useIntl();
|
|
const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
|
|
const { toggleNotification } = useNotification();
|
|
const navigate = useNavigate();
|
|
const { isLoading: isRBACLoading, allowedActions: { canCreate, canUpdate, canDelete } } = useRBAC(permissions);
|
|
const { notifyStatus } = useNotifyAT();
|
|
const { isLoading: isWebhooksLoading, webhooks, error: webhooksError, updateWebhook, deleteManyWebhooks } = useWebhooks();
|
|
React.useEffect(() => {
|
|
if (webhooksError) {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatAPIError(webhooksError)
|
|
});
|
|
return;
|
|
}
|
|
if (webhooks) {
|
|
notifyStatus(formatMessage({
|
|
id: "Settings.webhooks.list.loading.success",
|
|
defaultMessage: "Webhooks have been loaded"
|
|
}));
|
|
}
|
|
}, [
|
|
webhooks,
|
|
webhooksError,
|
|
toggleNotification,
|
|
formatMessage,
|
|
notifyStatus,
|
|
formatAPIError
|
|
]);
|
|
const enableWebhook = async (body) => {
|
|
try {
|
|
const res = await updateWebhook(body);
|
|
if ("error" in res) {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatAPIError(res.error)
|
|
});
|
|
}
|
|
} catch {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatMessage({
|
|
id: "notification.error",
|
|
defaultMessage: "An error occurred"
|
|
})
|
|
});
|
|
}
|
|
};
|
|
const deleteWebhook = async (id) => {
|
|
try {
|
|
const res = await deleteManyWebhooks({
|
|
ids: [
|
|
id
|
|
]
|
|
});
|
|
if ("error" in res) {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatAPIError(res.error)
|
|
});
|
|
return;
|
|
}
|
|
setWebhooksToDelete((prev) => prev.filter((webhookId) => webhookId !== id));
|
|
} catch {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatMessage({
|
|
id: "notification.error",
|
|
defaultMessage: "An error occurred"
|
|
})
|
|
});
|
|
}
|
|
};
|
|
const confirmBulkDelete = async () => {
|
|
try {
|
|
const res = await deleteManyWebhooks({
|
|
ids: webhooksToDelete
|
|
});
|
|
if ("error" in res) {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatAPIError(res.error)
|
|
});
|
|
return;
|
|
}
|
|
setWebhooksToDelete([]);
|
|
} catch {
|
|
toggleNotification({
|
|
type: "danger",
|
|
message: formatMessage({
|
|
id: "notification.error",
|
|
defaultMessage: "An error occurred"
|
|
})
|
|
});
|
|
} finally {
|
|
setShowModal(false);
|
|
}
|
|
};
|
|
const selectAllCheckbox = (selected) => selected ? setWebhooksToDelete((webhooks == null ? void 0 : webhooks.map((webhook) => webhook.id)) ?? []) : setWebhooksToDelete([]);
|
|
const selectOneCheckbox = (selected, id) => selected ? setWebhooksToDelete((prev) => [
|
|
...prev,
|
|
id
|
|
]) : setWebhooksToDelete((prev) => prev.filter((webhookId) => webhookId !== id));
|
|
const isLoading = isRBACLoading || isWebhooksLoading;
|
|
const numberOfWebhooks = (webhooks == null ? void 0 : webhooks.length) ?? 0;
|
|
const webhooksToDeleteLength = webhooksToDelete.length;
|
|
if (isLoading) {
|
|
return (0, import_jsx_runtime.jsx)(Page.Loading, {});
|
|
}
|
|
return (0, import_jsx_runtime.jsxs)(Layouts.Root, {
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Page.Title, {
|
|
children: formatMessage({
|
|
id: "Settings.PageTitle",
|
|
defaultMessage: "Settings - {name}"
|
|
}, {
|
|
name: "Webhooks"
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsxs)(Page.Main, {
|
|
"aria-busy": isLoading,
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Layouts.Header, {
|
|
title: formatMessage({
|
|
id: "Settings.webhooks.title",
|
|
defaultMessage: "Webhooks"
|
|
}),
|
|
subtitle: formatMessage({
|
|
id: "Settings.webhooks.list.description",
|
|
defaultMessage: "Get POST changes notifications"
|
|
}),
|
|
primaryAction: canCreate && !isLoading && (0, import_jsx_runtime.jsx)(LinkButton, {
|
|
tag: NavLink,
|
|
startIcon: (0, import_jsx_runtime.jsx)(ForwardRef$1h, {}),
|
|
variant: "default",
|
|
to: "create",
|
|
size: "S",
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.list.button.add",
|
|
defaultMessage: "Create new webhook"
|
|
})
|
|
})
|
|
}),
|
|
webhooksToDeleteLength > 0 && canDelete && (0, import_jsx_runtime.jsx)(Layouts.Action, {
|
|
startActions: (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Typography, {
|
|
variant: "epsilon",
|
|
textColor: "neutral600",
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.to.delete",
|
|
defaultMessage: "{webhooksToDeleteLength, plural, one {# webhook} other {# webhooks}} selected"
|
|
}, {
|
|
webhooksToDeleteLength
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Button, {
|
|
onClick: () => setShowModal(true),
|
|
startIcon: (0, import_jsx_runtime.jsx)(ForwardRef$j, {}),
|
|
size: "L",
|
|
variant: "danger-light",
|
|
children: formatMessage({
|
|
id: "global.delete",
|
|
defaultMessage: "Delete"
|
|
})
|
|
})
|
|
]
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Layouts.Content, {
|
|
children: numberOfWebhooks > 0 ? (0, import_jsx_runtime.jsxs)(Table, {
|
|
colCount: 5,
|
|
rowCount: numberOfWebhooks + 1,
|
|
footer: (0, import_jsx_runtime.jsx)(TFooter, {
|
|
onClick: () => {
|
|
if (canCreate) {
|
|
navigate("create");
|
|
}
|
|
},
|
|
icon: (0, import_jsx_runtime.jsx)(ForwardRef$1h, {}),
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.list.button.add",
|
|
defaultMessage: "Create new webhook"
|
|
})
|
|
}),
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Thead, {
|
|
children: (0, import_jsx_runtime.jsxs)(Tr, {
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Th, {
|
|
children: (0, import_jsx_runtime.jsx)(CheckboxImpl, {
|
|
"aria-label": formatMessage({
|
|
id: "global.select-all-entries",
|
|
defaultMessage: "Select all entries"
|
|
}),
|
|
checked: webhooksToDeleteLength > 0 && webhooksToDeleteLength < numberOfWebhooks ? "indeterminate" : webhooksToDeleteLength === numberOfWebhooks,
|
|
onCheckedChange: selectAllCheckbox
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Th, {
|
|
width: "20%",
|
|
children: (0, import_jsx_runtime.jsx)(Typography, {
|
|
variant: "sigma",
|
|
textColor: "neutral600",
|
|
children: formatMessage({
|
|
id: "global.name",
|
|
defaultMessage: "Name"
|
|
})
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Th, {
|
|
width: "60%",
|
|
children: (0, import_jsx_runtime.jsx)(Typography, {
|
|
variant: "sigma",
|
|
textColor: "neutral600",
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.form.url",
|
|
defaultMessage: "URL"
|
|
})
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Th, {
|
|
width: "20%",
|
|
children: (0, import_jsx_runtime.jsx)(Typography, {
|
|
variant: "sigma",
|
|
textColor: "neutral600",
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.list.th.status",
|
|
defaultMessage: "Status"
|
|
})
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Th, {
|
|
children: (0, import_jsx_runtime.jsx)(VisuallyHidden, {
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.list.th.actions",
|
|
defaultMessage: "Actions"
|
|
})
|
|
})
|
|
})
|
|
]
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Tbody, {
|
|
children: webhooks == null ? void 0 : webhooks.map((webhook) => (0, import_jsx_runtime.jsxs)(Tr, {
|
|
onClick: () => {
|
|
if (canUpdate) {
|
|
navigate(webhook.id);
|
|
}
|
|
},
|
|
style: {
|
|
cursor: canUpdate ? "pointer" : "default"
|
|
},
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(Td, {
|
|
onClick: (e) => e.stopPropagation(),
|
|
children: (0, import_jsx_runtime.jsx)(CheckboxImpl, {
|
|
"aria-label": `${formatMessage({
|
|
id: "global.select",
|
|
defaultMessage: "Select"
|
|
})} ${webhook.name}`,
|
|
checked: webhooksToDelete == null ? void 0 : webhooksToDelete.includes(webhook.id),
|
|
onCheckedChange: (selected) => selectOneCheckbox(!!selected, webhook.id),
|
|
name: "select"
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Td, {
|
|
children: (0, import_jsx_runtime.jsx)(Typography, {
|
|
fontWeight: "semiBold",
|
|
textColor: "neutral800",
|
|
children: webhook.name
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Td, {
|
|
children: (0, import_jsx_runtime.jsx)(Typography, {
|
|
textColor: "neutral800",
|
|
children: webhook.url
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Td, {
|
|
onClick: (e) => e.stopPropagation(),
|
|
children: (0, import_jsx_runtime.jsx)(Flex, {
|
|
children: (0, import_jsx_runtime.jsx)(SwitchImpl, {
|
|
onLabel: formatMessage({
|
|
id: "global.enabled",
|
|
defaultMessage: "Enabled"
|
|
}),
|
|
offLabel: formatMessage({
|
|
id: "global.disabled",
|
|
defaultMessage: "Disabled"
|
|
}),
|
|
"aria-label": `${webhook.name} ${formatMessage({
|
|
id: "Settings.webhooks.list.th.status",
|
|
defaultMessage: "Status"
|
|
})}`,
|
|
checked: webhook.isEnabled,
|
|
onCheckedChange: (enabled) => {
|
|
enableWebhook({
|
|
...webhook,
|
|
isEnabled: enabled
|
|
});
|
|
},
|
|
visibleLabels: true
|
|
})
|
|
})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Td, {
|
|
children: (0, import_jsx_runtime.jsxs)(Flex, {
|
|
gap: 1,
|
|
children: [
|
|
canUpdate && (0, import_jsx_runtime.jsx)(IconButton, {
|
|
label: formatMessage({
|
|
id: "Settings.webhooks.events.update",
|
|
defaultMessage: "Update"
|
|
}),
|
|
variant: "ghost",
|
|
children: (0, import_jsx_runtime.jsx)(ForwardRef$1v, {})
|
|
}),
|
|
canDelete && (0, import_jsx_runtime.jsx)(DeleteActionButton, {
|
|
onDelete: () => {
|
|
deleteWebhook(webhook.id);
|
|
}
|
|
})
|
|
]
|
|
})
|
|
})
|
|
]
|
|
}, webhook.id))
|
|
})
|
|
]
|
|
}) : (0, import_jsx_runtime.jsx)(EmptyStateLayout, {
|
|
icon: (0, import_jsx_runtime.jsx)(ForwardRef$J, {
|
|
width: "160px"
|
|
}),
|
|
content: formatMessage({
|
|
id: "Settings.webhooks.list.empty.description",
|
|
defaultMessage: "No webhooks found"
|
|
}),
|
|
action: canCreate ? (0, import_jsx_runtime.jsx)(LinkButton, {
|
|
variant: "secondary",
|
|
startIcon: (0, import_jsx_runtime.jsx)(ForwardRef$1h, {}),
|
|
tag: NavLink,
|
|
to: "create",
|
|
children: formatMessage({
|
|
id: "Settings.webhooks.list.button.add",
|
|
defaultMessage: "Create new webhook"
|
|
})
|
|
}) : null
|
|
})
|
|
})
|
|
]
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Dialog.Root, {
|
|
open: showModal,
|
|
onOpenChange: setShowModal,
|
|
children: (0, import_jsx_runtime.jsx)(ConfirmDialog, {
|
|
onConfirm: confirmBulkDelete
|
|
})
|
|
})
|
|
]
|
|
});
|
|
};
|
|
var DeleteActionButton = ({ onDelete }) => {
|
|
const [showModal, setShowModal] = React.useState(false);
|
|
const { formatMessage } = useIntl();
|
|
return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
children: [
|
|
(0, import_jsx_runtime.jsx)(IconButton, {
|
|
onClick: (e) => {
|
|
e.stopPropagation();
|
|
setShowModal(true);
|
|
},
|
|
label: formatMessage({
|
|
id: "Settings.webhooks.events.delete",
|
|
defaultMessage: "Delete webhook"
|
|
}),
|
|
variant: "ghost",
|
|
children: (0, import_jsx_runtime.jsx)(ForwardRef$j, {})
|
|
}),
|
|
(0, import_jsx_runtime.jsx)(Dialog.Root, {
|
|
open: showModal,
|
|
onOpenChange: setShowModal,
|
|
children: (0, import_jsx_runtime.jsx)(ConfirmDialog, {
|
|
onConfirm: (e) => {
|
|
e == null ? void 0 : e.stopPropagation();
|
|
onDelete();
|
|
}
|
|
})
|
|
})
|
|
]
|
|
});
|
|
};
|
|
var ProtectedListPage = () => {
|
|
const permissions = useTypedSelector((state) => {
|
|
var _a;
|
|
return (_a = state.admin_app.permissions.settings) == null ? void 0 : _a.webhooks.main;
|
|
});
|
|
return (0, import_jsx_runtime.jsx)(Page.Protect, {
|
|
permissions,
|
|
children: (0, import_jsx_runtime.jsx)(ListPage, {})
|
|
});
|
|
};
|
|
export {
|
|
ListPage,
|
|
ProtectedListPage
|
|
};
|
|
//# sourceMappingURL=ListPage-GAB5NR55.js.map
|