diff --git a/.vscode/frontend.code-workspace b/.vscode/frontend.code-workspace index 8ec2e7d144b29..3e2645deb6f52 100644 --- 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 new file mode 100644 index 0000000000000..b633547502a2e --- /dev/null +++ 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 index ff10ce5b5f1e9..5bbb9e1ae8e7b 100644 --- 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(() => { const sanitizeLinks = (url: Url, element: Element) => { @@ -62,18 +50,14 @@ export const DocumentationPanel: React.FC = () => { return isLoading || documentationUrl === "" ? ( - ) : docs ? ( - - } /> - {!docs.includes("") ? ( - - ) : ( - - )} - ) : ( - - - +
+ } /> + ") ? docs : formatMessage({ id: "connector.setupGuide.notFound" })} + rehypePlugins={urlReplacerPlugin} + /> +
); }; diff --git a/airbyte-webapp/src/components/Markdown/Markdown.tsx b/airbyte-webapp/src/components/Markdown/Markdown.tsx index 492e4e26bece9..fd423b76ab496 100644 --- a/airbyte-webapp/src/components/Markdown/Markdown.tsx +++ b/airbyte-webapp/src/components/Markdown/Markdown.tsx @@ -1,10 +1,12 @@ 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; @@ -12,12 +14,12 @@ interface Props { rehypePlugins?: PluggableList; } -const Markdown: React.FC = ({ content, className, rehypePlugins }) => { +export const Markdown: React.FC = ({ content, className, rehypePlugins }) => { return ( (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 = ({ 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 index f14dafbcd5b65..642b3cdeeec13 100644 --- 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 new file mode 100644 index 0000000000000..86ebc4cc9bece --- /dev/null +++ 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%; + } +}