Fixes #35601 - Search in navigation

theforeman · Nov 9, 2023 · a923ce1 · a923ce1
1 parent 108aed5
commit a923ce1
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 67 deletions.
diff --git a/app/views/about/index.html.erb b/app/views/about/index.html.erb
@@ -137,6 +137,11 @@
       <p id="copyright-p"><%= (_("Version %{version}  %{copyright} 2009-%{year} Paul Kelly and %{author}") % {:version => SETTINGS[:version], :copyright => "&copy;", :year=>DateTime.now.year, :author=>mail_to("[email protected]", "Ohad Levy" )}).html_safe %></p>
       <p id="instance-id-p"><%= _("Instance %{uuid}") % {:uuid => Foreman.instance_id} %></p>
     </div>
+    <div class="stats-well" id="copyright-div">
+      <h4><%= _("Shortcuts") %> </h4>
+      <p><kbd>/</kbd> <%= _("To focus page search bar") %></p>
+      <p><kbd>CTRL + SHIFT + F</kbd> <%= _("To focus the navigation search bar") %></p>
+    </div>
   </div>
   <%= slot('aboutFooterSlot', true) %>
 </div>
diff --git a/test/integration/config_report_js_test.rb b/test/integration/config_report_js_test.rb
@@ -23,7 +23,7 @@ class ConfigReportJSTest < IntegrationTestWithJavascript
     report
     visit config_reports_path
     click_link(report.host.name)
-    has_selector?(".pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
-    assert_equal "host = #{report.host.name}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
+    assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
 end
diff --git a/test/integration/fact_value_js_test.rb b/test/integration/fact_value_js_test.rb
@@ -14,19 +14,19 @@ def setup
     within(:xpath, "//tr[contains(.,'#{@fact_name.name}')]") do
       click_link(@host.fqdn)
     end
-    has_selector?(".pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
-    assert_equal "host = #{@host.fqdn}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
+    assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
   test "fact_name fact links" do
     visit fact_values_path
     find(:xpath, "//tr[contains(.,'#{@fact_name.name}')]//td[2]//a").click
-    has_selector?(".pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
-    assert_equal "name = #{@fact_name.name}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
+    assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
   test "value fact links" do
     visit fact_values_path
     click_link(@value.value)
-    has_selector?(".pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
-    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
+    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
 end
diff --git 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
@@ -36,7 +36,6 @@ const childToMenuItem = (child, currentLocation, currentOrganization) => ({
     child.title === currentLocation || child.title === currentOrganization
       ? 'mobile-active'
       : '',
-  href: child.url || '#',
-  preventHref: true,
+  href: child.url,
   onClick: child.onClick || null,
 });
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
@@ -9,6 +9,7 @@ import {
   NavItemSeparator,
 } from '@patternfly/react-core';
 import { getCurrentPath } from './LayoutHelper';
+import { NavigationSearch } from './NavigationSearch';
 
 const titleWithIcon = (title, iconClass) => (
   <div>
@@ -45,7 +46,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;
       }
@@ -70,7 +71,7 @@ const Navigation = ({
             } else {
               groups[currIndex].groupItems.push({
                 ...sub,
-                isActive: currentPath === sub.href.split('?')[0],
+                isActive: currentPath === sub.href?.split('?')[0],
               });
             }
           });
@@ -81,6 +82,8 @@ const Navigation = ({
     [items.length, currentPath]
   );
 
+  if (!items.length) return null;
+
   const clickAndNavigate = (_onClick, href, event) => {
     if (event.ctrlKey) return;
     event.preventDefault();
@@ -95,6 +98,7 @@ const Navigation = ({
   return (
     <Nav id="foreman-nav" ouiaId="foreman-nav">
       <NavList>
+        <NavigationSearch clickAndNavigate={clickAndNavigate} items={items} />
         {groupedItems.map(({ title, iconClass, groups, className }, index) => (
           <React.Fragment key={index}>
             <NavExpandable