Fix small issues

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: <Webhooks fontSize="inherit" viewBox="0 0 44 44" />,
           permission: PermissionEnum.MANAGE_WEBHOOKS,

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,8 +58,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
 
   return (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
-      {({ data, errors, hasChanged, submit, change }) => {
+      {({ data, errors, hasChanged, submit, change }) => (
-        return (
         <Container>
           <AppHeader onBack={onBack}>
             {intl.formatMessage(sectionNames.plugins)}
@@ -102,8 +100,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
             onSave={submit}
           />
         </Container>
-        );
+      )}
-      }}
     </Form>
   );
 };

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", () => <WebhookCreatePage {...props} />)
   .add("loading", () => <WebhookCreatePage {...props} disabled={true} />)

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<WebhookEventsProps> = ({
   const intl = useIntl();
   const eventsEnum = Object.values(WebhookEventTypeEnum);
 
-  const handleAllEventsChange = (event: React.ChangeEvent<any>) =>
+  const handleAllEventsChange = () =>
-    onChange(event, () =>
     onChange({
       target: {
         name: "events",
         value: WebhookEventTypeEnum.ALL_EVENTS
       }
-      } as any)
+    } as any);
-    );
+  const handleEventsChange = (event: ChangeEvent) => {
-  const handleEventsChange = (event: React.ChangeEvent<any>) => {
     onChange({
       target: {
         name: "events",
@@ -73,10 +72,9 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
         />
         <Hr />
         {!data.allEvents &&
-          eventsEnum.map((event, index) => {
+          eventsEnum.slice(1).map(event => {
-            if (index !== 0) {
             return (
-                <div key={index}>
+              <div key={event}>
                 <ControlledCheckbox
                   checked={data.events.includes(event)}
                   disabled={disabled}
@@ -86,7 +84,6 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
                 />
               </div>
             );
-            }
           })}
       </CardContent>
     </Card>

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<WebhookInfoProps> = ({
       />
       <CardContent>
         <Typography className={classes.title}>
-          {intl.formatMessage({
+          {intl.formatMessage(commonMessages.generalInformations)}
-            defaultMessage: "General Information",
-            description: "webhook general information"
-          })}
         </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"
+          InputProps={{
-          value={data.serviceAccount}
+            autoComplete: "off"
-          label={intl.formatMessage({
+          }}
-            defaultMessage: "Assign to Service Account"
-          })}
-          onChange={onChange}
         />
         <FormSpacer />
         <TextField

src/webhooks/components/WebhookStatus/WebhookStatus.tsx

@@ -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

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", () => <WebhooksDetailsPage {...props} />)
   .add("loading", () => (

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(
+    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),
     id: maybe(() => webhook.id, null),
@@ -70,8 +67,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
   };
   return (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
-      {({ data, errors, hasChanged, submit, change }) => {
+      {({ data, errors, hasChanged, submit, change }) => (
-        return (
         <Container>
           <AppHeader onBack={onBack}>
             {intl.formatMessage(sectionNames.plugins)}
@@ -79,11 +75,11 @@ const WebhooksDetailsPage: React.StatelessComponent<
           <PageHeader
             title={intl.formatMessage(
               {
-                  defaultMessage: "{pluginName} Details",
+                defaultMessage: "{webhookName} Details",
                 description: "header"
               },
               {
-                  pluginName: maybe(() => webhook.name, "...")
+                webhookName: maybe(() => webhook.name, "...")
               }
             )}
           />
@@ -119,8 +115,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
             onDelete={onDelete}
           />
         </Container>
-        );
+      )}
-      }}
     </Form>
   );
 };

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 {
+import { Theme } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} 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,8 +24,7 @@ export interface WebhooksListProps extends ListProps {
   onRemove: (id: string) => void;
 }
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) => ({
-  createStyles({
   [theme.breakpoints.up("lg")]: {
     colAction: {
       "& svg": {
@@ -43,16 +38,14 @@ const styles = (theme: Theme) =>
   colAction: {},
   colActive: {},
   colName: {},
-    link: {
+  tableRow: {
     cursor: "pointer"
   }
-  });
+}));
 
 const numberOfColumns = 4;
 
-const WebhooksList = withStyles(styles, { name: "PluginList" })(
+const WebhooksList: React.FC<WebhooksListProps> = ({
-  ({
-    classes,
   settings,
   webhooks,
   disabled,
@@ -62,8 +55,9 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
   onRemove,
   onUpdateListSettings,
   onPreviousPage
-  }: WebhooksListProps & WithStyles<typeof styles>) => {
+}) => {
   const intl = useIntl();
+  const classes = useStyles({});
   return (
     <Card>
       <Table>
@@ -94,9 +88,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
             <TablePagination
               colSpan={numberOfColumns}
               settings={settings}
-                hasNextPage={
+              hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
-                  pageInfo && !disabled ? pageInfo.hasNextPage : false
-                }
               onNextPage={onNextPage}
               onUpdateListSettings={onUpdateListSettings}
               hasPreviousPage={
@@ -109,11 +101,10 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
         <TableBody>
           {renderCollection(
             webhooks,
-              webhook => {
+            webhook => (
-                return (
               <TableRow
                 hover={!!webhook}
-                    className={!!webhook ? classes.link : undefined}
+                className={!!webhook ? classes.tableRow : undefined}
                 onClick={webhook ? onRowClick(webhook.id) : undefined}
                 key={webhook ? webhook.id : "skeleton"}
               >
@@ -145,8 +136,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
                   </IconButton>
                 </TableCell>
               </TableRow>
-                );
+            ),
-              },
             () => (
               <TableRow>
                 <TableCell colSpan={numberOfColumns}>
@@ -161,7 +151,6 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
       </Table>
     </Card>
   );
-  }
+};
-);
 WebhooksList.displayName = "WebhooksList";
 export default WebhooksList;

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", () => <WebhooksListPage {...props} />)
   .add("loading", () => (

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<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
     }

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;
 }

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 (
     <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,
@@ -66,9 +64,6 @@ export const WebhooksCreate: React.StatelessComponent<
           maybe(() => webhookCreateOpts.data.webhookCreate.errors)
         );
 
-        return (
-          <TypedServiceListQuery displayLoader variables={{ first: 99 }}>
-            {({ data }) => {
         return (
           <>
             <WindowTitle
@@ -93,9 +88,6 @@ export const WebhooksCreate: React.StatelessComponent<
           </>
         );
       }}
-          </TypedServiceListQuery>
-        );
-      }}
     </TypedWebhookCreate>
   );
 };

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 (
-    <TypedWebhookUpdate>
+    <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
       {(webhookUpdate, webhookUpdateOpts) => (
         <TypedWebhookDelete onCompleted={onWebhookDelete}>
           {(webhookDelete, webhookDeleteOpts) => (
@@ -91,8 +101,6 @@ export const WebhooksDetails: React.StatelessComponent<
                 );
 
                 return (
-                  <TypedServiceListQuery variables={{ first: 99 }}>
-                    {({ data }) => (
                   <>
                     <WindowTitle
                       title={maybe(() => WebhookDetails.data.webhook.name)}
@@ -136,8 +144,6 @@ export const WebhooksDetails: React.StatelessComponent<
                       open={params.action === "remove"}
                     />
                   </>
-                    )}
-                  </TypedServiceListQuery>
                 );
               }}
             </TypedWebhooksDetailsQuery>