[GH-25023] Add in-product Academy link to Search training (#25509)

* Feat - Added product academy link to search training

* Fix - Added hover effect on product-Academy-link-to-Search-training

* Fix CI

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

webapp/channels/src/components/search_hint/__snapshots__/search_hint.test.tsx.snap

@@ -382,11 +382,22 @@ exports[`components/SearchHint should match snapshot, without searchType 1`] = `
 <div
   className="search-hint__search-type-selector"
 >
-  <div>
+  <div
+    className="search-hint_text-container"
+  >
     <MemoizedFormattedMessage
       defaultMessage="What are you searching for?"
       id="search_bar.usage.search_type_question"
     />
+    <MemoizedFormattedMessage
+      defaultMessage="<a>Learn about search</a>"
+      id="search_bar.usage.searchLearn"
+      values={
+        Object {
+          "a": [Function],
+        }
+      }
+    />
   </div>
   <div
     className="button-container"

webapp/channels/src/components/search_hint/search_hint.tsx

@@ -9,6 +9,8 @@ import {useSelector} from 'react-redux';
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import ExternalLink from 'components/external_link';
+
 import {isFileAttachmentsEnabled} from 'utils/file_utils';
 
 interface SearchTerm {
@@ -46,11 +48,27 @@ const SearchHint = (props: Props): JSX.Element => {
                     className='search-hint__search-type-selector'
                     onMouseDown={props.onMouseDown}
                 >
-                    <div>
+                    <div className='search-hint_text-container'>
                         <FormattedMessage
                             id='search_bar.usage.search_type_question'
                             defaultMessage='What are you searching for?'
                         />
+                        <FormattedMessage
+                            id='search_bar.usage.searchLearn'
+                            defaultMessage='<a>Learn about search</a>'
+                            values={{
+                                a: (chunks) => (
+                                    <ExternalLink
+                                        className='search-hint_learn-search'
+                                        href='https://mattermost.com/pl/mattermost-academy-search-training'
+                                    >
+                                        <span>{chunks}</span>
+                                        <i className='icon icon-lightbulb-outline'/>
+                                    </ExternalLink>
+                                ),
+                            }}
+                        />
+
                     </div>
                     <div className='button-container'>
                         <button
@@ -65,7 +83,7 @@ const SearchHint = (props: Props): JSX.Element => {
                                 defaultMessage='Messages'
                             />
                         </button>
-                        { isFileAttachmentEnabled &&
+                        {isFileAttachmentEnabled &&
                             <button
                                 className={classNames({highlighted: props.highlightedIndex === 1})}
                                 onClick={() => props.onSearchTypeSelected && props.onSearchTypeSelected('files')}

webapp/channels/src/i18n/en.json

@@ -4699,6 +4699,7 @@
   "search_bar.usage.search_type_files": "Files",
   "search_bar.usage.search_type_messages": "Messages",
   "search_bar.usage.search_type_question": "What are you searching for?",
+  "search_bar.usage.searchLearn": "<a>Learn about search</a>",
   "search_bar.usage.title": "Search options",
   "search_bar.usage.title_files": "File search options",
   "search_bar.usage.title_messages": "Message search options",

webapp/channels/src/sass/components/_search.scss

@@ -437,7 +437,52 @@
     }
 }
 
+.search-hint_text-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.search-hint_learn-search {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 12px;
+    gap: 6px;
+
+    &:hover,
+    &:focus,
+    &:active {
+        text-decoration: none;
+    }
+
+    >span {
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 16px;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    >i {
+        display: inline-flex !important;
+        align-items: center;
+        padding: 4px;
+        background-color: hsla(221, 77%, 48%, 0.08);
+        border-radius: 50%;
+        font-size: 14px !important;
+        gap: 10px;
+
+        &::before {
+            margin: 0;
+        }
+    }
+}
+
 .sidebar--right__subheader {
+
     // Fighting specificity with _sidebar-right.scss (sidebar--right .sidebar--right__subheader ul)
     ul.search-hint__suggestions-list {
         padding: 10px 0;