Add headers and "Show more templates" button to template dropdown by momo3404 · Pull Request #1215 · portagenetwork/roadmap

momo3404 · 2025-10-23T16:18:28Z

Changes proposed in this PR:

Add the headers "Organisational Templates", "Alliance General Templates", and "Other Alliance Templates" to the template dropdown to allow for better organization and readability of the templates in the dropdown.
Add the "Show more templates" button to the dropdown that, along with shortening the initial size of the menu to allow for better readability, can also be clicked to show "Other Alliance Templates."
Change the template selection's dropdown type from a select_tag to a bootstrap dropdown in order to allow for the "Show more templates" button to be clicked without closing the dropdown.
Add custom CSS and javascript for the template dropdown in order to standardize the dropdown's interface and behaviour for users of all systems and browsers.
Refactor templation_options_controller (previously edited in this PR) to simplify template handling by returning a structured JSON payload.
Edit plans_controller to restrict templates that can be associated with newly created plans. Now, only templates that are published and unarchived are allowed.

Screencast.from.2025-11-12.11-23-36.webm

aaronskiba · 2025-10-23T16:39:52Z

It looks like these changes are breaking a test https://github.com/portagenetwork/roadmap/actions/runs/18754947740/job/53504332739?pr=1215.

This will be a heavily used feature, so it might be wise to also add a test to verify the headers and new dropdown behaviour. The new test could probably be added in spec/features/plans_spec.rb.

aaronskiba

I wonder if we should address the following:

After selecting an organisation, the select template dropdown is rendered. The "Please select a template" instruction is selected as the default option and I'm able to click "Create plan" with that default option. Doing so re-renders the "Create plan" page, as well as the flash message depicted in the second screenshot.

The error handling is doing what it should, but it might be even better to keep the keep the "Create plan" button disabled to start?

momo3404 · 2025-10-24T18:05:04Z

I wonder if we should address the following:

After selecting an organisation, the select template dropdown is rendered. The "Please select a template" instruction is selected as the default option and I'm able to click "Create plan" with that default option. Doing so re-renders the "Create plan" page, as well as the flash message depicted in the second screenshot.

The error handling is doing what it should, but it might be even better to keep the keep the "Create plan" button disabled to start?

Yes, I noticed that too and think it's worth addressing. The previous behaviour did make sure the "Create plan" button was disabled until a template was picked.

aaronskiba

I'm noticing some unexpected behaviour here:

Pic 1: I pick a template that belongs to the org that I selected (no problem here).

Pic 2: I check "no org", but the org specific template is still selected.

Pic 2: I pick another org, but the previous org's template is still selected.

momo3404 · 2025-10-27T19:41:23Z

I'm noticing some unexpected behaviour here:

Pic 1: I pick a template that belongs to the org that I selected (no problem here).

Pic 2: I check "no org", but the org specific template is still selected.

Pic 2: I pick another org, but the previous org's template is still selected.

I added a fix here that should address this. The issue was that the template dropdown was not resetting the value and menu items after the org was changed or the "No research organisation" checkbox was toggled.

- select_tag has an issue where a dropdown cannot be kept open after a button is clicked. In order for the "show more templates" button to eventually work intuitively, this behaviour has to be changed. - Bootstrap dropdowns can be kept open after a certain selection, and so that was the chosen replacement.

- Edit toggleSubmit() so that both select tags and bootstrap dropdowns can still work with the function. The previous behaviour only worked with select tags. - Edit the success() function to work with the bootstrap dropdown.

`Rails.application.config.default_funder_id` is used multiple times in this controller, so defining a variable for it is best practice.

- Templates will need to be tagged appropriately to allow for organization into groups with headers in the template dropdown. - The tag_templates function is used to add a source tag to each template.

- All possible error conditions are checked at the beginning to simplify conditional logic. - `templates` is defined as a variable for `data.templates` - `only` variable is renamed to `only_template`

- Define arrays for ordering template groups - Add appendGroup helper function to add templates to proper groups

- Add the `showMore` button if there are any remaining templates that can be displayed - Add each template to a hiddenContainer that is displayed after the button is clicked

- Four helper functions were added to break up success() - `categorizeTemplates()` - separates templates by their source - `createTemplateItem()` - creates clickable template item - `appendGroup()` - appends templates into appropriate groups - `appendShowMoreSection()` - adds "Show more templates" button and hidden container to dropdown

@use

@use 'template_dropdown_menu'; already exists in app/assets/stylesheets/dmp-assistant/blocks/_index.scss

- The test was failing since it was using the old select behaviour. It has been fixed by making sure the test opens the dropdown and finds the correct CSS section. - The header for organisations should be 'organiSational templates' not 'organisZational templates'

- Moved 'Rails.application.config.default_funder_id = @funding_org.id' such that @funding_org.id and the default_funder_id are the same in the test - Added another funder template to test "show more templates" - Tested for headers appearing correctly in dropdown

- If no template is selected, tmplt has not value and thus this condition can be used to prevent the 'Create Plan' button from being clickable until a template has been selected. - Defined submitButton to improve readability of the function.

- Add e.preventDefault() inside createTemplateItem. Without this, selecting a template might result in the browser jumping back to the top of the "Create plan" page. - Assign const templates = data.templates; such that there is no way it can throw an error. - Rename only_template to follow camelCase

- The function resetTemplateDropdown() resets the template dropdown's value and menu items. - It will be used when the 'No research organisation' checkbox is toggled and when the org is changed in the 'Create Plan' page

Simplify template handling by returning a structured JSON payload: - Backend now returns: { templates: { org_templates: [...], priority_templates: [...], other_templates: [...] }, total_templates: <count> } - Eliminates the need to tag each template individually with a source. - Frontend no longer needs to categorize templates manually. - Minor frontend adjustments made to consume the new payload structure.

These changes address an unnecessary number of templates being created inside the `before do` block. Some redundancies have been removed from the creation of `@extra_funder_template` as well.

- The previous hardcoded max-height was not working properly, as sometimes the dropdown's max height would extend past the footer. - Helper function adjustDropdownMaxHeight() was added to dynamically assign the max-height to always be the middle of the footer. - Function is called in success() after template dropdown becomes visible (as helper cannot work without the values from the DOM)

- Removed select_tag-specific code from toggleSubmit: - No longer checks `:selected` since `plan_template_id` is now a hidden field. - Removed dead lines related to the old select_tag: - `$('#plan_template_id').find(':selected').removeAttr('selected')` - `$('#plan_template_id option').remove()` - Simplifies and clarifies template selection handling with the new dropdown implementation.

- Removed `#research-org-controls input.autocomplete-result` change handler: - Its functionality is already handled by `handleComboboxChange`. - Avoids unnecessary JSON parsing and constant firing on every keystroke. - Added `resetTemplateDropdown()` call inside `handleComboboxChange`: - Simplifies the function by removing explicit lines and instead handling them conditionally inside `resetTemplateDropdown()` - Consolidates template dropdown reset logic in a single place, reducing redundant event handlers.

Cache redundant DOM queries with variables (In adjustDropdownMaxHeight) Replace redundant DOM queries with unwrapping cached jQuery objects using `.get(0)` (https://api.jquery.com/get/).

Instead of binding click handlers to each individual template item, this change creates a single delegated handler on `templateDropdownMenu`. - Listens at the container level; clicks on child elements bubble up to the handler. - Adds `data-title` attribute to template items. (Allows us to still set `templateDropdown.text(template.title)`) - Improves performance and reduces memory usage.

- Consolidate all template dropdown height logic into `adjustDropdownMaxHeight()`. - Simplifies `success()` by removing inline dropdown sizing logic.

- Stop using raw HTML templates for dropdown items. - Use jQuery’s attribute map and `.text()` to properly escape content and keep `data-*` attributes on the element.

Refactored templateDropdown strings to support in-app translation. - These values must be defined and translated on the Rails side first.

- Renamed `adjustDropdownMaxHeight()` to `resizeTemplateDropdownMenu()` - Set templateDropdownMenu.outerWidth(templateDropdown.outerWidth()) to match dropdown button width, preventing resize when "Show more..." is clicked - Simplified the `isVisible` check - Updated template dropdown button ID and references from `templateDropdown` to `template-dropdown` for consistency with other selectors

aaronskiba · 2025-11-12T17:01:06Z

+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+  }
+}


This is just a comment / possible future to-do:

I prefer this styling over what currently exists for the other dropdowns. It might be best to eventually generalise some of these ideas to all of the other dropdowns, dropdown items, etc.

aaronskiba · 2025-11-12T17:07:58Z

+  const resizeTemplateDropdownMenu = () => {
+    const templateDropdownEl = templateDropdown.get(0);
+    const templateDropdownMenuEl = templateDropdownMenu.get(0);
+    const footerEl = document.getElementById('footer-navbar');
+
+    // Return early if any required element is missing or dropdown is not visible
+    if (!(templateDropdownEl && templateDropdownMenuEl && footerEl  && templateDropdown.is(':visible'))) return;
+
+    // Set width
+    templateDropdownMenu.outerWidth(templateDropdown.outerWidth());
+
+    // Set maxHeight
+    const dropdownRect = templateDropdownEl.getBoundingClientRect();
+    const footerRect = footerEl.getBoundingClientRect();
+
+    // Ideal location for dropdown to end is middle of the footer
+    const footerMiddle = (footerRect.bottom + footerRect.top) / 2;
+
+    const spaceAvailable = footerMiddle - dropdownRect.bottom;
+
+    if (spaceAvailable > 0) {
+      templateDropdownMenuEl.style.maxHeight = `${spaceAvailable}px`;
+    }
+  };


This is a good addition. Other dropdowns could also benefit from this extra handling. In the future, we could bind the resizing to window.resize so it adjusts automatically.

`#available-templates` was momentarily visible before JavaScript hid it. Set it hidden in the markup (`display: none`) to ensure it remains invisible until shown intentionally. This eliminates the visual flash during page load.

- Added isValidTemplateResponse helper to validate the structure and content of AJAX template responses. - Checks now ensure `data.total_templates` is a number greater than 0 and that each template group (`org_templates`, `priority_templates`, `other_templates`) is an array. - Added a guard to ensure onlyTemplate is defined before accessing its properties. - Improves safety against malformed or unexpected server responses.

- Add extractTemplateData() helper to handle destructuring of total_templates and template groups (org_templates, priority_templates, other_templates). - Now, rather than dealing with the template response structure, success() works with clearly defined variables returned from extractTemplateData().

Restrict templates that can be associated with newly created plans. Only templates that are published and unarchived are now allowed.

…ation-on-plan-creation Update template validation on plan creation

aaronskiba reviewed Oct 23, 2025

View reviewed changes

Comment thread app/assets/stylesheets/blocks/_index.scss Outdated

momo3404 force-pushed the momo/issues/1196-enhancements branch from c058e00 to e4294ad Compare October 23, 2025 21:04

aaronskiba reviewed Oct 24, 2025

View reviewed changes

Comment thread app/javascript/src/plans/new.js Outdated

aaronskiba reviewed Oct 24, 2025

View reviewed changes

Comment thread app/javascript/src/plans/new.js Outdated

aaronskiba reviewed Oct 24, 2025

View reviewed changes

Comment thread app/javascript/src/plans/new.js Outdated

aaronskiba reviewed Oct 24, 2025

View reviewed changes

Comment thread app/javascript/src/plans/new.js Outdated

aaronskiba reviewed Oct 27, 2025

View reviewed changes

Comment thread app/assets/stylesheets/dmp-assistant/blocks/_template_dropdown_menu.scss

momo3404 added 17 commits October 27, 2025 14:36

Update new.js to work with bootstrap dropdown behaviour

8419dc0

- Edit toggleSubmit() so that both select tags and bootstrap dropdowns can still work with the function. The previous behaviour only worked with select tags. - Edit the success() function to work with the bootstrap dropdown.

Add CSS for bootstrap template dropdown

3b0309a

Add DEFAULT_FUNDER_ID to template_options_controller

d291fb5

`Rails.application.config.default_funder_id` is used multiple times in this controller, so defining a variable for it is best practice.

Tag templates with appropriate source in controller

e576e5b

- Templates will need to be tagged appropriately to allow for organization into groups with headers in the template dropdown. - The tag_templates function is used to add a source tag to each template.

Refactor new.js to improve readability

a644882

- All possible error conditions are checked at the beginning to simplify conditional logic. - `templates` is defined as a variable for `data.templates` - `only` variable is renamed to `only_template`

Add template headers through new.js

d9062ae

- Define arrays for ordering template groups - Add appendGroup helper function to add templates to proper groups

Add template header CSS

7bf3453

Add "show more templates" button in new.js

9094bd0

- Add the `showMore` button if there are any remaining templates that can be displayed - Add each template to a hiddenContainer that is displayed after the button is clicked

Add "show more templates" CSS and styling improvements

4ead973

Remove redundant stylesheet call

805aa76

@use 'template_dropdown_menu'; already exists in app/assets/stylesheets/dmp-assistant/blocks/_index.scss

momo3404 force-pushed the momo/issues/1196-enhancements branch from 913c6ac to f631669 Compare October 27, 2025 20:36

aaronskiba force-pushed the momo/issues/1196-enhancements branch 3 times, most recently from 1c71f0c to 4525c42 Compare November 9, 2025 23:45

aaronskiba and others added 8 commits November 10, 2025 14:10

Simplify spec/features/plans_spec.rb

e16b744

These changes address an unnecessary number of templates being created inside the `before do` block. Some redundancies have been removed from the creation of `@extra_funder_template` as well.

Cache repeatedly used selectors

c6b34e2

Cache redundant DOM queries with variables (In adjustDropdownMaxHeight) Replace redundant DOM queries with unwrapping cached jQuery objects using `.get(0)` (https://api.jquery.com/get/).

Refactor dropdown sizing into adjustDropdownMaxHeight

56d8fa0

- Consolidate all template dropdown height logic into `adjustDropdownMaxHeight()`. - Simplifies `success()` by removing inline dropdown sizing logic.

aaronskiba force-pushed the momo/issues/1196-enhancements branch from bb74ce1 to 410ccb8 Compare November 10, 2025 21:13

aaronskiba added 3 commits November 10, 2025 15:05

Use jQuery element API in createTemplateItem

0fbe669

- Stop using raw HTML templates for dropdown items. - Use jQuery’s attribute map and `.text()` to properly escape content and keep `data-*` attributes on the element.

Enable translations for templateDropdown text

f799464

Refactored templateDropdown strings to support in-app translation. - These values must be defined and translated on the Rails side first.

aaronskiba force-pushed the momo/issues/1196-enhancements branch from 410ccb8 to 6393023 Compare November 10, 2025 22:59

aaronskiba reviewed Nov 12, 2025

View reviewed changes

aaronskiba and others added 7 commits November 12, 2025 10:14

Fix flash of template section on /plans/new load

4476c4c

`#available-templates` was momentarily visible before JavaScript hid it. Set it hidden in the markup (`display: none`) to ensure it remains invisible until shown intentionally. This eliminates the visual flash during page load.

Update template validation on plan creation

5859f52

Restrict templates that can be associated with newly created plans. Only templates that are published and unarchived are now allowed.

Update CHANGELOG.md

fcb7a04

Merge pull request #1225 from portagenetwork/aaron/fix/template-valid…

22127b0

…ation-on-plan-creation Update template validation on plan creation

Add changelog entry

3e41f3c

aaronskiba approved these changes Nov 12, 2025

View reviewed changes

momo3404 merged commit b26efee into integration Nov 12, 2025
9 of 10 checks passed

momo3404 mentioned this pull request Nov 14, 2025

Create Plan drop down menu reorganization #1196

Closed

This was referenced Nov 18, 2025

Merge integration into deployment-portage #1233

Closed

Merge integration changes into deployment-portage for release 4.1.1+portage-4.6.0 #1234

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add headers and "Show more templates" button to template dropdown#1215

Add headers and "Show more templates" button to template dropdown#1215
momo3404 merged 39 commits into
integrationfrom
momo/issues/1196-enhancements

momo3404 commented Oct 23, 2025 •

edited

Loading

Uh oh!

Uh oh!

aaronskiba commented Oct 23, 2025

Uh oh!

aaronskiba left a comment •

edited

Loading

Uh oh!

momo3404 commented Oct 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aaronskiba left a comment

Uh oh!

Uh oh!

momo3404 commented Oct 27, 2025

Uh oh!

aaronskiba Nov 12, 2025

Uh oh!

aaronskiba Nov 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

momo3404 commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

aaronskiba commented Oct 23, 2025

Uh oh!

aaronskiba left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

momo3404 commented Oct 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aaronskiba left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

momo3404 commented Oct 27, 2025

Uh oh!

aaronskiba Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

aaronskiba Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

momo3404 commented Oct 23, 2025 •

edited

Loading

aaronskiba left a comment •

edited

Loading