format large numbers per locale (#34579)

.dockerignore

@@ -7,8 +7,6 @@ docs/
 node_modules/
 script/
 tests/
-# These files are currently being added by automation in github/github. We will be removing the files permanently when we fix the broken automation in github/github.
-lib/rest/static/dereferenced
 # Folder is cloned during the preview + prod workflows, the assets are merged into other locations for use before the build
 docs-early-access/
 # During the preview deploy untrusted user code may be cloned into this directory

.github/actions-scripts/rendered-content-link-checker.js

@@ -288,6 +288,12 @@ async function main(core, octokit, uploadArtifact, opts = {}) {
         )
       }
     }
+  } else {
+    // It might be that the PR got a comment about >0 flaws before,
+    // and now it can update that comment to say all is well again.
+    if (shouldComment) {
+      await commentOnPR(core, octokit, flaws, opts)
+    }
   }
 }
 
@@ -327,7 +333,7 @@ async function linkReports(core, octokit, newReport, opts) {
 
   const [owner, repo] = reportRepository.split('/')
 
-  core.debug('Attempting to link reports...')
+  core.info('Attempting to link reports...')
   // Find previous broken link report issue
   let previousReports
   try {
@@ -346,7 +352,7 @@ async function linkReports(core, octokit, newReport, opts) {
     core.setFailed('Error listing issues for repo')
     throw error
   }
-  core.debug(`Found ${previousReports.length} previous reports`)
+  core.info(`Found ${previousReports.length} previous reports`)
 
   if (previousReports.length <= 1) {
     core.info('No previous reports to link to')
@@ -422,10 +428,48 @@ async function commentOnPR(core, octokit, flaws, opts) {
     return
   }
 
+  const findAgainSymbol = '<!-- rendered-content-link-checker-comment-finder -->'
+
   const body = flawIssueDisplay(flaws, opts, false)
+
+  const { data } = await octokit.rest.issues.listComments({
+    owner,
+    repo,
+    issue_number: pullNumber,
+  })
+  let previousCommentId
+  for (const { body, id } of data) {
+    if (body.includes(findAgainSymbol)) {
+      previousCommentId = id
+    }
+  }
+
   // Since failed external urls aren't included in PR comment, body may be empty
   if (!body) {
     core.info('No flaws qualify for comment')
+
+    if (previousCommentId) {
+      const nothingComment = 'Previous broken links comment now moot. 👌😙'
+      await octokit.rest.issues.updateComment({
+        owner,
+        repo,
+        comment_id: previousCommentId,
+        body: `${nothingComment}\n\n${findAgainSymbol}`,
+      })
+      core.info(`Updated comment on PR: ${pullNumber} (${previousCommentId})`)
+    }
+    return
+  }
+
+  if (previousCommentId) {
+    const noteComment = '(*The original automated comment was updated*)'
+    await octokit.rest.issues.updateComment({
+      owner,
+      repo,
+      comment_id: previousCommentId,
+      body: `${body}\n\n${noteComment}\n\n${findAgainSymbol}`,
+    })
+    core.info(`Updated comment on PR: ${pullNumber} (${previousCommentId})`)
     return
   }
 
@@ -434,7 +478,7 @@ async function commentOnPR(core, octokit, flaws, opts) {
       owner,
       repo,
       issue_number: pullNumber,
-      body,
+      body: `${body}\n\n${findAgainSymbol}`,
     })
     core.info(`Created comment on PR: ${pullNumber}`)
   } catch (error) {

.github/actions/node-npm-setup/action.yml

@@ -7,9 +7,10 @@ runs:
   steps:
     - name: Cache node_modules
       uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7
+      id: cache-node_modules
       with:
         path: node_modules
-        key: ${{ runner.os }}-node_modules-${{ hashFiles('package*.json') }}
+        key: ${{ runner.os }}-node_modules-${{ hashFiles('package*.json') }}-${{ hashFiles('.github/actions/node-npm-setup/action.yml') }}
 
     - name: Setup Node.js
       uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516
@@ -18,5 +19,6 @@ runs:
         cache: npm
 
     - name: Install dependencies
+      if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
       shell: bash
-      run: npm install --prefer-offline --no-audit --ignore-scripts
+      run: npm ci

.github/workflows/test.yml

@@ -49,6 +49,7 @@ jobs:
               'routing',
               'unit',
               'linting',
+              'rendering-fixtures',
             ];
             if (context.payload.repository.full_name === 'github/docs-internal') {
               all.push('translations');
@@ -110,6 +111,10 @@ jobs:
           .github/actions-scripts/merge-early-access.sh
           rm -fr docs-early-access
 
+      - name: Check the test fixture data (if applicable)
+        if: ${{ matrix.test-group == 'rendering-fixtures' }}
+        run: ./script/copy-fixture-data.js --check
+
       - name: Clone all translations
         if: ${{ matrix.test-group == 'translations' }}
         uses: ./.github/actions/clone-translations
@@ -172,4 +177,5 @@ jobs:
           # tests run only in English. The exception is the
           # `tests/translations/` suite which needs all languages to be set up.
           ENABLED_LANGUAGES: ${{ matrix.test-group == 'translations' && 'all' || '' }}
+          ROOT: ${{ matrix.test-group == 'rendering-fixtures' && 'tests/fixtures' || ''}}
         run: npm test -- tests/${{ matrix.test-group }}/

components/article/ArticlePage.tsx

@@ -47,7 +47,7 @@ export const ArticlePage = () => {
       <ClientSideHighlight />
       {router.pathname.includes('/rest/') && <RestRedirect />}
       <div className="container-xl px-3 px-md-6 my-4">
-        <div className={cx('my-3 mr-auto width-full')} data-search="breadcrumbs">
+        <div className={cx('my-3 mr-auto width-full')}>
           <Breadcrumbs />
         </div>
         <ArticleGridLayout

components/context/ProductLandingContext.tsx

@@ -45,7 +45,8 @@ export type ProductLandingContextT = {
   productUserExamples: Array<{ username: string; description: string }>
   productCommunityExamples: Array<{ repo: string; description: string }>
   featuredArticles: Array<{
-    label: string // Guides
+    key: string // Featured article section key (startHere, popular, etc.)
+    label: string // Start here, Popular, etc.
     viewAllHref?: string // If provided, adds a "View All ->" to the header
     viewAllTitleText?: string // Adds 'title' attribute text for the "View All" href
     articles: Array<FeaturedLink>
@@ -133,16 +134,17 @@ export const getProductLandingContextFromRequest = async (
 
     featuredArticles: Object.entries(req.context.featuredLinks || [])
       .filter(([key]) => {
-        return key === 'guides' || key === 'popular' || key === 'videos'
+        return key === 'startHere' || key === 'popular' || key === 'videos'
       })
       .map(([key, links]: any) => {
         return {
+          key,
           label:
             key === 'popular' || key === 'videos'
               ? req.context.page.featuredLinks[key + 'Heading'] || req.context.site.data.ui.toc[key]
               : req.context.site.data.ui.toc[key],
           viewAllHref:
-            key === 'guides' && !req.context.currentCategory && hasGuidesPage
+            key === 'startHere' && !req.context.currentCategory && hasGuidesPage
               ? `${req.context.currentPath}/guides`
               : '',
           articles: links.map((link: any) => {

components/hooks/useNumberFormatter.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+
+export function useNumberFormatter() {
+  const { locale } = useRouter()
+  return {
+    formatInteger: (num: number) => {
+      return new Intl.NumberFormat(locale).format(num)
+    },
+  }
+}

components/landing/FeaturedArticles.tsx

@@ -12,6 +12,8 @@ export const FeaturedArticles = () => {
   return (
     <div className="d-lg-flex gutter my-6 py-6">
       {featuredArticles.map((section, i) => {
+        const viewAllTitleText =
+          section.key === 'startHere' ? `All '${section.label}' content` : `All ${section.label}`
         return (
           <div
             key={section.label + i}
@@ -20,7 +22,7 @@ export const FeaturedArticles = () => {
             <ArticleList
               title={section.label}
               viewAllHref={section.viewAllHref}
-              {...(section.viewAllHref ? { viewAllTitleText: `All ${section.label}` } : {})}
+              {...(section.viewAllHref ? { viewAllTitleText } : {})}
               articles={section.articles}
             />
           </div>

components/landing/ProductLanding.tsx

@@ -34,7 +34,7 @@ export const ProductLanding = () => {
       <div data-search="article-body">
         {router.query.productId === 'rest' && <RestRedirect />}
         <LandingSection className="pt-3">
-          <div className={cx('my-3 mr-auto width-full')} data-search="breadcrumbs">
+          <div className={cx('my-3 mr-auto width-full')}>
             <Breadcrumbs />
           </div>
           <LandingHero />

components/landing/TocLanding.tsx

@@ -38,7 +38,7 @@ export const TocLanding = () => {
       <ClientSideRedirects />
 
       <div className="container-xl px-3 px-md-6 my-4">
-        <div className={cx('my-3 mr-auto width-full')} data-search="breadcrumbs">
+        <div className={cx('my-3 mr-auto width-full')}>
           <Breadcrumbs />
         </div>
         <ArticleGridLayout>

components/rest/RestOperation.tsx

@@ -7,12 +7,13 @@ import { LinkIconHeading } from 'components/article/LinkIconHeading'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { RestPreviewNotice } from './RestPreviewNotice'
-import styles from './RestOperation.module.scss'
 import { ParameterTable } from 'components/parameter-table/ParameterTable'
 import { RestCodeSamples } from './RestCodeSamples'
 import { RestStatusCodes } from './RestStatusCodes'
 import { Operation } from './types'
 
+import styles from './RestOperation.module.scss'
+
 type Props = {
   operation: Operation
 }

components/rest/RestStatusCodes.tsx

@@ -1,7 +1,4 @@
-import cx from 'classnames'
-
 import { useTranslation } from 'components/hooks/useTranslation'
-import styles from './RestOperation.module.scss'
 import { StatusCode } from './types'
 
 type Props = {
@@ -18,7 +15,7 @@ export function RestStatusCodes({ statusCodes, slug }: Props) {
         <a href={`#${slug}--status-codes`}>{t('rest.reference.http_status_code')}</a>
       </h3>
 
-      <table className={cx(styles.restResponseTable, 'd-block')}>
+      <table>
         <thead>
           <tr className="text-left">
             <th>{t('rest.reference.status_code')}</th>

components/search/SearchResults.module.scss

@@ -0,0 +1,8 @@
+.search_result {
+  mark {
+    background-color: transparent;
+    font-weight: bold;
+  }
+
+  word-wrap: break-word;
+}