Fix doc links/loading (#10621)

airbytehq · Mar 5, 2022 · 3f14493 · 3f14493
1 parent d424325
commit 3f14493
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 32 deletions.
diff --git a/airbyte-webapp/src/hooks/services/useDocumentation.ts b/airbyte-webapp/src/hooks/services/useDocumentation.ts
@@ -9,9 +9,20 @@ export const documentationKeys = {
   text: (integrationUrl: string) => ["document", integrationUrl] as const,
 };
 
-const DOCS_URL = "https://docs.airbyte.io";
+const DOCS_URL = /^https:\/\/docs\.airbyte\.(io|com)/;
 
-const useDocumentation = (documentationUrl: string): UseDocumentationResult => {
+export const getDocumentationType = (
+  documentationUrl: string
+): "external" | "internal" | "none" => {
+  if (!documentationUrl) {
+    return "none";
+  }
+  return DOCS_URL.test(documentationUrl) ? "internal" : "external";
+};
+
+export const useDocumentation = (
+  documentationUrl: string
+): UseDocumentationResult => {
   const { integrationUrl } = useConfig();
   const url = documentationUrl.replace(DOCS_URL, integrationUrl) + ".md";
 
@@ -27,5 +38,3 @@ const useDocumentation = (documentationUrl: string): UseDocumentationResult => {
     }
   );
 };
-
-export default useDocumentation;
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/Instruction.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/Instruction.tsx
@@ -5,7 +5,10 @@ import { useToggle } from "react-use";
 import urls from "rehype-urls";
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 
-import useDocumentation from "hooks/services/useDocumentation";
+import {
+  useDocumentation,
+  getDocumentationType,
+} from "hooks/services/useDocumentation";
 import { LoadingPage } from "components";
 import { SideView } from "components/SideView";
 import { Markdown } from "components/Markdown";
@@ -17,7 +20,22 @@ type IProps = {
   documentationUrl: string;
 };
 
-const LinkToInstruction = styled.span`
+const SideViewButton = styled.button`
+  cursor: pointer;
+  margin-top: 5px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  text-decoration: underline;
+  display: inline-block;
+  background: none;
+  border: none;
+  padding: 0;
+
+  color: ${({ theme }) => theme.primaryColor};
+`;
+
+const DocumentationLink = styled.a`
   cursor: pointer;
   margin-top: 5px;
   font-weight: 500;
@@ -45,11 +63,11 @@ const HeaderLink = styled.a`
   }
 `;
 
-const Instruction: React.FC<IProps> = ({
+const DocumentationPanel: React.FC<{ onClose: () => void } & IProps> = ({
   selectedService,
   documentationUrl,
+  onClose,
 }) => {
-  const [isSideViewOpen, setIsSideViewOpen] = useToggle(false);
   const config = useConfig();
   const { data: docs, isLoading } = useDocumentation(documentationUrl);
 
@@ -61,37 +79,60 @@ const Instruction: React.FC<IProps> = ({
   };
 
   const urlReplacerPlugin: PluggableList = [[urls, removeBaseUrl]];
+  return (
+    <SideView
+      onClose={onClose}
+      headerLink={
+        <HeaderLink href={documentationUrl} target="_blank" rel="noreferrer">
+          <FormattedMessage
+            id="onboarding.instructionsLink"
+            values={{ name: selectedService.name }}
+          />
+        </HeaderLink>
+      }
+    >
+      {isLoading ? (
+        <LoadingPage />
+      ) : docs ? (
+        <Markdown content={docs} rehypePlugins={urlReplacerPlugin} />
+      ) : (
+        <FormattedMessage id="docs.notFoundError" />
+      )}
+    </SideView>
+  );
+};
+
+const Instruction: React.FC<IProps> = ({
+  selectedService,
+  documentationUrl,
+}) => {
+  const [isSideViewOpen, setIsSideViewOpen] = useToggle(false);
+  const docType = getDocumentationType(documentationUrl);
 
   return (
     <>
       {isSideViewOpen && (
-        <SideView
+        <DocumentationPanel
           onClose={() => setIsSideViewOpen(false)}
-          headerLink={
-            <HeaderLink
-              href={documentationUrl}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <FormattedMessage
-                id="onboarding.instructionsLink"
-                values={{ name: selectedService.name }}
-              />
-            </HeaderLink>
-          }
+          selectedService={selectedService}
+          documentationUrl={documentationUrl}
+        />
+      )}
+
+      {docType === "internal" && (
+        <SideViewButton onClick={() => setIsSideViewOpen(true)}>
+          <FormattedMessage id="form.setupGuide" />
+        </SideViewButton>
+      )}
+      {docType === "external" && (
+        <DocumentationLink
+          href={documentationUrl}
+          target="_blank"
+          rel="noopener noreferrer"
         >
-          {isLoading ? (
-            <LoadingPage />
-          ) : docs ? (
-            <Markdown content={docs} rehypePlugins={urlReplacerPlugin} />
-          ) : (
-            <FormattedMessage id="docs.notFoundError" />
-          )}
-        </SideView>
+          <FormattedMessage id="form.setupGuide" />
+        </DocumentationLink>
       )}
-      <LinkToInstruction onClick={() => setIsSideViewOpen(true)}>
-        {documentationUrl && <FormattedMessage id="form.setupGuide" />}
-      </LinkToInstruction>
     </>
   );
 };