Skip to content

Replace foundation dropdowns with popovers#3541

Merged
Simrayz merged 6 commits intomasterfrom
chore/3531-replace-foundation-dropdowns
Sep 23, 2025
Merged

Replace foundation dropdowns with popovers#3541
Simrayz merged 6 commits intomasterfrom
chore/3531-replace-foundation-dropdowns

Conversation

@Simrayz
Copy link
Copy Markdown
Contributor

@Simrayz Simrayz commented Sep 15, 2025 •
edited
Loading

Scope and purpose

Resolves #3531. This PR replaces remaining dropdowns in the codebase with the new Popover component.

The following tools have been updated to use the new Popover:

  • Dashboard: Add Dashboard and Dashboard Settings forms
  • User and API Administration: Delete Token confirmation dropdowns
  • Event details: "About" action dropdowns

This pull request

  • Replaces dropdowns in dashboard actions
  • Replaces dropdowns in User and API administration
  • Replaces dropdowns in Event details
  • Removes foundation dropdown styles and usage in styleguide

Screenshots

Before After Comment
Dashboard Actions Location Dashboard
image image Replaced Add Dashboard dropdown. Removed dark border and shadow from foundation implementation.
image image Replaced Dashboard settings dropdown. Aligned on the bottom instead of on the left side, as new popover does not yet support this. Aligned on the left, with the new popover styles.
Users and API Administration Locations: API Tokens, JWT Tokens. Then click "Edit" on a token.
image image Replaced "Edit token" dropdown. Popover was aligned to the bottom instead of the top, to make it consistent with other delete dropdowns. Aligned on the top, using the new popover styles. Used in both /useradmin/tokens/edit and /useradmin/jwt_tokens/edit
Event Details Location: /search/event/236690
image image Replaced "About acknowledging"
image image Replaced "About clearing alerts". Made slightly wider to accommodate the amount of text.
image image Replaced "About Put on maintenance"

Contributor Checklist

Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to NAV can be found in the
Hacker's guide to NAV.

  • Added a changelog fragment for towncrier
  • Added/amended tests for new/changed code
  • Added/changed documentation
  • Linted/formatted the code with ruff, easiest by using pre-commit
  • The first line of the commit message continues the sentence "If applied, this commit will ...", starts with a capital letter, does not end with punctuation and is 50 characters or less long. See https://cbea.ms/git-commit/
  • This pull request is based on the correct upstream branch: For a patch/bugfix affecting the latest stable version, it should be based on that version's branch (<major>.<minor>.x). For a new feature or other additions, it should be based on master.
  • If applicable: Created new issues if this PR does not fix the issue completely/there is further work to be done
  • If this results in changes in the UI: Added screenshots of the before and after
  • If this adds a new Python source code file: Added the boilerplate header to that file

@Simrayz Simrayz self-assigned this Sep 15, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Sep 15, 2025 •
edited
Loading

Test results

    27 files      27 suites   44m 50s ⏱️
 2 524 tests  2 524 ✅ 0 💤 0 ❌
18 582 runs  18 582 ✅ 0 💤 0 ❌

Results for commit 4af148b.

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov bot commented Sep 15, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.09%. Comparing base (0272261) to head (dd7a63f).
⚠️ Report is 337 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master    #3541   +/-   ##
=======================================
  Coverage   62.09%   62.09%           
=======================================
  Files         611      611           
  Lines       44865    44865           
  Branches       43       43           
=======================================
  Hits        27861    27861           
  Misses      16994    16994           
  Partials       10       10

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Simrayz Simrayz force-pushed the chore/3531-replace-foundation-dropdowns branch from b40e9fb to 89450e1 Compare September 15, 2025 12:45
@Simrayz Simrayz requested a review from a team September 15, 2025 12:46
@Simrayz Simrayz marked this pull request as ready for review September 15, 2025 12:46
@Simrayz Simrayz mentioned this pull request Sep 15, 2025
Merged
9 tasks
@Simrayz Simrayz force-pushed the chore/3531-replace-foundation-dropdowns branch 2 times, most recently from adb7679 to 821c9ba Compare September 18, 2025 11:04
johannaengland
johannaengland requested changes Sep 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@johannaengland johannaengland left a comment

Choose a reason for hiding this comment

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

I don't really like the alignment of the dashboard settings popover - is it possible to get it closer to how it was before?

@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 19, 2025

I don't really like the alignment of the dashboard settings popover - is it possible to get it closer to how it was before?

@johannaengland I have created a PR which adds support for aligning the popover on multiple sides, #3550. When this is merged, I can rebase and place the dashboard settings popover on the left. Can also move the Edit Token dropdown to the top side.

@Simrayz Simrayz force-pushed the chore/3531-replace-foundation-dropdowns branch from 821c9ba to 4af148b Compare September 22, 2025 13:43
@Simrayz
Copy link
Copy Markdown
Contributor Author

Simrayz commented Sep 22, 2025

I don't really like the alignment of the dashboard settings popover - is it possible to get it closer to how it was before?

@johannaengland I have created a PR which adds support for aligning the popover on multiple sides, #3550. When this is merged, I can rebase and place the dashboard settings popover on the left. Can also move the Edit Token dropdown to the top side.

The PR has been rebased, and the Dropdown Settings is positioned on the left of the settings button. The "Confirm delete token" modals have been positioned on top. I also updated the screenshots and descriptions in the table to match the current state.

johannaengland
johannaengland approved these changes Sep 23, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@johannaengland johannaengland left a comment

Choose a reason for hiding this comment

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

Beautiful

@Simrayz Simrayz force-pushed the chore/3531-replace-foundation-dropdowns branch from 4af148b to dd7a63f Compare September 23, 2025 07:14
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Sep 23, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@Simrayz Simrayz merged commit 0485bca into master Sep 23, 2025
16 checks passed
@Simrayz Simrayz deleted the chore/3531-replace-foundation-dropdowns branch September 23, 2025 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@johannaengland johannaengland johannaengland approved these changes

Assignees

@Simrayz Simrayz

Labels

cleanup javascript

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Replace Foundation Dropdowns with Popover

2 participants

@Simrayz @johannaengland