From 7ef0b105b2b08893e64f56288292828b6c85dd1f Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:27:53 +0200
Subject: [PATCH] [docs-infra] Add link to the source in API page if available
 (#43387)

---
 docs/src/modules/components/ApiPage.tsx         | 17 +++++++++++++++--
 .../ComponentLinkHeader/ComponentLinkHeader.tsx |  2 +-
 .../mui-docs/src/translations/translations.json |  2 ++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/docs/src/modules/components/ApiPage.tsx b/docs/src/modules/components/ApiPage.tsx
index d3aab5ed9d85ba..19ec201baa713d 100644
--- a/docs/src/modules/components/ApiPage.tsx
+++ b/docs/src/modules/components/ApiPage.tsx
@@ -47,7 +47,8 @@ type ApiHeaderKeys =
   | 'inheritance'
   | 'slots'
   | 'classes'
-  | 'css';
+  | 'css'
+  | 'source-code';
 
 export function getTranslatedHeader(t: Translate, header: ApiHeaderKeys) {
   const translations = {
@@ -59,6 +60,7 @@ export function getTranslatedHeader(t: Translate, header: ApiHeaderKeys) {
     slots: t('api-docs.slots'),
     classes: t('api-docs.classes'),
     css: t('api-docs.css'),
+    'source-code': t('api-docs.source-code'),
   };
 
   // TODO Drop runtime type-checking once we type-check this file
@@ -202,7 +204,8 @@ export default function ApiPage(props: ApiPageProps) {
     getPropertiesToC({ properties: propertiesDef, hash: 'props', t }),
     ...(componentSlots?.length > 0 ? [createTocEntry('slots')] : []),
     ...getClassesToC({ classes: classesDef, t }),
-  ].filter(Boolean);
+    pageContent.filename ? createTocEntry('source-code') : null,
+  ].filter((item): item is TableOfContentsParams => Boolean(item));
 
   // The `ref` is forwarded to the root element.
   let refHint = t('api-docs.refRootElement');
@@ -360,6 +363,16 @@ export default function ApiPage(props: ApiPageProps) {
           layoutStorageKey={layoutStorageKey.classes}
           displayClassKeys
         />
+
+        <Heading hash="source-code" level="h2" />
+        <p
+          dangerouslySetInnerHTML={{
+            __html: t('api-docs.seeSourceCode').replace(
+              '{{href}}',
+              `${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${pageContent.filename}`,
+            ),
+          }}
+        />
       </MarkdownElement>
       <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
         <symbol id="anchor-link-icon" viewBox="0 0 12 6">
diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
index 18ef4ad1ea7777..224690db38440a 100644
--- a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
+++ b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
@@ -107,7 +107,7 @@ export function ComponentLinkHeader(props: ComponentLinkHeaderProps) {
             size="small"
             variant="outlined"
             rel="nofollow"
-            href={`${process.env.SOURCE_CODE_REPO}/tree/${process.env.SOURCE_GITHUB_BRANCH}/${headers.githubSource}`}
+            href={`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}/${headers.githubSource}`}
             icon={<GitHubIcon />}
             data-ga-event-category="ComponentLinkHeader"
             data-ga-event-action="click"
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
index 5c4dfc2a14b24a..b12d0d96fdaf77 100644
--- a/packages/mui-docs/src/translations/translations.json
+++ b/packages/mui-docs/src/translations/translations.json
@@ -45,6 +45,7 @@
     "refNotHeld": "The component cannot hold a ref.",
     "refRootElement": "The <code>ref</code> is forwarded to the root element.",
     "ruleName": "Rule name",
+    "seeSourceCode": "If you did not find the information in this page, consider having a look at the <a href=\"{{href}}\">implementation of the component</a> for more detail.",
     "signature": "Signature",
     "slots": "Slots",
     "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
@@ -52,6 +53,7 @@
     "styleOverrides": "The name <code>{{componentStyles.name}}</code> can be used when providing <a href={{defaultPropsLink}}>default props</a> or <a href={{styleOverridesLink}}>style overrides</a> in the theme.",
     "slotDescription": "To learn how to customize the slot, check out the <a href={{slotGuideLink}}>Overriding component structure</a> guide.",
     "slotName": "Slot name",
+    "source-code": "Source code",
     "type": "Type",
     "required": "Required",
     "optional": "Optional",