@commercetools-frontend/application-shell 27.10.0 → 27.11.1

package/dist/{navbar-59504b51.cjs.dev.js → navbar-1c7bea3d.cjs.dev.js}

@@ -38,11 +38,12 @@ var permissions = require('@commercetools-frontend/permissions');
 var InlineSvg = require('@commercetools-uikit/icons/inline-svg');
 var location = require('./location-c835b8df.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var nimbus = require('@commercetools/nimbus');
 var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/keys');
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
-var useApplicationsMenu = require('./use-applications-menu-bd718ac8.cjs.dev.js');
+var useApplicationsMenu = require('./use-applications-menu-81fff376.cjs.dev.js');
 require('@apollo/client');
 require('@commercetools-frontend/l10n');
 
@@ -323,6 +324,10 @@ var messages = reactIntl.defineMessages({
   'NavBar.MenuExpander.expandMenu': {
     id: 'NavBar.MenuExpander.expandMenu',
     defaultMessage: 'Expand menu'
+  },
+  'NavBar.Group.badge.new': {
+    id: 'NavBar.Group.badge.new',
+    defaultMessage: 'New'
   }
 });
 
@@ -563,6 +568,7 @@ const RestrictedMenuItem = _ref4 => {
     // Always check that some of the given permissions match.
     ,
     shouldMatchSomePermissions: true,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: props.children
   }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -570,9 +576,13 @@ const RestrictedMenuItem = _ref4 => {
   });
   if (props.featureToggle) {
     // A regular short-lived feature toggle
-    if (flagVariation === true) return permissionsWrapper;
+    if (flagVariation === true) {
+      return permissionsWrapper;
+    }
     // A long-lived feature toggle with `{ value: boolean, string: reason }`
-    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) return permissionsWrapper;
+    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) {
+      return permissionsWrapper;
+    }
     return null;
   }
   return permissionsWrapper;
@@ -625,6 +635,27 @@ const ItemContainer = props => {
 };
 ItemContainer.displayName = 'ItemContainer';
 
+const GroupLabel = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
+  target: "e18pgpg90"
+} : {
+  target: "e18pgpg90",
+  label: "GroupLabel"
+})("font-size:", designSystem.designTokens.fontSize10, ";font-weight:", designSystem.designTokens.fontWeight600, ";letter-spacing:1px;text-transform:uppercase;color:", designSystem.designTokens.colorSurface, ";height:", oidc.NAVBAR.itemSize, ";width:calc(\n    ", oidc.NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n      ", designSystem.designTokens.spacing25, "\n  );padding:", designSystem.designTokens.spacing30, ";box-sizing:border-box;display:flex;align-items:center;gap:", designSystem.designTokens.spacing30, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5hdmJhci1ncm91cC1oZWFkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk2QiIsImZpbGUiOiJuYXZiYXItZ3JvdXAtaGVhZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJhZGdlIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMvbmltYnVzJztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGRlc2lnblRva2VucyBhcyB1aUtpdERlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgTkFWQkFSIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBOYXZiYXJHcm91cEhlYWRlclByb3BzID0ge1xuICBsYWJlbDogc3RyaW5nO1xuICBpc05ldz86IGJvb2xlYW47XG59O1xuXG5jb25zdCBHcm91cExhYmVsID0gc3R5bGVkLmRpdmBcbiAgZm9udC1zaXplOiAke3VpS2l0RGVzaWduVG9rZW5zLmZvbnRTaXplMTB9O1xuICBmb250LXdlaWdodDogJHt1aUtpdERlc2lnblRva2Vucy5mb250V2VpZ2h0NjAwfTtcbiAgbGV0dGVyLXNwYWNpbmc6IDFweDtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgY29sb3I6ICR7dWlLaXREZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgaGVpZ2h0OiAke05BVkJBUi5pdGVtU2l6ZX07XG4gIHdpZHRoOiBjYWxjKFxuICAgICR7TkFWQkFSLnN1Ymxpc3RJbmRlbnRhdGlvbldoZW5FeHBhbmRlZH0gLSAyICpcbiAgICAgICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZzI1fVxuICApO1xuICBwYWRkaW5nOiAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmczMH07XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuYDtcblxuY29uc3QgTmF2YmFyR3JvdXBIZWFkZXIgPSAoeyBsYWJlbCwgaXNOZXcgfTogTmF2YmFyR3JvdXBIZWFkZXJQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuXG4gIHJldHVybiAoXG4gICAgPEdyb3VwTGFiZWw+XG4gICAgICA8c3Bhbj57bGFiZWx9PC9zcGFuPlxuICAgICAge2lzTmV3ICYmIChcbiAgICAgICAgPEJhZGdlIGNvbG9yUGFsZXR0ZT1cInByaW1hcnlcIiBzaXplPVwiMnhzXCI+XG4gICAgICAgICAge2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlc1snTmF2QmFyLkdyb3VwLmJhZGdlLm5ldyddKX1cbiAgICAgICAgPC9CYWRnZT5cbiAgICAgICl9XG4gICAgPC9Hcm91cExhYmVsPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2YmFyR3JvdXBIZWFkZXI7XG4iXX0= */"));
+const NavbarGroupHeader = _ref => {
+  let label = _ref.label,
+    isNew = _ref.isNew;
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs(GroupLabel, {
+    children: [jsxRuntime.jsx("span", {
+      children: label
+    }), isNew && jsxRuntime.jsx(nimbus.Badge, {
+      colorPalette: "primary",
+      size: "2xs",
+      children: intl.formatMessage(messages['NavBar.Group.badge.new'])
+    })]
+  });
+};
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const NavBarLayout = props => {
   return jsxRuntime.jsx("nav", {
@@ -974,8 +1005,17 @@ const getMenuAccessibleLabel = (labelAllLocales, defaultLabel, applicationLocale
   if (defaultLabel) return defaultLabel;
   return constants.NO_VALUE_FALLBACK;
 };
+const getNavbarItemPath = (projectKey, uriPath) => {
+  const _uriPath$split = uriPath.split('/'),
+    _uriPath$split2 = _slicedToArray(_uriPath$split, 1),
+    topLevelPath = _uriPath$split2[0];
+  if (constants.isProjectKeylessApplicationEntryPoint(topLevelPath)) {
+    return `/${uriPath}`;
+  }
+  return `/${projectKey}/${uriPath}`;
+};
 const getIsSubmenuRouteActive = (uriPath, props) => Boolean(reactRouterDom.matchPath(props.location.pathname, {
-  path: `/${props.projectKey}/${uriPath}`,
+  path: getNavbarItemPath(props.projectKey, uriPath),
   exact: true,
   strict: false
 }));
@@ -1105,7 +1145,7 @@ const ApplicationMenu = props => {
     return () => observer?.disconnect();
   }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
-    path: `/${props.projectKey}/${props.menu.uriPath}`,
+    path: getNavbarItemPath(props.projectKey, props.menu.uriPath),
     exact: false,
     strict: false
   }));
@@ -1133,6 +1173,7 @@ const ApplicationMenu = props => {
     permissions: props.menu.permissions,
     actionRights: props.menu.actionRights ?? undefined,
     dataFences: props.menu.dataFences ?? undefined,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: jsxRuntime.jsxs(MenuItem$1, {
       hasSubmenu: hasSubmenu,
@@ -1147,7 +1188,7 @@ const ApplicationMenu = props => {
       identifier: menuItemIdentifier,
       ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
       children: [jsxRuntime.jsx(MenuItemLink, {
-        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
+        linkTo: getNavbarItemPath(props.projectKey, props.menu.uriPath),
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
         ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
@@ -1184,12 +1225,13 @@ const ApplicationMenu = props => {
           permissions: submenu.permissions,
           actionRights: submenu.actionRights ?? undefined,
           dataFences: submenu.dataFences ?? undefined,
+          isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
           projectPermissions: props.projectPermissions,
           children: jsxRuntime.jsx(SublistItem, {
             isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
             children: jsxRuntime.jsx(Text, {
               children: jsxRuntime.jsx(MenuItemLink, {
-                linkTo: `/${props.projectKey}/${submenu.uriPath}`
+                linkTo: getNavbarItemPath(props.projectKey, submenu.uriPath)
                 // We want to use an exact matching strategy to avoid multiple
                 // links matching sub-routes.
                 ,
@@ -1270,8 +1312,11 @@ const NavBar = props => {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
             var _context2;
-            return jsxRuntime.jsx("div", {
-              children: _mapInstanceProperty__default["default"](_context2 = navbarMenuGroup.items).call(_context2, menu => {
+            return jsxRuntime.jsxs("div", {
+              children: [navbarMenuGroup.label && isMenuOpen && jsxRuntime.jsx(NavbarGroupHeader, {
+                label: navbarMenuGroup.label,
+                isNew: navbarMenuGroup.isNew ?? undefined
+              }), _mapInstanceProperty__default["default"](_context2 = navbarMenuGroup.items).call(_context2, menu => {
                 const menuType = 'scrollable';
                 const itemIndex = `${menuType}-${menu.key}`;
                 return jsxRuntime.jsx(ApplicationMenu, {
@@ -1281,6 +1326,7 @@ const NavBar = props => {
                   handleToggleItem: () => handleToggleItem(itemIndex),
                   isMenuOpen: isMenuOpen,
                   shouldCloseMenuFly: shouldCloseMenuFly,
+                  isUserAdminOfCurrentProject: props.project?.isUserAdminOfCurrentProject,
                   projectPermissions: projectPermissions,
                   applicationLocale: applicationLocale,
                   projectKey: props.projectKey,
@@ -1289,7 +1335,7 @@ const NavBar = props => {
                   onMouseMove: e => getMousePosition(e, itemIndex),
                   mousePosition: mousePosition
                 }, menu.key);
-              })
+              })]
             }, navbarMenuGroup.key);
           })
         })

package/dist/{navbar-9eb6c972.esm.js → navbar-f1a15d6d.esm.js}

@@ -19,7 +19,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { NavLink, matchPath, useLocation } from 'react-router-dom';
 import { useMcQuery, normalizeAllAppliedPermissions, normalizeAllAppliedActionRights, normalizeAllAppliedDataFences } from '@commercetools-frontend/application-shell-connectors';
 import LogoSVG from '@commercetools-frontend/assets/logos/commercetools_small-logo.svg';
-import { NO_VALUE_FALLBACK, GRAPHQL_TARGETS, STORAGE_KEYS, SUPPORT_PORTAL_URL } from '@commercetools-frontend/constants';
+import { NO_VALUE_FALLBACK, GRAPHQL_TARGETS, STORAGE_KEYS, SUPPORT_PORTAL_URL, isProjectKeylessApplicationEntryPoint } from '@commercetools-frontend/constants';
 import { SidebarCollapseIcon, SidebarExpandIcon, SupportIcon } from '@commercetools-uikit/icons';
 import Spacings from '@commercetools-uikit/spacings';
 import _styled from '@emotion/styled/base';
@@ -36,11 +36,12 @@ import { RestrictedByPermissions } from '@commercetools-frontend/permissions';
 import InlineSvg from '@commercetools-uikit/icons/inline-svg';
 import { l as location } from './location-f21dbc25.esm.js';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { Badge } from '@commercetools/nimbus';
 import _keysInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/keys';
 import _sortInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/sort';
 import isNil from 'lodash/isNil';
 import throttle from 'lodash/throttle';
-import { u as useApplicationsMenu } from './use-applications-menu-bc2b9a66.esm.js';
+import { u as useApplicationsMenu } from './use-applications-menu-85ab6542.esm.js';
 import '@apollo/client';
 import '@commercetools-frontend/l10n';
 
@@ -293,6 +294,10 @@ var messages = defineMessages({
   'NavBar.MenuExpander.expandMenu': {
     id: 'NavBar.MenuExpander.expandMenu',
     defaultMessage: 'Expand menu'
+  },
+  'NavBar.Group.badge.new': {
+    id: 'NavBar.Group.badge.new',
+    defaultMessage: 'New'
   }
 });
 
@@ -533,6 +538,7 @@ const RestrictedMenuItem = _ref4 => {
     // Always check that some of the given permissions match.
     ,
     shouldMatchSomePermissions: true,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: props.children
   }) : jsx(Fragment, {
@@ -540,9 +546,13 @@ const RestrictedMenuItem = _ref4 => {
   });
   if (props.featureToggle) {
     // A regular short-lived feature toggle
-    if (flagVariation === true) return permissionsWrapper;
+    if (flagVariation === true) {
+      return permissionsWrapper;
+    }
     // A long-lived feature toggle with `{ value: boolean, string: reason }`
-    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) return permissionsWrapper;
+    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) {
+      return permissionsWrapper;
+    }
     return null;
   }
   return permissionsWrapper;
@@ -595,6 +605,27 @@ const ItemContainer = props => {
 };
 ItemContainer.displayName = 'ItemContainer';
 
+const GroupLabel = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e18pgpg90"
+} : {
+  target: "e18pgpg90",
+  label: "GroupLabel"
+})("font-size:", designTokens.fontSize10, ";font-weight:", designTokens.fontWeight600, ";letter-spacing:1px;text-transform:uppercase;color:", designTokens.colorSurface, ";height:", NAVBAR.itemSize, ";width:calc(\n    ", NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n      ", designTokens.spacing25, "\n  );padding:", designTokens.spacing30, ";box-sizing:border-box;display:flex;align-items:center;gap:", designTokens.spacing30, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5hdmJhci1ncm91cC1oZWFkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk2QiIsImZpbGUiOiJuYXZiYXItZ3JvdXAtaGVhZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJhZGdlIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMvbmltYnVzJztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGRlc2lnblRva2VucyBhcyB1aUtpdERlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgTkFWQkFSIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBOYXZiYXJHcm91cEhlYWRlclByb3BzID0ge1xuICBsYWJlbDogc3RyaW5nO1xuICBpc05ldz86IGJvb2xlYW47XG59O1xuXG5jb25zdCBHcm91cExhYmVsID0gc3R5bGVkLmRpdmBcbiAgZm9udC1zaXplOiAke3VpS2l0RGVzaWduVG9rZW5zLmZvbnRTaXplMTB9O1xuICBmb250LXdlaWdodDogJHt1aUtpdERlc2lnblRva2Vucy5mb250V2VpZ2h0NjAwfTtcbiAgbGV0dGVyLXNwYWNpbmc6IDFweDtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgY29sb3I6ICR7dWlLaXREZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgaGVpZ2h0OiAke05BVkJBUi5pdGVtU2l6ZX07XG4gIHdpZHRoOiBjYWxjKFxuICAgICR7TkFWQkFSLnN1Ymxpc3RJbmRlbnRhdGlvbldoZW5FeHBhbmRlZH0gLSAyICpcbiAgICAgICR7dWlLaXREZXNpZ25Ub2tlbnMuc3BhY2luZzI1fVxuICApO1xuICBwYWRkaW5nOiAke3VpS2l0RGVzaWduVG9rZW5zLnNwYWNpbmczMH07XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogJHt1aUtpdERlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuYDtcblxuY29uc3QgTmF2YmFyR3JvdXBIZWFkZXIgPSAoeyBsYWJlbCwgaXNOZXcgfTogTmF2YmFyR3JvdXBIZWFkZXJQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuXG4gIHJldHVybiAoXG4gICAgPEdyb3VwTGFiZWw+XG4gICAgICA8c3Bhbj57bGFiZWx9PC9zcGFuPlxuICAgICAge2lzTmV3ICYmIChcbiAgICAgICAgPEJhZGdlIGNvbG9yUGFsZXR0ZT1cInByaW1hcnlcIiBzaXplPVwiMnhzXCI+XG4gICAgICAgICAge2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlc1snTmF2QmFyLkdyb3VwLmJhZGdlLm5ldyddKX1cbiAgICAgICAgPC9CYWRnZT5cbiAgICAgICl9XG4gICAgPC9Hcm91cExhYmVsPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTmF2YmFyR3JvdXBIZWFkZXI7XG4iXX0= */"));
+const NavbarGroupHeader = _ref => {
+  let label = _ref.label,
+    isNew = _ref.isNew;
+  const intl = useIntl();
+  return jsxs(GroupLabel, {
+    children: [jsx("span", {
+      children: label
+    }), isNew && jsx(Badge, {
+      colorPalette: "primary",
+      size: "2xs",
+      children: intl.formatMessage(messages['NavBar.Group.badge.new'])
+    })]
+  });
+};
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const NavBarLayout = props => {
   return jsx("nav", {
@@ -944,8 +975,17 @@ const getMenuAccessibleLabel = (labelAllLocales, defaultLabel, applicationLocale
   if (defaultLabel) return defaultLabel;
   return NO_VALUE_FALLBACK;
 };
+const getNavbarItemPath = (projectKey, uriPath) => {
+  const _uriPath$split = uriPath.split('/'),
+    _uriPath$split2 = _slicedToArray(_uriPath$split, 1),
+    topLevelPath = _uriPath$split2[0];
+  if (isProjectKeylessApplicationEntryPoint(topLevelPath)) {
+    return `/${uriPath}`;
+  }
+  return `/${projectKey}/${uriPath}`;
+};
 const getIsSubmenuRouteActive = (uriPath, props) => Boolean(matchPath(props.location.pathname, {
-  path: `/${props.projectKey}/${uriPath}`,
+  path: getNavbarItemPath(props.projectKey, uriPath),
   exact: true,
   strict: false
 }));
@@ -1075,7 +1115,7 @@ const ApplicationMenu = props => {
     return () => observer?.disconnect();
   }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(matchPath(props.location.pathname, {
-    path: `/${props.projectKey}/${props.menu.uriPath}`,
+    path: getNavbarItemPath(props.projectKey, props.menu.uriPath),
     exact: false,
     strict: false
   }));
@@ -1103,6 +1143,7 @@ const ApplicationMenu = props => {
     permissions: props.menu.permissions,
     actionRights: props.menu.actionRights ?? undefined,
     dataFences: props.menu.dataFences ?? undefined,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: jsxs(MenuItem$1, {
       hasSubmenu: hasSubmenu,
@@ -1117,7 +1158,7 @@ const ApplicationMenu = props => {
       identifier: menuItemIdentifier,
       ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
       children: [jsx(MenuItemLink, {
-        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
+        linkTo: getNavbarItemPath(props.projectKey, props.menu.uriPath),
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
         ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
@@ -1154,12 +1195,13 @@ const ApplicationMenu = props => {
           permissions: submenu.permissions,
           actionRights: submenu.actionRights ?? undefined,
           dataFences: submenu.dataFences ?? undefined,
+          isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
           projectPermissions: props.projectPermissions,
           children: jsx(SublistItem, {
             isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
             children: jsx(Text, {
               children: jsx(MenuItemLink, {
-                linkTo: `/${props.projectKey}/${submenu.uriPath}`
+                linkTo: getNavbarItemPath(props.projectKey, submenu.uriPath)
                 // We want to use an exact matching strategy to avoid multiple
                 // links matching sub-routes.
                 ,
@@ -1240,8 +1282,11 @@ const NavBar = props => {
           scale: "l",
           children: _mapInstanceProperty(allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
             var _context2;
-            return jsx("div", {
-              children: _mapInstanceProperty(_context2 = navbarMenuGroup.items).call(_context2, menu => {
+            return jsxs("div", {
+              children: [navbarMenuGroup.label && isMenuOpen && jsx(NavbarGroupHeader, {
+                label: navbarMenuGroup.label,
+                isNew: navbarMenuGroup.isNew ?? undefined
+              }), _mapInstanceProperty(_context2 = navbarMenuGroup.items).call(_context2, menu => {
                 const menuType = 'scrollable';
                 const itemIndex = `${menuType}-${menu.key}`;
                 return jsx(ApplicationMenu, {
@@ -1251,6 +1296,7 @@ const NavBar = props => {
                   handleToggleItem: () => handleToggleItem(itemIndex),
                   isMenuOpen: isMenuOpen,
                   shouldCloseMenuFly: shouldCloseMenuFly,
+                  isUserAdminOfCurrentProject: props.project?.isUserAdminOfCurrentProject,
                   projectPermissions: projectPermissions,
                   applicationLocale: applicationLocale,
                   projectKey: props.projectKey,
@@ -1259,7 +1305,7 @@ const NavBar = props => {
                   onMouseMove: e => getMousePosition(e, itemIndex),
                   mousePosition: mousePosition
                 }, menu.key);
-              })
+              })]
             }, navbarMenuGroup.key);
           })
         })

package/dist/{navbar-f4b2552d.cjs.prod.js → navbar-f6d839cd.cjs.prod.js}

@@ -38,11 +38,12 @@ var permissions = require('@commercetools-frontend/permissions');
 var InlineSvg = require('@commercetools-uikit/icons/inline-svg');
 var location = require('./location-537e0660.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var nimbus = require('@commercetools/nimbus');
 var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/keys');
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
 var isNil = require('lodash/isNil');
 var throttle = require('lodash/throttle');
-var useApplicationsMenu = require('./use-applications-menu-8984efa1.cjs.prod.js');
+var useApplicationsMenu = require('./use-applications-menu-dab068b3.cjs.prod.js');
 require('@apollo/client');
 require('@commercetools-frontend/l10n');
 
@@ -213,6 +214,10 @@ var messages = reactIntl.defineMessages({
   'NavBar.MenuExpander.expandMenu': {
     id: 'NavBar.MenuExpander.expandMenu',
     defaultMessage: 'Expand menu'
+  },
+  'NavBar.Group.badge.new': {
+    id: 'NavBar.Group.badge.new',
+    defaultMessage: 'New'
   }
 });
 
@@ -453,6 +458,7 @@ const RestrictedMenuItem = _ref4 => {
     // Always check that some of the given permissions match.
     ,
     shouldMatchSomePermissions: true,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: props.children
   }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -460,9 +466,13 @@ const RestrictedMenuItem = _ref4 => {
   });
   if (props.featureToggle) {
     // A regular short-lived feature toggle
-    if (flagVariation === true) return permissionsWrapper;
+    if (flagVariation === true) {
+      return permissionsWrapper;
+    }
     // A long-lived feature toggle with `{ value: boolean, string: reason }`
-    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) return permissionsWrapper;
+    if (isLongLivedFlag(flagVariation) && flagVariation.value === true) {
+      return permissionsWrapper;
+    }
     return null;
   }
   return permissionsWrapper;
@@ -515,6 +525,24 @@ const ItemContainer = props => {
 };
 ItemContainer.displayName = 'ItemContainer';
 
+const GroupLabel = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e18pgpg90"
+} )("font-size:", designSystem.designTokens.fontSize10, ";font-weight:", designSystem.designTokens.fontWeight600, ";letter-spacing:1px;text-transform:uppercase;color:", designSystem.designTokens.colorSurface, ";height:", oidc.NAVBAR.itemSize, ";width:calc(\n    ", oidc.NAVBAR.sublistIndentationWhenExpanded, " - 2 *\n      ", designSystem.designTokens.spacing25, "\n  );padding:", designSystem.designTokens.spacing30, ";box-sizing:border-box;display:flex;align-items:center;gap:", designSystem.designTokens.spacing30, ";" + ("" ));
+const NavbarGroupHeader = _ref => {
+  let label = _ref.label,
+    isNew = _ref.isNew;
+  const intl = reactIntl.useIntl();
+  return jsxRuntime.jsxs(GroupLabel, {
+    children: [jsxRuntime.jsx("span", {
+      children: label
+    }), isNew && jsxRuntime.jsx(nimbus.Badge, {
+      colorPalette: "primary",
+      size: "2xs",
+      children: intl.formatMessage(messages['NavBar.Group.badge.new'])
+    })]
+  });
+};
+
 const NavBarLayout = props => {
   return jsxRuntime.jsx("nav", {
     "aria-busy": true,
@@ -835,8 +863,17 @@ const getMenuAccessibleLabel = (labelAllLocales, defaultLabel, applicationLocale
   if (defaultLabel) return defaultLabel;
   return constants.NO_VALUE_FALLBACK;
 };
+const getNavbarItemPath = (projectKey, uriPath) => {
+  const _uriPath$split = uriPath.split('/'),
+    _uriPath$split2 = _slicedToArray(_uriPath$split, 1),
+    topLevelPath = _uriPath$split2[0];
+  if (constants.isProjectKeylessApplicationEntryPoint(topLevelPath)) {
+    return `/${uriPath}`;
+  }
+  return `/${projectKey}/${uriPath}`;
+};
 const getIsSubmenuRouteActive = (uriPath, props) => Boolean(reactRouterDom.matchPath(props.location.pathname, {
-  path: `/${props.projectKey}/${uriPath}`,
+  path: getNavbarItemPath(props.projectKey, uriPath),
   exact: true,
   strict: false
 }));
@@ -966,7 +1003,7 @@ const ApplicationMenu = props => {
     return () => observer?.disconnect();
   }, [menuItemIdentifier, props.isMenuOpen, props.handleToggleItem, callbackFn]);
   const isMainMenuRouteActive = Boolean(reactRouterDom.matchPath(props.location.pathname, {
-    path: `/${props.projectKey}/${props.menu.uriPath}`,
+    path: getNavbarItemPath(props.projectKey, props.menu.uriPath),
     exact: false,
     strict: false
   }));
@@ -994,6 +1031,7 @@ const ApplicationMenu = props => {
     permissions: props.menu.permissions,
     actionRights: props.menu.actionRights ?? undefined,
     dataFences: props.menu.dataFences ?? undefined,
+    isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
     projectPermissions: props.projectPermissions,
     children: jsxRuntime.jsxs(MenuItem$1, {
       hasSubmenu: hasSubmenu,
@@ -1008,7 +1046,7 @@ const ApplicationMenu = props => {
       identifier: menuItemIdentifier,
       ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
       children: [jsxRuntime.jsx(MenuItemLink, {
-        linkTo: `/${props.projectKey}/${props.menu.uriPath}`,
+        linkTo: getNavbarItemPath(props.projectKey, props.menu.uriPath),
         useFullRedirectsForLinks: props.useFullRedirectsForLinks,
         onClick: props.onMenuItemClick,
         ariaLabel: getMenuAccessibleLabel(props.menu.labelAllLocales, props.menu.defaultLabel, props.applicationLocale),
@@ -1045,12 +1083,13 @@ const ApplicationMenu = props => {
           permissions: submenu.permissions,
           actionRights: submenu.actionRights ?? undefined,
           dataFences: submenu.dataFences ?? undefined,
+          isUserAdminOfCurrentProject: props.isUserAdminOfCurrentProject,
           projectPermissions: props.projectPermissions,
           children: jsxRuntime.jsx(SublistItem, {
             isActive: getIsSubmenuRouteActive(submenu.uriPath, props),
             children: jsxRuntime.jsx(Text, {
               children: jsxRuntime.jsx(MenuItemLink, {
-                linkTo: `/${props.projectKey}/${submenu.uriPath}`
+                linkTo: getNavbarItemPath(props.projectKey, submenu.uriPath)
                 // We want to use an exact matching strategy to avoid multiple
                 // links matching sub-routes.
                 ,
@@ -1131,8 +1170,11 @@ const NavBar = props => {
           scale: "l",
           children: _mapInstanceProperty__default["default"](allApplicationsNavbarMenuGroups).call(allApplicationsNavbarMenuGroups, navbarMenuGroup => {
             var _context2;
-            return jsxRuntime.jsx("div", {
-              children: _mapInstanceProperty__default["default"](_context2 = navbarMenuGroup.items).call(_context2, menu => {
+            return jsxRuntime.jsxs("div", {
+              children: [navbarMenuGroup.label && isMenuOpen && jsxRuntime.jsx(NavbarGroupHeader, {
+                label: navbarMenuGroup.label,
+                isNew: navbarMenuGroup.isNew ?? undefined
+              }), _mapInstanceProperty__default["default"](_context2 = navbarMenuGroup.items).call(_context2, menu => {
                 const menuType = 'scrollable';
                 const itemIndex = `${menuType}-${menu.key}`;
                 return jsxRuntime.jsx(ApplicationMenu, {
@@ -1142,6 +1184,7 @@ const NavBar = props => {
                   handleToggleItem: () => handleToggleItem(itemIndex),
                   isMenuOpen: isMenuOpen,
                   shouldCloseMenuFly: shouldCloseMenuFly,
+                  isUserAdminOfCurrentProject: props.project?.isUserAdminOfCurrentProject,
                   projectPermissions: projectPermissions,
                   applicationLocale: applicationLocale,
                   projectKey: props.projectKey,
@@ -1150,7 +1193,7 @@ const NavBar = props => {
                   onMouseMove: e => getMousePosition(e, itemIndex),
                   mousePosition: mousePosition
                 }, menu.key);
-              })
+              })]
             }, navbarMenuGroup.key);
           })
         })

package/dist/{oidc-callback-1836d6f9.esm.js → oidc-callback-293b318e.esm.js}

@@ -18,7 +18,7 @@ import { AngleLeftIcon } from '@commercetools-uikit/icons';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { C as ConfigureIntlProvider } from './index-ac7ed4f7.esm.js';
+import { C as ConfigureIntlProvider } from './index-33df00ac.esm.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
@@ -30,7 +30,8 @@ import '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import '@babel/runtime-corejs3/helpers/defineProperty';
 import './location-f21dbc25.esm.js';
-import './index-86039df7.esm.js';
+import '@commercetools-frontend/constants';
+import './application-entry-point-e20cafdb.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/reduce';
 import '@babel/runtime-corejs3/core-js-stable/object/entries';
 import '@babel/runtime-corejs3/core-js-stable/instance/concat';
@@ -40,7 +41,6 @@ import 'lodash/mapValues';
 import 'omit-empty-es';
 import 'redux';
 import 'redux-thunk';
-import '@commercetools-frontend/constants';
 import '@commercetools-frontend/notifications';
 import '@commercetools-frontend/sdk';
 import '@babel/runtime-corejs3/core-js-stable/instance/index-of';
@@ -50,11 +50,14 @@ import '@commercetools-frontend/sentry';
 import '@commercetools-frontend/react-notifications';
 import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import 'redux-logger';
+import 'tiny-invariant';
+import '@commercetools-frontend/application-config/ssr';
+import '@commercetools-frontend/permissions';
 import '@babel/runtime-corejs3/core-js-stable/instance/find';
 import '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import '@babel/runtime-corejs3/core-js-stable/instance/map';
 import '@emotion/react';
 import './oidc-cb344fae.esm.js';
-import '@babel/runtime-corejs3/core-js-stable/instance/map';
 import '@babel/runtime-corejs3/core-js-stable/set';
 import 'react-intl';
 import '@babel/runtime-corejs3/helpers/objectWithoutProperties';
@@ -82,8 +85,6 @@ import '@babel/runtime-corejs3/helpers/possibleConstructorReturn';
 import '@babel/runtime-corejs3/helpers/getPrototypeOf';
 import '@babel/runtime-corejs3/helpers/inherits';
 import '@commercetools-uikit/design-system/materials/resets.css';
-import '@commercetools-frontend/application-config/ssr';
-import '@commercetools-frontend/permissions';
 import '@flopflip/memory-adapter';
 import '@babel/runtime-corejs3/core-js-stable/json/stringify';
 import '@babel/runtime-corejs3/core-js-stable/instance/some';

package/dist/{oidc-callback-5b213b4f.cjs.prod.js → oidc-callback-55b9cdae.cjs.prod.js}

@@ -20,7 +20,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-ce507805.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-2ead4c51.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
@@ -32,7 +32,8 @@ require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 require('@babel/runtime-corejs3/helpers/defineProperty');
 require('./location-537e0660.cjs.prod.js');
-require('./index-245e2980.cjs.prod.js');
+require('@commercetools-frontend/constants');
+require('./application-entry-point-516fd72c.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 require('@babel/runtime-corejs3/core-js-stable/object/entries');
 require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -42,7 +43,6 @@ require('lodash/mapValues');
 require('omit-empty-es');
 require('redux');
 require('redux-thunk');
-require('@commercetools-frontend/constants');
 require('@commercetools-frontend/notifications');
 require('@commercetools-frontend/sdk');
 require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
@@ -52,11 +52,14 @@ require('@commercetools-frontend/sentry');
 require('@commercetools-frontend/react-notifications');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('redux-logger');
+require('tiny-invariant');
+require('@commercetools-frontend/application-config/ssr');
+require('@commercetools-frontend/permissions');
 require('@babel/runtime-corejs3/core-js-stable/instance/find');
 require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('@emotion/react');
 require('./oidc-0cba182b.cjs.prod.js');
-require('@babel/runtime-corejs3/core-js-stable/instance/map');
 require('@babel/runtime-corejs3/core-js-stable/set');
 require('react-intl');
 require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -84,8 +87,6 @@ require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
 require('@babel/runtime-corejs3/helpers/getPrototypeOf');
 require('@babel/runtime-corejs3/helpers/inherits');
 require('@commercetools-uikit/design-system/materials/resets.css');
-require('@commercetools-frontend/application-config/ssr');
-require('@commercetools-frontend/permissions');
 require('@flopflip/memory-adapter');
 require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 require('@babel/runtime-corejs3/core-js-stable/instance/some');