Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🪟 🧹 Cleanup documentation panel components #15455

Merged
merged 3 commits into from
Aug 10, 2022
+115 −115
Merged

🪟 🧹 Cleanup documentation panel components #15455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
506ab94
Add docs/ to frontend workspace
edmundito Aug 9, 2022
df4e00e
Migrate Markdown components to scss and cleanup when not found is ren…
edmundito Aug 9, 2022
74c316a
Add white-space: break-spaces rule to markdown code blocks
edmundito Aug 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/frontend.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
},
{
"path": "../airbyte-webapp-e2e-tests"
},
{
"path": "../docs"
}
],
"extensions": {
Expand Down
11 changes: 11 additions & 0 deletions airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@use "../../scss/colors";

.container {
padding: 0px 0px 20px;
background-color: colors.$white;
min-height: 100vh;
}

.content {
padding: 0px 35px 20px;
}
42 changes: 13 additions & 29 deletions airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -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>
);
};
90 changes: 5 additions & 85 deletions airbyte-webapp/src/components/Markdown/Markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
2 changes: 1 addition & 1 deletion airbyte-webapp/src/components/Markdown/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default as Markdown } from "./Markdown";
export { Markdown } from "./Markdown";
82 changes: 82 additions & 0 deletions airbyte-webapp/src/components/Markdown/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
matter-q marked this conversation as resolved.
Show resolved Hide resolved

&.language-sql,
&.language-text {
Comment on lines +71 to +72
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the reason why this file is not an SCSS module but instead a regular styled component because we are rendering Markdown that has these class names.

display: block;
padding: 15px;
overflow: auto;
}
}

img {
max-width: 100%;
}
}