From 848cb5c3b844e784b86186bda0d00de3dd5694f4 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 21:51:53 +0100 Subject: [PATCH 01/14] refactor EditorHeader (untested) --- .../components/EditorHeader.module.scss | 13 +++++++++++++ .../components/EditorHeader.tsx | 17 +++-------------- 2 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss new file mode 100644 index 000000000000..834c58a237ea --- /dev/null +++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.module.scss @@ -0,0 +1,13 @@ +@use "scss/colors"; + +.editorHeader { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + color: colors.$dark-blue-900; + font-weight: 500; + font-size: 14px; + line-height: 17px; + margin: 5px 0 10px; +} diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx index 55a49eb0c42c..f6990cd45702 100644 --- a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx +++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx @@ -1,22 +1,11 @@ import React from "react"; import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; import { Button } from "components/ui/Button"; import { ConnectionFormMode } from "hooks/services/ConnectionForm/ConnectionFormService"; -const Content = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - color: ${({ theme }) => theme.textColor}; - font-weight: 500; - font-size: 14px; - line-height: 17px; - margin: 5px 0 10px; -`; +import styles from "./EditorHeader.module.scss"; interface EditorHeaderProps { mainTitle?: React.ReactNode; @@ -36,14 +25,14 @@ const EditorHeader: React.FC = ({ disabled, }) => { return ( - +
{mainTitle || } {mode !== "readonly" && ( )} - +
); }; From 781868f6414ebfa754346b38062c82d8e458a639 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 21:52:07 +0100 Subject: [PATCH 02/14] refactor BaseClearView --- .../BaseClearView/BaseClearView.module.scss | 22 ++++++++++++ .../BaseClearView/BaseClearView.tsx | 34 ++++--------------- 2 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 airbyte-webapp/src/components/BaseClearView/BaseClearView.module.scss diff --git a/airbyte-webapp/src/components/BaseClearView/BaseClearView.module.scss b/airbyte-webapp/src/components/BaseClearView/BaseClearView.module.scss new file mode 100644 index 000000000000..c37d8a07643a --- /dev/null +++ b/airbyte-webapp/src/components/BaseClearView/BaseClearView.module.scss @@ -0,0 +1,22 @@ +.content { + height: 100%; + width: 100%; + padding: 34px 0 13px; + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; +} + +.logoImg { + width: 90px; + height: 94px; + margin-bottom: 20px; +} + +.mainInfo { + min-width: 550px; + display: flex; + align-items: center; + flex-direction: column; +} diff --git a/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx b/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx index bd2f29202fb9..dc1e7d3bfc1a 100644 --- a/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx +++ b/airbyte-webapp/src/components/BaseClearView/BaseClearView.tsx @@ -1,45 +1,23 @@ import React from "react"; import { useIntl } from "react-intl"; import { Link } from "react-router-dom"; -import styled from "styled-components"; import Version from "components/Version"; -const Content = styled.div` - height: 100%; - width: 100%; - padding: 34px 0 13px; - display: flex; - align-items: center; - flex-direction: column; - justify-content: space-between; -`; - -const LogoImg = styled.img` - width: 90px; - height: 94px; - margin-bottom: 20px; -`; - -const MainInfo = styled.div` - min-width: 550px; - display: flex; - align-items: center; - flex-direction: column; -`; +import styles from "./BaseClearView.module.scss"; const BaseClearView: React.FC> = ({ children }) => { const { formatMessage } = useIntl(); return ( - - +
+
- + {formatMessage({ {children} - +
- +
); }; From 71da9625d86e06017864e0a84c4bce1e30141a8b Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 21:52:20 +0100 Subject: [PATCH 03/14] delete unused Subtitle --- .../components/CenteredPageComponents/Subtitle.tsx | 12 ------------ .../src/components/CenteredPageComponents/index.tsx | 3 +-- 2 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 airbyte-webapp/src/components/CenteredPageComponents/Subtitle.tsx diff --git a/airbyte-webapp/src/components/CenteredPageComponents/Subtitle.tsx b/airbyte-webapp/src/components/CenteredPageComponents/Subtitle.tsx deleted file mode 100644 index e9cf6c952a00..000000000000 --- a/airbyte-webapp/src/components/CenteredPageComponents/Subtitle.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from "styled-components"; - -const Subtitle = styled.div` - font-size: 16px; - line-height: 21px; - text-align: center; - letter-spacing: 0.03em; - color: ${({ theme }) => theme.greyColor70}; - padding-bottom: 10px; -`; - -export default Subtitle; diff --git a/airbyte-webapp/src/components/CenteredPageComponents/index.tsx b/airbyte-webapp/src/components/CenteredPageComponents/index.tsx index 3569e3a632c0..659dad2189e7 100644 --- a/airbyte-webapp/src/components/CenteredPageComponents/index.tsx +++ b/airbyte-webapp/src/components/CenteredPageComponents/index.tsx @@ -1,4 +1,3 @@ import PageViewContainer from "./PageViewContainer"; -import Subtitle from "./Subtitle"; -export { PageViewContainer, Subtitle }; +export { PageViewContainer }; From 89d9d80a6e31ae8eab83f5b5b1f9e98eb01ea931 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 21:56:31 +0100 Subject: [PATCH 04/14] refactor ConfirmationModal --- .../ConfirmationModal.module.scss | 13 +++++++++++ .../ConfirmationModal/ConfirmationModal.tsx | 22 ++++--------------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss index 86081ff47b39..4f7c81dcc15d 100644 --- a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss +++ b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.module.scss @@ -1,3 +1,16 @@ .buttonWithMargin { margin-right: 12px; } + +.content { + width: 585px; + font-size: 14px; + padding: 25px; + white-space: pre-line; +} + +.buttonContent { + margin-top: 26px; + display: flex; + justify-content: flex-end; +} diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx index ff87ee8d3d32..678954f1c88b 100644 --- a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx +++ b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx @@ -1,6 +1,5 @@ import React from "react"; import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; import { Button } from "components/ui/Button"; import { Modal } from "components/ui/Modal"; @@ -8,19 +7,6 @@ import { Modal } from "components/ui/Modal"; import useLoadingState from "../../hooks/useLoadingState"; import styles from "./ConfirmationModal.module.scss"; -const Content = styled.div` - width: 585px; - font-size: 14px; - padding: 25px; - white-space: pre-line; -`; - -const ButtonContent = styled.div` - margin-top: 26px; - display: flex; - justify-content: flex-end; -`; - export interface ConfirmationModalProps { onClose: () => void; title: string; @@ -45,9 +31,9 @@ export const ConfirmationModal: React.FC = ({ return ( }> - +
- +
- - +
+
); }; From b70a9d7ada3a0c3029b5fdffb95d0d5439ef2c8c Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 22:09:39 +0100 Subject: [PATCH 05/14] refactor Arrow --- .../connection/CatalogTree/Arrow.module.scss | 19 ++++++++++++ .../connection/CatalogTree/Arrow.tsx | 31 +++++++------------ 2 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss diff --git a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss new file mode 100644 index 000000000000..4384e196f585 --- /dev/null +++ b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.module.scss @@ -0,0 +1,19 @@ +@use "scss/colors"; + +.container { + padding: 0 12px; + width: 30px; + display: inline-block; +} + +.arrow { + font-size: 16px; + line-height: 16px; + color: colors.$dark-blue-900; + transition: 0.3s; + cursor: pointer; + + &--rotated { + transform: rotate(90deg); + } +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx index 779961a793d5..dc42eec87f1a 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx @@ -1,7 +1,9 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classNames from "classnames"; import React from "react"; -import styled from "styled-components"; + +import styles from "./Arrow.module.scss"; interface ArrowProps { isItemHasChildren?: boolean; @@ -10,26 +12,17 @@ interface ArrowProps { onExpand?: () => void; } -const ArrowContainer = styled.span` - padding: 0 12px; - width: 30px; - display: inline-block; -`; - -const ArrowView = styled(FontAwesomeIcon)<{ $isOpen?: boolean }>` - font-size: 16px; - line-height: 16px; - color: ${({ theme }) => theme.darkPrimaryColor}; - transform: ${({ $isOpen }) => $isOpen && "rotate(90deg)"}; - transition: 0.3s; - cursor: pointer; -`; - const Arrow: React.FC = ({ isItemHasChildren, isItemOpen, onExpand }) => { return ( - - {(isItemHasChildren || !onExpand) && } - +
+ {(isItemHasChildren || !onExpand) && ( + + )} +
); }; From d9663cd3d532840bf1de7aa6e786b8881c2b8d54 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 22:34:05 +0100 Subject: [PATCH 06/14] refactor BulkHeader --- .../CatalogTree/BulkHeader.module.scss | 13 ++++++++++++ .../connection/CatalogTree/BulkHeader.tsx | 20 ++++--------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss index 39cc67ce52d8..e5d290ce2c3d 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss @@ -1,3 +1,16 @@ +@use "scss/colors"; + +.schemaHeader { + min-height: 41px; + height: 41px; + background: colors.$blue-400; + border-radius: 8px 8px 0 0; +} + .actionButton { white-space: nowrap; } + +.actionCell { + display: flex; +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx index 9788a0da07f8..4cbf1ad836d2 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx @@ -1,7 +1,6 @@ import intersection from "lodash/intersection"; import React, { useMemo } from "react"; import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; import { Cell, Header } from "components"; import { Button } from "components/ui/Button"; @@ -19,17 +18,6 @@ import { ArrowCell, CheckboxCell, HeaderCell } from "./styles"; import { SyncSettingsDropdown } from "./SyncSettingsDropdown"; import { flatten, getPathType } from "./utils"; -const ActionCell = styled.div` - display: flex; -`; - -const SchemaHeader = styled(Header)` - min-height: 41px; - height: 41px; - background: ${({ theme }) => theme.primaryColor}; - border-radius: 8px 8px 0 0; -`; - function calculateSharedFields(selectedBatchNodes: SyncSchemaStream[]) { const primitiveFieldsByStream = selectedBatchNodes.map(({ stream }) => { const traversedFields = traverseSchemaToField(stream?.jsonSchema, stream?.name); @@ -90,7 +78,7 @@ export const BulkHeader: React.FC = () => { const paths = primitiveFields.map((f) => f.path); return ( - +
@@ -132,15 +120,15 @@ export const BulkHeader: React.FC = () => { - +
- +
- +
); }; From ba7e41c8a1cc8435a416d066c855048aa933397b Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 22:40:00 +0100 Subject: [PATCH 07/14] refactor CatalogTreeSearch --- .../CatalogTree/CatalogTreeSearch.module.scss | 12 ++++++++++ .../CatalogTree/CatalogTreeSearch.tsx | 23 +++++-------------- 2 files changed, 18 insertions(+), 17 deletions(-) create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss new file mode 100644 index 000000000000..769dd3277747 --- /dev/null +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.module.scss @@ -0,0 +1,12 @@ +.searchInput { + padding: 10px 8px 9px; +} + +.searchContent { + position: relative; + width: 100%; + + &::before { + content: attr(data-content); + } +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx index 9194a870fbe3..2c416ac94a9c 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx @@ -1,37 +1,26 @@ import React from "react"; import { useIntl } from "react-intl"; -import styled from "styled-components"; import { Input } from "components/ui/Input"; +import styles from "./CatalogTreeSearch.module.scss"; + interface CatalogTreeSearchProps { onSearch: (value: string) => void; } -const SearchInput = styled(Input)` - padding: 10px 8px 9px; -`; - -const SearchContent = styled.div` - position: relative; - width: 100%; - - &:before { - content: attr(data-content); - } -`; - export const CatalogTreeSearch: React.FC = ({ onSearch }) => { const { formatMessage } = useIntl(); return ( - - + onSearch(e.target.value)} /> - + ); }; From b319aa9f424a607d5c44c0645ff1f028ec5157b1 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 22:43:42 +0100 Subject: [PATCH 08/14] refactor StreamFieldTable --- .../CatalogTree/StreamFieldTable.module.scss | 7 +++++++ .../connection/CatalogTree/StreamFieldTable.tsx | 12 +++--------- 2 files changed, 10 insertions(+), 9 deletions(-) create mode 100644 airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss new file mode 100644 index 000000000000..c47665eda94a --- /dev/null +++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss @@ -0,0 +1,7 @@ +@use "scss/colors"; + +.rowsContainer { + background: colors.$white; + border-radius: 8px; + margin: 0 10px 5px; +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx index 538e1b5b8210..023bc03b2ade 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx @@ -1,5 +1,4 @@ import React from "react"; -import styled from "styled-components"; import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog"; import { AirbyteStreamConfiguration } from "core/request/AirbyteClient"; @@ -7,14 +6,9 @@ import { AirbyteStreamConfiguration } from "core/request/AirbyteClient"; import { FieldHeader } from "./FieldHeader"; import { FieldRow } from "./FieldRow"; import { pathDisplayName } from "./PathPopout"; +import styles from "./StreamFieldTable.module.scss"; import { TreeRowWrapper } from "./TreeRowWrapper"; -const RowsContainer = styled.div` - background: ${({ theme }) => theme.whiteColor}; - border-radius: 8px; - margin: 0 10px 5px 10px; -`; - interface StreamFieldTableProps { syncSchemaFields: SyncSchemaField[]; config: AirbyteStreamConfiguration | undefined; @@ -30,7 +24,7 @@ export const StreamFieldTable: React.FC = (props) => { - +
{props.syncSchemaFields.map((field) => ( = (props) => { /> ))} - +
); }; From 8ca43a452bcb0b416cd774a8e7bc1ab991d30c5a Mon Sep 17 00:00:00 2001 From: josephkmh Date: Mon, 31 Oct 2022 22:46:01 +0100 Subject: [PATCH 09/14] refactor StreamHeader --- .../connection/CatalogTree/StreamHeader.module.scss | 4 ++++ .../components/connection/CatalogTree/StreamHeader.tsx | 9 ++------- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss index f7a7b2fed34a..967241b4ad12 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss +++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss @@ -60,3 +60,7 @@ .purpleBackground { background-color: colors.$blue-transparent; } + +.noHeader { + color: colors.$grey-300; +} diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx index eacb3024d886..a3b0d542bf36 100644 --- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx +++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx @@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; import React, { useMemo } from "react"; import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; import { Cell, Row } from "components"; import { CheckBox } from "components/ui/CheckBox"; @@ -20,10 +19,6 @@ import styles from "./StreamHeader.module.scss"; import { ArrowCell, HeaderCell } from "./styles"; import { SyncSettingsDropdown } from "./SyncSettingsDropdown"; -const EmptyField = styled.span` - color: ${({ theme }) => theme.greyColor40}; -`; - interface SyncSchema { syncMode: SyncMode; destinationSyncMode: DestinationSyncMode; @@ -126,9 +121,9 @@ export const StreamHeader: React.FC = ({ {stream.stream?.namespace || ( - + - + )} From ad4c37e16458e690a9e0d4630971210b61a11056 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 1 Nov 2022 09:30:04 +0100 Subject: [PATCH 10/14] refactor ConnectorIcon --- .../ConnectorIcon/ConnectorIcon.module.scss | 5 +++++ .../components/ConnectorIcon/ConnectorIcon.tsx | 15 +++++---------- 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.module.scss diff --git a/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.module.scss b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.module.scss new file mode 100644 index 000000000000..7e0592687e48 --- /dev/null +++ b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.module.scss @@ -0,0 +1,5 @@ +.content { + height: 25px; + width: 25px; + overflow: hidden; +} diff --git a/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx index a62a90c7cdbf..9f4012e48522 100644 --- a/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx +++ b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx @@ -1,22 +1,17 @@ import React from "react"; -import styled from "styled-components"; import { getIcon } from "utils/imageUtils"; +import styles from "./ConnectorIcon.module.scss"; + interface Props { icon?: string; className?: string; small?: boolean; } -export const Content = styled.div` - height: 25px; - width: 25px; - overflow: hidden; -`; - -export const ConnectorIcon: React.FC = ({ icon, className }) => ( -