EditView Setup

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

@@ -0,0 +1,11 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+export default Wrapper;

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

@@ -4,13 +4,114 @@
  *
  */
 
-import React from 'react';
+import React, { useEffect, useReducer } from 'react';
+import { useLocation } from 'react-router-dom';
+import { isEmpty, difference } from 'lodash';
+import { Header } from '@buffetjs/custom';
+import { request, useGlobalContext } from 'strapi-helper-plugin';
+
+import Wrapper from './Wrapper';
+
+import reducer, { initialState } from './reducer';
 
 function EditView() {
+  const { formatMessage } = useGlobalContext();
+  const [reducerState, dispatch] = useReducer(reducer, initialState);
+  const location = useLocation();
+
+  const { modifiedWebhook, initialWebhook } = reducerState.toJS();
+
+  const { name } = modifiedWebhook;
+
+  const id = location.pathname.split('/')[3];
+  const isCreatingWebhook = id === 'create';
+
+  useEffect(() => {
+    if (!isCreatingWebhook) {
+      fetchData();
+    }
+  }, [fetchData, isCreatingWebhook]);
+
+  const fetchData = async () => {
+    try {
+      const { data } = await request(`/admin/webhooks/${id}`, {
+        method: 'GET',
+      });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data,
+      });
+    } catch (err) {
+      if (err.code !== 20) {
+        strapi.notification.error('notification.error');
+      }
+    }
+  };
+
+  // Header props
+  const headerTitle = isCreatingWebhook
+    ? formatMessage({
+        id: `Settings.webhooks.create`,
+      })
+    : name;
+
+  const actionsAreDisabled = isEmpty(
+    difference(initialWebhook, modifiedWebhook)
+  );
+
+  const actions = [
+    {
+      onClick: () => {},
+      color: 'primary',
+      disabled: actionsAreDisabled,
+      type: 'button',
+      title: formatMessage({
+        id: `Settings.webhooks.trigger`,
+      }),
+      style: {
+        paddingRight: 15,
+        paddingLeft: 15,
+      },
+    },
+    {
+      onClick: () => {},
+      color: 'cancel',
+      disabled: actionsAreDisabled,
+      type: 'button',
+      title: formatMessage({
+        id: `app.components.Button.reset`,
+      }),
+      style: {
+        paddingRight: 20,
+        paddingLeft: 20,
+      },
+    },
+    {
+      onClick: () => {},
+      color: 'success',
+      disabled: actionsAreDisabled,
+      type: 'submit',
+      title: formatMessage({
+        id: `app.components.Button.save`,
+      }),
+      style: {
+        minWidth: 140,
+      },
+    },
+  ];
+  const headerProps = {
+    title: {
+      label: headerTitle,
+    },
+    actions: actions,
+  };
+
   return (
-    <div>
+    <Wrapper>
+      <Header {...headerProps} />
       <p>Edit</p>
-    </div>
+    </Wrapper>
   );
 }
 

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

@@ -0,0 +1,22 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  initialWebhook: {},
+  modifiedWebhook: {},
+  shouldRefetchData: false,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('initialWebhook', () => fromJS(action.data))
+        .update('modifiedWebhook', () => fromJS(action.data))
+        .update('shouldRefetchData', () => false);
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

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

@@ -70,7 +70,7 @@ function ListView() {
 
   const newButtonProps = {
     label: addBtnLabel,
-    onClick: () => {},
+    onClick: () => handleCreateClick(),
     color: 'primary',
     type: 'button',
     icon: <Plus fill="#007eff" />,
@@ -132,6 +132,10 @@ function ListView() {
     }
   };
 
+  const handleCreateClick = () => {
+    push(`${location.pathname}/create`);
+  };
+
   const handleEditClick = id => {
     push(`${location.pathname}/${id}`);
   };

packages/strapi-admin/admin/src/translations/en.json

@@ -22,6 +22,7 @@
   "app.components.BlockLink.documentation.content": "Discover the concepts, reference guides and tutorials.",
   "app.components.Button.cancel": "Cancel",
   "app.components.Button.save": "Save",
+  "app.components.Button.reset": "Reset",
   "app.components.ComingSoonPage.comingSoon": "Coming soon",
   "app.components.ComingSoonPage.featuresNotAvailable": "This feature is still under active development.",
   "app.components.DownloadInfo.download": "Download in progress...",
@@ -227,6 +228,8 @@
   "Settings.webhooks.list.empty.link": "See our documentation",
   "Settings.webhooks.enabled": "Enabled",
   "Settings.webhooks.disabled": "Disabled",
+  "Settings.webhooks.create": "Create a webhook",
+  "Settings.webhooks.trigger": "Trigger",
   "app.containers.App.notification.error.init": "An error occured while requesting the API",
   "components.Input.error.password.noMatch": "Passwords do not match",
   "form.button.done": "Done",