Provide link to /src from Inspector (#2218)

OpenFn · Jun 25, 2024 · 9423bd7 · 9423bd7
1 parent 269b7d4
commit 9423bd7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,8 @@ and this project adheres to
 
 ### Added
 
+- Link to adaptor `/src` from inspector.
+
 ### Changed
 
 - Reverted behaviour on "Rerun from here" to select the Log tab.

diff --git a/assets/js/adaptor-docs/components/DocsPanel.tsx b/assets/js/adaptor-docs/components/DocsPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import type { PackageDescription } from '@openfn/describe-package';
 import useDocs from '../hooks/useDocs';
 import Function from './render/Function';
@@ -8,19 +8,40 @@ type DocsPanelProps = {
   onInsert?: (text: string) => void;
 };
 
-const docsLink = (
-  <p>
-    You can check the external docs site at
-    <a
-      className="text-indigo-400 underline underline-offset-2 hover:text-indigo-500 ml-2"
-      href="https://docs.openfn.org/adaptors/#where-to-find-them."
-      target="none"
-    >
-      docs.openfn.org/adaptors
-    </a>
-    .
-  </p>
-);
+const DocsLink = ({ specifier }: { specifier: string }) => {
+  const { name, version } = useCallback(() => {
+    const strippedName = specifier.replace(/^@openfn\/language-/, '');
+    const [name, version] = strippedName.split('@');
+    return { name, version };
+  }, [specifier])();
+
+  const srcLink = `https://github.com/OpenFn/adaptors/tree/%40openfn/language-${name}%40${version}/packages/${name}/src`;
+
+  return (
+    <div className="mb-2 text-sm">
+      <div>
+        External docs:
+        <a
+          className="text-indigo-400 underline underline-offset-2 hover:text-indigo-500 ml-2"
+          href={`https://docs.openfn.org/adaptors/packages/${name}-docs`}
+          target="_blank"
+        >
+          docs.openfn.org
+        </a>
+      </div>
+      <div>
+        Source code:
+        <a
+          className="text-indigo-400 underline underline-offset-2 hover:text-indigo-500 ml-2"
+          href={srcLink}
+          target="_blank"
+        >
+          github.com/OpenFn/adaptors
+        </a>
+      </div>
+    </div>
+  );
+};
 
 const DocsPanel = ({ specifier, onInsert }: DocsPanelProps) => {
   if (!specifier) {
@@ -34,31 +55,37 @@ const DocsPanel = ({ specifier, onInsert }: DocsPanelProps) => {
   }
   if (pkg === false) {
     return (
-      <div className="block m-2">
-        <p>Sorry, an error occurred loading the docs for this adaptor.</p>
-        {docsLink}
-      </div>
+      <>
+        <DocsLink specifier={specifier} />
+        <div className="block m-2">
+          <p>An error occurred loading the docs for this adaptor.</p>
+        </div>
+      </>
     );
   }
 
   const { name, version, functions } = pkg as PackageDescription;
+
   if (functions.length === 0) {
     return (
       <div className="block m-2">
         <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">
           {name} ({version})
         </h1>
-        <p>Sorry, docs are unavailable for this adaptor.</p>
-        {docsLink}
+        <DocsLink specifier={specifier} />
+        <p>Docs are unavailable for this adaptor.</p>
       </div>
     );
   }
 
   return (
     <div className="block w-full overflow-auto ml-1">
-      <h1 className="h1 text-lg font-bold text-secondary-700 mb-2">
-        {name} ({version})
+      <h1 className="h1 text-lg font-bold text-secondary-700 mb-2 flex justify-between items-center">
+        <span>
+          {name} ({version})
+        </span>
       </h1>
+      <DocsLink specifier={specifier} />
       <div className="text-sm mb-4">
         These are the operations available for this adaptor:
       </div>