UHF-12470: Add keyword tag to search monitor selections list

hdbt.theme

@@ -1593,12 +1593,13 @@ function hdbt_preprocess_paragraph__job_search(array &$variables) {
   $hakuvahtiUrl = getenv('HAKUVAHTI_URL');
   $variables['#attached']['drupalSettings']['helfi_react_search']['hakuvahti_url_set'] = !empty($hakuvahtiUrl);
 
-  // Hakuvahti TOS settings.
+  // Hakuvahti instructions and TOS settings.
   if (!empty($hakuvahtiUrl)) {
-    $tos_variables = [
+    $exposed_settings = [
       'hakuvahti_tos_checkbox_label',
       'hakuvahti_tos_link_text',
       'hakuvahti_tos_link_url',
+      'hakuvahti_instructions_link_url',
     ];
 
     // Attempt to get the translated configuration.
@@ -1607,8 +1608,8 @@ function hdbt_preprocess_paragraph__job_search(array &$variables) {
     $language_manager->setConfigOverrideLanguage($language);
     $config = \Drupal::config('helfi_rekry_content.job_listings');
 
-    foreach ($tos_variables as $tos_variable) {
-      $variables['#attached']['drupalSettings']['helfi_rekry_job_search'][$tos_variable] = $config->get($tos_variable) ?: 'undefined';
+    foreach ($exposed_settings as $exposed_setting) {
+      $variables['#attached']['drupalSettings']['helfi_rekry_job_search'][$exposed_setting] = $config->get($exposed_setting) ?: 'undefined';
     }
 
     // Set the config back to the original language.

src/js/react/apps/job-search/containers/SearchMonitorContainer.tsx

@@ -19,6 +19,7 @@ import useQueryString from '../hooks/useQueryString';
 import { useVisibleSelections } from '../hooks/useVisibleSelections';
 import { useSelectionTags } from '../hooks/useSelectionTags';
 import Tags from '@/react/common/Tags';
+import SearchComponents from '../enum/SearchComponents';
 
 type FormError = { message: string; visible: boolean };
 
@@ -27,8 +28,18 @@ type FormErrorContainer = { allVisible?: boolean; email?: FormError; termsAgreed
 const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.RefObject<HTMLDivElement> }) => {
   const openDialogButtonRef = useRef(null);
   const query = useQueryString();
-  const selections = useVisibleSelections();
-  const selectionTags = useSelectionTags(selections);
+  const selections = useVisibleSelections(true);
+  const selectionTags = useSelectionTags(
+    selections.map((selection) => {
+      const [key, value] = selection;
+
+      if (key === SearchComponents.KEYWORD) {
+        return [key, `"${value.toString().trim()}"`];
+      }
+
+      return selection;
+    }),
+  );
 
   // Form validation states
   const [errors, setErrors] = useState<FormErrorContainer>(null);
@@ -293,6 +304,18 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
                   )}
                 `}</p>
 
+                {drupalSettings.helfi_rekry_job_search.hakuvahti_instructions_link_url && (
+                  <p>
+                    <a
+                      href={drupalSettings.helfi_rekry_job_search.hakuvahti_instructions_link_url}
+                      target='_blank'
+                      rel='noreferrer'
+                    >
+                      {Drupal.t('More detailed instructions on how to use saved searches')}
+                    </a>
+                  </p>
+                )}
+
                 {errorMessages.length > 0 && (
                   <Notification
                     className='job-search-form__search-monitor__error'

src/js/types/drupalSettings.d.ts

@@ -37,6 +37,7 @@ declare namespace drupalSettings {
     hakuvahti_tos_checkbox_label: string;
     hakuvahti_tos_link_text: string;
     hakuvahti_tos_link_url: string;
+    hakuvahti_instructions_link_url: string;
   };
   const helfi_news_archive: {
     elastic_proxy_url: string;

translations/fi.po

@@ -1643,3 +1643,6 @@ msgstr "Varmista, että osoite on kirjoitettu oikein. Voit tehdä haun myös esi
 msgctxt "React search"
 msgid "Distance"
 msgstr "Etäisyys"
+
+msgid "More detailed instructions on how to use saved searches"
+msgstr "Tarkemmat ohjeet hakuvahdin käyttöön"

translations/sv.po

@@ -1649,3 +1649,6 @@ msgstr "Se till att adressen är skriven korrekt. Du kan också söka med ett n
 msgctxt "React search"
 msgid "Distance"
 msgstr "Avstånd"
+
+msgid "More detailed instructions on how to use saved searches"
+msgstr "Närmare anvisningar för hur du använder sökvakten"