feat: Add documentation URL to GithubDetails

Author: Volv-G

src/components/shared/TaskDetails/Details.tsx

@@ -50,29 +50,35 @@ const TaskDetailsInternal = ({
 
   const canonicalUrl =
     hydratedComponentRef.spec.metadata?.annotations?.canonical_location;
+
+  // Try reconstruct URLs from componentSpec.metadata.annotations
+  const annotations = hydratedComponentRef.spec.metadata?.annotations || {};
+  const {
+    git_remote_url,
+    git_remote_branch,
+    git_relative_dir,
+    component_yaml_path,
+    documentation_path,
+  } = annotations;
+
   let reconstructedUrl;
-  if (!url) {
-    // Try reconstruct the url from componentSpec.metadata.annotations
-    const annotations = hydratedComponentRef.spec.metadata?.annotations || {};
-    const {
-      git_remote_url,
-      git_remote_branch,
-      git_relative_dir,
-      component_yaml_path,
-    } = annotations;
-
-    if (
-      typeof git_remote_url === "string" &&
-      typeof git_remote_branch === "string" &&
-      typeof git_relative_dir === "string" &&
-      typeof component_yaml_path === "string"
-    ) {
-      reconstructedUrl = `https://github.com/${git_remote_url
-        .replace(/^https:\/\/github\.com\//, "")
-        .replace(
-          /\.git$/,
-          "",
-        )}/blob/${git_remote_branch}/${git_relative_dir}/${component_yaml_path}`;
+  let documentationUrl;
+
+  if (
+    typeof git_remote_url === "string" &&
+    typeof git_remote_branch === "string" &&
+    typeof git_relative_dir === "string"
+  ) {
+    const gitHubBaseUrl = `https://github.com/${git_remote_url
+      .replace(/^https:\/\/github\.com\//, "")
+      .replace(/\.git$/, "")}/blob/${git_remote_branch}/${git_relative_dir}`;
+
+    if (!url && typeof component_yaml_path === "string") {
+      reconstructedUrl = `${gitHubBaseUrl}/${component_yaml_path}`;
+    }
+
+    if (typeof documentation_path === "string") {
+      documentationUrl = `${gitHubBaseUrl}/${documentation_path}`;
     }
   }
 
@@ -106,6 +112,7 @@ const TaskDetailsInternal = ({
       <GithubDetails
         url={url && url.length > 0 ? url : reconstructedUrl}
         canonicalUrl={canonicalUrl}
+        documentationUrl={documentationUrl}
         className={BASE_BLOCK_CLASS}
       />
 

src/components/shared/TaskDetails/GithubDetails.tsx

@@ -14,42 +14,71 @@ const linkProps = {
 export function GithubDetails({
   url,
   canonicalUrl,
+  documentationUrl,
   className,
 }: {
   url?: string;
   canonicalUrl?: string;
+  documentationUrl?: string;
   className?: string;
 }) {
-  if (!url && !canonicalUrl) return null;
+  const hasUrl = url || canonicalUrl;
+
+  if (!hasUrl && !documentationUrl) return null;
 
   return (
     <BlockStack className={className}>
-      <Heading level={3}>URL</Heading>
-      {url && (
+      {hasUrl && (
         <>
-          <Link href={url} {...linkProps}>
-            View raw component.yaml
-          </Link>
+          <Heading level={3}>URL</Heading>
+          {url && (
+            <>
+              <Link href={url} {...linkProps}>
+                View raw component.yaml
+              </Link>
 
-          <Link
-            href={isGithubUrl(url) ? convertGithubUrlToDirectoryUrl(url) : url}
-            {...linkProps}
-          >
-            View directory on GitHub
-          </Link>
+              <Link
+                href={
+                  isGithubUrl(url) ? convertGithubUrlToDirectoryUrl(url) : url
+                }
+                {...linkProps}
+              >
+                View directory on GitHub
+              </Link>
+            </>
+          )}
+          {canonicalUrl && (
+            <>
+              <Link href={canonicalUrl} {...linkProps}>
+                View canonical URL
+              </Link>
+
+              <Link
+                href={convertGithubUrlToDirectoryUrl(canonicalUrl)}
+                {...linkProps}
+              >
+                View canonical URL on GitHub
+              </Link>
+            </>
+          )}
         </>
       )}
-      {canonicalUrl && (
+      {documentationUrl && (
         <>
-          <Link href={canonicalUrl} {...linkProps}>
-            View canonical URL
+          <Heading level={3}>Documentation</Heading>
+          <Link href={documentationUrl} {...linkProps}>
+            View documentation
           </Link>
 
           <Link
-            href={convertGithubUrlToDirectoryUrl(canonicalUrl)}
+            href={
+              isGithubUrl(documentationUrl)
+                ? convertGithubUrlToDirectoryUrl(documentationUrl)
+                : documentationUrl
+            }
             {...linkProps}
           >
-            View canonical URL on GitHub
+            View directory on GitHub
           </Link>
         </>
       )}