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/ResultsContainer.tsx

@@ -3,7 +3,6 @@ import { createRef, type SyntheticEvent } from 'react';
 import { GhostList } from '@/react/common/GhostList';
 import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 import Pagination from '@/react/common/Pagination';
-import ResultsEmpty from '@/react/common/ResultsEmpty';
 import ResultsError from '@/react/common/ResultsError';
 import ResultsHeader from '@/react/common/ResultsHeader';
 import ResultWrapper from '@/react/common/ResultWrapper';
@@ -48,8 +47,29 @@ const ResultsContainer = () => {
 
     const { results, jobs, total } = handleResults(data || {});
 
+    const searcMonitor =
+      (drupalSettings?.helfi_react_search?.hakuvahti_url_set && (
+        <SearchMonitorContainer dialogTargetRef={dialogTargetRef} />
+      )) ||
+      undefined;
+
     if (total <= 0) {
-      return <ResultsEmpty wrapperClass='hdbt-search--react__results--container' ref={scrollTarget} />;
+      return (
+        <div className='job-search__results'>
+          <ResultsHeader
+            resultText={Drupal.t('No results', {}, { context: 'Unit search no results title' })}
+            leftActions={searcMonitor}
+            ref={scrollTarget}
+          />
+          <p>
+            {Drupal.t(
+              'No results were found for the criteria you entered. Try changing your search criteria.',
+              {},
+              { context: 'React search: no search results' },
+            )}
+          </p>
+        </div>
+      );
     }
 
     const pages = Math.ceil(total / size);
@@ -66,11 +86,7 @@ const ResultsContainer = () => {
             {},
             { context: 'Job search results statline' },
           )}
-          leftActions={
-            drupalSettings?.helfi_react_search?.hakuvahti_url_set ? (
-              <SearchMonitorContainer dialogTargetRef={dialogTargetRef} />
-            ) : undefined
-          }
+          leftActions={searcMonitor}
           resultText={Drupal.formatPlural(
             jobs,
             '1 open position',

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

@@ -2,7 +2,6 @@
 import { Buffer } from 'buffer';
 import {
   Button,
-  ButtonPresetTheme,
   ButtonVariant,
   Checkbox,
   Dialog,
@@ -15,10 +14,12 @@ import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { defaultCheckboxStyle } from '@/react/common/constants/checkboxStyle';
 import { defaultTextInputStyle } from '@/react/common/constants/textInputStyle';
+import { primaryButtonTheme, secondaryButtonTheme } from '@/react/common/constants/buttonTheme';
 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);
@@ -221,7 +232,7 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
           setIsFormVisible(!isFormVisible);
         }}
         ref={openDialogButtonRef}
-        theme={ButtonPresetTheme.Black}
+        theme={secondaryButtonTheme}
         type='button'
         variant={ButtonVariant.Secondary}
       >
@@ -262,7 +273,7 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
                 <div className='job-search-form__search-monitor__buttons-container'>
                   <Button
                     className='job-search-form__search-monitor__cancel-button'
-                    theme={ButtonPresetTheme.Black}
+                    theme={primaryButtonTheme}
                     type='submit'
                     variant={ButtonVariant.Primary}
                   >
@@ -285,14 +296,30 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
                   )}
                 </p>
                 <p>{`
-                  ${Drupal.t('You can save as many searches as you want.', {}, { context: 'Search monitor content' })} 
+                  ${Drupal.t('You can save as many searches as you want.', {}, { context: 'Search monitor content' })}
                   ${Drupal.t(
                     'You will receive email alerts about new search results up to once a day',
                     {},
                     { context: 'Search monitor content' },
                   )}
                 `}</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',
+                        {},
+                        { context: 'Search monitor instructions link' },
+                      )}
+                    </a>
+                  </p>
+                )}
+
                 {errorMessages.length > 0 && (
                   <Notification
                     className='job-search-form__search-monitor__error'
@@ -351,7 +378,7 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
                   name='job-search-form__search_monitor__email'
                   onChange={(event) => setEmail(event.target.value)}
                   required
-                  style={{ ...defaultTextInputStyle, marginTop: 'var(--spacing-m)' }}
+                  style={{ ...defaultTextInputStyle }}
                   type='email'
                   value={email}
                 />
@@ -388,7 +415,7 @@ const SearchMonitorContainer = ({ dialogTargetRef }: { dialogTargetRef: React.Re
                   <Button
                     className='job-search-form__search-monitor__cancel-button'
                     onClick={() => setIsFormVisible(false)}
-                    theme={ButtonPresetTheme.Black}
+                    theme={secondaryButtonTheme}
                     type='button'
                     variant={ButtonVariant.Secondary}
                   >

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;

src/scss/06-components/paragraphs/_react-search.scss

@@ -57,7 +57,7 @@
   }
 }
 
-.hdbt-search--react__result-top-area-item {  
+.hdbt-search--react__result-top-area-item {
   margin-top: $spacing-and-half;
 
   @include breakpoint($breakpoint-l) {
@@ -67,7 +67,7 @@
 
 .hdbt-search--react__results--title {
   align-items: center;
-  display: flex;
+  display: inline-flex;
   margin-bottom: $spacing-three-quarters;
   margin-top: 0;
 

translations/fi.po

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

translations/sv.po

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