D8CORE-7300 Add Algolia checkbox to allow indexing separate from sear…

…ch results
SU-SWS · Mar 5, 2024 · 209c154 · 209c154
1 parent 3851c2e
commit 209c154
Show file tree

Hide file tree

Showing 20 changed files with 6,524 additions and 4,203 deletions.
diff --git a/config/sync/colorbox.settings.yml b/config/sync/colorbox.settings.yml
@@ -1,6 +1,6 @@
 _core:
   default_config_hash: GXgpFNb8H7n-27gImTB9s1A2lE-lmH43d6qf2KMYp_A
-dompurify_hide_warning: false
+dompurify_hide_warning: true
 custom:
   style: default
   activate: 1

diff --git a/config/sync/core.entity_form_display.config_pages.stanford_basic_site_settings.default.yml b/config/sync/core.entity_form_display.config_pages.stanford_basic_site_settings.default.yml
@@ -17,6 +17,7 @@ dependencies:
     - field.field.config_pages.stanford_basic_site_settings.su_site_algolia_index
     - field.field.config_pages.stanford_basic_site_settings.su_site_algolia_key
     - field.field.config_pages.stanford_basic_site_settings.su_site_algolia_search
+    - field.field.config_pages.stanford_basic_site_settings.su_site_algolia_ui
     - field.field.config_pages.stanford_basic_site_settings.su_site_dropdowns
     - field.field.config_pages.stanford_basic_site_settings.su_site_email
     - field.field.config_pages.stanford_basic_site_settings.su_site_home
@@ -119,6 +120,7 @@ third_party_settings:
         - su_hide_site_search
         - su_site_nobots
         - su_site_algolia
+        - su_site_algolia_ui
         - su_site_algolia_id
         - su_site_algolia_key
         - su_site_algolia_search
@@ -200,43 +202,50 @@ content:
     third_party_settings: {  }
   su_site_algolia_file:
     type: file_generic
-    weight: 14
+    weight: 15
     region: content
     settings:
       progress_indicator: throbber
     third_party_settings: {  }
   su_site_algolia_id:
     type: string_textfield
-    weight: 10
+    weight: 11
     region: content
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
   su_site_algolia_index:
     type: string_textfield
-    weight: 13
+    weight: 14
     region: content
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
   su_site_algolia_key:
     type: string_textfield
-    weight: 11
+    weight: 12
     region: content
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
   su_site_algolia_search:
     type: string_textfield
-    weight: 12
+    weight: 13
     region: content
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
+  su_site_algolia_ui:
+    type: boolean_checkbox
+    weight: 10
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
   su_site_dropdowns:
     type: boolean_checkbox
     weight: 5

diff --git a/config/sync/core.entity_view_display.config_pages.stanford_basic_site_settings.default.yml b/config/sync/core.entity_view_display.config_pages.stanford_basic_site_settings.default.yml
@@ -254,3 +254,4 @@ content:
     region: content
 hidden:
   search_api_excerpt: true
+  su_site_algolia_ui: true
diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml
@@ -22,7 +22,6 @@ module:
   components: 0
   conditional_fields: 0
   config: 0
-  config_filter: 0
   config_ignore: 0
   config_pages: 0
   config_readonly: 0

diff --git a/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia.yml b/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia.yml
@@ -9,8 +9,8 @@ id: config_pages.stanford_basic_site_settings.su_site_algolia
 field_name: su_site_algolia
 entity_type: config_pages
 bundle: stanford_basic_site_settings
-label: 'Use Algolia'
-description: ''
+label: 'Index Content with Algolia'
+description: 'Send content data to Algolia using the configured credentials below.'
 required: false
 translatable: false
 default_value: {  }

diff --git a/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia_index.yml b/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia_index.yml
@@ -10,7 +10,7 @@ field_name: su_site_algolia_index
 entity_type: config_pages
 bundle: stanford_basic_site_settings
 label: 'Algolia Search Index'
-description: ''
+description: 'Algolia index machine name. This can be found at the top of the Algolia UI when on the "Search" configuration page.'
 required: false
 translatable: false
 default_value: {  }

diff --git a/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia_ui.yml b/config/sync/field.field.config_pages.stanford_basic_site_settings.su_site_algolia_ui.yml
@@ -0,0 +1,21 @@
+uuid: ec46c75b-d6eb-4675-9e28-9142830375ce
+langcode: en
+status: true
+dependencies:
+  config:
+    - config_pages.type.stanford_basic_site_settings
+    - field.storage.config_pages.su_site_algolia_ui
+id: config_pages.stanford_basic_site_settings.su_site_algolia_ui
+field_name: su_site_algolia_ui
+entity_type: config_pages
+bundle: stanford_basic_site_settings
+label: 'Algolia Searching UI'
+description: 'Enable Algolia searching on the <a href="/search">search page</a>.'
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  on_label: 'On'
+  off_label: 'Off'
+field_type: boolean
diff --git a/config/sync/field.storage.config_pages.su_site_algolia_ui.yml b/config/sync/field.storage.config_pages.su_site_algolia_ui.yml
@@ -0,0 +1,22 @@
+uuid: 67d42bc8-dfc4-488c-a7e1-b055aaa27125
+langcode: en
+status: true
+dependencies:
+  module:
+    - config_pages
+    - field_permissions
+third_party_settings:
+  field_permissions:
+    permission_type: custom
+id: config_pages.su_site_algolia_ui
+field_name: su_site_algolia_ui
+entity_type: config_pages
+type: boolean
+settings: {  }
+module: core
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/sync/user.role.anonymous.yml b/config/sync/user.role.anonymous.yml
@@ -39,6 +39,7 @@ permissions:
   - 'view own su_site_algolia_id'
   - 'view own su_site_algolia_index'
   - 'view own su_site_algolia_search'
+  - 'view own su_site_algolia_ui'
   - 'view own su_site_home'
   - 'view own su_site_url'
   - 'view policy log'
@@ -60,5 +61,6 @@ permissions:
   - 'view su_site_algolia_id'
   - 'view su_site_algolia_index'
   - 'view su_site_algolia_search'
+  - 'view su_site_algolia_ui'
   - 'view su_site_home'
   - 'view su_site_url'
diff --git a/config/sync/user.role.authenticated.yml b/config/sync/user.role.authenticated.yml
@@ -41,6 +41,7 @@ permissions:
   - 'view own su_site_algolia_id'
   - 'view own su_site_algolia_index'
   - 'view own su_site_algolia_search'
+  - 'view own su_site_algolia_ui'
   - 'view own su_site_home'
   - 'view own su_site_url'
   - 'view policy log'
@@ -57,5 +58,6 @@ permissions:
   - 'view su_site_algolia_id'
   - 'view su_site_algolia_index'
   - 'view su_site_algolia_search'
+  - 'view su_site_algolia_ui'
   - 'view su_site_home'
   - 'view su_site_url'
diff --git a/themes/minimally_branded_subtheme/minimally_branded_subtheme.libraries.yml b/themes/minimally_branded_subtheme/minimally_branded_subtheme.libraries.yml
@@ -44,7 +44,6 @@
 # EXAMPLE:
 #
 # nameoflibrarygroup:
-#   version: VERSION
 #   css:
 #     base:
 #       css/drupal/all.css:
@@ -72,7 +71,6 @@
 #   - core/jquery
 #
 # patternlibrary:
-#   version: VERSION
 #   css:
 #     base:
 #       css/pattern-library/base/base.css: {}
@@ -87,7 +85,6 @@
 #       css/pattern-library/theme/print.css: { media: print }
 
 allpages:
-  version: VERSION
   css:
    theme:
      dist/css/minimally_branded_subtheme.css: {minified: true }

diff --git a/themes/stanford_basic/algolia-search/.yarnrc.yml b/themes/stanford_basic/algolia-search/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js b/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js
diff --git a/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js.LICENSE.txt b/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js.LICENSE.txt
@@ -1,4 +1,4 @@
-/*! algoliasearch-lite.umd.js | 4.20.0 | © Algolia, inc. | https://github.com/algolia/algoliasearch-client-javascript */
+/*! algoliasearch-lite.umd.js | 4.22.1 | © Algolia, inc. | https://github.com/algolia/algoliasearch-client-javascript */
 
 /**
  * @license React

diff --git a/themes/stanford_basic/algolia-search/package.json b/themes/stanford_basic/algolia-search/package.json
@@ -15,25 +15,26 @@
     "dev": "webpack serve --env dev"
   },
   "dependencies": {
-    "algoliasearch": "^4.20.0",
-    "preact": "^10.18.1",
-    "react-instantsearch": "^7.3.0",
-    "styled-components": "^6.1.1"
+    "algoliasearch": "^4.22.1",
+    "preact": "^10.19.6",
+    "react-instantsearch": "^7.7.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.18.9",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@types/webpack": "^5.28.0",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/webpack": "^5.28.5",
     "babel-loader": "^9.1.3",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.10.0",
     "dotenv-webpack": "^8.0.1",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.0",
     "preact-island": "^1.1.2",
-    "terser-webpack-plugin": "^5.3.5",
-    "webpack": "^5.74.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.9.3"
-  }
+    "webpack-dev-server": "^4.15.1"
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/themes/stanford_basic/algolia-search/src/algolia-search.island.tsx b/themes/stanford_basic/algolia-search/src/algolia-search.island.tsx
@@ -1,6 +1,6 @@
 import algoliasearch from 'algoliasearch/lite';
 import {createIslandWebComponent} from 'preact-island'
-import {Hits, HitsProps, InstantSearch, useHits} from 'react-instantsearch';
+import {HitsProps, InstantSearch, useHits} from 'react-instantsearch';
 import SearchBox from "./search-box";
 import EventHit from "./hits/events";
 import NewsHit from "./hits/news";

diff --git a/themes/stanford_basic/algolia-search/src/search-box.tsx b/themes/stanford_basic/algolia-search/src/search-box.tsx
@@ -1,65 +1,53 @@
 import {useInstantSearch, useSearchBox} from "react-instantsearch";
-import {useId, useRef, useState} from "preact/compat";
+import {useRef} from "preact/compat";
 
 const SearchBox = (props) => {
   const {query, refine} = useSearchBox(props);
   const {status} = useInstantSearch();
-  const [inputValue, setInputValue] = useState(query);
-  const inputRef = useRef(null);
-  const inputId = useId();
-
-  const isSearchStalled = status === 'stalled';
-  const isLoading = status === 'loading'
+  const inputRef = useRef<HTMLInputElement>(null);
 
   return (
     <form
       action=""
       role="search"
       noValidate
-      onSubmit={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (inputRef.current) {
-          inputRef.current.blur();
-        }
-        refine(inputValue);
+      onSubmit={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        refine(inputRef.current?.value);
+        window.history.replaceState(null, '', `?key=${inputRef.current?.value}`)
       }}
-      onReset={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setInputValue('');
+      onReset={e => {
+        e.preventDefault();
+        e.stopPropagation();
         refine('');
-
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
+        inputRef.current.value = '';
+        inputRef.current?.focus();
       }}
       style={{marginBottom: "20px"}}
     >
       <div>
-        <label htmlFor={inputId}>
+        <label htmlFor="keyword-search-algolia">
           Keywords<span className="visually-hidden">&nbsp;Search</span>
         </label>
         <input
-          id={inputId}
+          id="keyword-search-algolia"
           ref={inputRef}
           autoComplete="on"
           autoCorrect="on"
           autoCapitalize="off"
-          spellCheck={false}
-          maxLength={512}
+          spellCheck={true}
+          maxLength={128}
           type="search"
-          value={inputValue}
-          onChange={e => setInputValue(e.currentTarget.value)}
+          defaultValue={query}
           autoFocus
         />
       </div>
       <div style={{display: "flex", gap: "1rem", marginTop: "1rem"}}>
         <button type="submit">Submit</button>
         <button
           type="reset"
-          hidden={inputValue.length === 0 || isSearchStalled}
+          hidden={query.length === 0}
         >
           Reset
         </button>
@@ -75,7 +63,7 @@ const StatusMessage = ({status, query}) => {
     message = `Showing results for "${query}"`
   }
   return (
-    <div className="visually-hidden" aria-live="polite">{message}</div>
+    <div className="visually-hidden" aria-live="polite" aria-atomic>{message}</div>
   )
 }
 export default SearchBox;