[AsciidocTemplate] add banner that alerts users to viewing an English…

… page that hasn’t been translated
adoptium · Sep 12, 2023 · 14e7518 · 14e7518
1 parent a442986
commit 14e7518
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/src/templates/__tests__/asciidoc.test.tsx b/src/templates/__tests__/asciidoc.test.tsx
@@ -43,30 +43,44 @@ describe('Asciidoc pages', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('renders correctly - no warning translation is up-to-date', () => {
-    let noWarningMockData = createAsciidocData();
-    noWarningMockData.asciidoc.pageAttributes.based_on = '1234567890';
+  it('renders correctly - no warning when translation is up-to-date', () => {
+    let customMockData = createAsciidocData();
+    customMockData.asciidoc.pageAttributes.based_on = '1234567890';
 
-    let noWarningPageContext = {
+    let customPageContext = {
       locale: 'fr',
+      language: 'fr',
       defaultGitSHA: '1234567890',
     }
 
-    const { container } = render(<AllAsciidocPages data={noWarningMockData} pageContext={noWarningPageContext} />);
+    const { container } = render(<AllAsciidocPages data={customMockData} pageContext={customPageContext} />);
 
     expect(container.getElementsByClassName('alert-warning').length).toBe(0);
   });
 
-  it('renders correctly - display warning translation is outdated', () => {
-    let warningMockData = createAsciidocData();
-    warningMockData.asciidoc.pageAttributes.based_on = '0987654321';
+  it('renders correctly - display warning when translation is outdated', () => {
+    let customMockData = createAsciidocData();
+    customMockData.asciidoc.pageAttributes.based_on = '0987654321';
 
-    let warningPageContext = {
+    let customPageContext = {
       locale: 'fr',
+      language: 'fr',
       defaultGitSHA: '1234567890',
     }
 
-    const { container } = render(<AllAsciidocPages data={warningMockData} pageContext={warningPageContext} />);
+    const { container } = render(<AllAsciidocPages data={customMockData} pageContext={customPageContext} />);
+
+    expect(container.getElementsByClassName('alert-warning').length).toBe(1);
+  });
+
+  it('renders correctly - display warning when translation is the default one', () => {
+    let customPageContext = {
+      locale: 'en',
+      language: 'fr',
+      defaultGitSHA: '1234567890',
+    }
+
+    const { container } = render(<AllAsciidocPages data={mockData} pageContext={customPageContext} />);
 
     expect(container.getElementsByClassName('alert-warning').length).toBe(1);
   });

diff --git a/src/templates/asciidocTemplate.tsx b/src/templates/asciidocTemplate.tsx
@@ -23,7 +23,10 @@ const AsciidocTemplate = ({ data, pageContext }) => {
   const pageAuthorList = pageAttributes.authors || ''
   const basedOnSha = pageAttributes.based_on || ''
   const { relativePath, slug } = fields
-  const { defaultGitSHA, locale } = pageContext
+  const { defaultGitSHA, locale, language } = pageContext
+
+  const displayDefaultLocaleWarning = locale !== language;  // because the version in the 'language' doesn't exist
+  const displayOutdatedWarning = basedOnSha && defaultGitSHA !== basedOnSha;
 
   return (
     <Layout>
@@ -34,7 +37,15 @@ const AsciidocTemplate = ({ data, pageContext }) => {
           </div>
           <div className='asciidoc col-lg-6 col-md-12'>
             <h1 className='pb-4 fw-light text-center' dangerouslySetInnerHTML={{ __html: document.title }} />
-            {basedOnSha && defaultGitSHA !== basedOnSha && (
+            {displayDefaultLocaleWarning && (
+              <div className='alert alert-warning'>
+                <i className='fas fa-exclamation-triangle' />
+                This page is the <a target='_blank' rel='noopener noreferrer' href={`https://github.com/adoptium/adoptium.net/blob/${basedOnSha}/content/asciidoc-pages/${relativePath.replace(`.${locale}`, '')}`}>the English version</a> because it is not available in your language.
+                Please help us by translating this page to match the <a target='_blank' rel='noopener noreferrer' href={`https://github.com/adoptium/adoptium.net/blob/main/content/asciidoc-pages/${relativePath.replace(`.${locale}`, '')}`}>latest version of the English page</a>.
+                See our <a target='_blank' rel='noopener noreferrer' href='https://github.com/adoptium/adoptium.net/tree/main/content/asciidoc-pages#localising-documentation'>translation guide</a> for more information.
+              </div>
+            )}
+            {displayOutdatedWarning && (
               <div className='alert alert-warning'>
                 <i className='fas fa-exclamation-triangle' />
                 This localized page is based on a <a target='_blank' rel='noopener noreferrer' href={`https://github.com/adoptium/adoptium.net/blob/${basedOnSha}/content/asciidoc-pages/${relativePath.replace(`.${locale}`, '')}`}>previous version of the English page</a> and might be inaccurate.