@bigbinary/neeto-filters-frontend 4.3.19 → 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,23 +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.
+- `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";
 
@@ -167,6 +213,14 @@ const App = () => {
               columns={filterColumns}
               entity="User"
               setIsPaneOpen={setIsOpen}
+              segmentHelpPopoverProps={{
+                title: "Test title,
+                description: "Test description",
+                helpLinkProps: {
+                  href: "https://www.example.com",
+                  label: "Test label",
+                },
+              }}
             />
           }
         />
@@ -177,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";
 
@@ -219,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>
   );
 };
 
@@ -234,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.
@@ -241,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(() =>
@@ -265,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(() =>
@@ -288,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 = [
@@ -308,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
@@ -346,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.
@@ -407,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
@@ -425,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
@@ -453,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-BNNArTNq.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';
@@ -24,6 +24,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import '@bigbinary/neeto-icons/Delete';
+import '@bigbinary/neeto-molecules/HelpPopover';
 import '@bigbinary/neetoui/Accordion';
 import '@bigbinary/neetoui/Pane';
 import '@bigbinary/neetoui/formik/ActionBlock';
@@ -342,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);
@@ -509,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();
@@ -538,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",
@@ -549,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() {
@@ -557,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);
@@ -565,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) {
@@ -589,6 +591,7 @@ var Bar = function Bar(_ref) {
     className = _ref.className,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? [] : _ref$columns,
+    segmentHelpPopoverProps = _ref.segmentHelpPopoverProps,
     _ref$keyword = _ref.keyword,
     keyword = _ref$keyword === void 0 ? {
       node: "",
@@ -603,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;
@@ -641,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,
@@ -654,6 +660,7 @@ var Bar = function Bar(_ref) {
       isSubmitting: isSubmitting,
       keywordFilter: keywordFilter,
       segmentFormInitialRef: segmentFormInitialRef,
+      segmentHelpPopoverProps: segmentHelpPopoverProps,
       isOpen: isPresent(isSavePaneOpen.action),
       initialValues: isEdit ? assoc("filters", [{
         conditions: filters