From 9a6c1120f1794ec17a1411d2035a8110954a0b7c Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Thu, 27 Apr 2023 14:47:27 +0200
Subject: [PATCH] tmp search

---
 .../components/Layout/Layout.fixtures.js      |  50 +----
 .../components/Layout/LayoutSelectors.js      |   6 +-
 .../react_app/components/Layout/Navigation.js |   7 +-
 .../components/Layout/NavigationSearch.js     | 211 ++++++++++++++++++
 .../Layout/__tests__/NavigationSearch.test.js |  28 +++
 .../LayoutSelectors.test.js.snap              |  40 ++--
 .../__snapshots__/HeaderToolbar.test.js.snap  |   7 +
 .../react_app/components/Layout/layout.scss   |  30 ++-
 8 files changed, 305 insertions(+), 74 deletions(-)
 create mode 100644 webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
 create mode 100644 webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js

diff --git a/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js b/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
index 8c0a00c57378..43d51d910850 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
@@ -15,6 +15,14 @@ const subItemsA = [
     href: '/c',
     id: 'menu_item_cc',
   },
+
+  {
+    title: 'Ac',
+    isDivider: false,
+    onClick: mockOnClick,
+    href: '/ac',
+    id: 'menu_item_ac',
+  },
 ];
 const subItemsB = [
   {
@@ -26,7 +34,7 @@ const subItemsB = [
   },
 ];
 
-const PFitems = [
+export const PFitems = [
   {
     title: 'Monitor',
     initialActive: true,
@@ -40,31 +48,6 @@ const PFitems = [
     subItems: subItemsB,
   },
 ];
-// Server Hash Data
-const monitorChildren = [
-  {
-    type: 'item',
-    name: 'Dashboard',
-    title: 'Dashboard',
-    exact: true,
-    url: '/',
-  },
-  {
-    type: 'item',
-    name: 'Facts',
-    title: 'Facts',
-    url: '/fact_values',
-  },
-];
-
-const hostsChildren = [
-  {
-    type: 'item',
-    name: 'All Hosts',
-    title: 'All Hosts',
-    url: '/hosts/new',
-  },
-];
 
 const namelessChildren = [
   {
@@ -76,21 +59,6 @@ const namelessChildren = [
   },
 ];
 
-const hashItemsA = [
-  {
-    type: 'sub_menu',
-    name: 'Monitor',
-    icon: 'fa fa-tachometer',
-    children: monitorChildren,
-  },
-  {
-    type: 'sub_menu',
-    name: 'Hosts',
-    icon: 'fa fa-server',
-    children: hostsChildren,
-  },
-];
-
 export const hashItemNameless = [
   {
     type: 'sub_menu',
diff --git a/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js b/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
index 5fd99f86544b..918163a0703f 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
@@ -1,5 +1,4 @@
 import { snakeCase } from 'lodash';
-import { noop } from '../../common/helpers';
 
 export const selectLayout = state => state.layout;
 
@@ -37,7 +36,6 @@ const childToMenuItem = (child, currentLocation, currentOrganization) => ({
     child.title === currentLocation || child.title === currentOrganization
       ? 'mobile-active'
       : '',
-  href: child.url || '#',
-  preventHref: true,
-  onClick: child.onClick || noop,
+  href: child.url,
+  onClick: child.onClick,
 });
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
index 776459189f5f..3490adccde2d 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
@@ -10,6 +10,7 @@ import {
   NavItemSeparator,
 } from '@patternfly/react-core';
 import { getCurrentPath } from './LayoutHelper';
+import { NavigationSearch } from './NavigationSearch';
 
 const titleWithIcon = (title, iconClass) => (
   <div>
@@ -43,7 +44,7 @@ const Navigation = ({
 
   items.forEach(item => {
     item.subItems.forEach(subItem => {
-      if (!subItem.isDivider) {
+      if (!subItem.isDivider && subItem.href) {
         // don't keep the query parameters for the key
         subItemToItemMap[pathFragment(subItem.href)] = item.title;
       }
@@ -69,7 +70,7 @@ const Navigation = ({
             } else {
               groups[currIndex].groupItems.push({
                 ...sub,
-                isActive: pathname === sub.href.split('?')[0],
+                isActive: pathname === sub.href?.split('?')[0],
               });
             }
           });
@@ -80,10 +81,12 @@ const Navigation = ({
     [items.length]
   );
 
+  if (!items.length) return null;
   const groupedItems = getGroupedItems;
   return (
     <Nav id="foreman-nav">
       <NavList>
+        <NavigationSearch items={items} />
         {groupedItems.map(({ title, iconClass, groups, className }, index) => (
           <React.Fragment key={index}>
             <NavExpandable
diff --git a/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
new file mode 100644
index 000000000000..35a7a92fc4ad
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
@@ -0,0 +1,211 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  Popper,
+  SearchInput,
+} from '@patternfly/react-core';
+import { translate as __ } from '../../common/I18n';
+
+export const NavigationSearch = ({ items }) => {
+  const navLinks = {};
+  let parent = null;
+  items.forEach(item => {
+    item.subItems.forEach(group => {
+      if (group.isDivider) {
+        parent = group.title;
+      } else {
+        navLinks[group.title] = {
+          ...group,
+          parents: [item.title, parent].filter(Boolean),
+        };
+      }
+    });
+    parent = null;
+  });
+
+  const navItems = Object.keys(navLinks);
+  const menuNav = navItem => (
+    <MenuItem
+      to={navLinks[navItem].onClick ? null : navLinks[navItem].href}
+      onClick={navLinks[navItem].onClick ? navLinks[navItem].onClick : null}
+      itemId={navItem}
+      key={navItem}
+      description={[...navLinks[navItem].parents, navItem].join(' > ')}
+    >
+      {navItem}
+    </MenuItem>
+  );
+  const [value, setValue] = React.useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
+  const onToggleExpand = (_event, _isExpanded) => {
+    setIsExpanded(!_isExpanded);
+    if (_isExpanded) {
+      setIsAutocompleteOpen(false);
+    }
+  };
+  const [autocompleteOptions, setAutocompleteOptions] = useState(
+    navItems.slice(0, 10).map(menuNav)
+  );
+
+  const searchInputRef = useRef(null);
+  const autocompleteRef = useRef(null);
+
+  const onChange = newValue => {
+    if (
+      newValue !== '' &&
+      searchInputRef &&
+      searchInputRef.current &&
+      searchInputRef.current.contains(document.activeElement)
+    ) {
+      setIsAutocompleteOpen(true);
+
+      // When the value of the search input changes, build a list of no more than 10 autocomplete options.
+      // Options which start with the search input value are listed first, followed by options which contain
+      // the search input value.
+
+      let options = navItems
+        .filter(option => option.toLowerCase().includes(newValue.toLowerCase()))
+        .map(menuNav);
+      if (options.length > 10) {
+        options = options.slice(0, 10);
+      } else {
+        options = [
+          ...options,
+          ...navItems
+            .filter(
+              option =>
+                !option.includes(newValue.toLowerCase()) &&
+                option.includes(newValue.toLowerCase())
+            )
+            .map(menuNav),
+        ].slice(0, 10);
+      }
+
+      // The menu is hidden if there are no options
+      setIsAutocompleteOpen(options.length > 0);
+
+      setAutocompleteOptions(options);
+    } else {
+      setIsAutocompleteOpen(false);
+    }
+    setValue(newValue);
+  };
+
+  // Whenever an autocomplete option is selected, set the search input value, close the menu, and put the browser
+  // focus back on the search input
+  const onSelect = (e, itemId) => {
+    e.stopPropagation();
+    setValue(itemId);
+    setIsAutocompleteOpen(false);
+    searchInputRef.current.focus();
+  };
+
+  useEffect(() => {
+    const handleMenuKeys = event => {
+      // keyboard shortcut to focus the search, will not focus if the key is typed into an input
+      if (
+        event.key === '/' &&
+        event.target.tagName !== 'INPUT' &&
+        event.target.tagName !== 'TEXTAREA'
+      ) {
+        event.preventDefault();
+        searchInputRef.current.focus();
+      }
+      // if the autocomplete is open and the browser focus is on the search input,
+      else if (isAutocompleteOpen && searchInputRef?.current === event.target) {
+        // the escape key closes the autocomplete menu and keeps the focus on the search input.
+        if (event.key === 'Escape') {
+          setIsAutocompleteOpen(false);
+          searchInputRef.current.focus();
+          // the up and down arrow keys move browser focus into the autocomplete menu
+        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          const firstElement = autocompleteRef.current.querySelector(
+            'li > button:not(:disabled)'
+          );
+          firstElement && firstElement.focus();
+          event.preventDefault(); // by default, the up and down arrow keys scroll the window
+        } else if (
+          autocompleteRef?.current?.contains(event.target) &&
+          event.key === 'Tab'
+        ) {
+          event.preventDefault();
+
+          setIsAutocompleteOpen(false);
+          searchInputRef.current.focus();
+        }
+      }
+    };
+    // The autocomplete menu should close if the user clicks outside the menu.
+    const handleClickOutside = event => {
+      if (
+        isAutocompleteOpen &&
+        autocompleteRef?.current &&
+        !autocompleteRef.current.contains(event.target) &&
+        searchInputRef?.current &&
+        !searchInputRef.current.contains(event.target)
+      ) {
+        setIsAutocompleteOpen(false);
+      }
+    };
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isAutocompleteOpen]);
+
+  const searchInput = (
+    <SearchInput
+      className="navigation-search"
+      placeholder={__('Search and go')}
+      value={value}
+      onChange={onChange}
+      expandableInput={{
+        isExpanded,
+        onToggleExpand,
+        toggleAriaLabel: 'Expandable search input toggle',
+      }}
+      ref={searchInputRef}
+      id="navigation-search"
+      onClick={e => {
+        // if the user clicks on the search input, open the autocomplete menu
+        if (e.target.type === 'text') setIsAutocompleteOpen(true);
+        else if (!isExpanded) setIsExpanded(true);
+      }}
+    />
+  );
+
+  const autocomplete = (
+    <Menu
+      ref={autocompleteRef}
+      onSelect={onSelect}
+      className="navigation-search-menu"
+    >
+      <MenuContent>
+        <MenuList>{autocompleteOptions}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <Popper
+      trigger={searchInput}
+      popper={autocomplete}
+      isVisible={isAutocompleteOpen}
+      enableFlip={false}
+      appendTo={() =>
+        document.querySelector('.pf-c-masthead.pf-m-display-inline')
+      }
+    />
+  );
+};
+NavigationSearch.propTypes = {
+  items: PropTypes.array.isRequired,
+};
diff --git a/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
new file mode 100644
index 000000000000..cd47be5d59ad
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { act, render, fireEvent } from '@testing-library/react';
+import { NavigationSearch } from '../NavigationSearch';
+import { PFitems } from '../Layout.fixtures';
+
+describe('NavigationSearch', () => {
+  const items = PFitems;
+  it('should display autocomplete options when input is typed', async () => {
+    const {
+      queryAllByRole,
+      getByPlaceholderText,
+      getByRole,
+      getByLabelText,
+    } = render(
+      <div className="pf-c-masthead pf-m-display-inline">
+        <NavigationSearch items={items} />
+      </div>
+    );
+    fireEvent.click(getByRole('button'));
+    const input = getByPlaceholderText('Search and go');
+    await act(async () => {
+      await fireEvent.change(input, { target: { value: 'a' } });
+    });
+    expect(queryAllByRole('menuitem')).toHaveLength(2);
+    fireEvent.click(getByLabelText('Expandable search input toggle'));
+    expect(queryAllByRole('menuitem')).toHaveLength(0);
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
index 3c61b2e5bc3f..3bf3ef9678b2 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
@@ -132,8 +132,7 @@ Array [
         "href": "/",
         "id": "menu_item_dashboard",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -141,8 +140,7 @@ Array [
         "href": "/fact_values",
         "id": "menu_item_facts",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -150,17 +148,15 @@ Array [
         "href": "/audits",
         "id": "menu_item_audits",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
         "className": "mobile-active",
-        "href": "#",
+        "href": undefined,
         "id": "menu_item_reports",
         "isDivider": true,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -168,8 +164,7 @@ Array [
         "href": "/config_reports?search=eventful+%3D+true",
         "id": "menu_item_config_management",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -177,8 +172,7 @@ Array [
         "href": "/templates/report_templates",
         "id": "menu_item_report_templates",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
     ],
@@ -193,8 +187,7 @@ Array [
         "href": "/hosts",
         "id": "menu_item_all_hosts",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -202,17 +195,15 @@ Array [
         "href": "/hosts/new",
         "id": "menu_item_create_host",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
         "className": "mobile-active",
-        "href": "#",
+        "href": undefined,
         "id": "menu_item_provisioning_setup",
         "isDivider": true,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -220,8 +211,7 @@ Array [
         "href": "/architectures",
         "id": "menu_item_architectures",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
     ],
@@ -236,8 +226,7 @@ Array [
         "href": "/hostgroups",
         "id": "menu_item_host_groups",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
       Object {
@@ -245,8 +234,7 @@ Array [
         "href": "/common_parameters",
         "id": "menu_item_global_parameters",
         "isDivider": false,
-        "onClick": [Function],
-        "preventHref": true,
+        "onClick": undefined,
         "title": undefined,
       },
     ],
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
index fc338091ed96..f33c1a4bd955 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
@@ -109,6 +109,13 @@ exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
                       "onClick": [MockFunction],
                       "title": "Cc",
                     },
+                    Object {
+                      "href": "/ac",
+                      "id": "menu_item_ac",
+                      "isDivider": false,
+                      "onClick": [MockFunction],
+                      "title": "Ac",
+                    },
                   ],
                   "icon": "fa fa-user",
                   "name": "User",
diff --git a/webpack/assets/javascripts/react_app/components/Layout/layout.scss b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
index 9731d06422df..3d6830b3b9d8 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/layout.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
@@ -46,6 +46,35 @@
     // in small screens, the expandable items have css to add a second border
     border-bottom: none;
   }
+  .pf-c-input-group {
+    .pf-c-text-input-group {
+      background-color: var(--pf-global--BackgroundColor--100);
+    }
+    width: 230px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .navigation-search-menu {
+    .pf-c-menu__item {
+      padding: 5px;
+    }
+    --pf-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+    --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
+    --pf-c-menu__list-item--BackgroundColor: transparent;
+    --pf-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+    --pf-c-menu__list-item--focus-within--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+
+    --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
+    --pf-c-menu__list-item--hover--Color: unset;
+  }
 }
 
 .pf-c-nav {
@@ -83,5 +112,4 @@
       border-width: 0;
     }
   }
-  
 }