copilot cookbook: use template strings for ui elements (#53491)

Co-authored-by: Kevin Heis <[email protected]>

Author: Saturn226

data/ui.yml

@@ -311,3 +311,10 @@ domain_edit:
   snippet_about: Updating will include the new domain name in all code snippets across GitHub Docs.
   learn_more: Learn more
   submission_failed: Submission failed. Please try again in a minute.
+cookbook_landing:
+  spotlight: Spotlight
+  explore_articles: Explore {{ number }} prompt articles
+  reset_filters: Reset filters
+  search_articles: Search articles
+  category: Category
+  complexity: Complexity

src/fixtures/fixtures/data/ui.yml

@@ -311,3 +311,10 @@ domain_edit:
   snippet_about: Updating will include the new domain name in all code snippets across GitHub Docs.
   learn_more: Learn more
   submission_failed: Submission failed. Please try again in a minute.
+cookbook_landing:
+  spotlight: Spotlight
+  explore_articles: Explore {{ number }} prompt articles
+  reset_filters: Reset filters
+  search_articles: Search articles
+  category: Category
+  complexity: Complexity

src/frame/components/context/MainContext.tsx

@@ -150,6 +150,7 @@ const DEFAULT_UI_NAMESPACES = [
   'support',
   'rest',
   'domain_edit',
+  'cookbook_landing',
 ]
 
 export function addUINamespaces(req: any, ui: UIStrings, namespaces: string[]) {

src/landings/components/CategoryLanding.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import cx from 'classnames'
 import { CookBookArticleCard } from './CookBookArticleCard'
 import { CookBookFilter } from './CookBookFilter'
-
+import { useTranslation } from 'src/languages/components/useTranslation'
 import { DefaultLayout } from 'src/frame/components/DefaultLayout'
 import { ArticleTitle } from 'src/frame/components/article/ArticleTitle'
 import { Lead } from 'src/frame/components/ui/Lead'
@@ -14,6 +14,7 @@ import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
 import { ArticleCardItems } from 'src/landings/types'
 
 export const CategoryLanding = () => {
+  const { t } = useTranslation('cookbook_landing')
   const router = useRouter()
   const { title, intro, tocItems } = useCategoryLandingContext()
 
@@ -84,7 +85,7 @@ export const CategoryLanding = () => {
         <ArticleTitle>{title}</ArticleTitle>
         {intro && <Lead data-search="lead">{intro}</Lead>}
 
-        <h2 className="py-5">Spotlight</h2>
+        <h2 className="py-5">{t('spotlight')}</h2>
         <div className="d-md-flex d-sm-block col-md-12">
           <div className="col-md-4">
             <CookBookArticleCard
@@ -121,7 +122,9 @@ export const CategoryLanding = () => {
         <div className="pt-8">
           <div className="py-5 border-bottom">
             <div className="pb-3 mr-5 ml-1 float-xl-left">
-              <h2>Explore {searchResults.length} prompt articles</h2>
+              <h2>
+                {t('explore_articles').replace('{{ number }}', searchResults.length.toString())}
+              </h2>
             </div>
             <div>
               <CookBookFilter

src/landings/components/CookBookFilter.tsx

@@ -2,6 +2,7 @@ import { TextInput, ActionMenu, ActionList, Button, Box } from '@primer/react'
 import { SearchIcon } from '@primer/octicons-react'
 import { useRef, useEffect, useState } from 'react'
 import { ArticleCardItems } from '#src/landings/types.ts'
+import { useTranslation } from 'src/languages/components/useTranslation'
 
 type Props = {
   tokens: ArticleCardItems
@@ -23,6 +24,7 @@ export const CookBookFilter = ({
     'All',
     ...new Set(tokens.flatMap((item) => item.complexity || [])),
   ]
+  const { t } = useTranslation('cookbook_landing')
 
   const [selectedCategory, setSelectedCategory] = useState(0)
   const [selectedComplexity, setSelectedComplexity] = useState(0)
@@ -61,7 +63,7 @@ export const CookBookFilter = ({
             leadingVisual={SearchIcon}
             className="m-1"
             sx={{ minWidth: ['stretch', 'stretch', 'stretch', 'stretch'] }}
-            placeholder="Search articles"
+            placeholder={t('search_articles')}
             ref={inputRef}
             autoComplete="false"
             onChange={(e) => {
@@ -80,7 +82,7 @@ export const CookBookFilter = ({
                 display: 'inline-block',
               }}
             >
-              Category:
+              {t('category')}:
             </Box>{' '}
             {categories[selectedCategory]}
           </ActionMenu.Button>
@@ -107,7 +109,7 @@ export const CookBookFilter = ({
                 display: 'inline-block',
               }}
             >
-              Complexity:
+              {t('complexity')}:
             </Box>{' '}
             {complexities[selectedComplexity]}
           </ActionMenu.Button>
@@ -127,7 +129,7 @@ export const CookBookFilter = ({
         </ActionMenu>
 
         <Button variant="invisible" className="col-md-1 col-sm-2 mt-1" onClick={onResetFilter}>
-          Reset filters
+          {t('reset_filters')}
         </Button>
       </div>
     </div>