Add webhook delele to list

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -19,7 +19,7 @@ import { useIntl } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
 import TablePagination from "@saleor/components/TablePagination";
-import { maybe, renderCollection } from "@saleor/misc";
+import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
 import { ListProps } from "@saleor/types";
 import { Webhooks_webhooks_edges_node } from "../../types/Webhooks";
 
@@ -125,15 +125,18 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
                       )}
                     </TableCell>
                     <TableCell className={classes.colAction}>
-                      <div
+                      <IconButton
+                        color="primary"
                         onClick={webhook ? onRowClick(webhook.id) : undefined}
                       >
                         <EditIcon />
-                      </div>
+                      </IconButton>
                       <IconButton
                         color="primary"
                         onClick={
-                          webhook ? () => onRemove(webhook.id) : undefined
+                          webhook
+                            ? stopPropagation(() => onRemove(webhook.id))
+                            : undefined
                         }
                       >
                         <DeleteIcon />

src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx

@@ -13,7 +13,7 @@ import WebhooksList from "../WebhooksList/WebhooksList";
 export interface WebhooksListPageProps extends PageListProps {
   webhooks: Webhooks_webhooks_edges_node[];
   onBack: () => void;
-  onRemove: () => void;
+  onRemove: (id: string) => void;
 }
 
 const WebhooksListPage: React.StatelessComponent<WebhooksListPageProps> = ({

src/webhooks/views/WebhooksList.tsx

@@ -20,8 +20,7 @@ import {
   webhooksAddUrl,
   webhooksListUrl,
   WebhooksListUrlQueryParams,
-  webhooksUrl,
+  webhooksUrl
-  WebhookUrlDialog
 } from "../urls";
 
 interface WebhooksListProps {
@@ -50,27 +49,19 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
       true
     );
 
-  const openModal = (action: WebhookUrlDialog, id?: string) =>
+  return (
-    navigate(
+    <TypedWebhooksListQuery displayLoader variables={paginationState}>
-      webhooksListUrl({
+      {({ data, loading, refetch }) => {
-        ...params,
-        action,
-        id
-      })
-    );
-
         const onWebhookDelete = (data: WebhookDelete) => {
           if (data.webhookDelete.errors.length === 0) {
             notify({
               text: intl.formatMessage(commonMessages.savedChanges)
             });
             navigate(webhooksListUrl());
+            refetch();
           }
         };
-
         return (
-    <TypedWebhooksListQuery displayLoader variables={paginationState}>
-      {({ data, loading }) => (
           <TypedWebhookDelete onCompleted={onWebhookDelete}>
             {(webhookDelete, webhookDeleteOpts) => {
               const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
@@ -78,7 +69,7 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
                 paginationState,
                 params
               );
-            const handleRemove = (id: string) =>
+              const handleRemove = (id: string) => {
                 navigate(
                   webhooksListUrl({
                     ...params,
@@ -86,12 +77,14 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
                     id
                   })
                 );
-            const handleRemoveConfirm = () =>
+              };
+              const handleRemoveConfirm = () => {
                 webhookDelete({
                   variables: {
-                  id
+                    id: params.id
                   }
                 });
+              };
 
               const deleteTransitionState = getMutationState(
                 webhookDeleteOpts.called,
@@ -133,7 +126,8 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
               );
             }}
           </TypedWebhookDelete>
-      )}
+        );
+      }}
     </TypedWebhooksListQuery>
   );
 };