Skip to content

Feature/op category in popover - #2667

Open
alleria173 wants to merge 8 commits into
gchq:masterfrom
alleria173:feature/op-category-in-popover
Open

alleria173 wants to merge 8 commits into
gchq:masterfrom
alleria173:feature/op-category-in-popover

Conversation

@alleria173

Copy link
Copy Markdown
Contributor

Description
I chose these issues to work on, as I like this type of UI improvement. Its changes are more broad that the other issues I've been working on, but I feel more confident with the codebase to do this one. I held one thing back, which was a strong visual indicating the current category that is opened - when you click on a category link in the popover, it's not always evident that you've opened the category - a nice way to indicate this would be highlighting the currently open category with a new colour like #FFE6EE.

Adds the ability to see which category (or categories) an operation belongs to directly from its hover popover, both in search results and when browsing the operations list.

  • A new "Category: X" line is appended to each operation's popover, listing all categories the operation belongs to (excluding Favourites).
  • Each category name is a clickable link. Clicking it clears the current search, opens that category in the operations list (accordion behaviour closes any other open category), and scrolls it into view.
  • The feature is controlled by a new option, "Show operation category in popover", which is enabled by default and persists between sessions like other options.

Implementation notes:

  • HTMLOperation.getCategoryInfo() derives category membership from the app's category configuration at render time, so no changes to operation configs were needed.
  • The category lookup uses the operation's original name, since search highlighting rewrites the display name with <b> tags.
  • Bootstrap's popover sanitizer strips custom data-* attributes, so the click handler resolves the target category panel from the link text using the same ID scheme as HTMLCategory.toHtml().
  • Category names are escaped before being embedded in popover content.

Existing Issue
Fixes #1654 and Fixes #1878

Screenshots
Normal navigation screengrab
Search result screengrab

AI disclosure
This pull request was developed with the assistance of GitHub Copilot (Claude). All code has been reviewed, manually tested in the browser across the affected interaction scenarios (search-result popovers, category-list popovers, multi-category operations, option toggle, and category-link navigation), and is understood by the submitter.

Test Coverage

  • Added a UI test, "Operation category in popover", in tests/browser/00_nightwatch.js covering: the category line appearing in a search-result popover, clicking the category link (search cleared and target category opened), and toggling the option off/on via the Options modal.
  • All existing tests pass: 2186 operation tests and 259 Node API tests (npm test), and npm run lint is clean.

- Add 'Show operation category in popover' option (enabled by default)
- Display category names (excluding Favourites) in operation popovers
- Make category names clickable to open the category in operations list
- Clicking a category link clears search and expands the category
- Add UI test for category popover functionality
- Addresses issue gchq#1654
- Use originalName for category lookup as highlightSearchStrings modifies
  this.name with <b> tags, which broke category display for name-matched
  search results
- Derive category ID from link text since Bootstrap's popover sanitizer
  strips custom data-* attributes
- Don't hide all categories before showing the target; the accordion
  data-parent behaviour handles that, and the manual hide caused a
  transition race that closed the target category instead of opening it
@alleria173
alleria173 marked this pull request as ready for review July 14, 2026 10:28
GCHQDeveloper581 and others added 5 commits July 14, 2026 16:27
- Click the option checkbox's label instead of the input, as Bootstrap
  Material Design restyles checkboxes making the input itself not
  interactable in headless Chrome
- Wait for any in-progress accordion transition before opening the target
  category in categoryLinkClick. When the search box collapses an open
  category and a category link is clicked during that transition,
  Bootstrap silently ignores the collapse('show') call

@sylvesterkaczmarek sylvesterkaczmarek left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resetting options does not reapply this setting to the rendered operation list. The new behavior is only refreshed by the checkbox change handler in toggleOpCategories(), while OptionsWaiter.load() updates checkbox state/options programmatically during Reset without dispatching that change. If categories were disabled, Reset makes the option enabled again but existing popovers still omit the category links until another rebuild/reload. Could load() explicitly apply this option (or rebuild the list) and cover the reset path?

OptionsWaiter.load() set checkbox state directly (cbox.checked = ...)
without dispatching a "change" event, unlike the number/select inputs
just below it which already do this. As a result, checkbox-bound
listeners such as toggleOpCategories() never ran on Reset, so disabling
"Show operation categories in popover" and then resetting left existing
popovers stuck without category links until another rebuild or reload.

Dispatch "change" on checkboxes too, matching the existing number/select
pattern, so Reset reliably reapplies every checkbox-driven option.

Replaced the UI test's manual re-enable (clicking the checkbox again)
with using the "Reset options to default" button, and assert the
category line reappears immediately - this is the exact path the
previous code left broken.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@alleria173

Copy link
Copy Markdown
Contributor Author

Good catch, thanks. Fixed in 21d4fe2.

You're right about the root cause: OptionsWaiter.load() sets cbox.checked directly for checkboxes but never dispatches a change event, unlike the number/select inputs right below it in the same function, which already dispatch change after setting their value. So toggleOpCategories() (bound to showOpCategories's change event) never fired on Reset, leaving existing popovers without category links until some other rebuild happened.

Fix: dispatch change on checkboxes too, matching the existing number/select pattern - this covers Reset for every checkbox-driven option, not just this one.

Updated the "Operation category in popover" browser test to exercise this exact path: instead of re-enabling the option by clicking the checkbox again, it now clicks "Reset options to default" and asserts the category line reappears immediately with no other interaction.

Let me know if you'd like anything else adjusted.

@sylvesterkaczmarek sylvesterkaczmarek left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rechecked 21d4fe24. Reset now dispatches the same checkbox change event as an interactive toggle, so the rendered operation list is refreshed immediately. The regression covers the Reset path, and the full browser suite passes locally with 2,071 assertions. No remaining blocker from me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

3 participants