From 4dd8d303eb84cba75b6d4d14112f792d3e1838e2 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 7 Feb 2023 15:32:34 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=A7=B9=20Credits=20page=20?= =?UTF-8?q?component=20cleanup=20(#21870)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update styling on connectionCell * cleanup the component and get rid of custom styles where possible * convert CreditsUsage page to scss module * cleanup * add connection status and connection name to endpoint data types * use variable * remove unused line * align icon and name center * adjust styling for arrow cell --------- Co-authored-by: Joey Marshment-Howell --- .../cloud/lib/domain/cloudWorkspaces/types.ts | 4 ++ .../components/ConnectionCell.module.scss | 10 ++++ .../CreditsPage/components/ConnectionCell.tsx | 55 ++++++++----------- .../components/CreditsUsage.module.scss | 16 ++++++ .../CreditsPage/components/CreditsUsage.tsx | 38 ++++--------- .../UsagePerConnectionTable.module.scss | 4 +- 6 files changed, 64 insertions(+), 63 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss create mode 100644 airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss diff --git a/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts b/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts index 22145f517847..7ea4d3fdcdcc 100644 --- a/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts +++ b/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts @@ -1,3 +1,5 @@ +import { ConnectionStatus } from "core/request/AirbyteClient"; + export enum CreditStatus { "POSITIVE" = "positive", "NEGATIVE_WITHIN_GRACE_PERIOD" = "negative_within_grace_period", @@ -17,6 +19,8 @@ export interface CloudWorkspace { export interface CreditConsumptionByConnector { connectionId: string; + connectionName: string; + status: ConnectionStatus; creditsConsumed: number; destinationConnectionName: string; destinationDefinitionId: string; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss new file mode 100644 index 000000000000..56f56b358468 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss @@ -0,0 +1,10 @@ +.connectorItem { + width: calc(100% - 30px / 2); +} + +.arrowItem { + flex: 0 0 30px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx index 1c268ce8951b..27924d6a79e7 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx @@ -1,9 +1,11 @@ -import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React from "react"; -import styled from "styled-components"; import { ConnectorIcon } from "components/common/ConnectorIcon"; +import { ArrowRightIcon } from "components/icons/ArrowRightIcon"; +import { FlexContainer, FlexItem } from "components/ui/Flex"; +import { Text } from "components/ui/Text"; + +import styles from "./ConnectionCell.module.scss"; interface ConnectionCellProps { sourceDefinitionName: string; @@ -12,25 +14,6 @@ interface ConnectionCellProps { destinationIcon?: string; } -const Icon = styled(ConnectorIcon)` - margin-right: 12px; - display: inline-block; - vertical-align: middle; - height: 20px; - width: 20px; -`; - -const Connector = styled.div` - font-weight: 500; - font-size: 14px; - line-height: 25px; -`; - -const Arrow = styled(FontAwesomeIcon)` - margin: 0 17px 0 9px; - font-size: 9px; -`; - const ConnectionCell: React.FC = ({ sourceDefinitionName, destinationDefinitionName, @@ -38,17 +21,23 @@ const ConnectionCell: React.FC = ({ destinationIcon, }) => { return ( - <> - - - {sourceDefinitionName} - - - - - {destinationDefinitionName} - - + + + + + {sourceDefinitionName} + + + + + + + + + {destinationDefinitionName} + + + ); }; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss new file mode 100644 index 000000000000..bf805659e0a7 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss @@ -0,0 +1,16 @@ +@use "scss/variables"; + +.empty { + height: 100%; + padding-bottom: variables.$spacing-xl; +} + +.chartWrapper { + width: 100%; + height: 260px; + padding: 0 variables.$spacing-2xl variables.$spacing-xl 0; +} + +.cardBlock { + margin: variables.$spacing-md 0 variables.$spacing-xl; +} diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx index 2d2db8aed60e..b48f46023cd4 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx @@ -1,34 +1,16 @@ import React, { useMemo } from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import styled from "styled-components"; import { BarChart } from "components/ui/BarChart"; import { Card } from "components/ui/Card"; +import { FlexContainer } from "components/ui/Flex"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { useGetCloudWorkspaceUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService"; +import styles from "./CreditsUsage.module.scss"; import UsagePerConnectionTable from "./UsagePerConnectionTable"; -export const ChartWrapper = styled.div` - width: 100%; - height: 260px; - padding: 0 50px 24px 0; -`; - -const CardBlock = styled(Card)` - margin: 10px 0 20px; -`; - -const Empty = styled.div` - height: 100%; - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - padding-bottom: 20px; -`; - const LegendLabels = ["value"]; const CreditsUsage: React.FC = () => { @@ -52,7 +34,7 @@ const CreditsUsage: React.FC = () => { return ( <> } lightPadding> - +
{data?.creditConsumptionByDay?.length ? ( { })} /> ) : ( - + - + )} - +
- } lightPadding> + } lightPadding className={styles.cardBlock}> {data?.creditConsumptionByConnector?.length ? ( ) : ( - + - + )} - + ); }; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss index dfc9be48a4f7..b1f2e70e0507 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss @@ -2,11 +2,11 @@ @use "scss/colors"; .content { - padding: 0 variables.$spacing-2xl 0 variables.$spacing-lg; + padding: 0 variables.$spacing-lg; } .usageValue { - padding-right: 10px; + padding-right: variables.$spacing-md; min-width: 53px; }