UHF-12470: Convert search monitor to dialog

[jeremysteerio]

UHF-12470

What was done

• Convert search monitor to dialog
• Refactor some old codebase pain points

How to install

• Make sure your instance is up and running on latest dev-branch
  • git checkout dev && git pull origin dev
  • make fresh
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-UHF-12470
• Run code updates
  • make drush-locale-update drush-cr

How to test

• Open up the front page form: https://helfi-rekry.docker.so/fi/avoimet-tyopaikat
• Make some choices and submit. This should take you to the search page.
• The form and results should work excactly as before
• Try opening up the search monitor dialog by pressing the button for it
• Try out the search monitor form. This should work as expected (you can't submit the form without having up and running hakuvahti on your local).

You can test out the after-submission view of the dialog by adding:

    setTimeout(() => {
      setSubmitted(true);
    }, 500);

on line 118 of SearchMonitorContainer.tsx , for example.

This PR contains a good bit of refactoring, so testing the basic functions of the app would be a great help.
Some common components were changed so opening up another react search and using this branch for a quick visual checkup would also be great.

Links to related PRs

[Copilot]

Pull request overview

This PR converts the search monitor functionality from a collapsible form to a modal dialog and performs significant refactoring of the job search application's state management architecture.

Changes:

• Converted search monitor UI from collapsible section to HDS Dialog component
• Refactored state management from URL-based atoms to a centralized search state with separate intermediate and submitted states
• Extracted form components into separate, reusable modules (SearchBar, TaskAreaFilter, EmploymentFilter, etc.)

Reviewed changes

Copilot reviewed 31 out of 40 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
translations/fi.po	Updated Finnish translations for new dialog-based search monitor UI
translations/sv.po	Updated Swedish translations for new dialog-based search monitor UI
src/scss/06-components/paragraphs/_react-search.scss	Added styles for left actions in results header and action container layout
src/js/react/common/helpers/TimeoutFetch.ts	New helper function for fetch requests with timeout handling
src/js/react/common/helpers/StateToURLParams.ts	New helper to serialize state object to URL parameters
src/js/react/common/ResultsHeader.tsx	Enhanced to support left-side actions (search monitor button)
src/js/react/common/ResultsError.tsx	Made error prop optional
src/js/react/apps/job-search/store.tsx	Major refactoring to centralized state management with search and submitted state atoms
src/js/react/apps/job-search/index.tsx	Added ErrorBoundary wrapper
src/js/react/apps/job-search/index.html	Removed development HTML file
src/js/react/apps/job-search/hooks/*.tsx	New hooks for selections, tags, and buttons
src/js/react/apps/job-search/helpers/Options.ts	Added helper functions for label stripping and checkbox labels
src/js/react/apps/job-search/enum/SearchComponents.ts	Reorganized and added new component identifiers
src/js/react/apps/job-search/containers/SearchMonitorContainer.tsx	Converted to dialog-based UI with improved form validation
src/js/react/apps/job-search/containers/SearchContainer.tsx	Moved configuration fetching to component with SWR
src/js/react/apps/job-search/containers/ResultsContainer.tsx	Integrated search monitor dialog into results header
src/js/react/apps/job-search/containers/FormContainer.tsx	Simplified by extracting filter components
src/js/react/apps/job-search/containers/SelectionsContainer.tsx	Refactored to use new hooks for selection management
src/js/react/apps/job-search/components/*.tsx	New component files for each filter type
package-lock.json	Updated caniuse-lite dependency version

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

✅ Tests passed! You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt-visual-regression/pull/1472/html_report/