Merge pull request #45 from Revyy/questions-full-text-search

feat: full text search on questions page

Author: drodil

plugins/qeta-backend/migrations/20230314-search-index.js

@@ -0,0 +1,19 @@
+/**
+ * @param {import('knex').Knex} knex
+ */
+exports.up = async function up(knex) {
+  if (knex.client.config.client === 'pg') {
+    await knex.schema.raw(
+      `CREATE INDEX questions_search_content_index ON questions USING GIN (to_tsvector('english', title || ' ' || content))`,
+    );
+  }
+};
+
+/**
+ * @param {import('knex').Knex} knex
+ */
+exports.down = async function down(knex) {
+  if (knex.client.config.client === 'pg') {
+    await knex.schema.raw(`DROP INDEX questions_search_content_index`);
+  }
+};

plugins/qeta-backend/src/database/DatabaseQetaStore.test.ts

@@ -147,6 +147,24 @@ describe.each(databases.eachSupportedId())(
         expect(ret?.questions.length).toEqual(2);
       });
 
+      it('should fetch list of questions based on searchQuery', async () => {
+        await insertQuestion(question);
+        await insertQuestion({
+          ...question,
+          title: 'title2',
+          content: 'content to search for',
+        });
+        const ret = await storage.getQuestions('user1', {
+          searchQuery: 'to search',
+        });
+        expect(ret?.questions.length).toEqual(1);
+
+        const noQuestions = await storage.getQuestions('user1', {
+          searchQuery: 'missing',
+        });
+        expect(noQuestions?.questions.length).toEqual(0);
+      });
+
       it('should fetch questions with specific component', async () => {
         const q1 = await storage.postQuestion(
           'user1',

plugins/qeta-backend/src/database/DatabaseQetaStore.ts

@@ -99,6 +99,20 @@ export class DatabaseQetaStore implements QetaStore {
       query.where('questions.author', '=', options.author);
     }
 
+    if (options.searchQuery) {
+      if (this.db.client.config.client === 'pg') {
+        query.whereRaw(
+          `to_tsvector('english', questions.title || ' ' || questions.content) @@ websearch_to_tsquery('english', ?)`,
+          [`${options.searchQuery}`],
+        );
+      } else {
+        query.whereRaw(
+          `LOWER(questions.title || ' ' || questions.content) LIKE LOWER(?)`,
+          [`%${options.searchQuery}%`],
+        );
+      }
+    }
+
     if (options.tags) {
       query.leftJoin(
         'question_tags',

plugins/qeta-backend/src/database/QetaStore.ts

@@ -73,6 +73,7 @@ export interface QuestionsOptions {
 
   includeTrend?: boolean;
   random?: boolean;
+  searchQuery?: string;
 }
 
 export interface TagResponse {

plugins/qeta-backend/src/service/router.ts

@@ -55,6 +55,7 @@ interface QuestionsQuery {
   includeVotes?: boolean;
   includeEntities?: boolean;
   includeTrend?: boolean;
+  searchQuery?: string;
 }
 
 const QuestionsQuerySchema: JSONSchemaType<QuestionsQuery> = {
@@ -79,6 +80,7 @@ const QuestionsQuerySchema: JSONSchemaType<QuestionsQuery> = {
     includeVotes: { type: 'boolean', nullable: true },
     includeEntities: { type: 'boolean', nullable: true },
     includeTrend: { type: 'boolean', nullable: true },
+    searchQuery: { type: 'string', nullable: true },
   },
   required: [],
   additionalProperties: false,

plugins/qeta/src/api/QetaApi.ts

@@ -15,6 +15,7 @@ export type GetQuestionsOptions = {
   entity?: string;
   author?: string;
   favorite?: boolean;
+  searchQuery?: string;
 
   includeEntities?: boolean;
 };

plugins/qeta/src/components/QuestionsContainer/QuestionsContainer.tsx

@@ -1,6 +1,15 @@
 import { useQetaApi } from '../../utils/hooks';
-import { Box, Collapse, Grid, Typography, Button } from '@material-ui/core';
+import {
+  Box,
+  Collapse,
+  Grid,
+  Typography,
+  Button,
+  TextField,
+} from '@material-ui/core';
+
 import React, { useEffect } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
 import { FilterKey, filterKeys, FilterPanel } from './FilterPanel';
 import { QuestionList } from './QuestionList';
 import FilterList from '@material-ui/icons/FilterList';
@@ -23,12 +32,14 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
   const [questionsPerPage, setQuestionsPerPage] = React.useState(10);
   const [showFilterPanel, setShowFilterPanel] = React.useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
+  const [searchQuery, setSearchQuery] = React.useState('');
   const [filters, setFilters] = React.useState({
     order: 'desc',
     orderBy: 'created',
     noAnswers: 'false',
     noCorrectAnswer: 'false',
     noVotes: 'false',
+    searchQuery: '',
   });
 
   const onPageChange = (value: number) => {
@@ -50,6 +61,14 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
     });
   };
 
+  const onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(event.target.value);
+  };
+
+  useDebounce(() => setFilters({ ...filters, searchQuery: searchQuery }), 400, [
+    searchQuery,
+  ]);
+
   useEffect(() => {
     let filtersApplied = false;
     searchParams.forEach((value, key) => {
@@ -127,6 +146,20 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
   return (
     <Box>
       {showTitle && <Typography variant="h5">{shownTitle}</Typography>}
+      <Grid container>
+        <Grid item xs={12} md={4}>
+          <TextField
+            id="search-bar"
+            fullWidth
+            onChange={onSearchQueryChange}
+            label="Search for questions"
+            variant="outlined"
+            placeholder="Search..."
+            size="small"
+            style={{ marginBottom: '5px' }}
+          />
+        </Grid>
+      </Grid>
       <Grid container justifyContent="space-between">
         <Grid item>
           <Typography variant="h6">{`${

plugins/qeta/src/utils/hooks.ts

@@ -4,7 +4,7 @@ import {
   IdentityApi,
   identityApiRef,
   useApi,
-  configApiRef
+  configApiRef,
 } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core';
 import { CatalogApi } from '@backstage/catalog-client';
@@ -183,7 +183,6 @@ export const useStyles = makeStyles(theme => {
   };
 });
 
-
 // Url resolving logic from https://github.com/backstage/backstage/blob/master/packages/core-components/src/components/Link/Link.tsx
 
 /**
@@ -205,4 +204,4 @@ export const useBasePath = () => {
   const url = useBaseUrl() ?? '/';
   const { pathname } = new URL(url, base);
   return trimEnd(pathname, '/');
-};
+};