Webhook delete with popup warning

packages/strapi-admin/admin/src/components/ListRow/StyledListRow.js

@@ -0,0 +1,44 @@
+/**
+ *
+ * StyledListRow
+ *
+ */
+
+import styled from 'styled-components';
+import { CustomRow as Row } from '@buffetjs/styles';
+import { sizes } from 'strapi-helper-plugin';
+
+const StyledListRow = styled(Row)`
+  td {
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &:first-of-type {
+      padding-left: 30px;
+      width: 65px;
+    }
+    &:nth-of-type(2) {
+      max-width: 158px;
+    }
+    &:nth-of-type(3) {
+      max-width: 300px;
+    }
+    &:nth-of-type(4) {
+      min-width: 125px;
+    }
+    &:nth-of-type(5) {
+      .popup-wrapper {
+        width: 0;
+      }
+    }
+    @media (min-width: ${sizes.wide}) {
+      &:nth-of-type(3) {
+        max-width: 400px;
+      }
+    }
+  }
+`;
+
+export default StyledListRow;

packages/strapi-admin/admin/src/components/ListRow/index.js

@@ -4,12 +4,13 @@
  *
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
+import { PopUpWarning } from 'strapi-helper-plugin';
-import { CustomRow as Row } from '@buffetjs/styles';
 import { Checkbox, IconLinks } from '@buffetjs/core';
+
 import Switch from '../Switch';
+import StyledListRow from './StyledListRow';
 
 function ListRow({
   id,
@@ -20,6 +21,8 @@ function ListRow({
   onDeleteCLick,
   onEditClick,
 }) {
+  const [showModal, setShowModal] = useState(false);
+
   const links = [
     {
       icon: 'pencil',
@@ -30,7 +33,7 @@ function ListRow({
     {
       icon: 'trash',
       onClick: () => {
-        onDeleteCLick(id);
+        setShowModal(true);
       },
     },
   ];
@@ -39,28 +42,43 @@ function ListRow({
     onEnabledChange(value, id);
   };
 
+  const handleDeleteConfirm = () => {
+    onDeleteCLick(id);
+    setShowModal(false);
+  };
+
   return (
-    <Row>
+    <>
-      <td>
+      <StyledListRow>
-        <Checkbox name={name} value={false} onChange={() => {}} />
+        <td>
-      </td>
+          <Checkbox name={name} value={false} onChange={() => {}} />
-      <td>
+        </td>
-        <p>{name}</p>
+        <td>
-      </td>
+          <p>{name}</p>
-      <td>
+        </td>
-        <p>{url}</p>
+        <td>
-      </td>
+          <p>{url}</p>
-      <td>
+        </td>
-        <Switch
+        <td>
-          name={name}
+          <Switch
-          value={isEnabled}
+            name={name}
-          onChange={handleEnabledChange}
+            value={isEnabled}
-        ></Switch>
+            onChange={handleEnabledChange}
-      </td>
+          ></Switch>
-      <td>
+        </td>
-        <IconLinks links={links} />
+        <td>
-      </td>
+          <IconLinks links={links} />
-    </Row>
+          <div className="popup-wrapper">
+            <PopUpWarning
+              isOpen={showModal}
+              toggleModal={() => setShowModal(!showModal)}
+              popUpWarningType="danger"
+              onConfirm={handleDeleteConfirm}
+            />
+          </div>
+        </td>
+      </StyledListRow>
+    </>
   );
 }
 

packages/strapi-admin/admin/src/containers/Webhooks/ListView/Wrapper.js

@@ -5,7 +5,6 @@
  */
 
 import styled from 'styled-components';
-import { sizes } from 'strapi-helper-plugin';
 
 const Wrapper = styled.div`
   > div:first-of-type {
@@ -21,33 +20,6 @@ const Wrapper = styled.div`
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
-    table tr {
-      td {
-        p {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        &:first-of-type {
-          padding-left: 30px;
-          width: 65px;
-        }
-        &:nth-of-type(2) {
-          max-width: 158px;
-        }
-        &:nth-of-type(3) {
-          max-width: 300px;
-        }
-        &:nth-of-type(4) {
-          min-width: 125px;
-        }
-        @media (min-width: ${sizes.wide}) {
-          &:nth-of-type(3) {
-            max-width: 400px;
-          }
-        }
-      }
-    }
   }
   p {
     margin-bottom: 0;

packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js

@@ -29,9 +29,6 @@ function ListView() {
       try {
         const { data } = await request(`/admin/webhooks`, {
           method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
         });
 
         dispatch({
@@ -48,6 +45,9 @@ function ListView() {
     fetchData();
   }, []);
 
+  const webhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
+
+  // New button
   const addBtnLabel = formatMessage({
     id: `Settings.webhooks.list.button.add`,
   });
@@ -108,14 +108,28 @@ function ListView() {
   };
 
   const handleDeleteClick = id => {
-    console.log(id);
+    deleteWebhook(id);
   };
 
-  const webhookById = id => webhooks.find(webhook => webhook.id === id);
+  const deleteWebhook = async id => {
-  const webhookIndex = id => webhooks.findIndex(webhook => webhook.id === id);
+    try {
+      await request(`/admin/webhooks/${id}`, {
+        method: 'DELETE',
+      });
+
+      dispatch({
+        type: 'WEBHOOK_DELETED',
+        index: webhookIndex(id),
+      });
+    } catch (err) {
+      if (err.code !== 20) {
+        strapi.notification.error('notification.error');
+      }
+    }
+  };
 
   const handleEnabledChange = async (value, id) => {
-    const initialWebhookProps = webhookById(id);
+    const initialWebhookProps = webhooks[webhookIndex];
     const body = {
       ...initialWebhookProps,
       isEnabled: value,
@@ -124,9 +138,6 @@ function ListView() {
     try {
       await request(`/admin/webhooks/${id}`, {
         method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
         body,
       });
 

packages/strapi-admin/admin/src/containers/Webhooks/ListView/reducer.js

@@ -10,6 +10,14 @@ const reducer = (state, action) => {
       return state.update('webhooks', () => fromJS(action.data));
     case 'SET_WEBHOOK_ENABLED':
       return state.updateIn(['webhooks', ...action.keys], () => action.value);
+    case 'WEBHOOK_DELETED': {
+      console.log(state.get('webhooks'));
+      console.log(action.index);
+
+      return state.update('webhooks', webhooks =>
+        webhooks.splice(action.index, 1)
+      );
+    }
     default:
       return state;
   }