Add webhooks section to configuration menu

This commit is contained in:
Krzysztof Bialoglowicz 2019-10-09 09:31:00 +02:00
parent be8095b22f
commit 6b66893745
11 changed files with 52 additions and 41 deletions

View file

@ -27,6 +27,7 @@ export interface AppListViewSettings {
[ListViews.SHIPPING_METHODS_LIST]: ListSettings;
[ListViews.STAFF_MEMBERS_LIST]: ListSettings;
[ListViews.VOUCHER_LIST]: ListSettings;
[ListViews.WEBHOOK_LIST]: ListSettings;
}
export const defaultListSettings: AppListViewSettings = {
[ListViews.CATEGORY_LIST]: {
@ -68,5 +69,8 @@ export const defaultListSettings: AppListViewSettings = {
},
[ListViews.VOUCHER_LIST]: {
rowNumber: PAGINATE_BY
},
[ListViews.WEBHOOK_LIST]: {
rowNumber: PAGINATE_BY
}
};

View file

@ -15,6 +15,7 @@ import ShippingMethods from "@saleor/icons/ShippingMethods";
import SiteSettings from "@saleor/icons/SiteSettings";
import StaffMembers from "@saleor/icons/StaffMembers";
import Taxes from "@saleor/icons/Taxes";
import Webhooks from "@saleor/icons/Webhooks";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { menuListUrl } from "@saleor/navigation/urls";
@ -27,6 +28,7 @@ import { siteSettingsUrl } from "@saleor/siteSettings/urls";
import { staffListUrl } from "@saleor/staff/urls";
import { taxSection } from "@saleor/taxes/urls";
import { PermissionEnum } from "@saleor/types/globalTypes";
import { webhooksListUrl } from "@saleor/webhooks/urls";
import ConfigurationPage, { MenuSection } from "./ConfigurationPage";
export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
@ -161,6 +163,15 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
permission: PermissionEnum.MANAGE_SERVICE_ACCOUNTS,
title: intl.formatMessage(sectionNames.serviceAccounts),
url: serviceListUrl()
},
{
description: intl.formatMessage({
defaultMessage: "View and update your site settings"
}),
icon: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_WEBHOOKS,
title: intl.formatMessage(sectionNames.webhooks),
url: webhooksListUrl()
}
]
}

15
src/icons/Webhooks.tsx Normal file
View file

@ -0,0 +1,15 @@
import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
import React from "react";
export const Webhooks = createSvgIcon(
<>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.188 25.403L14.8603 17.9921C11.5958 15.3023 10.5525 10.9218 12.3952 7.03423C14.4554 2.68805 19.4727 0.911694 23.8632 2.67405C28.3581 4.47829 30.6541 10.5097 28.3722 15.6112L26.9311 14.9665C28.8961 10.5736 26.8313 5.56662 23.2751 4.13916C19.6146 2.66981 15.5043 4.16105 13.8218 7.71045C12.2078 11.1154 13.2502 14.9597 16.3677 17.1575L16.9804 17.5895L11.5587 26.1892C11.9146 26.496 12.2246 26.8684 12.469 27.301C13.6059 29.3129 12.8965 31.8654 10.8847 33.0023C8.87279 34.1392 6.32024 33.4298 5.18339 31.4179C4.04653 29.4061 4.75587 26.8535 6.76775 25.7167C7.85287 25.1035 9.09527 25.0274 10.188 25.403ZM23.2649 10.8173C23.2649 12.256 22.0986 13.4222 20.6599 13.4222C19.2213 13.4222 18.055 12.256 18.055 10.8173C18.055 9.37865 19.2213 8.21239 20.6599 8.21239C22.0986 8.21239 23.2649 9.37865 23.2649 10.8173ZM22.1884 14.713C21.7149 14.8989 21.1994 15.001 20.6599 15.001C18.3494 15.001 16.4763 13.1279 16.4763 10.8173C16.4763 8.50674 18.3494 6.63365 20.6599 6.63365C22.9705 6.63365 24.8436 8.50674 24.8436 10.8173C24.8436 12.0191 24.3368 13.1026 23.5253 13.8657L27.6887 21.6091C31.6202 20.096 35.9283 21.3402 38.3955 24.8467C41.154 28.7675 40.2364 33.995 36.5573 36.9426C32.7897 39.9611 26.4344 38.9945 23.1295 34.5103L24.4003 33.5736C27.2448 37.4331 32.5933 38.0955 35.5702 35.7105C38.6356 33.2546 39.3563 28.956 37.1043 25.7552C34.9442 22.6851 31.1037 21.7052 27.6738 23.3323L26.9957 23.6539L22.1884 14.713ZM28.4266 28.5411C27.7395 29.8054 28.2075 31.3873 29.4718 32.0744C30.7362 32.7614 32.3181 32.2935 33.0051 31.0291C33.6922 29.7648 33.2242 28.1829 31.9599 27.4958C30.6955 26.8088 29.1136 27.2768 28.4266 28.5411ZM26.6391 30.7276C26.8998 31.8533 27.6229 32.8664 28.718 33.4615C30.7485 34.5649 33.2889 33.8134 34.3923 31.7829C35.4956 29.7525 34.7441 27.2121 32.7137 26.1087C30.6832 25.0053 28.1428 25.7569 27.0394 27.7873C26.8022 28.2239 26.6507 28.6841 26.5792 29.1486L16.4131 29.1096L16.3716 29.8582C16.1604 33.6666 13.4532 36.5883 9.71044 37.0246C5.80888 37.4794 2.36564 34.7845 1.67123 30.9016C0.99662 27.1295 4.1478 22.7246 8.91444 22.0623L8.69716 20.4986C3.16177 21.2677 -0.735523 26.4118 0.117155 31.1796C0.950033 35.8367 5.11583 39.1496 9.89322 38.5927C14.1665 38.0946 17.3279 34.8879 17.8783 30.694L26.6391 30.7276ZM11.0946 28.0777C10.3866 26.8249 8.7972 26.3832 7.54443 27.0911C6.29165 27.799 5.84995 29.3885 6.55786 30.6413C7.26577 31.894 8.85522 32.3357 10.108 31.6278C11.3608 30.9199 11.8025 29.3305 11.0946 28.0777Z"
fill="#06847B"
/>
</>
);
Webhooks.displayName = "Webhooks";
export default Webhooks;

View file

@ -48,6 +48,7 @@ import SiteSettingsSection from "./siteSettings";
import StaffSection from "./staff";
import TaxesSection from "./taxes";
import TranslationsSection from "./translations";
import WebhooksSection from "./webhooks";
import { PermissionEnum } from "./types/globalTypes";
interface ResponseError extends ErrorResponse {
@ -219,6 +220,11 @@ const Routes: React.FC = () => {
path="/translations"
component={TranslationsSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_WEBHOOKS]}
path="/webhooks"
component={WebhooksSection}
/>
<SectionRoute
permissions={[PermissionEnum.MANAGE_MENUS]}
path={navigationSection}

View file

@ -1,2 +1,2 @@
export { default } from "./WebhookEvents;
export * from "./WebhookEvents;
export { default } from "./WebhookEvents";
export * from "./WebhookEvents";

View file

@ -1,2 +1,2 @@
export { default } from "./WebhookInfoo";
export * from "./WebhookInfoo";
export { default } from "./WebhookInfo";
export * from "./WebhookInfo";

View file

@ -1,2 +1,2 @@
export { default } from "./WebhookStatus;
export * from "./WebhookStatus;
export { default } from "./WebhookStatus";
export * from "./WebhookStatus";

View file

@ -107,32 +107,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
webhooks,
webhook => {
return (
// <TableRow
// hover={!!plugin}
// className={!!plugin ? classes.link : undefined}
// onClick={plugin ? onRowClick(plugin.id) : undefined}
// key={plugin ? plugin.id : "skeleton"}
// >
// <TableCell className={classes.colName}>
// {maybe<React.ReactNode>(() => plugin.name, <Skeleton />)}
// </TableCell>
// <TableCell className={classes.colActive}>
// {maybe<React.ReactNode>(
// () => (
// <StatusLabel
// label={translateBoolean(plugin.active, intl)}
// status={plugin.active ? "success" : "error"}
// />
// ),
// <Skeleton />
// )}
// </TableCell>
// <TableCell className={classes.colAction}>
// <div onClick={plugin ? onRowClick(plugin.id) : undefined}>
// <EditIcon />
// </div>
// </TableCell>
// </TableRow>
<div></div>
);
},
() => (

View file

@ -10,15 +10,15 @@ import {
WebhooksListUrlQueryParams,
webhooksPath
} from "./urls";
import PluginsDetailsComponent from "./views/WebhooksDetails";
import PluginsListComponent from "./views/WebhooksList";
import WebhooksDetails from "./views/WebhooksDetails";
import WebhooksList from "./views/WebhooksList";
const PluginList: React.StatelessComponent<RouteComponentProps<any>> = ({
const WebhookList: React.StatelessComponent<RouteComponentProps<any>> = ({
location
}) => {
const qs = parseQs(location.search.substr(1));
const params: WebhooksListUrlQueryParams = qs;
return <PluginsListComponent params={params} />;
return <WebhooksList params={params} />;
};
const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
@ -28,7 +28,7 @@ const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
const params: WebhooksListUrlQueryParams = qs;
return (
<PluginsDetailsComponent
<WebhooksDetails
id={decodeURIComponent(match.params.id)}
params={params}
/>
@ -41,8 +41,8 @@ const Component = () => {
<>
<WindowTitle title={intl.formatMessage(sectionNames.plugins)} />
<Switch>
<Route exact path={webhooksListPath} component={PluginList} />
<Route path={webhooksPath(":id")} component={PageDetails} />
<Route exact path={webhooksListPath} component={WebhookList} />
<Route path={webhooksPath(":id")} component={WebhooksDetails} />
</Switch>
</>
);

View file

@ -44,7 +44,7 @@ export const TypedWebhookUpdate = TypedMutation<
WebhookUpdateVariables
>(webhookUpdate);
const WebhookDelete = gql`
const webhookDelete = gql`
mutation WebhookDelete($id: ID!) {
webhookDelete(id: $id) {
errors {

View file

@ -8,7 +8,7 @@ export const webhooksSection = "/webhooks/";
export const webhooksListPath = webhooksSection;
export type WebhooksListUrlQueryParams = Pagination & SingleAction;
export const webhooksListUrl = (params?: WebhooksListUrlQueryParams) =>
webhooksPath + "?" + stringifyQs(params);
webhooksListPath + "?" + stringifyQs(params);
export const webhooksPath = (id: string) => urlJoin(webhooksSection, id);
export type WebhooksUrlQueryParams = SingleAction;