From c8dbe00db408c6675743c51ac8d64c901b2688c1 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Fri, 11 Oct 2019 15:35:33 +0200 Subject: [PATCH] Fix small issues --- src/configuration/index.tsx | 2 +- .../WebhookCreatePage/WebhookCreatePage.tsx | 95 ++++--- .../WebhooksCreatePage.stories.tsx | 2 +- .../WebhookEvents/WebhookEvents.tsx | 47 ++-- .../components/WebhookInfo/WebhookInfo.tsx | 26 +- .../WebhookStatus/WebhookStatus.tsx | 5 +- .../WebhooksDetailsPage.stories.tsx | 2 +- .../WebhooksDetailsPage.tsx | 117 ++++---- .../components/WebhooksList/WebhooksList.tsx | 255 +++++++++--------- .../WebhookListPage.stories.tsx | 2 +- src/webhooks/queries.ts | 39 +-- src/webhooks/types/ServiceList.ts | 3 - src/webhooks/views/WebhooksCreate.tsx | 52 ++-- src/webhooks/views/WebhooksDetails.tsx | 104 +++---- 14 files changed, 346 insertions(+), 405 deletions(-) diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx index 38af5d7d6..1ca93d41a 100644 --- a/src/configuration/index.tsx +++ b/src/configuration/index.tsx @@ -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: , permission: PermissionEnum.MANAGE_WEBHOOKS, diff --git a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx index 1701f66d1..af32e669d 100644 --- a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx +++ b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx @@ -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 = ({ return (
- {({ data, errors, hasChanged, submit, change }) => { - return ( - - - {intl.formatMessage(sectionNames.plugins)} - - - -
- services, [])} - errors={errors} - onChange={change} - /> -
-
- - - -
- - - - ); - }} + {({ data, errors, hasChanged, submit, change }) => ( + + + {intl.formatMessage(sectionNames.plugins)} + + + +
+ services, [])} + errors={errors} + onChange={change} + /> +
+
+ + + +
+ + + + )}
); }; diff --git a/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx b/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx index 58349aa2f..114b584cb 100644 --- a/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx +++ b/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx @@ -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", () => ) .add("loading", () => ) diff --git a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx index dda09bc3e..589f30bf2 100644 --- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx +++ b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx @@ -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 = ({ const intl = useIntl(); const eventsEnum = Object.values(WebhookEventTypeEnum); - const handleAllEventsChange = (event: React.ChangeEvent) => - onChange(event, () => - onChange({ - target: { - name: "events", - value: WebhookEventTypeEnum.ALL_EVENTS - } - } as any) - ); - const handleEventsChange = (event: React.ChangeEvent) => { + 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 = ({ />
{!data.allEvents && - eventsEnum.map((event, index) => { - if (index !== 0) { - return ( -
- -
- ); - } + eventsEnum.slice(1).map(event => { + return ( +
+ +
+ ); })} diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx index fcdb88ac5..49a732d03 100644 --- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx +++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx @@ -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 = ({ /> - {intl.formatMessage({ - defaultMessage: "General Information", - description: "webhook general information" - })} + {intl.formatMessage(commonMessages.generalInformations)} = ({ description: "webhook specific information" })} - ({ label: service.name, value: service.id }))} - name="serviceAccount" - value={data.serviceAccount} - label={intl.formatMessage({ - defaultMessage: "Assign to Service Account" - })} - onChange={onChange} + InputProps={{ + autoComplete: "off" + }} /> ) => void; + onChange: (event: FormChange) => void; } -const WebhookStatus: React.StatelessComponent = ({ +const WebhookStatus: React.FC = ({ data, disabled, onChange diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx index dbb865240..fd32a6622 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx +++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx @@ -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", () => ) .add("loading", () => ( diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx index 675256f50..7863e05bc 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx +++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx @@ -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 (
- {({ data, errors, hasChanged, submit, change }) => { - return ( - - - {intl.formatMessage(sectionNames.plugins)} - - webhook.name, "...") - } - )} - /> - -
- services, [])} - errors={errors} - onChange={change} - /> -
-
- - - -
- - - - ); - }} + {({ data, errors, hasChanged, submit, change }) => ( + + + {intl.formatMessage(sectionNames.plugins)} + + webhook.name, "...") + } + )} + /> + +
+ services, [])} + errors={errors} + onChange={change} + /> +
+
+ + + +
+ + + + )}
); }; diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index b861aa0da..6a41c087f 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx @@ -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) => { - const intl = useIntl(); - return ( - - - - - - {intl.formatMessage({ - defaultMessage: "Name", - description: "webhook name" - })} - - - {intl.formatMessage({ - defaultMessage: "Service Account", - description: "webhook service account" - })} - - - {intl.formatMessage({ - defaultMessage: "Action", - description: "user action bar" - })} - - - - - - - - - - {renderCollection( - webhooks, - webhook => { - return ( - = ({ + settings, + webhooks, + disabled, + onNextPage, + pageInfo, + onRowClick, + onRemove, + onUpdateListSettings, + onPreviousPage +}) => { + const intl = useIntl(); + const classes = useStyles({}); + return ( + +
+ + + + {intl.formatMessage({ + defaultMessage: "Name", + description: "webhook name" + })} + + + {intl.formatMessage({ + defaultMessage: "Service Account", + description: "webhook service account" + })} + + + {intl.formatMessage({ + defaultMessage: "Action", + description: "user action bar" + })} + + + + + + + + + + {renderCollection( + webhooks, + webhook => ( + + + {maybe(() => webhook.name, )} + + + {maybe( + () => webhook.serviceAccount.name, + + )} + + + - - {maybe(() => webhook.name, )} - - - {maybe( - () => webhook.serviceAccount.name, - - )} - - - - - - onRemove(webhook.id)) - : undefined - } - > - - - - - ); - }, - () => ( - - - {intl.formatMessage({ - defaultMessage: "No webhooks found" - })} - - - ) - )} - -
- - ); - } -); + + + onRemove(webhook.id)) + : undefined + } + > + + + + + ), + () => ( + + + {intl.formatMessage({ + defaultMessage: "No webhooks found" + })} + + + ) + )} + + + + ); +}; WebhooksList.displayName = "WebhooksList"; export default WebhooksList; diff --git a/src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx b/src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx index 93d9eb879..cf4926d74 100644 --- a/src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx +++ b/src/webhooks/components/WebhooksListPage/WebhookListPage.stories.tsx @@ -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", () => ) .add("loading", () => ( diff --git a/src/webhooks/queries.ts b/src/webhooks/queries.ts index efdecc18f..f31a92524 100644 --- a/src/webhooks/queries.ts +++ b/src/webhooks/queries.ts @@ -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( 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 } diff --git a/src/webhooks/types/ServiceList.ts b/src/webhooks/types/ServiceList.ts index 0d1b614fe..fe971e15d 100644 --- a/src/webhooks/types/ServiceList.ts +++ b/src/webhooks/types/ServiceList.ts @@ -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; } diff --git a/src/webhooks/views/WebhooksCreate.tsx b/src/webhooks/views/WebhooksCreate.tsx index 2aaf021cb..fc58d5dff 100644 --- a/src/webhooks/views/WebhooksCreate.tsx +++ b/src/webhooks/views/WebhooksCreate.tsx @@ -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 ( {(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 ( - - {({ data }) => { - return ( - <> - - webhookCreateOpts.data.webhookCreate.errors, - [] - )} - services={maybe(() => - data.serviceAccounts.edges.map(edge => edge.node) - )} - onBack={handleBack} - onSubmit={handleSubmit} - saveButtonBarState={formTransitionState} - /> - - ); - }} - + <> + + webhookCreateOpts.data.webhookCreate.errors, + [] + )} + services={maybe(() => + data.serviceAccounts.edges.map(edge => edge.node) + )} + onBack={handleBack} + onSubmit={handleSubmit} + saveButtonBarState={formTransitionState} + /> + ); }} diff --git a/src/webhooks/views/WebhooksDetails.tsx b/src/webhooks/views/WebhooksDetails.tsx index 94f75d351..ed93db46b 100644 --- a/src/webhooks/views/WebhooksDetails.tsx +++ b/src/webhooks/views/WebhooksDetails.tsx @@ -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 ( - + {(webhookUpdate, webhookUpdateOpts) => ( {(webhookDelete, webhookDeleteOpts) => ( @@ -91,53 +101,49 @@ export const WebhooksDetails: React.StatelessComponent< ); return ( - - {({ data }) => ( - <> - WebhookDetails.data.webhook.name)} - /> - 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 - } - } - }); - }} - /> - WebhookDetails.data.webhook.name, - "..." - )} - onClose={closeModal} - onConfirm={handleRemoveConfirm} - open={params.action === "remove"} - /> - - )} - + <> + WebhookDetails.data.webhook.name)} + /> + 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 + } + } + }); + }} + /> + WebhookDetails.data.webhook.name, + "..." + )} + onClose={closeModal} + onConfirm={handleRemoveConfirm} + open={params.action === "remove"} + /> + ); }}