From 1d792aa8184e99d554eb7e391f77b827d450fe13 Mon Sep 17 00:00:00 2001 From: Lewis Renfrew Date: Wed, 9 Sep 2026 11:20:45 +0100 Subject: [PATCH 1/3] handy search item paths for easier future finding --- CHANGELOG.md | 2 ++ package.json | 2 +- src/components/Navigation.js | 11 ++++++-- src/components/Navigation.stories.js | 24 ++++++++++++----- src/components/Panel.stories.js | 26 ++++++++++++++----- src/components/SearchPanel.js | 39 +++++++++++++++++++++------- 6 files changed, 78 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea7c88ab..8287ca4c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ # Changelog +## [34.1.0] - 2026-09-09 +- Show path to Navigation search results ## [33.0.1] - 2026-07-29 - Fix bug when exactly 100 rows hid the totals discovered on back post report (ticket 22250) ## [33.0.0] - 2026-06-05 diff --git a/package.json b/package.json index dfb9ba09..afa2a8ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@linn-it/linn-form-components-library", - "version": "34.0.0", + "version": "34.1.0", "private": false, "repository": { "type": "git", diff --git a/src/components/Navigation.js b/src/components/Navigation.js index c0561a26..de4633df 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -28,6 +28,7 @@ function Navigation({ }) { const [selected, setSelected] = useState(false); const [anchorEl, setAnchorEl] = useState(); + const [hoveredSectionId, setHoveredSectionId] = useState(null); const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const styles = { @@ -99,6 +100,8 @@ function Navigation({ if (sections) { const menuIds = sections.map(item => item.id); + const hoveredTabIndex = menuIds.indexOf(hoveredSectionId); + const tabsValue = hoveredTabIndex !== -1 ? hoveredTabIndex : selected; const handleClick = event => { setAnchorEl(event.currentTarget); @@ -174,7 +177,7 @@ function Navigation({ { if (selected === value) { setSelected(false); @@ -285,7 +288,11 @@ function Navigation({ ) )} {selected === sections.length && ( - setSelected(false)} /> + setSelected(false)} + onHoverSection={setHoveredSectionId} + /> )} diff --git a/src/components/Navigation.stories.js b/src/components/Navigation.stories.js index ecc8712b..f824b64e 100644 --- a/src/components/Navigation.stories.js +++ b/src/components/Navigation.stories.js @@ -12,15 +12,27 @@ const sampleSections = [ { title: 'Purchase Orders', items: [ - { title: 'Create PO', href: '#', showInMenu: true }, - { title: 'View POs', href: '#', showInMenu: true } + { + title: 'Create PO', + href: '/purchasing/orders/create', + showInMenu: true + }, + { title: 'View POs', href: '/purchasing/orders', showInMenu: true } ] }, { title: 'Suppliers', items: [ - { title: 'Supplier List', href: '#', showInMenu: true }, - { title: 'Add Supplier', href: '#', showInMenu: true } + { + title: 'Supplier List', + href: '/purchasing/suppliers', + showInMenu: true + }, + { + title: 'Add Supplier', + href: '/purchasing/suppliers/create', + showInMenu: true + } ] } ] @@ -36,8 +48,8 @@ const sampleSections = [ { title: 'Orders', items: [ - { title: 'Sales Orders', href: '#', showInMenu: true }, - { title: 'Invoices', href: '#', showInMenu: true } + { title: 'Sales Orders', href: '/sales/orders', showInMenu: true }, + { title: 'Invoices', href: '/sales/invoices', showInMenu: true } ] } ] diff --git a/src/components/Panel.stories.js b/src/components/Panel.stories.js index 4fbb9380..0762a4bd 100644 --- a/src/components/Panel.stories.js +++ b/src/components/Panel.stories.js @@ -9,16 +9,24 @@ const sampleSection = { { title: 'Purchase Orders', items: [ - { title: 'Create PO', href: '#', showInMenu: true }, - { title: 'View POs', href: '#', showInMenu: true }, - { title: 'Approve POs', href: '#', showInMenu: true } + { title: 'Create PO', href: '/purchasing/orders/create', showInMenu: true }, + { title: 'View POs', href: '/purchasing/orders', showInMenu: true }, + { + title: 'Approve POs', + href: '/purchasing/orders/approve', + showInMenu: true + } ] }, { title: 'Suppliers', items: [ - { title: 'Supplier List', href: '#', showInMenu: true }, - { title: 'Add Supplier', href: '#', showInMenu: true } + { title: 'Supplier List', href: '/purchasing/suppliers', showInMenu: true }, + { + title: 'Add Supplier', + href: '/purchasing/suppliers/create', + showInMenu: true + } ] } ] @@ -28,8 +36,12 @@ const sampleSection = { { title: 'Invoices', items: [ - { title: 'Invoice List', href: '#', showInMenu: true }, - { title: 'Overdue Invoices', href: '#', showInMenu: true } + { title: 'Invoice List', href: '/purchasing/invoices', showInMenu: true }, + { + title: 'Overdue Invoices', + href: '/purchasing/invoices/overdue', + showInMenu: true + } ] } ] diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js index 9903fc38..257854ee 100644 --- a/src/components/SearchPanel.js +++ b/src/components/SearchPanel.js @@ -24,16 +24,23 @@ const styles = { } }; -function SearchPanel({ menu, close }) { +function SearchPanel({ menu, close, onHoverSection = () => {} }) { const [searchTerm, setSearchTerm] = useState(); - const menuEntries = menu - .map(s => s.columns) - .flat() - .map(c => c.categories) - .flat() - .map(i => i.items) - .flat(); + const menuEntries = menu.flatMap(section => + section.columns.flatMap(col => + col.categories.flatMap(category => + category.items.map(item => ({ + ...item, + sectionId: section.id, + breadcrumb: `${section.title} > ${category.title} > ${item.title}`.replace( + /&/g, + '&' + ) + })) + ) + ) + ); const uniqueEntries = Object.values( menuEntries.reduce((uniques, entry) => { @@ -81,13 +88,18 @@ function SearchPanel({ menu, close }) { e.href.toLowerCase().includes(searchTerm.toLowerCase()) ) .map(entry => ( - + onHoverSection(entry.sectionId)} + onMouseLeave={() => onHoverSection(null)} + > {entry.title} + + {entry.breadcrumb} + From b90ecc2a20ea3ecfdb8584463f033fc8dfc183de Mon Sep 17 00:00:00 2001 From: Lewis Renfrew Date: Wed, 9 Sep 2026 12:34:00 +0100 Subject: [PATCH 2/3] pr fb --- src/components/Navigation.js | 8 +++-- src/components/SearchPanel.js | 64 +++++++++++++++++++++-------------- 2 files changed, 44 insertions(+), 28 deletions(-) diff --git a/src/components/Navigation.js b/src/components/Navigation.js index de4633df..55dc233f 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -101,7 +101,8 @@ function Navigation({ if (sections) { const menuIds = sections.map(item => item.id); const hoveredTabIndex = menuIds.indexOf(hoveredSectionId); - const tabsValue = hoveredTabIndex !== -1 ? hoveredTabIndex : selected; + const baseTabsValue = selected === sections.length ? false : selected; + const tabsValue = hoveredTabIndex !== -1 ? hoveredTabIndex : baseTabsValue; const handleClick = event => { setAnchorEl(event.currentTarget); @@ -290,7 +291,10 @@ function Navigation({ {selected === sections.length && ( setSelected(false)} + close={() => { + setSelected(false); + setHoveredSectionId(null); + }} onHoverSection={setHoveredSectionId} /> )} diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js index 257854ee..3c3abd54 100644 --- a/src/components/SearchPanel.js +++ b/src/components/SearchPanel.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; @@ -27,28 +27,37 @@ const styles = { function SearchPanel({ menu, close, onHoverSection = () => {} }) { const [searchTerm, setSearchTerm] = useState(); - const menuEntries = menu.flatMap(section => - section.columns.flatMap(col => - col.categories.flatMap(category => - category.items.map(item => ({ - ...item, - sectionId: section.id, - breadcrumb: `${section.title} > ${category.title} > ${item.title}`.replace( - /&/g, - '&' + const menuEntries = useMemo( + () => + menu.flatMap(section => + section.columns.flatMap(col => + col.categories.flatMap(category => + category.items.map(item => ({ + ...item, + sectionId: section.id, + breadcrumb: + `${section.title} > ${category.title} > ${item.title}`.replace( + /&/g, + '&' + ) + })) ) - })) - ) - ) + ) + ), + [menu] ); - const uniqueEntries = Object.values( - menuEntries.reduce((uniques, entry) => { - if (!uniques[entry.href]) { - return { ...uniques, [entry.href]: entry }; - } - return uniques; - }, {}) + const uniqueEntries = useMemo( + () => + Object.values( + menuEntries.reduce((uniques, entry) => { + if (!uniques[entry.href]) { + return { ...uniques, [entry.href]: entry }; + } + return uniques; + }, {}) + ), + [menuEntries] ); const handleFieldChange = (propertyName, newValue) => { @@ -88,12 +97,15 @@ function SearchPanel({ menu, close, onHoverSection = () => {} }) { e.href.toLowerCase().includes(searchTerm.toLowerCase()) ) .map(entry => ( - onHoverSection(entry.sectionId)} - onMouseLeave={() => onHoverSection(null)} - > - + + onHoverSection(entry.sectionId)} + onMouseLeave={() => onHoverSection(null)} + onFocus={() => onHoverSection(entry.sectionId)} + onBlur={() => onHoverSection(null)} + > Date: Wed, 9 Sep 2026 12:42:32 +0100 Subject: [PATCH 3/3] last one --- src/components/Navigation.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Navigation.js b/src/components/Navigation.js index 55dc233f..bb564f25 100644 --- a/src/components/Navigation.js +++ b/src/components/Navigation.js @@ -100,9 +100,9 @@ function Navigation({ if (sections) { const menuIds = sections.map(item => item.id); - const hoveredTabIndex = menuIds.indexOf(hoveredSectionId); - const baseTabsValue = selected === sections.length ? false : selected; - const tabsValue = hoveredTabIndex !== -1 ? hoveredTabIndex : baseTabsValue; + const searchOpen = selected === sections.length; + const hoveredTabIndex = searchOpen ? menuIds.indexOf(hoveredSectionId) : -1; + const tabsValue = hoveredTabIndex !== -1 ? hoveredTabIndex : searchOpen ? false : selected; const handleClick = event => { setAnchorEl(event.currentTarget);