feat: Documentation URL in GithubDetails

src/components/shared/TaskDetails/Details.tsx

@@ -53,29 +53,47 @@ 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 repoPath = git_remote_url
+      .replace(/^https:\/\/github\.com\//, "")
+      .replace(/\.git$/, "");
+
+    const buildGitHubUrl = (filePath: string) => {
+      const url = new URL(`https://github.com`);
+      url.pathname = [
+        repoPath,
+        "blob",
+        git_remote_branch,
+        git_relative_dir,
+        filePath,
+      ].join("/");
+      return url.toString();
+    };
+
+    if (!url && typeof component_yaml_path === "string") {
+      reconstructedUrl = buildGitHubUrl(component_yaml_path);
+    }
+
+    if (typeof documentation_path === "string") {
+      documentationUrl = buildGitHubUrl(documentation_path);
     }
   }
 
@@ -109,6 +127,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,44 +14,73 @@ 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 && (
-        <>
-          <Link href={url} {...linkProps}>
-            View raw component.yaml
-          </Link>
+    <BlockStack className={className} gap="2">
+      {!!hasUrl && (
+        <BlockStack>
+          <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>
+            </>
+          )}
+        </BlockStack>
       )}
-      {canonicalUrl && (
-        <>
-          <Link href={canonicalUrl} {...linkProps}>
-            View canonical URL
+      {!!documentationUrl && (
+        <BlockStack>
+          <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>
-        </>
+        </BlockStack>
       )}
     </BlockStack>
   );