djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix small issues

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-10-11 15:35:33 +02:00
parent 83cd51e001
commit c8dbe00db4
14 changed files with 346 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/configuration/index.tsx
View file

@ -166,7 +166,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
}, },
{ {
description: intl.formatMessage({ description: intl.formatMessage({
defaultMessage: "View and update your site settings" defaultMessage: "View and update your webhook and their settings"
}), }),
icon: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />, icon: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_WEBHOOKS, permission: PermissionEnum.MANAGE_WEBHOOKS,

95
src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx
View file

@ -10,12 +10,11 @@ import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { UserError } from "@saleor/types"; import { UserError } from "@saleor/types";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
import WebhookEvents from "../WebhookEvents";
import WebhookInfo from "../WebhookInfo";
import WebhookStatus from "../WebhookStatus";
export interface FormData { export interface FormData {
id: string; id: string;
@ -59,51 +58,49 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
return ( return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}> <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => { {({ data, errors, hasChanged, submit, change }) => (
return ( <Container>
<Container> <AppHeader onBack={onBack}>
<AppHeader onBack={onBack}> {intl.formatMessage(sectionNames.plugins)}
{intl.formatMessage(sectionNames.plugins)} </AppHeader>
</AppHeader> <PageHeader
<PageHeader title={intl.formatMessage({
title={intl.formatMessage({ defaultMessage: "Create Webhook",
defaultMessage: "Create Webhook", description: "header"
description: "header" })}
})} />
/> <Grid>
<Grid> <div>
<div> <WebhookInfo
<WebhookInfo data={data}
data={data} disabled={disabled}
disabled={disabled} services={maybe(() => services, [])}
services={maybe(() => services, [])} errors={errors}
errors={errors} onChange={change}
onChange={change} />
/> </div>
</div> <div>
<div> <WebhookEvents
<WebhookEvents data={data}
data={data} disabled={disabled}
disabled={disabled} onChange={change}
onChange={change} />
/> <FormSpacer />
<FormSpacer /> <WebhookStatus
<WebhookStatus data={data}
data={data} disabled={disabled}
disabled={disabled} onChange={change}
onChange={change} />
/> </div>
</div> </Grid>
</Grid> <SaveButtonBar
<SaveButtonBar disabled={disabled || !hasChanged}
disabled={disabled || !hasChanged} state={saveButtonBarState}
state={saveButtonBarState} onCancel={onBack}
onCancel={onBack} onSave={submit}
onSave={submit} />
/> </Container>
</Container> )}
);
}}
</Form> </Form>
); );
}; };

2
src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx
View file

@ -13,7 +13,7 @@ const props: WebhookCreatePageProps = {
saveButtonBarState: "default", saveButtonBarState: "default",
services: [] services: []
}; };
storiesOf("Views / Services / Create service", module) storiesOf("Views / Webhook / Create webhook", module)
.addDecorator(Decorator) .addDecorator(Decorator)
.add("default", () => <WebhookCreatePage {...props} />) .add("default", () => <WebhookCreatePage {...props} />)
.add("loading", () => <WebhookCreatePage {...props} disabled={true} />) .add("loading", () => <WebhookCreatePage {...props} disabled={true} />)

47
src/webhooks/components/WebhookEvents/WebhookEvents.tsx
View file

@ -4,9 +4,10 @@ import Typography from "@material-ui/core/Typography";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import { ChangeEvent } from "@saleor/hooks/useForm";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { WebhookEventTypeEnum } from "../../../types/globalTypes";
interface WebhookEventsProps { interface WebhookEventsProps {
data: { data: {
@ -25,16 +26,14 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
const intl = useIntl(); const intl = useIntl();
const eventsEnum = Object.values(WebhookEventTypeEnum); const eventsEnum = Object.values(WebhookEventTypeEnum);
const handleAllEventsChange = (event: React.ChangeEvent<any>) => const handleAllEventsChange = () =>
onChange(event, () => onChange({
onChange({ target: {
target: { name: "events",
name: "events", value: WebhookEventTypeEnum.ALL_EVENTS
value: WebhookEventTypeEnum.ALL_EVENTS }
} } as any);
} as any) const handleEventsChange = (event: ChangeEvent) => {
);
const handleEventsChange = (event: React.ChangeEvent<any>) => {
onChange({ onChange({
target: { target: {
name: "events", name: "events",
@ -73,20 +72,18 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
/> />
<Hr /> <Hr />
{!data.allEvents && {!data.allEvents &&
eventsEnum.map((event, index) => { eventsEnum.slice(1).map(event => {
if (index !== 0) { return (
return ( <div key={event}>
<div key={index}> <ControlledCheckbox
<ControlledCheckbox checked={data.events.includes(event)}
checked={data.events.includes(event)} disabled={disabled}
disabled={disabled} label={event.replace(/\./, "")}
label={event.replace(/\./, "")} name={event}
name={event} onChange={handleEventsChange}
onChange={handleEventsChange} />
/> </div>
</div> );
);
}
})} })}
</CardContent> </CardContent>
</Card> </Card>

26
src/webhooks/components/WebhookInfo/WebhookInfo.tsx
View file

@ -10,6 +10,8 @@ import CardTitle from "@saleor/components/CardTitle";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import SingleSelectField from "@saleor/components/SingleSelectField"; import SingleSelectField from "@saleor/components/SingleSelectField";
import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
import { commonMessages } from "@saleor/intl";
import { FormErrors } from "@saleor/types"; import { FormErrors } from "@saleor/types";
import { FormData } from "../WebhooksDetailsPage"; import { FormData } from "../WebhooksDetailsPage";
@ -54,10 +56,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
/> />
<CardContent> <CardContent>
<Typography className={classes.title}> <Typography className={classes.title}>
{intl.formatMessage({ {intl.formatMessage(commonMessages.generalInformations)}
defaultMessage: "General Information",
description: "webhook general information"
})}
</Typography> </Typography>
<TextField <TextField
disabled={disabled} disabled={disabled}
@ -81,17 +80,22 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
description: "webhook specific information" description: "webhook specific information"
})} })}
</Typography> </Typography>
<SingleSelectField <SingleAutocompleteSelectField
disabled={disabled}
displayValue={data.serviceAccount}
label={intl.formatMessage({
defaultMessage: "Assign to Service Account"
})}
name="serviceAccount"
onChange={onChange}
value={data.serviceAccount}
choices={services.map(service => ({ choices={services.map(service => ({
label: service.name, label: service.name,
value: service.id value: service.id
}))} }))}
name="serviceAccount" InputProps={{
value={data.serviceAccount} autoComplete: "off"
label={intl.formatMessage({ }}
defaultMessage: "Assign to Service Account"
})}
onChange={onChange}
/> />
<FormSpacer /> <FormSpacer />
<TextField <TextField

5
src/webhooks/components/WebhookStatus/WebhookStatus.tsx
View file

@ -3,6 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { FormChange } from "@saleor/hooks/useForm";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -11,10 +12,10 @@ import { FormData } from "../WebhooksDetailsPage";
interface WebhookStatusProps { interface WebhookStatusProps {
data: FormData; data: FormData;
disabled: boolean; disabled: boolean;
onChange: (event: React.ChangeEvent<any>) => void; onChange: (event: FormChange) => void;
} }
const WebhookStatus: React.StatelessComponent<WebhookStatusProps> = ({ const WebhookStatus: React.FC<WebhookStatusProps> = ({
data, data,
disabled, disabled,
onChange onChange

2
src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx
View file

@ -16,7 +16,7 @@ const props: WebhooksDetailsPageProps = {
saveButtonBarState: "default", saveButtonBarState: "default",
services: [] services: []
}; };
storiesOf("Views / Services / Service details", module) storiesOf("Views / Webhook / Webhook details", module)
.addDecorator(Decorator) .addDecorator(Decorator)
.add("default", () => <WebhooksDetailsPage {...props} />) .add("default", () => <WebhooksDetailsPage {...props} />)
.add("loading", () => ( .add("loading", () => (

117
src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
View file

@ -10,13 +10,13 @@ import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { UserError } from "@saleor/types"; import { UserError } from "@saleor/types";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
import { ServiceList_serviceAccounts_edges_node } from "@saleor/webhooks/types/ServiceList";
import { Webhook_webhook } from "@saleor/webhooks/types/Webhook";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
import { Webhook_webhook } from "../../types/Webhook";
import WebhookEvents from "../WebhookEvents";
import WebhookInfo from "../WebhookInfo";
import WebhookStatus from "../WebhookStatus";
export interface FormData { export interface FormData {
id: string; id: string;
@ -54,11 +54,8 @@ const WebhooksDetailsPage: React.StatelessComponent<
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const initialForm: FormData = { const initialForm: FormData = {
allEvents: maybe( allEvents: !!maybe(() => webhook.events, []).find(
() => event => event.eventType === WebhookEventTypeEnum.ALL_EVENTS
maybe(() => webhook.events, [])[0].eventType ===
WebhookEventTypeEnum.ALL_EVENTS,
false
), ),
events: maybe(() => webhook.events, []).map(event => event.eventType), events: maybe(() => webhook.events, []).map(event => event.eventType),
id: maybe(() => webhook.id, null), id: maybe(() => webhook.id, null),
@ -70,57 +67,55 @@ const WebhooksDetailsPage: React.StatelessComponent<
}; };
return ( return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}> <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => { {({ data, errors, hasChanged, submit, change }) => (
return ( <Container>
<Container> <AppHeader onBack={onBack}>
<AppHeader onBack={onBack}> {intl.formatMessage(sectionNames.plugins)}
{intl.formatMessage(sectionNames.plugins)} </AppHeader>
</AppHeader> <PageHeader
<PageHeader title={intl.formatMessage(
title={intl.formatMessage( {
{ defaultMessage: "{webhookName} Details",
defaultMessage: "{pluginName} Details", description: "header"
description: "header" },
}, {
{ webhookName: maybe(() => webhook.name, "...")
pluginName: maybe(() => webhook.name, "...") }
} )}
)} />
/> <Grid>
<Grid> <div>
<div> <WebhookInfo
<WebhookInfo data={data}
data={data} disabled={disabled}
disabled={disabled} services={maybe(() => services, [])}
services={maybe(() => services, [])} errors={errors}
errors={errors} onChange={change}
onChange={change} />
/> </div>
</div> <div>
<div> <WebhookEvents
<WebhookEvents data={data}
data={data} onChange={change}
onChange={change} disabled={disabled}
disabled={disabled} />
/> <FormSpacer />
<FormSpacer /> <WebhookStatus
<WebhookStatus data={data}
data={data} disabled={disabled}
disabled={disabled} onChange={change}
onChange={change} />
/> </div>
</div> </Grid>
</Grid> <SaveButtonBar
<SaveButtonBar disabled={disabled || !hasChanged}
disabled={disabled || !hasChanged} state={saveButtonBarState}
state={saveButtonBarState} onCancel={onBack}
onCancel={onBack} onSave={submit}
onSave={submit} onDelete={onDelete}
onDelete={onDelete} />
/> </Container>
</Container> )}
);
}}
</Form> </Form>
); );
}; };

255
src/webhooks/components/WebhooksList/WebhooksList.tsx
View file

@ -1,11 +1,6 @@
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import { import { Theme } from "@material-ui/core/styles";
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import Table from "@material-ui/core/Table"; import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody"; import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
@ -14,6 +9,7 @@ import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -28,140 +24,133 @@ export interface WebhooksListProps extends ListProps {
onRemove: (id: string) => void; onRemove: (id: string) => void;
} }
const styles = (theme: Theme) => const useStyles = makeStyles((theme: Theme) => ({
createStyles({ [theme.breakpoints.up("lg")]: {
[theme.breakpoints.up("lg")]: { colAction: {
colAction: { "& svg": {
"& svg": { color: theme.palette.primary.main
color: theme.palette.primary.main
},
textAlign: "right"
}, },
colActive: {}, textAlign: "right"
colName: {}
}, },
colAction: {},
colActive: {}, colActive: {},
colName: {}, colName: {}
link: { },
cursor: "pointer" colAction: {},
} colActive: {},
}); colName: {},
tableRow: {
cursor: "pointer"
}
}));
const numberOfColumns = 4; const numberOfColumns = 4;
const WebhooksList = withStyles(styles, { name: "PluginList" })( const WebhooksList: React.FC<WebhooksListProps> = ({
({ settings,
classes, webhooks,
settings, disabled,
webhooks, onNextPage,
disabled, pageInfo,
onNextPage, onRowClick,
pageInfo, onRemove,
onRowClick, onUpdateListSettings,
onRemove, onPreviousPage
onUpdateListSettings, }) => {
onPreviousPage const intl = useIntl();
}: WebhooksListProps & WithStyles<typeof styles>) => { const classes = useStyles({});
const intl = useIntl(); return (
return ( <Card>
<Card> <Table>
<Table> <TableHead>
<TableHead> <TableRow>
<TableRow> <TableCell className={classes.colName} padding="dense">
<TableCell className={classes.colName} padding="dense"> {intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Name",
defaultMessage: "Name", description: "webhook name"
description: "webhook name" })}
})} </TableCell>
</TableCell> <TableCell className={classes.colActive} padding="dense">
<TableCell className={classes.colActive} padding="dense"> {intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Service Account",
defaultMessage: "Service Account", description: "webhook service account"
description: "webhook service account" })}
})} </TableCell>
</TableCell> <TableCell className={classes.colAction} padding="dense">
<TableCell className={classes.colAction} padding="dense"> {intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Action",
defaultMessage: "Action", description: "user action bar"
description: "user action bar" })}
})} </TableCell>
</TableCell> </TableRow>
</TableRow> </TableHead>
</TableHead> <TableFooter>
<TableFooter> <TableRow>
<TableRow> <TablePagination
<TablePagination colSpan={numberOfColumns}
colSpan={numberOfColumns} settings={settings}
settings={settings} hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
hasNextPage={ onNextPage={onNextPage}
pageInfo && !disabled ? pageInfo.hasNextPage : false onUpdateListSettings={onUpdateListSettings}
} hasPreviousPage={
onNextPage={onNextPage} pageInfo && !disabled ? pageInfo.hasPreviousPage : false
onUpdateListSettings={onUpdateListSettings} }
hasPreviousPage={ onPreviousPage={onPreviousPage}
pageInfo && !disabled ? pageInfo.hasPreviousPage : false />
} </TableRow>
onPreviousPage={onPreviousPage} </TableFooter>
/> <TableBody>
</TableRow> {renderCollection(
</TableFooter> webhooks,
<TableBody> webhook => (
{renderCollection( <TableRow
webhooks, hover={!!webhook}
webhook => { className={!!webhook ? classes.tableRow : undefined}
return ( onClick={webhook ? onRowClick(webhook.id) : undefined}
<TableRow key={webhook ? webhook.id : "skeleton"}
hover={!!webhook} >
className={!!webhook ? classes.link : undefined} <TableCell className={classes.colName}>
{maybe<React.ReactNode>(() => webhook.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colActive}>
{maybe<React.ReactNode>(
() => webhook.serviceAccount.name,
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colAction}>
<IconButton
color="primary"
onClick={webhook ? onRowClick(webhook.id) : undefined} onClick={webhook ? onRowClick(webhook.id) : undefined}
key={webhook ? webhook.id : "skeleton"}
> >
<TableCell className={classes.colName}> <EditIcon />
{maybe<React.ReactNode>(() => webhook.name, <Skeleton />)} </IconButton>
</TableCell> <IconButton
<TableCell className={classes.colActive}> color="primary"
{maybe<React.ReactNode>( onClick={
() => webhook.serviceAccount.name, webhook
<Skeleton /> ? stopPropagation(() => onRemove(webhook.id))
)} : undefined
</TableCell> }
<TableCell className={classes.colAction}> >
<IconButton <DeleteIcon />
color="primary" </IconButton>
onClick={webhook ? onRowClick(webhook.id) : undefined} </TableCell>
> </TableRow>
<EditIcon /> ),
</IconButton> () => (
<IconButton <TableRow>
color="primary" <TableCell colSpan={numberOfColumns}>
onClick={ {intl.formatMessage({
webhook defaultMessage: "No webhooks found"
? stopPropagation(() => onRemove(webhook.id)) })}
: undefined </TableCell>
} </TableRow>
> )
<DeleteIcon /> )}
</IconButton> </TableBody>
</TableCell> </Table>
</TableRow> </Card>
); );
}, };
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
{intl.formatMessage({
defaultMessage: "No webhooks found"
})}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
);
}
);
WebhooksList.displayName = "WebhooksList"; WebhooksList.displayName = "WebhooksList";
export default WebhooksList; export default WebhooksList;

2
src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx
View file

@ -21,7 +21,7 @@ const props: WebhooksListPageProps = {
webhooks: webhookList webhooks: webhookList
}; };
storiesOf("Views / Services / Service list", module) storiesOf("Views / Webhook / Webhook list", module)
.addDecorator(Decorator) .addDecorator(Decorator)
.add("default", () => <WebhooksListPage {...props} />) .add("default", () => <WebhooksListPage {...props} />)
.add("loading", () => ( .add("loading", () => (

39
src/webhooks/queries.ts
View file

@ -1,18 +1,9 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { TypedQuery } from "../queries"; import { TypedQuery } from "../queries";
import { ServiceList, ServiceListVariables } from "./types/ServiceList";
import { Webhook, WebhookVariables } from "./types/Webhook"; import { Webhook, WebhookVariables } from "./types/Webhook";
import { Webhooks, WebhooksVariables } from "./types/Webhooks"; import { Webhooks, WebhooksVariables } from "./types/Webhooks";
export const serviceFragment = gql`
fragment ServiceFragment on ServiceAccount {
id
name
isActive
}
`;
export const webhooksFragment = gql` export const webhooksFragment = gql`
fragment WebhookFragment on Webhook { fragment WebhookFragment on Webhook {
id id
@ -59,37 +50,9 @@ export const TypedWebhooksListQuery = TypedQuery<Webhooks, WebhooksVariables>(
webhooksList webhooksList
); );
const serviceList = gql`
${serviceFragment}
query ServiceList($first: Int, $after: String, $last: Int, $before: String) {
serviceAccounts(
first: $first
after: $after
before: $before
last: $last
) {
edges {
node {
...ServiceFragment
}
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
}
}
`;
export const TypedServiceListQuery = TypedQuery<
ServiceList,
ServiceListVariables
>(serviceList);
const webhooksDetails = gql` const webhooksDetails = gql`
${webhooksFragment} ${webhooksFragment}
query Webhook($id: ID!) { query WebhookDetails($id: ID!) {
webhook(id: $id) { webhook(id: $id) {
...WebhookFragment ...WebhookFragment
} }

3
src/webhooks/types/ServiceList.ts
View file

@ -2,8 +2,6 @@
/* eslint-disable */ /* eslint-disable */
// This file was automatically generated and should not be edited. // This file was automatically generated and should not be edited.
import { ServiceAccountFilterInput } from "./../../types/globalTypes";
// ==================================================== // ====================================================
// GraphQL query operation: ServiceList // GraphQL query operation: ServiceList
// ==================================================== // ====================================================
@ -43,5 +41,4 @@ export interface ServiceListVariables {
after?: string | null; after?: string | null;
last?: number | null; last?: number | null;
before?: string | null; before?: string | null;
filter?: ServiceAccountFilterInput | null;
} }

52
src/webhooks/views/WebhooksCreate.tsx
View file

@ -10,7 +10,6 @@ import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage"; import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
import { TypedWebhookCreate } from "../mutations"; import { TypedWebhookCreate } from "../mutations";
import { TypedServiceListQuery } from "../queries";
import { import {
webhooksListUrl, webhooksListUrl,
WebhooksListUrlQueryParams, WebhooksListUrlQueryParams,
@ -43,7 +42,7 @@ export const WebhooksCreate: React.StatelessComponent<
return ( return (
<TypedWebhookCreate onCompleted={onSubmit}> <TypedWebhookCreate onCompleted={onSubmit}>
{(WebhookCreate, webhookCreateOpts) => { {(WebhookCreate, webhookCreateOpts) => {
const handleSubmit = (data: FormData) => { const handleSubmit = (data: FormData) =>
WebhookCreate({ WebhookCreate({
variables: { variables: {
input: { input: {
@ -58,7 +57,6 @@ export const WebhooksCreate: React.StatelessComponent<
} }
} }
}); });
};
const formTransitionState = getMutationState( const formTransitionState = getMutationState(
webhookCreateOpts.called, webhookCreateOpts.called,
@ -67,33 +65,27 @@ export const WebhooksCreate: React.StatelessComponent<
); );
return ( return (
<TypedServiceListQuery displayLoader variables={{ first: 99 }}> <>
{({ data }) => { <WindowTitle
return ( title={intl.formatMessage({
<> defaultMessage: "Create Webhook",
<WindowTitle description: "window title"
title={intl.formatMessage({ })}
defaultMessage: "Create Webhook", />
description: "window title" <WebhookCreatePage
})} disabled={false}
/> errors={maybe(
<WebhookCreatePage () => webhookCreateOpts.data.webhookCreate.errors,
disabled={false} []
errors={maybe( )}
() => webhookCreateOpts.data.webhookCreate.errors, services={maybe(() =>
[] data.serviceAccounts.edges.map(edge => edge.node)
)} )}
services={maybe(() => onBack={handleBack}
data.serviceAccounts.edges.map(edge => edge.node) onSubmit={handleSubmit}
)} saveButtonBarState={formTransitionState}
onBack={handleBack} />
onSubmit={handleSubmit} </>
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</TypedServiceListQuery>
); );
}} }}
</TypedWebhookCreate> </TypedWebhookCreate>

104
src/webhooks/views/WebhooksDetails.tsx
View file

@ -5,13 +5,14 @@ import { commonMessages } from "@saleor/intl";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc"; import { getMutationState, maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage"; import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations"; import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
import { TypedServiceListQuery, TypedWebhooksDetailsQuery } from "../queries"; import { TypedWebhooksDetailsQuery } from "../queries";
import { import {
webhooksListUrl, webhooksListUrl,
WebhooksListUrlQueryParams, WebhooksListUrlQueryParams,
@ -59,8 +60,17 @@ export const WebhooksDetails: React.StatelessComponent<
} }
}; };
const onWebhookUpdate = (data: WebhookUpdate) => {
if (data.webhookUpdate.errors.length === 0) {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(webhooksUrl(data.webhookUpdate.webhook.id));
}
};
return ( return (
<TypedWebhookUpdate> <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{(webhookUpdate, webhookUpdateOpts) => ( {(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}> <TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookDelete, webhookDeleteOpts) => ( {(webhookDelete, webhookDeleteOpts) => (
@ -91,53 +101,49 @@ export const WebhooksDetails: React.StatelessComponent<
); );
return ( return (
<TypedServiceListQuery variables={{ first: 99 }}> <>
{({ data }) => ( <WindowTitle
<> title={maybe(() => WebhookDetails.data.webhook.name)}
<WindowTitle />
title={maybe(() => WebhookDetails.data.webhook.name)} <WebhooksDetailsPage
/> disabled={WebhookDetails.loading}
<WebhooksDetailsPage errors={formErrors}
disabled={WebhookDetails.loading} saveButtonBarState={formTransitionState}
errors={formErrors} webhook={maybe(() => WebhookDetails.data.webhook)}
saveButtonBarState={formTransitionState} services={maybe(() =>
webhook={maybe(() => WebhookDetails.data.webhook)} data.serviceAccounts.edges.map(edge => edge.node)
services={maybe(() => )}
data.serviceAccounts.edges.map(edge => edge.node) onBack={() => navigate(webhooksListUrl())}
)} onDelete={() => openModal("remove")}
onBack={() => navigate(webhooksListUrl())} onSubmit={data => {
onDelete={() => openModal("remove")} webhookUpdate({
onSubmit={data => { variables: {
webhookUpdate({ id,
variables: { input: {
id, events: data.allEvents
input: { ? [WebhookEventTypeEnum.ALL_EVENTS]
events: data.allEvents : data.events,
? [WebhookEventTypeEnum.ALL_EVENTS] isActive: data.isActive,
: data.events, name: data.name,
isActive: data.isActive, secretKey: data.secretKey,
name: data.name, serviceAccount: data.serviceAccount,
secretKey: data.secretKey, targetUrl: data.targetUrl
serviceAccount: data.serviceAccount, }
targetUrl: data.targetUrl }
} });
} }}
}); />
}} <WebhookDeleteDialog
/> confirmButtonState={deleteTransitionState}
<WebhookDeleteDialog name={maybe(
confirmButtonState={deleteTransitionState} () => WebhookDetails.data.webhook.name,
name={maybe( "..."
() => WebhookDetails.data.webhook.name, )}
"..." onClose={closeModal}
)} onConfirm={handleRemoveConfirm}
onClose={closeModal} open={params.action === "remove"}
onConfirm={handleRemoveConfirm} />
open={params.action === "remove"} </>
/>
</>
)}
</TypedServiceListQuery>
); );
}} }}
</TypedWebhooksDetailsQuery> </TypedWebhooksDetailsQuery>