@bigbinary/neeto-rules-frontend 0.8.0 → 1.0.0

package/README.md

@@ -11,19 +11,19 @@ The `neeto-rules-nano` facilitates the management of automation rules within nee
       - [Installation](#installation-1)
       - [Instructions for development](#instructions-for-development)
       - [Components](#components)
-        - [NeetoRulesForm](#1-neetorulesform)
-        - [Field components for NeetoRulesForm](#2-field-components-for-neetorulesform)
-          - [InputField](#21-inputfield)
-          - [TextareaField](#22-textareafield)
-          - [SelectField](#23-selectfield)
-          - [MultiSelectField](#24-multiselectfield)
-          - [RadioField](#25-radiofield)
-          - [EventConditions](#26-eventconditions)
-          - [Conditions](#27-conditions)
-          - [Actions](#28-actions)
-          - [Custom action component](#29-custom-action-component)
-        - [RulePreview](#3-rulepreview)
-        - [RulesTable](#4-rulestable)
+        - [NeetoRules](#1-neetorules)
+        - [NeetoRulesForm](#2-neetorulesform)
+        - [Field components for NeetoRulesForm](#3-field-components-for-neetorulesform)
+          - [InputField](#31-inputfield)
+          - [TextareaField](#32-textareafield)
+          - [SelectField](#33-selectfield)
+          - [MultiSelectField](#34-multiselectfield)
+          - [RadioField](#35-radiofield)
+          - [EventConditions](#36-eventconditions)
+          - [Conditions](#37-conditions)
+          - [Actions](#38-actions)
+          - [Custom action component](#39-custom-action-component)
+        - [RulePreview](#4-rulepreview)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
 ## Development with Host Application
@@ -84,7 +84,82 @@ Check the [Frontend package development guide](https://neeto-engineering.neetokb
 
 ### Components
 
-#### 1. `NeetoRulesForm`
+#### 1. `NeetoRules`
+
+The `NeetoRules` component is used to add the dashboard for automation rules.
+
+![rules-dashboard](./docs/images/rules-dashboard.png)
+
+#### Props
+1. `breadcrumbs`: Breadcrumbs for the header of the dashboard.
+    1. `text`: Text for breadcrumb item
+    2. `link`: Link to breadcrumb item
+2. `allowReordering`: To specify if the user can reorder the automation rules. (Boolean).
+3. `helpPopoverProps`: To add help popover for the component. Refer [HelpPopover component doc](https://neeto-molecules.neeto.com/?path=/docs/helppopover--docs). NOTE: `href` from `helpLinkProps` will be used for displaying the link when showing `NoData` component.
+4. `rulesTableProps`: Props for the table in the dashboard:
+    1. `additionalColumns`: To add additional columns to the table. Refer [Table component doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
+
+    ```jsx
+    const additionalColumns = [
+        {
+        title: "Operated on",
+        dataIndex: "recentlyModifiedTickets",
+        width: 160,
+        description: "Number of tickets the rule has acted upon in the last 7 days",
+        render: recentlyModifiedTickets => (
+            <div className="text-center">{recentlyModifiedTickets}</div>
+        ),
+        },
+    ];
+    ```
+
+    2. `moreDropdownItems`: Array of dropdown items to be added to the MoreDropdown component in the table. Refer [MoreDropdown in table doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
+
+    ```jsx
+    const moreDropdownItems = [
+        {
+        key: "view-matching-tickets",
+        label: "View matching rules",
+        // onClick callback receives the selected rule
+        onClick: rule => {
+            setSelectedRule(rule);
+            setShowMatchingTickets(true);
+        },
+        },
+    ];
+    ```
+
+    3. `onPreview`: The callback function to call when the preview is clicked.
+    ```jsx
+    const onPreview = id => {
+        setRuleId(id);
+    };
+    ```
+
+
+5. `automationRulesPath`: The path for automation rules dashboard.
+
+    Following additional routes are considered by the component:
+
+    | Routes | Description |
+    | --- | --- |
+    | `{automationRulesPath}/edit` | Route to the rule edit form component. |
+    | `{automationRulesPath}/new` | Route to the rule create form component. |
+
+6. `automationRulesEndpoint`: The endpoint for automation rules.
+
+    Following endpoints will be used by the component:
+
+    | Endpoint | Action | Description |
+    | --- | --- | --- |
+    | GET `{automationRulesEndpoint}` | `index` | To fetch the list of automation rules.(Same will be used for pagination/filtering) |
+    | POST `{automationRulesEndpoint}/{id}/clone` | `clone` | To create the clone of the automation rule. |
+    | PATCH `{automationRulesEndpoint}/{id}` | `update` | To update the status of the automation rule. |
+    | DELETE `{automationRulesEndpoint}/{id}` | `destroy` | To delete the automation rule. |
+    | PATCH `{automationRulesEndpoint}/reorder` | `reorder` | To reorder the automation rules. |
+
+
+#### 2. `NeetoRulesForm`
 
 <div align="center">
   <img src="./docs/images/rules-form.png"/>
@@ -105,6 +180,8 @@ The `NeetoRulesForm` component is used to create and edit automation rules.
 7. condition
 8. actions
 
+> **Note:** The `NeetoRulesForm` component includes three fields by default with the following names: `name`(required), `description` and `status`.
+
 #### Props
 
 - `data`: The initial props for the form.
@@ -144,7 +221,7 @@ const { InputField, TextareaField, SelectField, Events, Card, Conditions, Action
 
 <br>
 
-#### 2. Field components for `NeetoRulesForm`
+#### 3. Field components for `NeetoRulesForm`
 
 NeetoRulesForm provides field components to create the automation rules form.
 
@@ -154,7 +231,7 @@ NeetoRulesForm provides field components to create the automation rules form.
 2. [neeto-desk-web](https://github.com/bigbinary/neeto-desk-web/blob/edc9bad9305d55c18a67de3931cbe2633fe3710f/app/javascript/src/components/Macros/Form/FormContent.jsx#L8)
 3. [neeto-planner-web](https://github.com/bigbinary/neeto-planner-web/blob/73bb48e1721bb8ae3c71dbabe7b3b99c443a3f6e/app/javascript/src/components/Settings/Automations/Automation/Form/FormContent.jsx#L24)
 
-#### 2.1 `InputField`
+#### 3.1 `InputField`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -182,7 +259,7 @@ const initialProps = {
 2. `data`: The same `initialProps` that is passed to data prop in `NeetoRulesForm`.
 3. `label`: Label for the field.
 
-#### 2.2 `TextareaField`
+#### 3.2 `TextareaField`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -235,7 +312,7 @@ const initialProps = {
 4. `options`: Options for the dropdown. The options should be an array of objects with `label` and `value` keys. `[{label, value}]`.
 5. `onChange`: Callback function that is called when the value of the dropdown changes. `(value, setValue) => void` `setValue` is to set the new value.
 
-#### 2.4 `MultiSelectField`
+#### 3.4 `MultiSelectField`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -266,7 +343,7 @@ const initialProps = {
 4. `options`: Options for the dropdown. The options should be an array of objects with `label` and `value` keys. `[{label, value}]`.
 5. `onChange`: Callback function that is called when the value of the dropdown changes. `(value, setValue) => void` `setValue` is to set the new value.
 
-#### 2.5 `RadioField`
+#### 3.5 `RadioField`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -296,7 +373,7 @@ const initialProps = {
 3. `label`: Label for the field.
 4. `options`: Options for the radio buttons. The options should be an array of objects with `label` and `value` keys. `[{label, value}]`.
 
-#### 2.6 `EventConditions`
+#### 3.6 `EventConditions`
 
 ![event-conditions](./docs/images/event-conditions.png)
 
@@ -398,7 +475,7 @@ const initialProps = {
 
 Refer to the [EventCondition section](./docs/event-conditions.md) for more information.
 
-#### 2.7 `Conditions`
+#### 3.7 `Conditions`
 
 ```jsx
 import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend";
@@ -479,7 +556,7 @@ const initialProps = {
 6. `isCallback`: To specify if there is a preview callback function for the conditions. (Boolean).
 7. `previewCallback`: `(conditions) => void`. This method will trigger when we click on the preview button. The conditions are the selected conditions in the formik context.
 
-#### 2.8 `Actions`
+#### 3.8 `Actions`
 
 ![actions](./docs/images/action.png)
 
@@ -547,7 +624,7 @@ const initialProps = {
 
 Refer to the [Actions section](./docs/actions.md) for more information.
 
-#### 2.9 Custom action component
+#### 3.9 Custom action component
 
 neetoRulesFrontend allows to pass custom action components from host application. Below is an example for customize task component which is being sent by neeto-crm in action options.
 
@@ -561,7 +638,7 @@ neetoRulesFrontend allows to pass custom action components from host application
   },
 ```
 
-#### 2.10 Custom message templates
+#### 3.10 Custom message templates
 
 neetoRulesFrontend allows to pass predefined email, SMS and API templates from host application. This enables to use templates created using neeto-message-templates-nano. Below is an example for custom message template which is being sent by neeto-form in action options.
 
@@ -581,7 +658,7 @@ neetoRulesFrontend allows to pass predefined email, SMS and API templates from h
 }
 ```
 
-#### 3. `RulePreview`
+#### 4. `RulePreview`
 
 The `RulePreview` component is used to preview the automation rule.
 
@@ -593,89 +670,12 @@ The `RulePreview` component is used to preview the automation rule.
 2. `isLoading`: To specify if the preview is loading. (Boolean).
 3. `isOpen`: To specify if the preview is open. (Boolean).
 4. `onClose`: The callback function to call when the preview is closed. `() => void`.
-4. `moreDropdownProps`: To add and specify actions for MoreDropdown. Refer [MoreDropdown component doc](https://neeto-molecules.neeto.com/?path=/docs/moredropdown--docs).
 
 reference:
 
 1. [neeto-crm-web](https://github.com/bigbinary/neeto-crm-web/blob/b4c59181aec20d7519dd73b54b0695362ed4466f/app/javascript/src/components/Settings/Automations/index.jsx#L115)
 
 
-#### 4. `RulesReorder`
-
-The `RulesReorder` component is used to reorder the automation rule.
-
-![rule-reorder](./docs/images/rules-reorder.png)
-
-#### Props
-
-1. `isOpen`: To specify if the reorder pane is open. (Boolean).
-2. `onClose`: The callback function to call when the reorder pane is closed. `() => void`.
-3. `rules`: The list of rules to be reordered.
-4. `onReorderCancel`: The callback function to call when the reorder is cancelled. `() => void`.
-5. `onReorderSave`: The callback function to call when the reorder is saved. `(reorderedRules) => {}`.
-6. `isReordering`: To specify if the reordering is in progress. (Boolean).
-7. `paginationProps`: To add pagination to the list of rules. Refer [Pagination component doc](https://neeto-ui.neeto.com/?path=/docs/components-pagination--docs).
-
-
-#### 5. `RulesTable`
-
-The `RulesTable` component is used to display the list of automation rules.
-> Includes subheader which displays count of the automation rules.
-
-#### Props
-
-1. `automationRulesEndpoint`: The endpoint for automation rules.
-
-Following actions will be used by the component
-| Action | Description |
-| --- | --- |
-| `clone` | To create the clone of the automation rule. |
-| `update` | To update the status of the automation rule. |
-| `destroy` | To delete the automation rule. |
-
-2. `additionalColumns`: To add additional columns to the table. Refer [Table component doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs)
-
-```jsx
-const additionalColumns = [
-    {
-      title: "Operated on",
-      dataIndex: "recentlyModifiedTickets",
-      width: 160,
-      description: "Number of tickets the rule has acted upon in the last 7 days",
-      render: recentlyModifiedTickets => (
-        <div className="text-center">{recentlyModifiedTickets}</div>
-      ),
-    },
-  ];
-```
-
-3. `automationRulesPath`: The path for automation rules component.
-
-Following additional routes are considered by the component: 
-| Routes | Description |
-| --- | --- |
-| `{automationRulesPath}/edit` | Page to display rule edit form. |
-| `{automationRulesPath}/new` | Page to display rule create form. |
-
-4. `onPreview`: The callback function to call when the preview is clicked.
-
-5. `helpDocUrl`: The URL of the help doc to be displayed when no data is available.
-
-6. `MoreDropdownItems`: Array of dropdown items to be added to the MoreDropdown component in the table. Refer [MoreDropdown in table doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs).
-
-```jsx
-const moreDropdownItems = [
-    {
-      key: "view-matching-tickets",
-      label: "View matching rules",
-      // onClick callback receives the selected rule
-      onClick: rule => {
-        setSelectedRule(rule);
-        setShowMatchingTickets(true);
-      },
-    },
-  ];
-```
 ## 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

@@ -1,6 +1,7 @@
 {
   "neetoRules": {
     "common": {
+      "title": "Automation rules",
       "automationRuleWithCount_one": "{{count}} automation rule",
       "automationRuleWithCount_other": "{{count}} automation rules",
       "events": "Events",
@@ -157,7 +158,8 @@
       "selectOption": "Select option",
       "value": "Value",
       "selectTemplate": "Select a template",
-      "phoneNumberField": "Type phone number and press enter"
+      "phoneNumberField": "Type phone number and press enter",
+      "searchRules": "Search automation rules"
     },
     "buttons": {
       "save": "Save",
@@ -315,7 +317,7 @@
       "clone": "Clone",
       "delete": "Delete",
       "edit": "Edit",
-      "addNew": "Add new automation rule"
+      "addNew": "Add new rule"
     },
     "deleteAlert": {
       "message": "You are permanently deleting the automation rule <strong>{{name, anyCase}}</strong>. This can't be undone.",
@@ -324,6 +326,15 @@
     "noData": {
       "title": "There are no automation rule to show",
       "helpText": "Here is how you can use <a>automation rules.</a>"
+    },
+    "tooltips": {
+      "rule": {
+        "active": "This automation rule is currently Active. Toggle to make it Inactive.",
+        "inactive": "This automation rule is currently Inactive. Toggle to make it Active."
+      }
+    },
+    "helpText": {
+      "description": "Automation rules feature allows you to create rules to automate specific actions when certain events occur."
     }
   }
 }