@bigbinary/neeto-message-templates-frontend 0.5.3 → 0.5.5

package/README.md

@@ -199,5 +199,66 @@ const App = () => {
 };
 ```
 
+#### ApiTemplates ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/ApiTemplates/index.jsx))
+This component is used to manage the API templates in your application. It provides the interface to add, delete, and edit API templates, along with filtering and search capabilities.
+
+##### Props
+- `ownerId`: To provide the `ID` of the owner to which the API templates belongs to.
+
+##### Optional props
+- `breadcrumbs`:  An array of objects that specify breadcrumbs for navigation.
+
+##### Usage
+```js
+import React from "react";
+
+import { ApiTemplates } from "neetomessagetemplates";
+
+const App = () => {
+  const breadcrumbs = [{ link: "/settings", text: "Settings" }];
+  const ownerId = "ownerId";
+
+  return <ApiTemplates {...{ breadcrumbs, ownerId }} />;
+};
+```
+
+#### SendToApiPane ([source code](https://github.com/bigbinary/neeto-message-templates-nano/blob/main/app/javascript/src/components/Api/SendToApiPane/index.jsx))
+This component provides a pane where users can select an API template and modify it if needed and send the data to the specified HTTP(S) endpoint.
+
+##### Props
+- `ownerId`: A boolean determining whether the side pane is open.
+- `onClose`: This function will be executed while closing the pane.
+- `onSubmit`: This function will be executed while submitting the form.
+- `isSubmitting`: A boolean to know the form submission status
+
+##### Usage
+```js
+import React, { useState } from "react";
+
+import { SendToApiPane } from "@bigbinary/neeto-message-templates-frontend";
+
+const App = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSendToApiPaneOpen, setIsSendToApiPaneOpen] = useState(false);
+
+  const ownerId = "ownerId";
+
+  const handleSubmit = () => {
+    setIsSubmitting(true);
+    // API call
+    setIsSubmitting(false);
+  };
+
+  return (
+    <SendToApiPane
+      {...{ isSubmitting, ownerId }}
+      isOpen={isSendToApiPaneOpen}
+      onClose={() => setIsSendToApiPaneOpen(false)}
+      onSubmit={handleSubmit}
+    />
+  );
+};
+```
+
 # Instructions for Publishing
 Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -66,6 +66,7 @@
       "endpoint": "Endpoint",
       "additionalData": "Additional data",
       "addApiTemplate": "Add new API template",
+      "editApiTemplate": "Edit API template",
       "addKeyValuePair": "Add new key value pair",
       "key": "Key",
       "value": "Value",

package/dist/index.cjs.js

@@ -2297,8 +2297,8 @@ var QUERY_KEYS = {
   NEETO_MESSAGE_TEMPLATES: "neeto-message-templates"
 };
 
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ownerIdValue = function ownerIdValue(ownerId) {
   return ramda.isEmpty(ownerId) ? undefined : ownerId;
 };
@@ -2313,7 +2313,7 @@ var useCreateTemplate = function useCreateTemplate(ownerId, options) {
       messageTemplate: messageTemplate,
       ownerId: ownerIdValue(ownerId)
     });
-  }, _objectSpread$6({
+  }, _objectSpread$7({
     keysToInvalidate: [QUERY_KEYS.NEETO_MESSAGE_TEMPLATES]
   }, options));
 };
@@ -2380,8 +2380,8 @@ var getMenuItems = function getMenuItems(_ref) {
   }];
 };
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RowActions = function RowActions(_ref) {
   var template = _ref.template,
     setManageTemplatePane = _ref.setManageTemplatePane,
@@ -2392,14 +2392,14 @@ var RowActions = function RowActions(_ref) {
     id = template.id;
   var templateType = useTemplateStore(ramda.prop("templateType"));
   var handleEditTemplate = function handleEditTemplate() {
-    return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true,
       isEdit: true,
       template: template
     }));
   };
   var handleDeleteTemplate = function handleDeleteTemplate() {
-    return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isDelete: true,
       template: template
     }));
@@ -2430,6 +2430,15 @@ var RowActions = function RowActions(_ref) {
   });
 };
 
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var handleEditTemplate = function handleEditTemplate(setManageTemplatePane, template) {
+  return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    isOpen: true,
+    isEdit: true,
+    template: template
+  }));
+};
 var renderSearchProps = function renderSearchProps(label, value) {
   return {
     placeholder: i18next.t("neetoMessageTemplate.template.search", {
@@ -2449,9 +2458,13 @@ var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane
     render: function render(name, template) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, name), /*#__PURE__*/React__default["default"].createElement(RowActions, {
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        label: name,
+        style: "link",
+        onClick: function onClick() {
+          return handleEditTemplate(setManageTemplatePane, template);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(RowActions, {
         ownerId: ownerId,
         setManageTemplatePane: setManageTemplatePane,
         template: template
@@ -3878,9 +3891,13 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
     render: function render(name, apiTemplate) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        style: "body2"
-      }, name), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        label: name,
+        style: "link",
+        onClick: function onClick() {
+          return handleOpenEditPane(apiTemplate);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
         dropdownProps: {
           strategy: "fixed"
         },
@@ -3959,7 +3976,7 @@ var Form = function Form(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+  }, isEdit ? t("neetoMessageTemplate.api.editApiTemplate") : t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
     formikProps: {
       initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
       validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
@@ -4129,6 +4146,9 @@ var ApiTemplates = function ApiTemplates(_ref) {
     },
     loading: isLoading || isFetching,
     rowData: templates,
+    scroll: {
+      x: "100%"
+    },
     columnData: buildTableColumnData({
       handleMarkAsActiveOrInactive: handleMarkAsActiveOrInactive,
       handleOpenDeleteAlert: handleOpenDeleteAlert,