New nav

docs/management/advanced-options.asciidoc

@@ -68,6 +68,9 @@ into the document when displaying it.
 `metrics:max_buckets`:: The maximum numbers of buckets that a single
 data source can return. This might arise when the user selects a
 short interval (for example, 1s) for a long time period (1 year).
+`pageNavigation`:: The style of navigation menu for Kibana.
+Choices are Legacy, the legacy style where every plugin is represented in the nav,
+and Modern, a new format that bundles related plugins together in flyaway nested navigation.
 `query:allowLeadingWildcards`:: Allows a wildcard (*) as the first character
 in a query clause. Only applies when experimental query features are
 enabled in the query bar. To disallow leading wildcards in Lucene queries,

src/core/public/_core.scss

@@ -6,4 +6,9 @@
   overflow-x: hidden;
   min-width: 100%;
   min-height: 100%;
+
+  // TODO remove when EUI is updated
+  &.euiBody--headerIsFixed {
+    padding-top: 49px;
+  }
 }

src/core/public/chrome/chrome_service.tsx

@@ -202,6 +202,7 @@ export class ChromeService {
             navControlsRight$={navControls.getRight$()}
             onIsLockedUpdate={setIsNavDrawerLocked}
             isLocked$={getIsNavDrawerLocked$}
+            navSetting$={uiSettings.get$('pageNavigation')}
           />
         </React.Fragment>
       ),

src/core/public/chrome/ui/header/_index.scss

@@ -1,14 +1,18 @@
 @import '@elastic/eui/src/components/header/variables';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
-.chrHeaderWrapper {
+// TODO when legacy nav removed
+// Delete this block
+.chrHeaderWrapper:not(.headerWrapper) {
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 10;
 }
 
-.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+// TODO when legacy nav removed
+// Delete this block
+.chrHeaderWrapper:not(.headerWrapper) ~ .app-wrapper:not(.hidden-chrome) {
   top: $euiHeaderChildSize;
   left: $euiHeaderChildSize;
 
@@ -30,14 +34,18 @@
 }
 
 // Mobile header is smaller
+// TODO when legacy nav removed
+// Delete this block
 @include euiBreakpoint('xs', 's') {
-  .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+  .chrHeaderWrapper:not(.headerWrapper) ~ .app-wrapper:not(.hidden-chrome) {
     left: 0;
   }
 }
 
+// TODO when legacy nav removed
+// Delete this block
 @include euiBreakpoint('xl') {
-  .chrHeaderWrapper--navIsLocked {
+  .chrHeaderWrapper--navIsLocked:not(.headerWrapper) {
     ~ .app-wrapper:not(.hidden-chrome) {
       // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
       left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -0,0 +1,262 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiCollapsibleNav,
+  EuiCollapsibleNavGroup,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiShowFor,
+  EuiText,
+} from '@elastic/eui';
+import { groupBy, sortBy } from 'lodash';
+import { OnIsLockedUpdate } from './';
+import { AppCategory } from '../../../../types';
+import { NavLink, RecentNavLink } from './nav_link';
+
+function getAllCategories(allCategorizedLinks: Record<string, NavLink[]>) {
+  const allCategories = {} as Record<string, AppCategory | undefined>;
+
+  for (const [key, value] of Object.entries(allCategorizedLinks)) {
+    allCategories[key] = value[0].category;
+  }
+
+  return allCategories;
+}
+
+function getOrderedCategories(
+  mainCategories: Record<string, NavLink[]>,
+  categoryDictionary: ReturnType<typeof getAllCategories>
+) {
+  return sortBy(
+    Object.keys(mainCategories),
+    categoryName => categoryDictionary[categoryName]?.order
+  );
+}
+
+function getCategoryLocalStorageKey(label: string) {
+  return `core.navGroup.${label}`;
+}
+
+function getIsCategoryOpen(label: string) {
+  const value = localStorage.getItem(getCategoryLocalStorageKey(label)) ?? 'true';
+
+  return value === 'true';
+}
+
+function setIsCategoryOpen(label: string, isOpen: boolean) {
+  localStorage.setItem(getCategoryLocalStorageKey(label), `${isOpen}`);
+}
+
+interface Props {
+  isLocked: boolean;
+  isOpen: boolean;
+  navLinks: NavLink[];
+  recentNavLinks: RecentNavLink[];
+  homeHref: string;
+  id: string;
+  onIsLockedUpdate: OnIsLockedUpdate;
+  onIsOpenUpdate: (isOpen?: boolean) => void;
+}
+
+export function CollapsibleNav({
+  isLocked,
+  isOpen,
+  navLinks,
+  recentNavLinks,
+  onIsLockedUpdate,
+  onIsOpenUpdate,
+  homeHref,
+  id,
+}: Props) {
+  const groupedNavLinks = groupBy(navLinks, link => link?.category?.label);
+  const { undefined: unknowns = [], ...allCategorizedLinks } = groupedNavLinks;
+  const categoryDictionary = getAllCategories(allCategorizedLinks);
+  const orderedCategories = getOrderedCategories(allCategorizedLinks, categoryDictionary);
+
+  return (
+    <EuiCollapsibleNav
+      data-test-subj="collapsibleNav"
+      id={id}
+      aria-label={i18n.translate('core.ui.primaryNav.screenReaderLabel', {
+        defaultMessage: 'Primary',
+      })}
+      isOpen={isOpen}
+      isDocked={isLocked}
+      onClose={onIsOpenUpdate}
+    >
+      {/* Pinned items */}
+      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+        <EuiCollapsibleNavGroup
+          background="light"
+          className="eui-yScroll"
+          style={{ maxHeight: '40vh' }}
+        >
+          <EuiListGroup
+            aria-label={i18n.translate('core.ui.primaryNav.pinnedLinksAriaLabel', {
+              defaultMessage: 'Pinned links',
+            })}
+            listItems={[
+              {
+                label: 'Home',
+                iconType: 'home',
+                href: homeHref,
+                onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                  onIsOpenUpdate(false);
+                },
+              },
+            ]}
+            maxWidth="none"
+            color="text"
+            gutterSize="none"
+            size="s"
+          />
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
+
+      <EuiHorizontalRule margin="none" />
+
+      <EuiFlexItem className="eui-yScroll">
+        {/* Recently viewed */}
+        <EuiCollapsibleNavGroup
+          key="recentlyViewed"
+          title={i18n.translate('core.ui.recentlyViewed', { defaultMessage: 'Recently viewed' })}
+          isCollapsible={true}
+          initialIsOpen={getIsCategoryOpen('recentlyViewed')}
+          onToggle={isCategoryOpen => setIsCategoryOpen('recentlyViewed', isCategoryOpen)}
+        >
+          {recentNavLinks.length > 0 ? (
+            <EuiListGroup
+              aria-label={i18n.translate('core.ui.recentlyViewedAriaLabel', {
+                defaultMessage: 'Recently viewed links',
+              })}
+              listItems={recentNavLinks}
+              maxWidth="none"
+              color="subdued"
+              gutterSize="none"
+              size="s"
+            />
+          ) : (
+            <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
+              <p>
+                {i18n.translate('core.ui.EmptyRecentlyViewed', {
+                  defaultMessage: 'No recently viewed items',
+                })}
+              </p>
+            </EuiText>
+          )}
+        </EuiCollapsibleNavGroup>
+
+        {/* Kibana, Observability, Security, and Management sections */}
+        {orderedCategories.map(categoryName => {
+          const category = categoryDictionary[categoryName]!;
+          const links = allCategorizedLinks[categoryName].map(
+            ({ label, href, onClick }: NavLink) => ({
+              label,
+              href,
+              'data-test-subj': 'collapsibleNavAppLink',
+              onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                onIsOpenUpdate(false);
+                onClick(e);
+              },
+            })
+          );
+
+          return (
+            <EuiCollapsibleNavGroup
+              key={category.label}
+              iconType={category.euiIconType}
+              title={category.label}
+              isCollapsible={true}
+              initialIsOpen={getIsCategoryOpen(category.label)}
+              onToggle={isCategoryOpen => setIsCategoryOpen(category.label, isCategoryOpen)}
+            >
+              <EuiListGroup
+                aria-label={i18n.translate('core.ui.primaryNavSection.screenReaderLabel', {
+                  defaultMessage: 'Primary navigation links, {category}',
+                  values: { category: category.label },
+                })}
+                listItems={links}
+                maxWidth="none"
+                color="subdued"
+                gutterSize="none"
+                size="s"
+              />
+            </EuiCollapsibleNavGroup>
+          );
+        })}
+
+        {/* Things with no category (largely for custom plugins) */}
+        {unknowns.map(linkWithoutCategory => (
+          <EuiCollapsibleNavGroup>
+            <EuiListGroup flush>
+              <EuiListGroupItem
+                color="text"
+                size="s"
+                label={linkWithoutCategory.label}
+                href={linkWithoutCategory.href}
+                icon={linkWithoutCategory.icon}
+              />
+            </EuiListGroup>
+          </EuiCollapsibleNavGroup>
+        ))}
+
+        {/* Docking button only for larger screens that can support it*/}
+        <EuiShowFor sizes={['l', 'xl']}>
+          <EuiCollapsibleNavGroup>
+            <EuiListGroup flush>
+              <EuiListGroupItem
+                size="xs"
+                color="subdued"
+                id="foo"
+                label={
+                  isLocked
+                    ? i18n.translate('core.ui.primaryNavSection.undockLabel', {
+                        defaultMessage: 'Undock navigation',
+                      })
+                    : i18n.translate('core.ui.primaryNavSection.dockLabel', {
+                        defaultMessage: 'Dock navigation',
+                      })
+                }
+                aria-label={
+                  isLocked
+                    ? i18n.translate('core.ui.primaryNavSection.undockAriaLabel', {
+                        defaultMessage: 'Undock primary navigation',
+                      })
+                    : i18n.translate('core.ui.primaryNavSection.dockAriaLabel', {
+                        defaultMessage: 'Dock primary navigation',
+                      })
+                }
+                onClick={() => {
+                  onIsLockedUpdate(!isLocked);
+                  // TODO should keep focus here
+                }}
+                iconType={isLocked ? 'lock' : 'lockOpen'}
+              />
+            </EuiListGroup>
+          </EuiCollapsibleNavGroup>
+        </EuiShowFor>
+      </EuiFlexItem>
+    </EuiCollapsibleNav>
+  );
+}