🪟 🧹 Cleanup documentation panel components (#15455)

* Add docs/ to frontend workspace * Migrate Markdown components to scss and cleanup when not found is rendered * Add white-space: break-spaces rule to markdown code blocks
airbytehq · Aug 10, 2022 · 7662956 · 7662956
1 parent 1258ab4
commit 7662956
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 115 deletions.
diff --git a/.vscode/frontend.code-workspace b/.vscode/frontend.code-workspace
@@ -5,6 +5,9 @@
     },
     {
       "path": "../airbyte-webapp-e2e-tests"
+    },
+    {
+      "path": "../docs"
     }
   ],
   "extensions": {

diff --git a/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.module.scss b/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.module.scss
@@ -0,0 +1,11 @@
+@use "../../scss/colors";
+
+.container {
+  padding: 0px 0px 20px;
+  background-color: colors.$white;
+  min-height: 100vh;
+}
+
+.content {
+  padding: 0px 35px 20px;
+}
diff --git a/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx b/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
@@ -1,40 +1,28 @@
 import type { Url } from "url";
 
 import { useMemo } from "react";
-import { FormattedMessage } from "react-intl";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { PluggableList } from "react-markdown/lib/react-markdown";
-import { ReflexElement } from "react-reflex";
 import { useLocation } from "react-router-dom";
 import { useUpdateEffect } from "react-use";
 import rehypeSlug from "rehype-slug";
 import urls from "rehype-urls";
-import styled from "styled-components";
 
 import { LoadingPage, PageTitle } from "components";
-import Markdown from "components/Markdown/Markdown";
+import { Markdown } from "components/Markdown";
 
 import { useConfig } from "config";
 import { useDocumentation } from "hooks/services/useDocumentation";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 
-export const DocumentationContainer = styled.div`
-  padding: 0px 0px 20px;
-  background-color: #ffffff;
-  min-height: 100vh;
-`;
-
-export const DocumentationContent = styled(Markdown)`
-  padding: 0px 35px 20px;
-`;
+import styles from "./DocumentationPanel.module.scss";
 
 export const DocumentationPanel: React.FC = () => {
+  const { formatMessage } = useIntl();
   const config = useConfig();
-
   const { setDocumentationPanelOpen, documentationUrl } = useDocumentationPanelContext();
-
   const { data: docs, isLoading } = useDocumentation(documentationUrl);
-  const { formatMessage } = useIntl();
+
   // @ts-expect-error rehype-slug currently has type conflicts due to duplicate vfile dependencies
   const urlReplacerPlugin: PluggableList = useMemo<PluggableList>(() => {
     const sanitizeLinks = (url: Url, element: Element) => {
@@ -62,18 +50,14 @@ export const DocumentationPanel: React.FC = () => {
 
   return isLoading || documentationUrl === "" ? (
     <LoadingPage />
-  ) : docs ? (
-    <DocumentationContainer>
-      <PageTitle withLine title={<FormattedMessage id="connector.setupGuide" />} />
-      {!docs.includes("<!DOCTYPE html>") ? (
-        <DocumentationContent content={docs} rehypePlugins={urlReplacerPlugin} />
-      ) : (
-        <DocumentationContent content={formatMessage({ id: "connector.setupGuide.notFound" })} />
-      )}
-    </DocumentationContainer>
   ) : (
-    <ReflexElement className="right-pane" maxSize={1000}>
-      <FormattedMessage id="connector.setupGuide.notFound" />
-    </ReflexElement>
+    <div className={styles.container}>
+      <PageTitle withLine title={<FormattedMessage id="connector.setupGuide" />} />
+      <Markdown
+        className={styles.content}
+        content={!docs?.includes("<!DOCTYPE html>") ? docs : formatMessage({ id: "connector.setupGuide.notFound" })}
+        rehypePlugins={urlReplacerPlugin}
+      />
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/components/Markdown/Markdown.tsx b/airbyte-webapp/src/components/Markdown/Markdown.tsx
@@ -1,23 +1,25 @@
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 
+import classNames from "classnames";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
-import styled from "styled-components";
+
+import "./styles.scss";
 
 interface Props {
   content?: string;
   className?: string;
   rehypePlugins?: PluggableList;
 }
 
-const Markdown: React.FC<Props> = ({ content, className, rehypePlugins }) => {
+export const Markdown: React.FC<Props> = ({ content, className, rehypePlugins }) => {
   return (
     <ReactMarkdown
       // Open everything except fragment only links in a new tab
       linkTarget={(href) => (href.startsWith("#") ? undefined : "_blank")}
-      className={className}
+      className={classNames("airbyte-markdown", className)}
       skipHtml
       // @ts-expect-error remarkFrontmatter currently has type conflicts due to duplicate vfile dependencies
       // This is not actually causing any issues, but requires to disable TS on this for now.
@@ -27,85 +29,3 @@ const Markdown: React.FC<Props> = ({ content, className, rehypePlugins }) => {
     />
   );
 };
-
-const StyledMarkdown = styled(Markdown)`
-  * {
-    color: ${({ theme }) => theme.textColor};
-    line-height: 24px;
-    font-size: 16px;
-    font-weight: 400;
-  }
-
-  h1 {
-    font-size: 48px;
-    line-height: 56px;
-    font-weight: bold;
-  }
-
-  h2 {
-    font-size: 24px;
-    line-height: 36px;
-    font-weight: bold;
-  }
-
-  h3 {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  h4 {
-    font-weight: bold;
-  }
-
-  a {
-    color: ${({ theme }) => theme.primaryColor};
-    text-decoration: none;
-    line-height: 24px;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  table {
-    border-collapse: collapse;
-  }
-
-  th,
-  td {
-    border: 1px solid ${({ theme }) => theme.borderTableColor};
-    margin: 0;
-    padding: 8px 16px;
-  }
-
-  th {
-    background: ${({ theme }) => theme.lightTableColor};
-  }
-
-  blockquote {
-    border-left: 4px solid ${({ theme }) => theme.borderTableColor};
-    padding-left: 16px;
-    margin-left: 25px;
-  }
-
-  strong {
-    font-weight: bold;
-  }
-
-  code {
-    background: ${({ theme }) => theme.lightTableColor};
-
-    &.language-sql,
-    &.language-text {
-      display: block;
-      padding: 15px;
-      overflow: auto;
-    }
-  }
-
-  img {
-    max-width: 100%;
-  }
-`;
-
-export default StyledMarkdown;
diff --git a/airbyte-webapp/src/components/Markdown/index.ts b/airbyte-webapp/src/components/Markdown/index.ts
@@ -1 +1 @@
-export { default as Markdown } from "./Markdown";
+export { Markdown } from "./Markdown";
diff --git a/airbyte-webapp/src/components/Markdown/styles.scss b/airbyte-webapp/src/components/Markdown/styles.scss
@@ -0,0 +1,82 @@
+@use "../../scss/colors";
+
+.airbyte-markdown {
+  * {
+    color: colors.$dark-blue;
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  h1 {
+    font-size: 48px;
+    line-height: 56px;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: 24px;
+    line-height: 36px;
+    font-weight: bold;
+  }
+
+  h3 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-weight: bold;
+  }
+
+  a {
+    color: colors.$blue;
+    text-decoration: none;
+    line-height: 24px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    border: 1px solid colors.$grey-100;
+    margin: 0;
+    padding: 8px 16px;
+  }
+
+  th {
+    background: colors.$grey-50;
+  }
+
+  blockquote {
+    border-left: 4px solid colors.$grey-100;
+    padding-left: 16px;
+    margin-left: 25px;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  code {
+    white-space: break-spaces;
+    background: colors.$grey-50;
+
+    &.language-sql,
+    &.language-text {
+      display: block;
+      padding: 15px;
+      overflow: auto;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+}