Skip to content

Add a searchable node icon picker and bundled site icons - #304

Merged
TheWitness merged 6 commits into
Cacti:developfrom
alcatron:feat/icons-20261011
Oct 12, 2026
Merged

TheWitness merged 6 commits into
Cacti:developfrom
alcatron:feat/icons-20261011

Conversation

@alcatron

@alcatron alcatron commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

Replace the long node icon dropdown with a searchable preview gallery, readable names and a selected indicator. Preserve the underlying select value for existing save handling and support reopening, no-match feedback and Escape.

Bundle six final 96 px transparent site icons: corporate building, branch office, data centre, warehouse, hospital and clinic. The data centre uses a distinct server-building design, and medical crosses sit above central node labels. Include only the final artwork for these new icons and document the bundle.

Validation: PHP 8.3 tests and all applicable Node/jsdom browser regressions pass in an isolated Cacti fixture. Syntax, whitespace, translation, manifest and changed-line coverage gates pass (100% of measured lines; existing controller/entry-point exemptions apply). The combined changes pass 290 PHP tests (5772 assertions) and 14 browser regressions. These revisions have not been deployed to the live installation.

This is one of five independently based develop PRs in the editor improvement batch. Shared editor files overlap, so later branches may need rebasing after earlier PRs merge.

Escape closes an open icon picker; when it is already closed the key reaches the surrounding node dialog.

Icon picker translation keys use semantic names, consistently shared by PHP, JavaScript and regression tests.

Copilot AI 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.

🟡 Changes recommended

The picker introduces untranslated user-facing strings and the documentation still refers to the removed dropdown.

2 open findings
What changed in this PR

Adds a searchable node-icon gallery while preserving existing form submission behavior, plus six bundled site icons.

Changes:

  • Replaces the icon dropdown with a searchable, keyboard-friendly preview picker.
  • Adds browser regression coverage and picker styling.
  • Bundles and documents six transparent 96×96 icons.
File Description
js/​editor.js Implements the icon picker.
css/​editor.css Styles the gallery and selection state.
tests/​Browser/​EditorIconPickerTest.cjs Tests search, selection, reopening, and Escape.
README.md Documents bundled icons.
images/​objects/​corporate-building.png Adds the corporate icon.
images/​objects/​branch-office.png Adds the branch icon.
images/​objects/​data-centre.png Adds the data-centre icon.
images/​objects/​warehouse.png Adds the warehouse icon.
images/​objects/​hospital-red.png Adds the hospital icon.
images/​objects/​clinic-red.png Adds the clinic icon.

🧠 Review effort: Balanced


💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread js/editor.js Outdated
Comment thread README.md Outdated

Copilot AI 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.

🟡 Changes recommended

Dynamic count localization mishandles non-English plural rules, and the required changelog entry is missing.

2 open findings
1 resolved since last review
Previously missed (1)

In code that hasn't changed since last review

Low severity Add picker and icon bundle entry to changelog

README.md:15

This new user-facing picker and icon bundle has no entry under the develop section of CHANGELOG.md. The repository instructions require all changes to be recorded in CHANGELOG.md or BACKLOG.md; please add a concise feature entry there in addition to this bundle documentation.

🧠 Review effort: Balanced

Comment thread lib/editor.inc.php Outdated

Copilot AI 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.

🔵 Needs a closer look

The icon collection’s translated accessible label is attached to a generic container and may be ignored by assistive technology.

2 open findings
Previously missed (1)

In code that hasn't changed since last review

Medium severity Use a nameable role for the aria-label container

js/​editor.js:1084

This aria-label is applied to a generic div, whose generic role cannot have an accessible name, so assistive technology may not announce “Node icons” for the choice set. Give the container a nameable grouping role so the translated label is exposed.

🧠 Review effort: Balanced

Copilot AI 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.

🟢 Approval recommended

The picker preserves save behavior, covers the stated accessibility interactions, and includes focused regression coverage.

1 open finding
1 resolved since last review

🧠 Review effort: Balanced

Copilot AI 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.

🟡 Changes recommended

The picker consumes Escape while closed, preventing the containing node dialog from closing normally.

1 open finding
1 resolved since last review

🧠 Review effort: Balanced

Comment thread js/editor.js Outdated

Copilot AI 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.

🟢 Approval recommended

The picker preserves save compatibility, includes appropriate accessibility behavior and focused regression coverage, and the bundled images match their documented format.

1 open finding

🧠 Review effort: Balanced

Copilot AI 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.

🟢 Approval recommended

The implementation and regression coverage are coherent, with only minor non-blocking naming feedback.

2 open findings

🧠 Review effort: Balanced

Comment thread lib/editor.inc.php Outdated

Copilot AI 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.

🟢 Approval recommended

The picker preserves form serialization, handles the documented interactions, and includes focused regression coverage and valid icon assets.

0 open findings

2 resolved since last review

🧠 Review effort: Balanced

@TheWitness
TheWitness merged commit 302c3e9 into Cacti:develop Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants