@bigbinary/neeto-molecules 1.7.0-beta.1 → 1.7.0

package/dist/Sidebar.js

@@ -1,21 +1,26 @@
-import React, { useState, forwardRef, useEffect } from 'react';
+import React, { useState, forwardRef, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
 import useLocalStorage from '@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage';
-import { Typography, Input, Tooltip, Spinner, Avatar, Button } from '@bigbinary/neetoui';
-import { toLower, all, mergeDeepLeft, curry, is, includes, __, not } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { Link, useLocation, NavLink } from 'react-router-dom';
+import { Typography, Input, Tooltip, Spinner, Avatar, Button, Dropdown, Alert, Pane, Toastr } from '@bigbinary/neetoui';
+import { toLower, all, mergeDeepLeft, mergeRight, curry, is, includes, __, not } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
+import { Link, useHistory, NavLink, useLocation } from 'react-router-dom';
 import useFetchNeetoApps from '@bigbinary/neeto-commons-frontend/react-utils/useFetchNeetoApps';
-import { NeetoIcon, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help, Down } from '@bigbinary/neeto-icons';
-import { capitalize, truncate, isPresent, findBy, isNotPresent } from '@bigbinary/neeto-cist';
+import { NeetoIcon, Search, AppSwitcher as AppSwitcher$1, ChatEmpty, Book, Gift, Keyboard, User, Settings, LeftArrow, Help, MenuVertical, MenuHorizontal, Down } from '@bigbinary/neeto-icons';
+import { capitalize, isPresent, truncate, findBy, hyphenate, _findIndexBy, isNotPresent } from '@bigbinary/neeto-cist';
 import * as AppIcons from '@bigbinary/neeto-icons/app-icons';
 import { t as t$1 } from 'i18next';
 import { resetAuthTokens } from '@bigbinary/neeto-commons-frontend/utils/axios';
-import { removeFromLocalStorage } from '@bigbinary/neeto-commons-frontend/utils/general';
+import { removeFromLocalStorage, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils/general';
 import KeyboardShortcuts from '@bigbinary/neeto-molecules/KeyboardShortcuts';
 import * as ProductTypefaceLogos from '@bigbinary/neeto-icons/typeface-logos';
 import { Neeto } from '@bigbinary/neeto-icons/typeface-logos';
+import { SINGULAR, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { useDestroySegment, buildUrlFromFilters, useUpdateSegment, buildUrlFromSegment } from '@bigbinary/neeto-filters-frontend';
+import { useHistory as useHistory$1 } from 'react-router-dom/cjs/react-router-dom.min';
+import { Form, Input as Input$1, ActionBlock } from '@bigbinary/neetoui/formik';
+import * as yup from 'yup';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -199,7 +204,7 @@ var AppSwitcher = function AppSwitcher() {
   }, /*#__PURE__*/React.createElement(Body, null));
 };
 
-var css = ":root{--neeto-molecules-sidebar-width:240px;--neeto-molecules-sidebar-wrapper-z-index:99997;--neeto-molecules-sidebar-z-index:99998;--neeto-chat-primary:136,134,255;--neeto-wireframe-primary:106,103,232;--neeto-site-primary:129,118,255;--neeto-desk-primary:253,148,55;--neeto-planner-primary:82,169,198;--neeto-replay-primary:32,199,189;--neeto-course-primary:140,214,114;--neeto-ci-primary:255,133,184;--neeto-invoice-primary:70,160,211;--neeto-quiz-primary:254,99,99;--neeto-runner-primary:75,71,255;--neeto-form-primary:254,128,114;--neeto-crm-primary:96,154,240;--neeto-changelog-primary:255,135,135;--neeto-deploy-primary:20,209,164;--neeto-kb-primary:101,205,161;--neeto-cal-primary:238,77,95;--neeto-invisible-primary:121,157,250;--neeto-testify-primary:255,158,69;--neeto-monitor-primary:70,181,197;--neeto-git-primary:255,78,110}@media screen and (min-width:1024px){:root{--neeto-molecules-sidebar-width:240px}}.neeto-molecules-sidebar__wrapper{display:flex;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:relative;transition:all .15s;width:240px;width:var(--neeto-molecules-sidebar-width)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper{height:100%;left:0;max-width:100%;position:fixed;top:0;transition:none;width:100%;z-index:99997;z-index:var(--neeto-molecules-sidebar-wrapper-z-index)}.neeto-molecules-sidebar__wrapper .neeto-molecules-sidebar{left:0;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:fixed;top:0;transition:none;width:240px;width:var(--neeto-molecules-sidebar-width)}}.neeto-molecules-sidebar__wrapper--collapsed{max-width:0;width:0}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{right:-36px;transform:scale(-1)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{left:8px;right:auto}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar{left:-240px;left:calc(var(--neeto-molecules-sidebar-width)*-1)}}.neeto-molecules-sidebar{background-color:rgb(var(--neeto-ui-gray-100));border-right:1px solid rgb(var(--neeto-ui-gray-100));height:100vh;padding:24px 0;width:100%;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}.neeto-molecules-sidebar__no-shrinkable{max-width:240px;max-width:var(--neeto-molecules-sidebar-width);width:240px;width:var(--neeto-molecules-sidebar-width)}.neeto-molecules-sidebar::-webkit-scrollbar{height:0;width:0}.neeto-molecules-sidebar::-webkit-scrollbar-thumb{background:rgb(var(--neeto-ui-gray-300));border-radius:50px}.neeto-molecules-sidebar::-webkit-scrollbar-track{background:\"transparent\"}.neeto-molecules-sidebar__toggler{position:absolute;right:8px;top:8px;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}@media screen and (max-width:768px){.neeto-molecules-sidebar__toggler{left:202px;left:calc(var(--neeto-molecules-sidebar-width) - 38px);right:auto;transition:none}}.neeto-molecules-sidebar__header{margin:14px 0 28px;padding:0 24px}.neeto-molecules-sidebar__logo svg{height:20px;max-width:100%;width:auto}.neeto-molecules-sidebar__links{margin-bottom:40px}.neeto-molecules-sidebar__link{color:rgb(var(--neeto-ui-gray-800));gap:10px;padding:12px 24px;position:relative;text-decoration:none!important;transition:var(--neeto-ui-transition);width:100%}.neeto-molecules-sidebar__link-icon{flex-shrink:0;transition:var(--neeto-ui-transition)}.neeto-molecules-sidebar__link-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-sidebar__link-icon--rotate{transform:scale(-1)}.neeto-molecules-sidebar__link-icon--caret{opacity:0;transition:opacity .3s ease-in-out}.neeto-molecules-sidebar__link-label,.neeto-molecules-sidebar__link-sub-label{flex-grow:1;text-align:left}.neeto-molecules-sidebar__link:hover{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link:focus,.neeto-molecules-sidebar__link:focus-visible,.neeto-molecules-sidebar__link[aria-expanded=true]{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black));outline:none}.neeto-molecules-sidebar__link.active{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-label{font-weight:var(--neeto-ui-font-medium)}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus-visible .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:hover .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link[aria-expanded=true] .neeto-molecules-sidebar__link-icon--caret{opacity:1}.neeto-molecules-sidebar__link--button:focus{background-color:transparent}.neeto-molecules-sidebar__link--button:focus-visible{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-sidebar__link--change-log{outline:none!important}.neeto-molecules-sidebar__sublink-wrapper{background-color:rgb(var(--neeto-ui-white));padding:4px 0}.neeto-molecules-sidebar__sublink{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-gray-700));cursor:pointer;gap:8px;padding:8px 24px 8px 58px;text-decoration:none;transition:all .3s}.neeto-molecules-sidebar__sublink:not(:last-child){margin-bottom:4px}.neeto-molecules-sidebar__sublink .neeto-molecules-sidebar__link-sub-count{opacity:.75}.neeto-molecules-sidebar__sublink:hover{color:rgb(var(--neeto-ui-gray-800));text-decoration:none}.neeto-molecules-sidebar__sublink:hover .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink:focus,.neeto-molecules-sidebar__sublink:focus-visible{color:rgb(var(--neeto-ui-gray-800));outline:none;text-decoration:none}.neeto-molecules-sidebar__sublink:focus .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:focus-visible .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink.active,.neeto-molecules-sidebar__sublink:active{color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);text-decoration:none}.neeto-molecules-sidebar__sublink.active .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:active .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__footer{margin-top:auto}.sidebar-featured-tooltip__content{border-radius:8px!important;box-shadow:var(--neeto-ui-shadow-sm)!important}.sidebar-featured-tooltip__content .tippy-content{padding:0}.sidebar-featured-tooltip{padding:12px;width:150px}.sidebar-featured-tooltip__icon-wrap{background-color:rgb(var(--neeto-ui-gray-100));border-radius:8px;height:40px;margin-bottom:8px;margin-left:auto;margin-right:auto;width:40px}.sidebar-featured-tooltip__title{margin-bottom:4px}.neeto-molecules-app-switcher-popup-wrapper,.neeto-molecules-help-popup-wrapper,.neeto-molecules-profile-popup-wrapper{border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded)!important;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)!important;min-width:240px}.neeto-molecules-app-switcher-popup-wrapper .tippy-content,.neeto-molecules-help-popup-wrapper .tippy-content,.neeto-molecules-profile-popup-wrapper .tippy-content{padding:0}.neeto-molecules-app-switcher-popup-wrapper .tippy-svg-arrow,.neeto-molecules-help-popup-wrapper .tippy-svg-arrow,.neeto-molecules-profile-popup-wrapper .tippy-svg-arrow{display:none!important}.neeto-molecules-profile-popup__top-section{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-molecules-profile-sublist{border-top:1px solid rgb(var(--neeto-ui-gray-400))}.neeto-molecules-help-sublist,.neeto-molecules-profile-sublist{list-style:none;margin:0;padding:4px 0}.neeto-molecules-help-sublist__item,.neeto-molecules-profile-sublist__item{width:100%}.neeto-molecules-help-sublist__item-btn,.neeto-molecules-profile-sublist__item-btn{border-radius:0;justify-content:flex-end!important;min-height:40px;text-align:left}.neeto-molecules-help-sublist__item-btn.active,.neeto-molecules-profile-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-help-sublist__item-btn-icon svg path,.neeto-molecules-profile-sublist__item-btn-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-help-sublist__item-btn span,.neeto-molecules-profile-sublist__item-btn span{align-items:center;display:flex;gap:8px}.neeto-molecules-sidebar__link-icon{position:relative}.neeto-molecules-sidebar__notif-count{position:absolute;right:-6px;top:-6px;z-index:1}.neeto-molecules-help-sublist__item-btn-count,.neeto-molecules-sidebar__notif-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;flex-shrink:0;font-size:var(--neeto-ui-text-xxs);height:15px;justify-content:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:15px}.neeto-molecules-app-switcher-popup-wrapper{height:calc(100vh - 16px);margin-bottom:8px;min-width:calc(100vw - 176px);overflow-y:auto}@media screen and (max-width:768px){.neeto-molecules-app-switcher-popup-wrapper{width:calc(100vw - 185px)!important}}.neeto-molecules-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);height:100%;left:0;position:absolute;top:0;width:100%}@media screen and (min-width:769px){.neeto-molecules-sidebar__backdrop{display:none;visibility:hidden}}";
+var css = ":root{--neeto-molecules-sidebar-width:240px;--neeto-molecules-sidebar-wrapper-z-index:99997;--neeto-molecules-sidebar-z-index:99998;--neeto-chat-primary:136,134,255;--neeto-wireframe-primary:106,103,232;--neeto-site-primary:129,118,255;--neeto-desk-primary:253,148,55;--neeto-planner-primary:82,169,198;--neeto-replay-primary:32,199,189;--neeto-course-primary:140,214,114;--neeto-ci-primary:255,133,184;--neeto-invoice-primary:70,160,211;--neeto-quiz-primary:254,99,99;--neeto-runner-primary:75,71,255;--neeto-form-primary:254,128,114;--neeto-crm-primary:96,154,240;--neeto-changelog-primary:255,135,135;--neeto-deploy-primary:20,209,164;--neeto-kb-primary:101,205,161;--neeto-cal-primary:238,77,95;--neeto-invisible-primary:121,157,250;--neeto-testify-primary:255,158,69;--neeto-monitor-primary:70,181,197;--neeto-git-primary:255,78,110}@media screen and (min-width:1024px){:root{--neeto-molecules-sidebar-width:240px}}.neeto-molecules-sidebar__wrapper{display:flex;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:relative;transition:all .15s;width:240px;width:var(--neeto-molecules-sidebar-width)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper{height:100%;left:0;max-width:100%;position:fixed;top:0;transition:none;width:100%;z-index:99997;z-index:var(--neeto-molecules-sidebar-wrapper-z-index)}.neeto-molecules-sidebar__wrapper .neeto-molecules-sidebar{left:0;max-width:240px;max-width:var(--neeto-molecules-sidebar-width);position:fixed;top:0;transition:none;width:240px;width:var(--neeto-molecules-sidebar-width)}}.neeto-molecules-sidebar__wrapper--collapsed{max-width:0;width:0}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{right:-36px;transform:scale(-1)}@media screen and (max-width:768px){.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar__toggler{left:8px;right:auto}.neeto-molecules-sidebar__wrapper--collapsed .neeto-molecules-sidebar{left:-240px;left:calc(var(--neeto-molecules-sidebar-width)*-1)}}.neeto-molecules-sidebar{background-color:rgb(var(--neeto-ui-gray-100));border-right:1px solid rgb(var(--neeto-ui-gray-100));height:100vh;padding:24px 0;width:100%;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}.neeto-molecules-sidebar__no-shrinkable{max-width:240px;max-width:var(--neeto-molecules-sidebar-width);width:240px;width:var(--neeto-molecules-sidebar-width)}.neeto-molecules-sidebar::-webkit-scrollbar{height:0;width:0}.neeto-molecules-sidebar::-webkit-scrollbar-thumb{background:rgb(var(--neeto-ui-gray-300));border-radius:50px}.neeto-molecules-sidebar::-webkit-scrollbar-track{background:\"transparent\"}.neeto-molecules-sidebar__toggler{position:absolute;right:8px;top:8px;z-index:99998;z-index:var(--neeto-molecules-sidebar-z-index)}@media screen and (max-width:768px){.neeto-molecules-sidebar__toggler{left:202px;left:calc(var(--neeto-molecules-sidebar-width) - 38px);right:auto;transition:none}}.neeto-molecules-sidebar__header{margin:14px 0 28px;padding:0 24px}.neeto-molecules-sidebar__logo svg{height:20px;max-width:100%;width:auto}.neeto-molecules-sidebar__links{margin-bottom:40px}.neeto-molecules-sidebar__link{color:rgb(var(--neeto-ui-gray-800));gap:10px;padding:12px 24px;position:relative;text-decoration:none!important;transition:var(--neeto-ui-transition);width:100%}.neeto-molecules-sidebar__link-icon{flex-shrink:0;transition:var(--neeto-ui-transition)}.neeto-molecules-sidebar__link-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-sidebar__link-icon--rotate{transform:scale(-1)}.neeto-molecules-sidebar__link-icon--caret{opacity:0;transition:opacity .3s ease-in-out}.neeto-molecules-sidebar__link-label,.neeto-molecules-sidebar__link-sub-label{flex-grow:1;text-align:left}.neeto-molecules-sidebar__link:hover{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link:focus,.neeto-molecules-sidebar__link:focus-visible,.neeto-molecules-sidebar__link[aria-expanded=true]{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-black));outline:none}.neeto-molecules-sidebar__link.active{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-black))}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-label{font-weight:var(--neeto-ui-font-medium)}.neeto-molecules-sidebar__link.active .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:focus-visible .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link:hover .neeto-molecules-sidebar__link-icon--caret,.neeto-molecules-sidebar__link[aria-expanded=true] .neeto-molecules-sidebar__link-icon--caret{opacity:1}.neeto-molecules-sidebar__link--button:focus{background-color:transparent}.neeto-molecules-sidebar__link--button:focus-visible{background-color:rgb(var(--neeto-ui-gray-200));color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-sidebar__link--change-log{outline:none!important}.neeto-molecules-sidebar__sublink-wrapper{background-color:rgb(var(--neeto-ui-white));padding:4px 0}.neeto-molecules-sidebar__sublink{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-gray-700));cursor:pointer;gap:8px;padding:8px 24px 8px 58px;text-decoration:none;transition:all .3s}.neeto-molecules-sidebar__sublink:not(:last-child){margin-bottom:4px}.neeto-molecules-sidebar__sublink .neeto-molecules-sidebar__link-sub-count{opacity:.75}.neeto-molecules-sidebar__sublink:hover{color:rgb(var(--neeto-ui-gray-800));text-decoration:none}.neeto-molecules-sidebar__sublink:hover .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink:focus,.neeto-molecules-sidebar__sublink:focus-visible{color:rgb(var(--neeto-ui-gray-800));outline:none;text-decoration:none}.neeto-molecules-sidebar__sublink:focus .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:focus-visible .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__sublink.active,.neeto-molecules-sidebar__sublink:active{color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);text-decoration:none}.neeto-molecules-sidebar__sublink.active .neeto-molecules-sidebar__link-sub-count,.neeto-molecules-sidebar__sublink:active .neeto-molecules-sidebar__link-sub-count{opacity:1}.neeto-molecules-sidebar__footer{margin-top:auto}.sidebar-featured-tooltip__content{border-radius:8px!important;box-shadow:var(--neeto-ui-shadow-sm)!important}.sidebar-featured-tooltip__content .tippy-content{padding:0}.sidebar-featured-tooltip{padding:12px;width:150px}.sidebar-featured-tooltip__icon-wrap{background-color:rgb(var(--neeto-ui-gray-100));border-radius:8px;height:40px;margin-bottom:8px;margin-left:auto;margin-right:auto;width:40px}.sidebar-featured-tooltip__title{margin-bottom:4px}.neeto-molecules-app-switcher-popup-wrapper,.neeto-molecules-help-popup-wrapper,.neeto-molecules-profile-popup-wrapper{border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded)!important;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)!important;min-width:240px}.neeto-molecules-app-switcher-popup-wrapper .tippy-content,.neeto-molecules-help-popup-wrapper .tippy-content,.neeto-molecules-profile-popup-wrapper .tippy-content{padding:0}.neeto-molecules-app-switcher-popup-wrapper .tippy-svg-arrow,.neeto-molecules-help-popup-wrapper .tippy-svg-arrow,.neeto-molecules-profile-popup-wrapper .tippy-svg-arrow{display:none!important}.neeto-molecules-profile-popup__top-section{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-molecules-profile-sublist{border-top:1px solid rgb(var(--neeto-ui-gray-400))}.neeto-molecules-help-sublist,.neeto-molecules-profile-sublist{list-style:none;margin:0;padding:4px 0}.neeto-molecules-help-sublist__item,.neeto-molecules-profile-sublist__item{width:100%}.neeto-molecules-help-sublist__item-btn,.neeto-molecules-profile-sublist__item-btn{border-radius:0;justify-content:flex-end!important;min-height:40px;text-align:left}.neeto-molecules-help-sublist__item-btn.active,.neeto-molecules-profile-sublist__item-btn.active{background-color:rgb(var(--neeto-ui-gray-800));color:rgb(var(--neeto-ui-white))}.neeto-molecules-help-sublist__item-btn-icon svg path,.neeto-molecules-profile-sublist__item-btn-icon svg path{vector-effect:non-scaling-stroke}.neeto-molecules-help-sublist__item-btn span,.neeto-molecules-profile-sublist__item-btn span{align-items:center;display:flex;gap:8px}.neeto-molecules-sidebar__link-icon{position:relative}.neeto-molecules-sidebar__notif-count{position:absolute;right:-6px;top:-6px;z-index:1}.neeto-molecules-help-sublist__item-btn-count,.neeto-molecules-sidebar__notif-count{align-items:center;background-color:rgb(var(--neeto-ui-primary-500));border-radius:var(--neeto-ui-rounded-full);color:rgb(var(--neeto-ui-white));display:inline-flex;flex-shrink:0;font-size:var(--neeto-ui-text-xxs);height:15px;justify-content:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:15px}.neeto-molecules-app-switcher-popup-wrapper{height:calc(100vh - 16px);margin-bottom:8px;min-width:calc(100vw - 176px);overflow-y:auto}@media screen and (max-width:768px){.neeto-molecules-app-switcher-popup-wrapper{width:calc(100vw - 185px)!important}}.neeto-molecules-sidebar__backdrop{background-color:rgba(var(--neeto-ui-black),.4);height:100%;left:0;position:absolute;top:0;width:100%}@media screen and (min-width:769px){.neeto-molecules-sidebar__backdrop{display:none;visibility:hidden}}.neeto-molecules-sidebar-segments-header{padding-left:58px}";
 n(css,{});
 
 var AppSwitcherButton = function AppSwitcherButton() {
@@ -258,6 +263,10 @@ var shouldShowWhatsNew = function shouldShowWhatsNew() {
 var MY_PROFILE_URL = "/auth/profile/edit";
 var MY_ORGANIZATION_URL = "/auth/organization/edit";
 var CHANGELOG_WIDGET_TRIGGER_ID = "neetochangelog-trigger";
+var SUB_LINK_TYPES = {
+  SYSTEM_VIEW: "system_view",
+  SEGMENT: "segment"
+};
 var DEFAULT_HELP_LINK_PROPS = {
   liveChatProps: {
     label: t$1("neetoMolecules.sidebar.helpLinks.liveChat"),
@@ -298,6 +307,9 @@ var isSubRouteActive = function isSubRouteActive(subRoute, location) {
   }
   var targetSearchParams = targetUrl.searchParams;
   var targetSearchKeys = Array.from(targetSearchParams.keys());
+  if (isPresent(currentBrowserUrl.searchParams.get("segment_id"))) {
+    return false;
+  }
   return all(function (key) {
     return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
   }, targetSearchKeys);
@@ -466,9 +478,9 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded$2 = ["onClick", "label", "icon"];
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$6 = ["onClick", "label", "icon"];
+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 LinkSection = function LinkSection(_ref) {
   var links = _ref.links;
   return /*#__PURE__*/React.createElement("ul", {
@@ -478,7 +490,7 @@ var LinkSection = function LinkSection(_ref) {
       label = _ref2.label,
       _ref2$icon = _ref2.icon,
       icon = _ref2$icon === void 0 ? null : _ref2$icon,
-      otherProps = _objectWithoutProperties(_ref2, _excluded$2);
+      otherProps = _objectWithoutProperties(_ref2, _excluded$6);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-profile-sublist__item",
       key: idx
@@ -488,7 +500,7 @@ var LinkSection = function LinkSection(_ref) {
       iconPosition: "left",
       iconSize: 18,
       style: "text"
-    }, _objectSpread$2({
+    }, _objectSpread$5({
       icon: icon,
       label: label,
       onClick: onClick
@@ -591,9 +603,9 @@ var HelpSection = function HelpSection(_ref, ref) {
 };
 var HelpSection$1 = /*#__PURE__*/forwardRef(HelpSection);
 
-var _excluded$1 = ["label"];
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$5 = ["label"];
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HelpSectionMenu = function HelpSectionMenu(_ref) {
   var helpLinkOverrides = _ref.helpLinkOverrides,
     changesCount = _ref.changesCount;
@@ -604,7 +616,7 @@ var HelpSectionMenu = function HelpSectionMenu(_ref) {
     var _DEFAULT_HELP_LINK_PR, _DEFAULT_HELP_LINK_PR2, _DEFAULT_HELP_LINK_PR3;
     return (_DEFAULT_HELP_LINK_PR = (_DEFAULT_HELP_LINK_PR2 = (_DEFAULT_HELP_LINK_PR3 = DEFAULT_HELP_LINK_PROPS[key]).isVisible) === null || _DEFAULT_HELP_LINK_PR2 === void 0 ? void 0 : _DEFAULT_HELP_LINK_PR2.call(_DEFAULT_HELP_LINK_PR3)) !== null && _DEFAULT_HELP_LINK_PR !== void 0 ? _DEFAULT_HELP_LINK_PR : true;
   }).map(function (key) {
-    return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, DEFAULT_HELP_LINK_PROPS[key]), helpLinkOverrides[key]), key === "keyboardShortcutProps" && {
+    return _objectSpread$4(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, DEFAULT_HELP_LINK_PROPS[key]), helpLinkOverrides[key]), key === "keyboardShortcutProps" && {
       onClick: function onClick() {
         return setIsOpen(true);
       }
@@ -619,7 +631,7 @@ var HelpSectionMenu = function HelpSectionMenu(_ref) {
     className: "neeto-molecules-help-sublist"
   }, helpLinks.map(function (_ref3, idx) {
     var label = _ref3.label,
-      buttonProps = _objectWithoutProperties(_ref3, _excluded$1);
+      buttonProps = _objectWithoutProperties(_ref3, _excluded$5);
     return /*#__PURE__*/React.createElement("li", {
       className: "neeto-molecules-help-sublist__item",
       key: idx
@@ -711,12 +723,391 @@ var Header = function Header(_ref) {
 };
 var Header$1 = /*#__PURE__*/React.memo(Header);
 
-var _excluded = ["label", "to", "icon", "items"],
-  _excluded2 = ["label", "to", "count", "data-cy"];
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded$4 = ["label", "key"],
+  _excluded2 = ["isVisible", "key"];
+var MenuItem$1 = Dropdown.MenuItem,
+  Menu$1 = Dropdown.Menu;
+var Submenu = function Submenu(_ref) {
+  var label = _ref.label,
+    key = _ref.key,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
+    key: key,
+    position: "left",
+    trigger: "hover"
+  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
+    var _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      key = _ref2.key,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
+    if (!isVisible) return null;
+    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
+      key: key
+    }, menuItemProps));
+  })));
+};
+
+var _excluded$3 = ["onClick", "label", "type", "hasSubItems"];
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuItem = Dropdown.MenuItem,
+  Divider = Dropdown.Divider;
+var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
+  var onClick = _ref.onClick,
+    label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
+    _ref$hasSubItems = _ref.hasSubItems,
+    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$3);
+  if (type === MENU_ITEM_TYPES.divider) {
+    return /*#__PURE__*/React.createElement(Divider, null);
+  }
+  if (hasSubItems) {
+    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$3({
+      label: label
+    }, menuItemProps));
+  }
+  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$3({
+    onClick: onClick
+  }, menuItemProps), label);
+};
+
+var _excluded$2 = ["isVisible", "key"];
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu = Dropdown.Menu;
+var MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
+      disabled: true,
+      "data-cy": "more-dropdown-button",
+      "data-testid": "nui-dropdown-button",
+      icon: targetIcon,
+      iconPosition: "right",
+      size: "medium",
+      style: "text"
+    }, dropdownButtonProps))));
+  }
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    autoWidth: true,
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    buttonProps: _objectSpread$2({
+      className: "min-h-0 flex-shrink-0",
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.moreDropdown.tooltip"),
+        position: "top"
+      }
+    }, dropdownButtonProps)
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
+    var _ref2$isVisible = _ref2.isVisible,
+      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+      key = _ref2.key,
+      menuItemProps = _objectWithoutProperties(_ref2, _excluded$2);
+    if (!isVisible) return null;
+    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
+      key: key
+    }, menuItemProps));
+  }), menuBottomChildren));
+};
+
+var DeleteAlert = function DeleteAlert(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    segment = _ref.segment,
+    columns = _ref.columns;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var history = useHistory();
+  var _getQueryParams = getQueryParams(),
+    segmentId = _getQueryParams.segmentId;
+  var _useDestroySegment = useDestroySegment(),
+    deleteSegment = _useDestroySegment.mutate,
+    isDeleting = _useDestroySegment.isLoading;
+  var handleClearAll = function handleClearAll() {
+    var params = buildUrlFromFilters({
+      columns: columns,
+      filters: [],
+      isClearAll: true
+    });
+    history.push({
+      search: params
+    });
+  };
+  var handleDelete = function handleDelete() {
+    segment.id === segmentId && handleClearAll();
+    deleteSegment(segment.id, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isOpen,
+    onClose: onClose,
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("neetoMolecules.common.actions.delete"),
+    message: /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMolecules.sidebar.segments.deleteAlertMessage",
+      values: {
+        entity: segment.name
+      }
+    }),
+    title: t("neetoMolecules.common.deleteAlert.title", {
+      entity: t("neetoMolecules.sidebar.segments.segment", SINGULAR)
+    }),
+    onSubmit: handleDelete
+  });
+};
+
+var RENAME_SEGMENT_FORM_VALIDATION = yup.object().shape({
+  name: yup.string().trim().required(t$1("neetoMolecules.sidebar.segments.validations.nameIsRequired"))
+});
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Rename = function Rename(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    segment = _ref.segment;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useUpdateSegment = useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate;
+  var inputRef = useRef();
+  var handleSubmit = function handleSubmit(values, _ref2) {
+    var setSubmitting = _ref2.setSubmitting,
+      setFieldError = _ref2.setFieldError;
+    setSubmitting(true);
+    updateSegment({
+      id: segment.id,
+      payload: _objectSpread$1(_objectSpread$1({}, segment), values),
+      showToastr: false
+    }, {
+      onSuccess: function onSuccess() {
+        return setIsOpen(false);
+      },
+      onSettled: function onSettled() {
+        setSubmitting(false);
+      },
+      onError: function onError(error) {
+        var _error$response, _error$response3, _error$response3$data;
+        if (((_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) !== 422) {
+          var _error$response2, _error$response2$data;
+          var errorMessage = (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : _error$response2$data.error;
+          Toastr.error(errorMessage || t("neetoMolecules.common.somethingWentWrong"));
+          return;
+        }
+        setFieldError("name", (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : (_error$response3$data = _error$response3.data) === null || _error$response3$data === void 0 ? void 0 : _error$response3$data.error);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Pane, {
+    isOpen: isOpen,
+    initialFocusRef: inputRef,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "edit-pane-header",
+    style: "h2"
+  }, t("neetoMolecules.sidebar.segments.renameTitle"))), /*#__PURE__*/React.createElement(Form, {
+    className: "w-full",
+    formikProps: {
+      initialValues: {
+        name: segment.name
+      },
+      validateOnChange: true,
+      validateOnBlur: true,
+      validationSchema: RENAME_SEGMENT_FORM_VALIDATION,
+      onSubmit: handleSubmit
+    }
+  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Input$1, {
+    required: true,
+    className: "w-full",
+    "data-testid": "segment-name-input-field",
+    label: t("neetoMolecules.sidebar.segments.renameFieldLabel"),
+    name: "name",
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(ActionBlock, {
+    cancelButtonProps: {
+      onClick: function onClick() {
+        return setIsOpen(false);
+      },
+      disabled: false,
+      className: "ml-2"
+    }
+  }))));
+};
+
+var Segment = function Segment(_ref) {
+  var dataCy = _ref.dataCy,
+    segment = _ref.segment,
+    label = _ref.label,
+    columns = _ref.columns;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDeleteAlertOpen = _useState2[0],
+    setIsDeleteAlertOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isRenamePaneOpen = _useState4[0],
+    setIsRenamePaneOpen = _useState4[1];
+  var history = useHistory$1();
+  var _getQueryParams = getQueryParams(),
+    segmentId = _getQueryParams.segmentId;
+  var handleSelectSegment = function handleSelectSegment() {
+    var _segment$filters$;
+    history.push({
+      search: buildUrlFromSegment({
+        columns: columns,
+        filters: (_segment$filters$ = segment.filters[0]) === null || _segment$filters$ === void 0 ? void 0 : _segment$filters$.conditions,
+        id: segment.id
+      })
+    });
+  };
+  var dataCyPrefix = dataCy || hyphenate(label);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    "data-cy": "".concat(dataCyPrefix, "-segment-link"),
+    className: classnames("neeto-molecules-sidebar-segment neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none mb-0 w-full py-1", {
+      active: segmentId === segment.id
+    }),
+    onClick: handleSelectSegment
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-sub-label neeto-molecules-sidebar-segment__label neeto-ui-flex-grow min-w-0",
+    component: "span",
+    "data-cy": "".concat(dataCyPrefix, "-sub-link-label"),
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "segment-more-menu-".concat(dataCyPrefix),
+      className: "flex-shrink-0",
+      size: "small",
+      style: "secondary"
+    },
+    dropdownProps: {
+      position: "bottom-end",
+      strategy: "fixed",
+      autoWidth: true,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    },
+    menuItems: [{
+      label: t("neetoMolecules.common.actions.rename"),
+      onClick: function onClick(e) {
+        setIsRenamePaneOpen(true);
+        e.stopPropagation();
+      },
+      key: "edit-custom-segment-button"
+    }, {
+      label: t("neetoMolecules.common.actions.delete"),
+      onClick: function onClick(e) {
+        setIsDeleteAlertOpen(true);
+        e.stopPropagation();
+      },
+      key: "delete-custom-segment-button"
+    }]
+  })), /*#__PURE__*/React.createElement(DeleteAlert, {
+    columns: columns,
+    segment: segment,
+    isOpen: isDeleteAlertOpen,
+    onClose: function onClose() {
+      return setIsDeleteAlertOpen(false);
+    }
+  }), /*#__PURE__*/React.createElement(Rename, {
+    segment: segment,
+    isOpen: isRenamePaneOpen,
+    setIsOpen: setIsRenamePaneOpen
+  }));
+};
+
+var _excluded$1 = ["data-cy", "to", "label", "type", "count", "columns", "filters", "id"];
+var SubLink = function SubLink(_ref) {
+  var dataCy = _ref["data-cy"],
+    to = _ref.to,
+    label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? SUB_LINK_TYPES.SYSTEM_VIEW : _ref$type,
+    count = _ref.count,
+    columns = _ref.columns,
+    filters = _ref.filters,
+    id = _ref.id,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var segment = {
+    id: id,
+    name: label,
+    filters: filters
+  };
+  if (type === SUB_LINK_TYPES.SEGMENT) {
+    return /*#__PURE__*/React.createElement(Segment, {
+      columns: columns,
+      dataCy: dataCy,
+      label: label,
+      segment: segment
+    });
+  }
+  var dataCyPrefix = dataCy || hyphenate(label);
+  return /*#__PURE__*/React.createElement(NavLink, _extends({
+    to: to,
+    activeClassName: "active",
+    className: "neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none",
+    "data-cy": "".concat(dataCyPrefix, "-sub-link"),
+    isActive: function isActive() {
+      return isSubRouteActive(to, location);
+    }
+  }, otherProps), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-sub-label neeto-ui-flex-grow",
+    component: "span",
+    "data-cy": "".concat(dataCyPrefix, "-sub-link-label"),
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-sub-count neeto-ui-flex-shrink-0",
+    component: "span",
+    "data-cy": "".concat(dataCyPrefix, "-sub-link-count"),
+    style: "body2"
+  }, count > 999 ? "999+" : count));
+};
+
+var _excluded = ["label", "to", "icon", "items"];
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Links = function Links(_ref) {
   var navLinks = _ref.navLinks;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var location = useLocation();
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -752,11 +1143,15 @@ var Links = function Links(_ref) {
       return is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
     };
     var isMenuExpanded = isActive() && isActiveLinkExpanded;
+    var firstSegmentIndex = _findIndexBy({
+      type: SUB_LINK_TYPES.SEGMENT
+    }, items);
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: mainIndex
     }, /*#__PURE__*/React.createElement(NavLink, _extends({
       activeClassName: "active",
       className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link",
+      "data-testid": "navlink-".concat(hyphenate(label)),
       onClick: function onClick(event) {
         return handleNavLinkClick(event, isActive, items);
       }
@@ -780,32 +1175,16 @@ var Links = function Links(_ref) {
     }))), items && isMenuExpanded && /*#__PURE__*/React.createElement("div", {
       className: "neeto-molecules-sidebar__sublink-wrapper",
       "data-cy": "sidebar-sub-link-wrapper"
-    }, items.filter(filterByPermissions).map(function (_ref4, subIndex) {
-      var subLabel = _ref4.label,
-        subRoute = _ref4.to,
-        count = _ref4.count,
-        dataCy = _ref4["data-cy"],
-        otherProps = _objectWithoutProperties(_ref4, _excluded2);
-      return /*#__PURE__*/React.createElement(NavLink, _extends({
-        activeClassName: "active",
-        className: "neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none",
-        "data-cy": "".concat(dataCy, "-sub-link"),
-        isActive: function isActive() {
-          return isSubRouteActive(subRoute, location);
-        },
-        key: subIndex,
-        to: subRoute
-      }, otherProps), /*#__PURE__*/React.createElement(Typography, {
-        className: "neeto-molecules-sidebar__link-sub-label neeto-ui-flex-grow",
-        component: "span",
-        "data-cy": "".concat(dataCy, "-sub-link-label"),
-        style: "body2"
-      }, subLabel), /*#__PURE__*/React.createElement(Typography, {
-        className: "neeto-molecules-sidebar__link-sub-count neeto-ui-flex-shrink-0",
-        component: "span",
-        "data-cy": "".concat(dataCy, "-sub-link-count"),
-        style: "body2"
-      }, count > 999 ? "999+" : count));
+    }, items.filter(filterByPermissions).map(function (subItem, subIndex) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: subIndex
+      }, subIndex === firstSegmentIndex && /*#__PURE__*/React.createElement(Typography, {
+        className: "neeto-molecules-sidebar-segments-header neeto-ui-text-transform-capitalize neeto-ui-text-gray-600 py-2 uppercase",
+        style: "body3",
+        weight: "semibold"
+      }, t("neetoMolecules.sidebar.segments.segment", PLURAL)), /*#__PURE__*/React.createElement(SubLink, _extends({}, subItem, {
+        columns: otherProps.columns
+      })));
     })));
   }));
 };