Merge pull request #4157 from overleaf/jel-gallery-search-via-algolia

Add gallery search via Algolia

GitOrigin-RevId: 82f306154c990e5ba047b7a7ab9e98f193995ede

services/web/app/views/layout.pug

@@ -88,8 +88,8 @@ html(
 
 			if (typeof(settings.algolia) != "undefined")
 				meta(name="ol-algolia" data-type="json" content={
-					app_id: settings.algolia.app_id,
-					api_key: settings.algolia.read_only_api_key,
+					appId: settings.algolia.app_id,
+					apiKey: settings.algolia.read_only_api_key,
 					indexes: settings.algolia.indexes
 				})
 

services/web/frontend/extracted-translations.json

@@ -223,6 +223,7 @@
   "please_set_main_file": "",
   "plus_upgraded_accounts_receive": "",
   "private": "",
+  "processing": "",
   "proj_timed_out_reason": "",
   "project_approaching_file_limit": "",
   "project_flagged_too_many_compiles": "",

services/web/frontend/js/services/algolia-search.js

@@ -8,7 +8,7 @@ export default App.factory('algoliaSearch', function () {
   const algoliaConfig = getMeta('ol-algolia')
   const wikiIndex = _.get(algoliaConfig, 'indexes.wiki')
   if (wikiIndex) {
-    const client = AlgoliaSearch(algoliaConfig.app_id, algoliaConfig.api_key)
+    const client = AlgoliaSearch(algoliaConfig.appId, algoliaConfig.apiKey)
     wikiIdx = client.initIndex(wikiIndex)
   }
 

services/web/frontend/js/shared/components/processing.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import Icon from './icon'
+
+function Processing({ isProcessing }) {
+  const { t } = useTranslation()
+  if (isProcessing) {
+    return (
+      <div aria-live="polite">
+        {t('processing')}… <Icon type="fw" modifier="refresh" spin />
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}
+
+Processing.propTypes = {
+  isProcessing: PropTypes.bool.isRequired,
+}
+
+export default Processing

services/web/test/frontend/shared/components/processing.test.js

@@ -0,0 +1,17 @@
+import { expect } from 'chai'
+import React from 'react'
+import { render } from '@testing-library/react'
+import Processing from '../../../../frontend/js/shared/components/processing'
+
+describe('<Processing />', function () {
+  it('renders processing UI when isProcessing is true', function () {
+    const { container } = render(<Processing isProcessing />)
+    const element = container.querySelector('i.fa.fa-refresh')
+    expect(element).to.exist
+  })
+  it('does not render processing UI when isProcessing is false', function () {
+    const { container } = render(<Processing isProcessing={false} />)
+    const element = container.querySelector('i.fa.fa-refresh')
+    expect(element).to.not.exist
+  })
+})