🪟 🧹 Credits page component cleanup (airbytehq#21870)

* 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 <[email protected]>

Author: 2 people

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;

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;
+}

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,43 +14,30 @@ 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<ConnectionCellProps> = ({
   sourceDefinitionName,
   destinationDefinitionName,
   sourceIcon,
   destinationIcon,
 }) => {
   return (
-    <>
-      <Connector>
-        <Icon icon={sourceIcon} />
-        {sourceDefinitionName}
-      </Connector>
-      <Connector>
-        <Arrow icon={faArrowRight} />
-        <Icon icon={destinationIcon} />
-        {destinationDefinitionName}
-      </Connector>
-    </>
+    <FlexContainer justifyContent="space-between">
+      <FlexItem className={styles.connectorItem}>
+        <FlexContainer direction="row" alignItems="center">
+          <ConnectorIcon icon={sourceIcon} />
+          <Text size="lg">{sourceDefinitionName}</Text>
+        </FlexContainer>
+      </FlexItem>
+      <FlexItem className={styles.arrowItem}>
+        <ArrowRightIcon />
+      </FlexItem>
+      <FlexItem className={styles.connectorItem}>
+        <FlexContainer direction="row" alignItems="center">
+          <ConnectorIcon icon={destinationIcon} />
+          <Text size="lg">{destinationDefinitionName}</Text>
+        </FlexContainer>
+      </FlexItem>
+    </FlexContainer>
   );
 };
 

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;
+}

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 (
     <>
       <Card title={<FormattedMessage id="credits.totalUsage" />} lightPadding>
-        <ChartWrapper>
+        <div className={styles.chartWrapper}>
           {data?.creditConsumptionByDay?.length ? (
             <BarChart
               data={chartData}
@@ -65,22 +47,22 @@ const CreditsUsage: React.FC = () => {
               })}
             />
           ) : (
-            <Empty>
+            <FlexContainer alignItems="center" justifyContent="center" className={styles.empty}>
               <FormattedMessage id="credits.noData" />
-            </Empty>
+            </FlexContainer>
           )}
-        </ChartWrapper>
+        </div>
       </Card>
 
-      <CardBlock title={<FormattedMessage id="credits.usagePerConnection" />} lightPadding>
+      <Card title={<FormattedMessage id="credits.usagePerConnection" />} lightPadding className={styles.cardBlock}>
         {data?.creditConsumptionByConnector?.length ? (
           <UsagePerConnectionTable creditConsumption={data.creditConsumptionByConnector} />
         ) : (
-          <Empty>
+          <FlexContainer alignItems="center" justifyContent="center" className={styles.empty}>
             <FormattedMessage id="credits.noData" />
-          </Empty>
+          </FlexContainer>
         )}
-      </CardBlock>
+      </Card>
     </>
   );
 };

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;
 }