Merge pull request #33460 from github/repo-sync

Repo sync

Author: docs-bot

src/events/components/Survey.tsx

@@ -82,6 +82,13 @@ export const Survey = () => {
     }
   }, [email])
 
+  useEffect(() => {
+    if (state === ViewState.NEXT && data?.comment !== comment.trim()) {
+      setState(ViewState.START)
+      setIsEmailError(false)
+    }
+  }, [comment])
+
   const { data, error, isLoading } = useSWR(
     state === ViewState.NEXT && comment.trim() ? '/api/events/survey/preview/v1' : null,
     async (url: string) => {
@@ -107,7 +114,7 @@ export const Survey = () => {
     },
   )
 
-  const hasPreview = !!data && !error
+  const hasPreview = !!data && !error && ViewState.NEXT
 
   function submit(evt: React.FormEvent) {
     evt.preventDefault()

src/events/middleware.js

@@ -94,7 +94,7 @@ router.post(
 
     const { rating, signals } = await analyzeComment(comment, locale)
 
-    res.json({ rating })
+    res.json({ rating, comment })
 
     tags.push(...signals.map((signal) => `signal:${signal}`))
     statsd.increment('events.survey_preview.signals', 1, tags)

src/fixtures/fixtures/translations/ja-jp/content/get-started/start-your-journey/hello-world.md

@@ -23,3 +23,11 @@ recover from it.
 ## Use of a reusable that might have auto-title links
 
 {% data reusables.gated-features.more-info %}
+
+If you type in "bar" into Google Translate (English to Japanese)
+you get "バー". The translation guidelines says that when you're
+mentioning an English word, you should leave it and translate it
+using the same character composition used for regular Markdown
+links. Here's one such example:
+
+[[Bar](バー)](/get-started/foo/bar)

src/fixtures/tests/playwright-rendering.spec.ts

@@ -579,6 +579,53 @@ test.describe('survey', () => {
     await page.getByTestId('product-sidebar').getByLabel('Bar', { exact: true }).click()
     await expect(page.locator('[for=survey-comment]')).not.toBeVisible()
   })
+
+  test('add survey comment, then modify the survey comment', async ({ page }) => {
+    let fulfilled = 0
+    // Important to set this up *before* interacting with the page
+    // in case of possible race conditions.
+    await page.route('**/api/events', (route, request) => {
+      route.fulfill({})
+      expect(request.method()).toBe('POST')
+      fulfilled++
+      // At the time of writing you can't get the posted payload
+      // when you use `navigator.sendBeacon(url, data)`.
+      // So we can't make assertions about the payload.
+      // See https://github.com/microsoft/playwright/issues/12231
+    })
+
+    await page.goto('/get-started/foo/for-playwright')
+
+    // The label is visually an SVG. Finding it by its `for` value feels easier.
+    await page.locator('[for=survey-yes]').click()
+    await expect(page.getByRole('button', { name: 'Next' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).not.toBeVisible()
+
+    await page.locator('[for=survey-comment]').click()
+    await page.locator('[for=survey-comment]').fill('This is a comment')
+    await page.getByRole('button', { name: 'Next' }).click()
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).not.toBeVisible()
+
+    await page.locator('[for=survey-comment]').click()
+    await page.locator('[for=survey-comment]').fill('This is a modified comment')
+    // The "Send" button should no longer be visible
+    // and the "Next" button should be visible
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).not.toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).toBeVisible()
+    await page.getByRole('button', { name: 'Next' }).click()
+    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Send' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Next' })).not.toBeVisible()
+
+    await page.getByRole('button', { name: 'Send' }).click()
+    // One for the page view event, one for the thumbs up click, one for
+    // the submission.
+    expect(fulfilled).toBe(1 + 2)
+    await expect(page.getByTestId('survey-end')).toBeVisible()
+  })
 })
 
 test.describe('rest API reference pages', () => {

src/fixtures/tests/translations.js

@@ -103,4 +103,21 @@ describe('translations', () => {
     const stillAutotitle = texts.filter((text) => /autotitle/i.test(text))
     expect(stillAutotitle.length).toBe(0)
   })
+
+  test('markdown link looking constructs inside links', async () => {
+    // On this page, the translators had written:
+    //
+    //   [[Bar](バー)](/get-started/foo/bar)
+    //
+    // which needs to become:
+    //
+    //   <a href="/ja/get-started/foo/bar">[Bar](バー)</a>
+    const $ = await getDOM('/ja/get-started/start-your-journey/hello-world')
+    const links = $('#article-contents a[href]')
+    const texts = links
+      .filter((i, element) => $(element).attr('href').includes('get-started/foo/bar'))
+      .map((i, element) => $(element).text())
+      .get()
+    expect(texts.includes('[Bar] (バー)')).toBeTruthy()
+  })
 })

src/languages/lib/correct-translation-content.js

@@ -77,6 +77,38 @@ export function correctTranslatedContentStrings(content, englishContent, context
       '- % data variables.product.prodname_copilot_enterprise %}',
       '- {% data variables.product.prodname_copilot_enterprise %}',
     )
+
+    // This might not be exclusive to Japanese but put here because, at
+    // the time of writing, it only happens on the Japanse translations.
+    // According to the Microsoft translation guidelines, they're not
+    // supposed to translate words that will be seen in the UI, but
+    // instead mention then like this:
+    //
+    //    [Save changes](THE TRANSLATION OF "Save changes" IN JAPANESE)
+    //
+    // The problem is when these are wrapped in a deliberate Markdown link.
+    // For example:
+    //
+    //    [[Save changes](THE TRANSLATION OF "Save changes" IN JAPANESE)](#some-section)
+    //
+    // A real observed example is:
+    //
+    //    [[Allow deletions](削除を許可)](#allow-deletions)
+    //
+    // Here, because "削除を許可" contains no spaces, the Markdown parser
+    // thinks "削除を許可" is the URL! But in actuality,
+    // `[Allow deletions](削除を許可)` is the text and `#allow-deletions`
+    // is the URL.
+    // This problem does not exhibit if the text "削除を許可" were to contain
+    // a space character. But we can't assume that we can just add a space.
+    // For example "削除 を許可" would be incorrect. And where do you put the
+    // space? Between which characters.
+    // Instead, we can inject a "hair space" whitespace character between
+    // the `]` and the `(`. Then, the Markdown processor does not get confused
+    // and the link is rendered correctly.
+    // The `\u200A` is the "hair space" character. Technically whitespace
+    // but not wide enough to visually appear as a space.
+    content = content.replace(/\[(\[.*?\])(\(\S+\)\]\()/g, '[$1\u200A$2')
   }
 
   if (context.code === 'zh') {