@bigbinary/neeto-filters-frontend 4.3.20 → 4.3.21

package/README.md

@@ -1,88 +1,116 @@
 # neeto-filters-nano
-The `neeto-filters-nano` manages filters across neeto products. The nano exports the `@bigbinary/neeto-filters-frontend` NPM package and `neeto-filters-engine` Rails engine for development.
+
+The `neeto-filters-nano` manages filters across neeto products. The nano exports
+the `@bigbinary/neeto-filters-frontend` NPM package and `neeto-filters-engine`
+Rails engine for development.
 
 # Contents
+
 1. [Development with Host Application](#development-with-host-application)
-    - [Engine](#engine)
-        - [Installation](#installation)
-        - [Usage](#usage)
-    - [Frontend package](#frontend-package)
-        - [Installation](#installation-1)
-        - [Components](#components)
+   - [Engine](#engine)
+     - [Installation](#installation)
+     - [Usage](#usage)
+   - [Frontend package](#frontend-package)
+     - [Installation](#installation-1)
+     - [Components](#components)
 2. [Instructions for Publishing](#instructions-for-publishing)
 3. [Releasing beta versions](#releasing-beta-versions)
 
 # Development with Host Application
+
 ## Engine
+
 The engine is used to manage filters across neeto products.
 
 ### Installation
+
 1. Add this line to your application's Gemfile:
-    ```ruby
-    source "NEETO_GEM_SERVER_URL" do
-       # ..existing gems
 
-       gem 'neeto-filters-engine'
-    end
-    ```
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+      # ..existing gems
+
+      gem 'neeto-filters-engine'
+   end
+   ```
+
 2. And then execute:
-    ```zsh
-    bundle install
-    ```
+   ```zsh
+   bundle install
+   ```
 3. Add this line to your application's `config/routes.rb` file:
-    ```ruby
-    mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
-    ```
-4. Execute the following command to generate the migration to generate the `neeto_filters_engine_segments` table.
-    ```zsh
-    bundle exec rails neeto_filters_engine:install:migrations
-
-    bundle exec rails db:migrate
-    ```
+   ```ruby
+   mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
+   ```
+4. Execute the following command to generate the migration to generate the
+   `neeto_filters_engine_segments` table.
+
+   ```zsh
+   bundle exec rails neeto_filters_engine:install:migrations
+
+   bundle exec rails db:migrate
+   ```
+
 5. Add the following line to `models/organization.rb` file.
-    ```ruby
-    has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
-    ```
+   ```ruby
+   has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
+   ```
 
 ### Usage
+
 You can learn more about setup and usage here:
-  1. [Models](/docs/engine/models.md)
-  2. [Verify Installation](/docs/engine/verify_installation.md)
+
+1. [Models](/docs/engine/models.md)
+2. [Verify Installation](/docs/engine/verify_installation.md)
 
 ## Frontend package
+
 ### Installation
+
 1. Install the latest `neeto-filters-frontend` package using the below command:
-    ```zsh
-    yarn add @bigbinary/neeto-filters-frontend
-    ```
-2. `neeto-filters-frontend` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
+   ```zsh
+   yarn add @bigbinary/neeto-filters-frontend
+   ```
+2. `neeto-filters-frontend` has a few peer dependencies that are required for
+   the proper functioning of the package. Install all the peer dependencies
+   using the below command:
    ```zsh
    yarn add @bigbinary/neetoui @bigbinary/neeto-icons axios@0.27.2 classnames@2.3.1 dayjs@1.11.1 formik@2.2.0 ramda@0.28.0 react-router-dom@5.3.0 react-router-nav-prompt@0.4.1 react-toastify@9.0.1 yup@0.32.11
    ```
 
 ### Components
+
 #### 1. `Filters` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Filters.jsx))
 
 **Props**
+
 - `isOpen`: To specify whether the Pane component is open or not.
 - `setIsOpen`: To trigger the isOpen state.
-- `columns`: The list of columns/fields that needs to be represented in the filters pane.
-- `onChange`: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
+- `columns`: The list of columns/fields that needs to be represented in the
+  filters pane.
+- `onChange`: To specify the callback function that is triggered whenever a
+  filter is applied or cleared. This function will get the updated filters as
+  argument.
 - `onSelectorsChange`: To specify the callback function that is triggered
-    whenever a selector value is changed. This function will get the updated
-    selectors as argument.
+  whenever a selector value is changed. This function will get the updated
+  selectors as argument.
 - `buttonProps`: To specify the props to be passed to the button component.
 - `paneProps`: To specify the props to be passed to the pane component.
-- `isSearchable`: To specify whether you need a search bar in filters pane to search through filter fields.
+- `isSearchable`: To specify whether you need a search bar in filters pane to
+  search through filter fields.
 - `className`: To specify classes to the Filters component.
 - `keyword`: To specify the props related to searching.
-- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
+- `childrenKeys`: The list of keys which has to be cleared from url during clear
+  filters operation.
 - `children`: To specify the custom components specific to the host application.
 
 **Configuration**
-- Refer to the [Filters](/docs/frontend/filters.md) section for detailed information on the available configurations for the `Filters` component.
+
+- Refer to the [Filters](/docs/frontend/filters.md) section for detailed
+  information on the available configurations for the `Filters` component.
 
 **Usage**
+
 ```jsx
 import React, { useMemo, useState } from "react";
 
@@ -96,18 +124,18 @@ const App = () => {
   const { t } = useTranslation();
 
   return (
-      <Container>
-        <SubHeader
-          rightActionBlock={
-            <Filters
-              {...{ isOpen, setIsOpen }}
-              isSearchable
-              columns={FILTER_COLUMNS}
-              keyword={SEARCH_TERM_PROPS}
-            />
-          }
-        />
-      </Container>
+    <Container>
+      <SubHeader
+        rightActionBlock={
+          <Filters
+            {...{ isOpen, setIsOpen }}
+            isSearchable
+            columns={FILTER_COLUMNS}
+            keyword={SEARCH_TERM_PROPS}
+          />
+        }
+      />
+    </Container>
   );
 };
 
@@ -117,24 +145,41 @@ export default App;
 #### 2. `Bar` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Bar/index.jsx))
 
 **Props**
-- `columns`: The list of columns/fields that needs to be represented in the filters pane.
-- `onChange`: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
+
+- `columns`: The list of columns/fields that needs to be represented in the
+  filters pane.
+- `onChange`: To specify the callback function that is triggered whenever a
+  filter is applied or cleared. This function will get the updated filters as
+  argument.
 - `setIsPaneOpen`: To trigger the isOpen state.
 - `className`: To specify classes to the Bar component.
 - `keyword`: To specify the props related to searching.
-- `onSelectorsChange`: To specify the callback function that is triggered whenever a selector value is changed. This function will get the updated selectors as argument.
-- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
+- `onSelectorsChange`: To specify the callback function that is triggered
+  whenever a selector value is changed. This function will get the updated
+  selectors as argument.
+- `childrenKeys`: The list of keys which has to be cleared from url during clear
+  filters operation.
 - `entity`: The entity associated with the filters.
-- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
-- `customFilters`: To specify the custom components specific to the host application. This should be same as `children` passed to the `Filters` component.
-- `segmentsBaseUrl`: The base url to which the segments will be appended after creating the segment. by default the current path will be used.
-- `segmentHelpPopoverProps`: Props to customize the help popover displayed next to the segment form title in the Add new segment form in the form's       submission. This prop should have title, description and the help link with a label.
+- `defaultSegmentName`: The name of segment which results all entities without
+  applying any filter. Default name is "All results".
+- `customFilters`: To specify the custom components specific to the host
+  application. This should be same as `children` passed to the `Filters`
+  component.
+- `showSegmentName`: To specify whether to show the segment name in the Bar
+  component.
+- `segmentsBaseUrl`: The base url to which the segments will be appended after
+  creating the segment. by default the current path will be used.
+- `segmentHelpPopoverProps`: Props to customize the help popover displayed next
+  to the segment form title in the Add new segment form in the form's
+  submission. This prop should have title, description and the help link with a
+  label.
 
 All these props must be same as that passed to the `Filters` component. The
 option to save filters as segments will be enabled only when the entity prop is
 passed to the component.
 
 **Usage**
+
 ```jsx
 import React, { useMemo, useState } from "react";
 
@@ -186,22 +231,28 @@ const App = () => {
 export default App;
 ```
 
-
 #### 3. `Segments` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Segments/index.jsx))
 
 **Props**
 
-- `columns`: The list of columns/fields that needs to be represented in the filters pane.
+- `columns`: The list of columns/fields that needs to be represented in the
+  filters pane.
 - `entity`: The entity associated with the segments.
 - `setIsPaneOpen`: To trigger the isOpen state of the filters pane.
-- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
-- `customFilters`: To specify the custom components specific to the host application. This should be same as `children` passed to the `Filters` component.
-- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
-- `baseUrl`: The base url to which the segments will be appended. by default the current path will be used.
+- `defaultSegmentName`: The name of segment which results all entities without
+  applying any filter. Default name is "All results".
+- `customFilters`: To specify the custom components specific to the host
+  application. This should be same as `children` passed to the `Filters`
+  component.
+- `childrenKeys`: The list of keys which has to be cleared from url during clear
+  filters operation.
+- `baseUrl`: The base url to which the segments will be appended. by default the
+  current path will be used.
 
 The "columns" prop must be same as that passed to the `Filters` component.
 
 **Usage**
+
 ```jsx
 import React, { useMemo, useState } from "react";
 
@@ -228,14 +279,13 @@ const App = () => {
   );
 
   return (
-      <MenuBar showMenu={showMenuBar}>
-        <Segments
-          columns={filterColumns}
-          entity="User"
-          setIsFilterPaneOpen={setIsOpen}
-        />
-      </MenuBar>
-
+    <MenuBar showMenu={showMenuBar}>
+      <Segments
+        columns={filterColumns}
+        entity="User"
+        setIsFilterPaneOpen={setIsOpen}
+      />
+    </MenuBar>
   );
 };
 
@@ -243,6 +293,7 @@ export default App;
 ```
 
 ### Funtions
+
 #### 1. `buildFiltersFromURL` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L403-#L406))
 
 - This function takes a list as argument.
@@ -250,7 +301,8 @@ export default App;
   to `keyword` prop of `Filters` and `Bar`.
 - It builds the filter payload from the URL search params. This function should
   be called for initializing the `filters` state.
-- Usage in [neetoTrail](https://github.com/bigbinary/neeto-trail-web/blob/91b58802bbb5f9520d2d2f9a621b6a31358d49aa/app/javascript/src/hooks/common/useFilter.js#L22).
+- Usage in
+  [neetoTrail](https://github.com/bigbinary/neeto-trail-web/blob/91b58802bbb5f9520d2d2f9a621b6a31358d49aa/app/javascript/src/hooks/common/useFilter.js#L22).
 
 ```js
 const [filters, setFilters] = useState(() =>
@@ -274,7 +326,8 @@ const [filters, setFilters] = useState(() =>
   should be called for initializing the `selectors` state.
 - `selectors` will be an object with keys same as provided in filter fields and
   selected value as its value.
-- Usage in [neetoMonitor](https://github.com/bigbinary/neeto-monitor-web/blob/f892ccdb9c72db8ae4b9bba5fee135c45968a750/app/javascript/src/hooks/common/useFilter.js#L27-L29).
+- Usage in
+  [neetoMonitor](https://github.com/bigbinary/neeto-monitor-web/blob/f892ccdb9c72db8ae4b9bba5fee135c45968a750/app/javascript/src/hooks/common/useFilter.js#L27-L29).
 
 ```js
 const [selectors, setSelectors] = useState(() =>
@@ -297,7 +350,8 @@ and selected field names.
   to show the rule selector for each filter or not. It is `false` by default.
 - `groupName` (string, optional): A name to be given to the group of filters
   built from fields.
-- Usage in [neetoTestify](https://github.com/bigbinary/neeto-testify-web/blob/1de65b93c9455a88511c5c261b474bd23d9af8e2/app/javascript/src/utils/index.js#L131).
+- Usage in
+  [neetoTestify](https://github.com/bigbinary/neeto-testify-web/blob/1de65b93c9455a88511c5c261b474bd23d9af8e2/app/javascript/src/utils/index.js#L131).
 
 ```js
 const fields = [
@@ -317,26 +371,27 @@ const fields = [
 const selectedFields = ["name", "age"];
 
 const filterColumns = buildFilterColumnsFromFields({ fields, selectedFields });
-
 ```
 
 #### 4. `useFetchSegments`([source code](https://github.com/bigbinary/neeto-filters-nano/blob/b6421775adb20ba859609e71610fad944492147e/app/javascript/src/hooks/reactQuery/useSegmentsApi.js#L10-L18))
 
-The `useFetchSegments` hook is used to fetch the array of segments based on the provided `entity`.
+The `useFetchSegments` hook is used to fetch the array of segments based on the
+provided `entity`.
 
 #### Parameters
 
 - `entity`: The entity associated with the segments to be fetched.
-- `searchTerm`: The search term for fetching the segments filtered by names containing the search term.
+- `searchTerm`: The search term for fetching the segments filtered by names
+  containing the search term.
 
 ```js
-  const { data: segments = [], isLoading } = useFetchSegments({ entity: "User" });
+const { data: segments = [], isLoading } = useFetchSegments({ entity: "User" });
 ```
 
 ## Basic Usage
 
-Here is an example of how to use the `neeto-filters-engine` gem assuming that the
-`users` table has been created.
+Here is an example of how to use the `neeto-filters-engine` gem assuming that
+the `users` table has been created.
 
 ```rb
 class HomeController < ApplicationController
@@ -355,7 +410,9 @@ class HomeController < ApplicationController
 end
 ```
 
-Note: If you wish to use `select()` method after calling `apply_neeto_filters()`, please note to use `reselect()` since neeto-filters itself performs a 'select' operation internally.
+Note: If you wish to use `select()` method after calling
+`apply_neeto_filters()`, please note to use `reselect()` since neeto-filters
+itself performs a 'select' operation internally.
 
 Here, the param `filters` is a hash with the following structure, where each
 `node` corresponds to a column in the `users` table.
@@ -416,14 +473,14 @@ this case, all the users whose email address contains `bigbinary` in the
 ### Custom Types
 
 - Some projects will have custom attributes to the tables that will be added or
-  updated dynamically. `NeetoFiltersEngine` can handle these attributes by passing the
-  proper filters to the `apply_neeto_filters` method.
+  updated dynamically. `NeetoFiltersEngine` can handle these attributes by
+  passing the proper filters to the `apply_neeto_filters` method.
 - The implementation of custom attributes is different for different projects.
   `NeetoFiltersEngine` is built in the same way as `neetoCRM`. If the custom
   attributes feature needs to be added to a project where the custom attributes
   implementation is different, you need to override the
-  `NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper join
-  operations.
+  `NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper
+  join operations.
 - Refer to the below video for an overview of the same.
 
   https://vimeo.com/724489868/94dfc6cd43
@@ -434,8 +491,8 @@ this case, all the users whose email address contains `bigbinary` in the
   table on which the `apply_neeto_filters` method is applied. Instead these will
   be present in another table to which the first table has a foreign key to. For
   instance, the `deals` table can have an association with the `companies` table
-  and the company name can be displayed in the UI. `NeetoFiltersEngine` can be used to
-  filter these columns by properly specifying the filters.
+  and the company name can be displayed in the UI. `NeetoFiltersEngine` can be
+  used to filter these columns by properly specifying the filters.
 - Refer to te below video for an overview of the same.
 
   https://vimeo.com/724484259/f305257f37
@@ -462,9 +519,11 @@ this case, all the users whose email address contains `bigbinary` in the
 
   https://vimeo.com/724495909/034668f738
 
-
 # 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.
+
+Consult the
+[building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages)
+guide for details on how to publish.
 
 # Releasing beta versions
 

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

@@ -11,7 +11,7 @@
       "no": "No",
       "proceed": "Proceed",
       "rename": "Rename",
-      "segments": "Segments",
+      "views": "Views",
       "userCount": "{{count}} Users",
       "yes": "Yes",
       "update": "Update",
@@ -50,28 +50,28 @@
       "openFilterPane": "Open filter pane",
       "closePane": "Close pane"
     },
-    "segments": {
-      "addNewSegment": "Add new segment",
-      "saveAsNewSegment": "Save as new segment",
-      "editSegment": "Edit segment",
-      "deleteAlertMessage": "You are permanently deleting the segment <strong>{{entity,anyCase}}</strong>. This can't be undone.",
-      "deleteAlertTitle": "Delete segment?",
-      "manageSegments": "Manage segments",
-      "name": "Segment name",
-      "noSegmentsFound": "No segments found",
-      "saveSegment": "Save segment",
-      "updateSegment": "Update segment",
-      "searchSegments": "Search segments",
-      "segmentName": "Segment name",
+    "views": {
+      "addNewView": "Add new view",
+      "saveAsNewView": "Save as new view",
+      "editView": "Edit view",
+      "deleteAlertMessage": "You are permanently deleting the view <strong>{{entity,anyCase}}</strong>. This can't be undone.",
+      "deleteAlertTitle": "Delete view?",
+      "manageViews": "Manage views",
+      "name": "View name",
+      "noViewsFound": "No views found",
+      "saveView": "Save view",
+      "updateView": "Update view",
+      "searchViews": "Search views",
+      "viewName": "View name",
       "showLess": "See less",
       "showMoreNumbers": "See {{entity}} more",
-      "nameIsRequired": "Segment name is required",
+      "nameIsRequired": "View name is required",
       "reservedNameErrorMessage": "This name is reserved. Please choose another name.",
       "addFilter": "Add filter",
       "newFilter": "New filter",
       "selectFilter": "Select filter",
-      "segment_one": "segment",
-      "segment_other": "segments"
+      "view_one": "view",
+      "view_other": "views"
     },
     "labels": {
       "keyword": "Keyword"

package/dist/Bar.js

@@ -6,7 +6,7 @@ import { t } from 'i18next';
 import { findBy, humanize, removeBy, hyphenate, isPresent, isNotEmpty, noop, findById, isNotPresent } from '@bigbinary/neeto-cist';
 import { useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { reject, modify, sortBy, prop, project, has, omit, isEmpty, assoc, identity } from 'ramda';
-import { S as SegmentForm } from './index-DSviaOq-.js';
+import { S as SegmentForm } from './index-CZTELJO_.js';
 import { c as useCreateSegment, b as useUpdateSegment, Q as QUERY_KEYS } from './useSegmentsApi-wYy0UPCH.js';
 import { dateFormat, dayjs, buildUrl, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import Button from '@bigbinary/neetoui/Button';
@@ -343,7 +343,7 @@ var FilterBar = function FilterBar(_ref) {
       className: "flex items-center gap-x-2",
       children: [isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/jsx(Button, {
         "data-cy": "save-segment-button",
-        label: t("neetoFilters.segments.saveAsNewSegment"),
+        label: t("neetoFilters.views.saveAsNewView"),
         style: "secondary",
         onClick: function onClick() {
           setIsPaneOpen(false);
@@ -510,7 +510,8 @@ var SegmentBar = function SegmentBar(_ref) {
     setIsSavePaneOpen = _ref.setIsSavePaneOpen,
     setIsPaneOpen = _ref.setIsPaneOpen,
     handleApplyFilters = _ref.handleApplyFilters,
-    childrenKeys = _ref.childrenKeys;
+    childrenKeys = _ref.childrenKeys,
+    showSegmentName = _ref.showSegmentName;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var history = useHistory();
@@ -539,7 +540,7 @@ var SegmentBar = function SegmentBar(_ref) {
   };
   var changedFilters = deepCompare(segment.filters[0].conditions, filters);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Typography, {
+    children: [showSegmentName && /*#__PURE__*/jsx(Typography, {
       className: "neeto-ui-text-gray-600 mr-4 px-2",
       "data-cy": "neeto-filters-segment-name",
       style: "h4",
@@ -550,7 +551,7 @@ var SegmentBar = function SegmentBar(_ref) {
           className: "mr-2"
         },
         buttonStyle: "secondary",
-        label: t("neetoFilters.segments.updateSegment"),
+        label: t("neetoFilters.views.updateView"),
         children: /*#__PURE__*/jsxs(Menu, {
           children: [/*#__PURE__*/jsx(MenuItem.Button, {
             onClick: function onClick() {
@@ -558,7 +559,7 @@ var SegmentBar = function SegmentBar(_ref) {
                 action: SEGMENT_ACTIONS.EDIT
               });
             },
-            children: t("neetoFilters.segments.updateSegment")
+            children: t("neetoFilters.views.updateView")
           }), /*#__PURE__*/jsx(MenuItem.Button, {
             onClick: function onClick() {
               setIsPaneOpen(false);
@@ -566,7 +567,7 @@ var SegmentBar = function SegmentBar(_ref) {
                 action: SEGMENT_ACTIONS.CREATE
               });
             },
-            children: t("neetoFilters.segments.saveAsNewSegment")
+            children: t("neetoFilters.views.saveAsNewView")
           })]
         })
       }), changedFilters.map(function (filter) {
@@ -605,7 +606,9 @@ var Bar = function Bar(_ref) {
     defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
     _ref$segmentsBaseUrl = _ref.segmentsBaseUrl,
     segmentsBaseUrl = _ref$segmentsBaseUrl === void 0 ? window.location.pathname : _ref$segmentsBaseUrl,
-    customFilters = _ref.customFilters;
+    customFilters = _ref.customFilters,
+    _ref$showSegmentName = _ref.showSegmentName,
+    showSegmentName = _ref$showSegmentName === void 0 ? true : _ref$showSegmentName;
   var queryClient = useQueryClient();
   var _useQueryParams = useQueryParams(),
     segmentId = _useQueryParams.segmentId;
@@ -643,7 +646,8 @@ var Bar = function Bar(_ref) {
         keywordFilter: keywordFilter,
         nonHiddenFilters: nonHiddenFilters,
         setIsPaneOpen: setIsPaneOpen,
-        setIsSavePaneOpen: setIsSavePaneOpen
+        setIsSavePaneOpen: setIsSavePaneOpen,
+        showSegmentName: showSegmentName
       })
     }), /*#__PURE__*/jsx(SegmentForm, {
       childrenKeys: childrenKeys,