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({
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" />,
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 { UserError } from "@saleor/types";
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 { 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 {
id: string;
@ -59,51 +58,49 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => {
return (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
</AppHeader>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "header"
})}
/>
<Grid>
<div>
<WebhookInfo
data={data}
disabled={disabled}
services={maybe(() => services, [])}
errors={errors}
onChange={change}
/>
</div>
<div>
<WebhookEvents
data={data}
disabled={disabled}
onChange={change}
/>
<FormSpacer />
<WebhookStatus
data={data}
disabled={disabled}
onChange={change}
/>
</div>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
/>
</Container>
);
}}
{({ data, errors, hasChanged, submit, change }) => (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
</AppHeader>
<PageHeader
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "header"
})}
/>
<Grid>
<div>
<WebhookInfo
data={data}
disabled={disabled}
services={maybe(() => services, [])}
errors={errors}
onChange={change}
/>
</div>
<div>
<WebhookEvents
data={data}
disabled={disabled}
onChange={change}
/>
<FormSpacer />
<WebhookStatus
data={data}
disabled={disabled}
onChange={change}
/>
</div>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
/>
</Container>
)}
</Form>
);
};

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

@ -13,7 +13,7 @@ const props: WebhookCreatePageProps = {
saveButtonBarState: "default",
services: []
};
storiesOf("Views / Services / Create service", module)
storiesOf("Views / Webhook / Create webhook", module)
.addDecorator(Decorator)
.add("default", () => <WebhookCreatePage {...props} />)
.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 ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Hr from "@saleor/components/Hr";
import { ChangeEvent } from "@saleor/hooks/useForm";
import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import React from "react";
import { useIntl } from "react-intl";
import { WebhookEventTypeEnum } from "../../../types/globalTypes";
interface WebhookEventsProps {
data: {
@ -25,16 +26,14 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
const intl = useIntl();
const eventsEnum = Object.values(WebhookEventTypeEnum);
const handleAllEventsChange = (event: React.ChangeEvent<any>) =>
onChange(event, () =>
onChange({
target: {
name: "events",
value: WebhookEventTypeEnum.ALL_EVENTS
}
} as any)
);
const handleEventsChange = (event: React.ChangeEvent<any>) => {
const handleAllEventsChange = () =>
onChange({
target: {
name: "events",
value: WebhookEventTypeEnum.ALL_EVENTS
}
} as any);
const handleEventsChange = (event: ChangeEvent) => {
onChange({
target: {
name: "events",
@ -73,20 +72,18 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
/>
<Hr />
{!data.allEvents &&
eventsEnum.map((event, index) => {
if (index !== 0) {
return (
<div key={index}>
<ControlledCheckbox
checked={data.events.includes(event)}
disabled={disabled}
label={event.replace(/\./, "")}
name={event}
onChange={handleEventsChange}
/>
</div>
);
}
eventsEnum.slice(1).map(event => {
return (
<div key={event}>
<ControlledCheckbox
checked={data.events.includes(event)}
disabled={disabled}
label={event.replace(/\./, "")}
name={event}
onChange={handleEventsChange}
/>
</div>
);
})}
</CardContent>
</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 Hr from "@saleor/components/Hr";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
import { commonMessages } from "@saleor/intl";
import { FormErrors } from "@saleor/types";
import { FormData } from "../WebhooksDetailsPage";
@ -54,10 +56,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
/>
<CardContent>
<Typography className={classes.title}>
{intl.formatMessage({
defaultMessage: "General Information",
description: "webhook general information"
})}
{intl.formatMessage(commonMessages.generalInformations)}
</Typography>
<TextField
disabled={disabled}
@ -81,17 +80,22 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
description: "webhook specific information"
})}
</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 => ({
label: service.name,
value: service.id
}))}
name="serviceAccount"
value={data.serviceAccount}
label={intl.formatMessage({
defaultMessage: "Assign to Service Account"
})}
onChange={onChange}
InputProps={{
autoComplete: "off"
}}
/>
<FormSpacer />
<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 CardTitle from "@saleor/components/CardTitle";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { FormChange } from "@saleor/hooks/useForm";
import React from "react";
import { useIntl } from "react-intl";
@ -11,10 +12,10 @@ import { FormData } from "../WebhooksDetailsPage";
interface WebhookStatusProps {
data: FormData;
disabled: boolean;
onChange: (event: React.ChangeEvent<any>) => void;
onChange: (event: FormChange) => void;
}
const WebhookStatus: React.StatelessComponent<WebhookStatusProps> = ({
const WebhookStatus: React.FC<WebhookStatusProps> = ({
data,
disabled,
onChange

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

@ -16,7 +16,7 @@ const props: WebhooksDetailsPageProps = {
saveButtonBarState: "default",
services: []
};
storiesOf("Views / Services / Service details", module)
storiesOf("Views / Webhook / Webhook details", module)
.addDecorator(Decorator)
.add("default", () => <WebhooksDetailsPage {...props} />)
.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 { UserError } from "@saleor/types";
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 { 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 {
id: string;
@ -54,11 +54,8 @@ const WebhooksDetailsPage: React.StatelessComponent<
}) => {
const intl = useIntl();
const initialForm: FormData = {
allEvents: maybe(
() =>
maybe(() => webhook.events, [])[0].eventType ===
WebhookEventTypeEnum.ALL_EVENTS,
false
allEvents: !!maybe(() => webhook.events, []).find(
event => event.eventType === WebhookEventTypeEnum.ALL_EVENTS
),
events: maybe(() => webhook.events, []).map(event => event.eventType),
id: maybe(() => webhook.id, null),
@ -70,57 +67,55 @@ const WebhooksDetailsPage: React.StatelessComponent<
};
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, change }) => {
return (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
</AppHeader>
<PageHeader
title={intl.formatMessage(
{
defaultMessage: "{pluginName} Details",
description: "header"
},
{
pluginName: maybe(() => webhook.name, "...")
}
)}
/>
<Grid>
<div>
<WebhookInfo
data={data}
disabled={disabled}
services={maybe(() => services, [])}
errors={errors}
onChange={change}
/>
</div>
<div>
<WebhookEvents
data={data}
onChange={change}
disabled={disabled}
/>
<FormSpacer />
<WebhookStatus
data={data}
disabled={disabled}
onChange={change}
/>
</div>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
onDelete={onDelete}
/>
</Container>
);
}}
{({ data, errors, hasChanged, submit, change }) => (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.plugins)}
</AppHeader>
<PageHeader
title={intl.formatMessage(
{
defaultMessage: "{webhookName} Details",
description: "header"
},
{
webhookName: maybe(() => webhook.name, "...")
}
)}
/>
<Grid>
<div>
<WebhookInfo
data={data}
disabled={disabled}
services={maybe(() => services, [])}
errors={errors}
onChange={change}
/>
</div>
<div>
<WebhookEvents
data={data}
onChange={change}
disabled={disabled}
/>
<FormSpacer />
<WebhookStatus
data={data}
disabled={disabled}
onChange={change}
/>
</div>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}
state={saveButtonBarState}
onCancel={onBack}
onSave={submit}
onDelete={onDelete}
/>
</Container>
)}
</Form>
);
};

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

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

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

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

39
src/webhooks/queries.ts
View file

@ -1,18 +1,9 @@
import gql from "graphql-tag";
import { TypedQuery } from "../queries";
import { ServiceList, ServiceListVariables } from "./types/ServiceList";
import { Webhook, WebhookVariables } from "./types/Webhook";
import { Webhooks, WebhooksVariables } from "./types/Webhooks";
export const serviceFragment = gql`
fragment ServiceFragment on ServiceAccount {
id
name
isActive
}
`;
export const webhooksFragment = gql`
fragment WebhookFragment on Webhook {
id
@ -59,37 +50,9 @@ export const TypedWebhooksListQuery = TypedQuery<Webhooks, WebhooksVariables>(
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`
${webhooksFragment}
query Webhook($id: ID!) {
query WebhookDetails($id: ID!) {
webhook(id: $id) {
...WebhookFragment
}

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

@ -2,8 +2,6 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ServiceAccountFilterInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL query operation: ServiceList
// ====================================================
@ -43,5 +41,4 @@ export interface ServiceListVariables {
after?: string | null;
last?: number | 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 WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
import { TypedWebhookCreate } from "../mutations";
import { TypedServiceListQuery } from "../queries";
import {
webhooksListUrl,
WebhooksListUrlQueryParams,
@ -43,7 +42,7 @@ export const WebhooksCreate: React.StatelessComponent<
return (
<TypedWebhookCreate onCompleted={onSubmit}>
{(WebhookCreate, webhookCreateOpts) => {
const handleSubmit = (data: FormData) => {
const handleSubmit = (data: FormData) =>
WebhookCreate({
variables: {
input: {
@ -58,7 +57,6 @@ export const WebhooksCreate: React.StatelessComponent<
}
}
});
};
const formTransitionState = getMutationState(
webhookCreateOpts.called,
@ -67,33 +65,27 @@ export const WebhooksCreate: React.StatelessComponent<
);
return (
<TypedServiceListQuery displayLoader variables={{ first: 99 }}>
{({ data }) => {
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "window title"
})}
/>
<WebhookCreatePage
disabled={false}
errors={maybe(
() => webhookCreateOpts.data.webhookCreate.errors,
[]
)}
services={maybe(() =>
data.serviceAccounts.edges.map(edge => edge.node)
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</TypedServiceListQuery>
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Webhook",
description: "window title"
})}
/>
<WebhookCreatePage
disabled={false}
errors={maybe(
() => webhookCreateOpts.data.webhookCreate.errors,
[]
)}
services={maybe(() =>
data.serviceAccounts.edges.map(edge => edge.node)
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</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 WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import React from "react";
import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
import { TypedServiceListQuery, TypedWebhooksDetailsQuery } from "../queries";
import { TypedWebhooksDetailsQuery } from "../queries";
import {
webhooksListUrl,
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 (
<TypedWebhookUpdate>
<TypedWebhookUpdate onCompleted={onWebhookUpdate}>
{(webhookUpdate, webhookUpdateOpts) => (
<TypedWebhookDelete onCompleted={onWebhookDelete}>
{(webhookDelete, webhookDeleteOpts) => (
@ -91,53 +101,49 @@ export const WebhooksDetails: React.StatelessComponent<
);
return (
<TypedServiceListQuery variables={{ first: 99 }}>
{({ data }) => (
<>
<WindowTitle
title={maybe(() => WebhookDetails.data.webhook.name)}
/>
<WebhooksDetailsPage
disabled={WebhookDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
webhook={maybe(() => WebhookDetails.data.webhook)}
services={maybe(() =>
data.serviceAccounts.edges.map(edge => edge.node)
)}
onBack={() => navigate(webhooksListUrl())}
onDelete={() => openModal("remove")}
onSubmit={data => {
webhookUpdate({
variables: {
id,
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ALL_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
}}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(
() => WebhookDetails.data.webhook.name,
"..."
)}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
</>
)}
</TypedServiceListQuery>
<>
<WindowTitle
title={maybe(() => WebhookDetails.data.webhook.name)}
/>
<WebhooksDetailsPage
disabled={WebhookDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
webhook={maybe(() => WebhookDetails.data.webhook)}
services={maybe(() =>
data.serviceAccounts.edges.map(edge => edge.node)
)}
onBack={() => navigate(webhooksListUrl())}
onDelete={() => openModal("remove")}
onSubmit={data => {
webhookUpdate({
variables: {
id,
input: {
events: data.allEvents
? [WebhookEventTypeEnum.ALL_EVENTS]
: data.events,
isActive: data.isActive,
name: data.name,
secretKey: data.secretKey,
serviceAccount: data.serviceAccount,
targetUrl: data.targetUrl
}
}
});
}}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
name={maybe(
() => WebhookDetails.data.webhook.name,
"..."
)}
onClose={closeModal}
onConfirm={handleRemoveConfirm}
open={params.action === "remove"}
/>
</>
);
}}
</TypedWebhooksDetailsQuery>