Merge pull request #3239 from pdcp1/fix/view-original-link

Fix fallback blog page without translation
responsible-ai-collaborative · Nov 22, 2024 · 01e4b2b · 01e4b2b
2 parents 872ba50 + 7fd570c
commit 01e4b2b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 3 deletions.
diff --git a/site/gatsby-site/playwright/e2e/translationBadge.spec.ts b/site/gatsby-site/playwright/e2e/translationBadge.spec.ts
@@ -9,6 +9,12 @@ test.describe('Translation Badges', () => {
     await expect(page.locator('a', { hasText: 'Ver Original' })).toHaveAttribute('href', '/blog/using-ai-to-connect-ai-incidents/');
   });
 
+  test('Should not be visible on Prismic blog post without translation', async ({ page }) => {
+    await page.goto('/es/blog/ai-incident-journalism-analysis');
+    await expect(page.locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).not.toBeVisible();
+    await expect(page.locator('a', { hasText: 'Ver Original' })).not.toBeVisible();
+  });
+
   test('Should be visible on the discover app', async ({ page, skipOnEmptyEnvironment }) => {
     await page.goto('/es/apps/discover?display=details&incident_id=1&page=1&source_domain=today.com');
     await expect(page.locator('[data-cy="5d34b8c29ced494f010ed45c"]').locator('[data-cy="translation-badge"]').getByText('Traducido por IA')).toBeVisible();

diff --git a/site/gatsby-site/src/components/blog/PrismicBlogPost.js b/site/gatsby-site/src/components/blog/PrismicBlogPost.js
@@ -61,7 +61,7 @@ const PrismicBlogPost = ({ post, location }) => {
         {post.data.aitranslated && (
           <>
             <TranslationBadge className="ml-2" />
-            <Link className="ml-2" to={post.data.slug}>
+            <Link className="mx-2" to={`/blog/${post.data.slug}`}>
               <Trans>View Original</Trans>
             </Link>
           </>

diff --git a/site/gatsby-site/src/templates/post.js b/site/gatsby-site/src/templates/post.js
@@ -59,7 +59,7 @@ export default function Post(props) {
         {mdx.frontmatter.aiTranslated && (
           <>
             <TranslationBadge className="ml-2" />
-            <Link className="ml-2" to={mdx.frontmatter.slug}>
+            <Link className="mx-2" to={mdx.frontmatter.slug}>
               <Trans>View Original</Trans>
             </Link>
           </>

diff --git a/site/gatsby-site/src/templates/prismicBlogPost.js b/site/gatsby-site/src/templates/prismicBlogPost.js
@@ -1,12 +1,28 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import PrismicBlogPost from 'components/blog/PrismicBlogPost';
+import { Link } from 'gatsby';
 import HeadContent from 'components/HeadContent';
+import { Trans } from 'react-i18next';
 
 export default function BlogPost(props) {
   const post = props?.data?.post;
 
-  return <>{post && <PrismicBlogPost post={post} location={props.location} />}</>;
+  const originalPost = props?.data?.originalPost;
+
+  if (post) {
+    return <PrismicBlogPost post={post} location={props.location} />;
+  } else if (originalPost) {
+    return <PrismicBlogPost post={originalPost} location={props.location} />;
+  } else if (props?.pageContext?.originalPath) {
+    return (
+      <Link className="mx-2" to={`${props.pageContext.originalPath}`}>
+        <Trans>View Original</Trans>
+      </Link>
+    );
+  } else {
+    return <></>;
+  }
 }
 
 export const Head = (props) => {
@@ -58,5 +74,29 @@ export const pageQuery = graphql`
         author
       }
     }
+    originalPost: prismicBlog(data: { language: { eq: "en" }, slug: { eq: $slug } }) {
+      uid
+      data {
+        metatitle
+        metadescription
+        slug
+        aitranslated
+        language
+        title {
+          text
+        }
+        content {
+          richText
+          text
+          html
+        }
+        image {
+          url
+          gatsbyImageData
+        }
+        date
+        author
+      }
+    }
   }
 `;