Add search to Copilot Cookbook (#53108)

Author: hectorsector

src/frame/components/context/CategoryLandingContext.tsx

@@ -5,21 +5,7 @@ import {
   FeaturedLink,
   getFeaturedLinksFromReq,
 } from 'src/landings/components/ProductLandingContext'
-
-export type TocItem = {
-  fullPath: string
-  title: string
-  intro?: string
-  childTocItems?: Array<{
-    fullPath: string
-    title: string
-    intro: string
-    octicon?: string
-    category?: string[]
-    complexity?: string[]
-    industry?: string[]
-  }>
-}
+import { TocItem } from '#src/landings/types.ts'
 
 export type CategoryLandingContextT = {
   title: string

src/landings/components/CategoryLanding.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { CookBookArticleCard } from './CookBookArticleCard'
@@ -11,14 +12,31 @@ import { useCategoryLandingContext } from 'src/frame/components/context/Category
 import { ClientSideRedirects } from 'src/rest/components/ClientSideRedirects'
 import { RestRedirect } from 'src/rest/components/RestRedirect'
 import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
+import { ArticleCardItems } from '../types'
 
 export const CategoryLanding = () => {
   const router = useRouter()
   //const { t } = useTranslation('toc')
   const { title, intro, tocItems } = useCategoryLandingContext()
 
   // tocItems contains directories and its children, we only want the child articles
-  const onlyFlatItems = tocItems.flatMap((item) => item.childTocItems || [])
+  const onlyFlatItems: ArticleCardItems = tocItems.flatMap((item) => item.childTocItems || [])
+
+  const [searchResults, setSearchResults] = useState<ArticleCardItems>(onlyFlatItems)
+
+  const handleSearch = (query: string) => {
+    const results = onlyFlatItems.filter((token) => {
+      return Object.values(token).some((value) => {
+        if (typeof value === 'string') {
+          return value.toLowerCase().includes(query.toLowerCase())
+        } else if (Array.isArray(value)) {
+          return value.some((item) => item.toLowerCase().includes(query.toLowerCase()))
+        }
+        return false
+      })
+    })
+    setSearchResults(results)
+  }
 
   return (
     <DefaultLayout>
@@ -44,14 +62,14 @@ export const CategoryLanding = () => {
         <div className="pt-8">
           <div className="py-5 border-bottom">
             <div className="col-lg-4 col-sm-12 float-md-left pb-3 mr-5 ml-1">
-              <h2>Explore {onlyFlatItems.length} prompt articles</h2>
+              <h2>Explore {searchResults.length} prompt articles</h2>
             </div>
             <div>
-              <CookBookFilter />
+              <CookBookFilter tokens={onlyFlatItems} onSearch={handleSearch} />
             </div>
           </div>
           <ul className="clearfix gutter-md-spacious">
-            {onlyFlatItems.map((item, index) => (
+            {searchResults.map((item, index) => (
               <li key={index} className="col-md-4 col-sm-12 list-style-none float-left p-4">
                 <CookBookArticleCard
                   title={item.title}

src/landings/components/CookBookFilter.tsx

@@ -1,16 +1,39 @@
 import { TextInput, ActionMenu, ActionList, Button } from '@primer/react'
 import { SearchIcon } from '@primer/octicons-react'
+import { useRef, useEffect } from 'react'
+import { ArticleCardItems } from '#src/landings/types.ts'
+
+type Props = {
+  tokens: ArticleCardItems
+  onSearch: (query: string) => void
+  isSearchOpen?: boolean
+}
+
+export const CookBookFilter = ({ onSearch, isSearchOpen }: Props) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (isSearchOpen) {
+      inputRef.current?.focus()
+    }
+  }, [isSearchOpen])
 
-export const CookBookFilter = () => {
   return (
     <>
       <div>
-        <TextInput
-          leadingVisual={SearchIcon}
-          className="float-lg-left m-1"
-          sx={{ minWidth: ['stretch', 'stretch', 'stretch', 250] }}
-          placeholder="Search articles"
-        />
+        <form onSubmit={(e) => e.preventDefault()}>
+          <TextInput
+            leadingVisual={SearchIcon}
+            className="float-lg-left m-1"
+            sx={{ minWidth: ['stretch', 'stretch', 'stretch', 250] }}
+            placeholder="Search articles"
+            ref={inputRef}
+            autoComplete="false"
+            onChange={(e) => {
+              const query = e.target.value || ''
+              onSearch(query)
+            }}
+          />
+        </form>
       </div>
       <div className="d-flex">
         <ActionMenu>

src/landings/types.ts

@@ -0,0 +1,18 @@
+export type BaseTocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
+
+export type ChildTocItem = BaseTocItem & {
+  octicon?: string
+  category?: string[]
+  complexity?: string[]
+  industry?: string[]
+}
+
+export type TocItem = BaseTocItem & {
+  childTocItems?: ChildTocItem[]
+}
+
+export type ArticleCardItems = ChildTocItem[]