From 7845004ca5e2854882f2eb6355f6a3974c5ab74c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20W=C3=B3js?= <adam@wojs.pl>
Date: Wed, 6 Dec 2023 00:05:27 +0100
Subject: [PATCH] IBX-6649: Added support for spell checking (#923)

---
 .../public/scss/_search-criteria-tags.scss    |  1 -
 .../Resources/public/scss/_search-form.scss   | 20 +++++++++++++++++++
 .../translations/ibexa_search.en.xliff        |  5 +++++
 .../admin/ui/search/criteria_tags.html.twig   | 10 ++++++++++
 .../themes/admin/ui/search/results.html.twig  | 17 ++++++++--------
 .../admin/ui/search/spellcheck.html.twig      | 13 ++++++++++++
 6 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig

diff --git a/src/bundle/Resources/public/scss/_search-criteria-tags.scss b/src/bundle/Resources/public/scss/_search-criteria-tags.scss
index 4d435a3176..2e1c3062c7 100644
--- a/src/bundle/Resources/public/scss/_search-criteria-tags.scss
+++ b/src/bundle/Resources/public/scss/_search-criteria-tags.scss
@@ -1,5 +1,4 @@
 .ibexa-search-criteria-tags {
-    border-bottom: calculateRem(1px) solid $ibexa-color-dark-200;
     padding-bottom: calculateRem(8px);
 
     &__tag {
diff --git a/src/bundle/Resources/public/scss/_search-form.scss b/src/bundle/Resources/public/scss/_search-form.scss
index a828f1f666..bfcadd685b 100644
--- a/src/bundle/Resources/public/scss/_search-form.scss
+++ b/src/bundle/Resources/public/scss/_search-form.scss
@@ -36,6 +36,11 @@
             margin-top: 0;
             font-size: $ibexa-text-font-size-extra-large;
         }
+
+        .ibexa-table-sub-header {
+            border-bottom: calculateRem(1px) solid $ibexa-color-dark-200;
+            padding-bottom: calculateRem(8px);
+        }
     }
 
     &__results-language {
@@ -109,6 +114,21 @@
         display: flex;
     }
 
+    &__spellcheck-suggestion {
+        font-style: italic;
+
+        a {
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+
+    &__no-results {
+        .ibexa-search-form__spellcheck-suggestion {
+            color: $ibexa-color-dark-400;
+        }
+    }
+
     .ibexa-btn--secondary.ibexa-btn {
         max-width: 100%;
         overflow: hidden;
diff --git a/src/bundle/Resources/translations/ibexa_search.en.xliff b/src/bundle/Resources/translations/ibexa_search.en.xliff
index bb849c2243..075b566281 100644
--- a/src/bundle/Resources/translations/ibexa_search.en.xliff
+++ b/src/bundle/Resources/translations/ibexa_search.en.xliff
@@ -176,6 +176,11 @@
         <target state="new">Section</target>
         <note>key: search.section</note>
       </trans-unit>
+      <trans-unit id="923ca53f6602fe7eabe79838efdca27c2756b0fd" resname="search.spellcheck.suggestion">
+        <source>Did you mean %s?</source>
+        <target state="new">Did you mean %s?</target>
+        <note>key: search.spellcheck.suggestion</note>
+      </trans-unit>
       <trans-unit id="b484be9d33f5cd9961f4ddd89c628f2cbca2a6a1" resname="search.subtree">
         <source>Subtree</source>
         <target state="new">Subtree</target>
diff --git a/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig
index 2e41198f1e..59724d6fd9 100644
--- a/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig
@@ -1,6 +1,16 @@
 {% trans_default_domain 'ibexa_search' %}
 
 <div class="ibexa-search-criteria-tags">
+    {% if form.children.search_language.vars.value != '' %}
+        <div class="ibexa-tag ibexa-search-criteria-tags__tag">
+            <div class="ibexa-tag__content">
+                {{ 'search.in_language'|trans({
+                    '%search_language%': form.children.search_language.vars.data.name,
+                })|desc('in %search_language%')}}
+            </div>
+        </div>
+    {% endif %}
+
     {% if form.content_types.vars.data is not empty %}
         {% for content_type in form.content_types.vars.data %}
             {{ include('@ibexadesign/ui/search_tag.html.twig', {
diff --git a/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
index 2968a53d4c..03ef057d71 100644
--- a/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/search/results.html.twig
@@ -17,10 +17,13 @@
             <h2 class="ibexa-search-form__no-results-title">
                 {{ 'search.no_results.title'|trans({'%query%': form.query.vars.value})|desc('No results found for "%query%"') }}
             </h2>
+
+            {% include '@ibexadesign/ui/search/spellcheck.html.twig' %}
+
             <div class="ibexa-search-form__no-results-subtitle">
                 {% for hint in no_results_hints %}
                     <div class="ibexa-search-form__no-results-hint">
-                        <div class="ibexa-search-form__no-results-hint-icon-wrapper">
+                        <div  class="ibexa-search-form__no-results-hint-icon-wrapper">
                             <svg class="ibexa-icon ibexa-icon--small-medium">
                                 <use xlink:href="{{ ibexa_icon_path('approved') }}"></use>
                             </svg>
@@ -182,14 +185,10 @@
             } %}
                 {% trans_default_domain 'ibexa_search' %}
                 {% block between_header_and_table %}
-                    <span class="ibexa-search-form__results-language">
-                        {% if form.children.search_language.vars.value != '' %}
-                            {{ 'search.in_language'|trans({
-                                '%search_language%': form.children.search_language.vars.data.name,
-                            })|desc('in %search_language%')}}
-                        {% endif %}
-                    </span>
-                    {% include '@ibexadesign/ui/search/criteria_tags.html.twig' %}
+                    <div class="ibexa-table-sub-header">
+                        {% include '@ibexadesign/ui/search/criteria_tags.html.twig' %}
+                        {% include '@ibexadesign/ui/search/spellcheck.html.twig' %}
+                    </div>
                 {% endblock %}
             {% endembed %}
 
diff --git a/src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig
new file mode 100644
index 0000000000..76b9837c2b
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/search/spellcheck.html.twig
@@ -0,0 +1,13 @@
+{% trans_default_domain 'ibexa_search' %}
+
+{% if spellcheck is not null and spellcheck.incorrect %}
+    <div class="ibexa-search-form__spellcheck-suggestion">
+        {% set suggestion_link %}
+            <a href="{{ path('ibexa.search', app.request.query|merge({'search[query]': spellcheck.query})) }}">
+                {{ spellcheck.query }}
+            </a>
+        {% endset %}
+
+        {{ 'search.spellcheck.suggestion'|trans|desc('Did you mean %s?')|e('html')|format(suggestion_link)|raw }}
+    </div>
+{% endif %}