Merge branch 'ke/search-input' of https://github.com/kitspace/kitspac…

…e-v2

docker-compose.deploy.yml

@@ -22,11 +22,11 @@ services:
       - 443:443
     environment:
       - RUN_CERTBOT=${CERTBOT_ENABLED}
-      - CERTBOT_DOMAINS=${KITSPACE_DOMAIN},gitea.${KITSPACE_DOMAIN},meilisearch.${KITSPACE_DOMAIN}
+      - CERTBOT_DOMAINS=${KITSPACE_DOMAIN},gitea.${KITSPACE_DOMAIN},meilisearch.${KITSPACE_DOMAIN},letsencrypt.${KITSPACE_DOMAIN}
       - CERTBOT_EMAIL=${CERTBOT_EMAIL}
       - 'USE_LOCAL_MINIO=false'
     volumes:
-      - /etc/letsencrypt
+      - nginx-letsencrypt:/etc/letsencrypt
     restart: always
 
   processor:
@@ -43,3 +43,6 @@ services:
     environment:
       - MEILI_ENV=production
     restart: always
+
+volumes:
+  nginx-letsencrypt: null

docker-compose.yml

@@ -73,6 +73,8 @@ services:
       # If any of the services is unreachable for 4 minutes, mark the container as unhealthy.
       retries: 4
       start_period: 2m
+    volumes:
+      - nginx-conf:/etc/nginx
 
   processor:
     environment:
@@ -117,3 +119,4 @@ volumes:
   postgres-data: null
   processor-data: null
   meilisearch-data: null
+  nginx-conf: null

e2e/cypress/e2e/multiProject.spec.js

@@ -84,8 +84,8 @@ describe('Render project cards', () => {
     cy.visit('/')
 
     // Search for the project
-    cy.get('nav [data-cy=search-field] > input').type(user.username)
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(user.username)
+    cy.get('[data-cy=search-form]').submit()
 
     // Click on a subproject project card
     cy.get('[data-cy=project-card]')
@@ -188,8 +188,8 @@ describe('Multi project page', () => {
     const multiProjectName = multiProjectsNames[0]
     cy.visit('/')
     // Search for the project
-    cy.get('nav [data-cy=search-field] > input').type(user.username)
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(user.username)
+    cy.get('[data-cy=search-form]').submit()
 
     // Click on a multiproject project card
     cy.get('[data-cy=project-card]')

e2e/cypress/e2e/search.spec.js

@@ -1,19 +1,15 @@
 import { getFakeUser } from '../support/getFakeUser'
 
-describe('Navbar search', () => {
-  it('should redirect to /search when search is submitted', () => {
+describe('Search', () => {
+  it('should rewrite url to /search', () => {
     const queryTerm = 'awesome project'
 
     // Visit homepage
     cy.visit('/')
     // Write query term in the search field
-    cy.get('nav [data-cy=search-field] > input').type(queryTerm)
-    // The URL shouldn't change before clicking on `Search`
-    cy.url().should('equal', `${Cypress.config().baseUrl}/`)
-    // Press enter
-    cy.get('nav [data-cy=search-form]').submit()
-    // Should redirect to the search page
-    cy.url().should('include', `/search?q=${encodeURI(queryTerm)}`)
+    cy.get('[data-cy=search-field] > input').type(queryTerm)
+    // Should rewrite url to the search page
+    cy.url().should('include', `/search?q=${encodeURIComponent(queryTerm)}`)
   })
 
   it('should display project card on submitting search form', () => {
@@ -34,9 +30,7 @@ describe('Navbar search', () => {
 
     cy.visit('/')
     // Write query term in the search field
-    cy.get('nav [data-cy=search-field] > input').type(repoName)
-    // Press enter
-    cy.get('nav [data-cy=search-form]').submit()
+    cy.get('[data-cy=search-field] > input').type(repoName)
     // Should redirect to the search page
     cy.url().should('include', `/search?q=${encodeURI(repoName)}`)
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
@@ -65,10 +59,8 @@ describe('Homepage search on mobile', () => {
     cy.viewport('iphone-6')
     // Write query term in the search field
     cy.get('main [data-cy=search-field] > input').type(repoName)
-    // Press enter
-    cy.get('main [data-cy=search-form]').submit()
     // Should redirect to the search page
-    cy.url().should('include', `/search?q=${encodeURI(repoName)}`)
+    cy.url().should('include', `/search?q=${encodeURIComponent(repoName)}`)
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
   })
 })
@@ -102,11 +94,10 @@ describe('/search route', () => {
     cy.get('[data-cy=project-card]').should('have.length.gte', 1)
   })
 
-  it('should redirect to /search when search box is cleared', () => {
+  it('should redirect to / when search box is cleared', () => {
     cy.visit('search?q=query')
     // Clear the search form and press enter
-    cy.get('nav [data-cy=search-field] > input').clear()
-    cy.get('nav [data-cy=search-form]').submit()
-    cy.url().should('equal', `${Cypress.config().baseUrl}/search?q=`)
+    cy.get('[data-cy=search-field] > input').clear()
+    cy.url().should('equal', `${Cypress.config().baseUrl}/`)
   })
 })

e2e/cypress/support/commands.js

@@ -75,7 +75,7 @@ Cypress.Commands.add('importRepo', (remoteUrl, repoName, user) => {
           method: 'GET',
           failOnStatusCode: false,
         })
-        .then(response => response.body.empty === false),
+        .then(response => !response.body.empty),
     { timeout: 60_000, interval: 1000 },
   )
 })

frontend/next.config.js

@@ -82,5 +82,13 @@ module.exports = async phase => {
         },
       ]
     },
+    async rewrites() {
+      return [
+        {
+          source: '/',
+          destination: '/search?q=',
+        },
+      ]
+    },
   }
 }

frontend/package.json

@@ -14,8 +14,8 @@
     "express": "^4.19.2",
     "file-loader": "^6.0.0",
     "highlight.js": "^11.6.0",
-    "joi": "^17.2.1",
     "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "meilisearch": "^0.25.1",
     "morgan": "^1.10.0",
     "next": "^12.1.6",
@@ -26,7 +26,8 @@
     "react-intersection-observer": "^9.4.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.3",
-    "swr": "^1.3.0",
+    "swr": "^2.2.5",
+    "usehooks-ts": "^3.1.0",
     "webpack": "^5.76.0"
   },
   "devDependencies": {

frontend/src/components/NavBar/NavSearchInput.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import { Form, Icon, Input } from 'semantic-ui-react'
+
+import { useSearchQuery } from '@contexts/SearchContext'
+
+const NavSearchInput = () => {
+  const { push } = useRouter()
+  const { query: contextQuery, updateQuery: updateContextQuery } = useSearchQuery()
+  const [query, setQuery] = useState(contextQuery)
+
+  const handleSubmit = () => {
+    updateContextQuery(query)
+    const path = `/search?q=${encodeURIComponent(query)}`
+    push(path)
+  }
+
+  return (
+    <Form data-cy="search-form" onSubmit={handleSubmit}>
+      <Form.Field
+        fluid
+        autoComplete="off"
+        control={Input}
+        data-cy="search-field"
+        icon={
+          <Icon
+            circular
+            disabled={!query}
+            link={!!query}
+            name="search"
+            onClick={handleSubmit}
+          />
+        }
+        id="search-field"
+        name="query"
+        placeholder="Search for projects"
+        value={query ?? ''}
+        onChange={e => setQuery(e.target.value)}
+      />
+    </Form>
+  )
+}
+
+export default NavSearchInput

frontend/src/components/NavBar/index.jsx → frontend/src/components/NavBar/index.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Button, Icon, Menu, Popup } from 'semantic-ui-react'
 
-import SearchBar from './SearchBar'
+import NavSearchInput from './NavSearchInput'
 import styles from './index.module.scss'
 import logoSvg from './logo.svg'
+import { useSearchQuery } from '@contexts/SearchContext'
 
 const NavBar = () => {
   return (
@@ -88,21 +89,14 @@ const AddProjectButton = () => {
 
 const SiteMenuItems = () => {
   const { pathname } = useRouter()
-  const isProjectRoute =
-    pathname === '/' ||
-    pathname === '/search' ||
-    RegExp('^/projects/').test(pathname)
+  const isSearchRoute = pathname === '/' || pathname === '/search'
+  const isProjectRoute = isSearchRoute
 
+  const { query } = useSearchQuery()
   return (
     <>
-      <Link passHref href="/">
-        <Menu.Item
-          active={isProjectRoute}
-          as="a"
-          // Add a separation line after user specific actions.
-          className={styles.projects}
-          href="/"
-        >
+      <Link passHref href={query ? `/search?q=${encodeURIComponent(query)}` : '/'}>
+        <Menu.Item active={isProjectRoute} as="a" className={styles.projects}>
           Projects
         </Menu.Item>
       </Link>
@@ -111,9 +105,11 @@ const SiteMenuItems = () => {
           1-click BOM
         </Menu.Item>
       </Link>
-      <Menu.Item className={styles.SearchBarContainer}>
-        <SearchBar />
-      </Menu.Item>
+      {isSearchRoute ? null : (
+        <Menu.Item className={styles.SearchBarContainer}>
+          <NavSearchInput />
+        </Menu.Item>
+      )}
     </>
   )
 }

frontend/src/components/Page/index.jsx

@@ -3,7 +3,6 @@ import { string, bool, node } from 'prop-types'
 
 import Head from '@components/Head'
 import NavBar from '@components/NavBar'
-import SearchProvider from '@contexts/SearchContext'
 import styles from './index.module.scss'
 
 const Content = ({ contentFullSize, children }) => {
@@ -19,13 +18,13 @@ const Container = ({ contentFullSize, children }) => (
   </main>
 )
 
-const Page = ({ title, initialQuery, contentFullSize, children }) => {
+const Page = ({ title, contentFullSize, children }) => {
   return (
-    <SearchProvider initialQuery={initialQuery}>
+    <>
       <Head title={title} />
       <NavBar />
       <Content contentFullSize={contentFullSize}>{children}</Content>
-    </SearchProvider>
+    </>
   )
 }