Source Quickbooks: implement custom 'Authenticate' button (#6356)

Co-authored-by: Joe Reuter <joe@airbyte.io>

airbyte-webapp/src/utils/connectors/sources.json

@@ -168,7 +168,7 @@
   "PyPi": "88ecd3a8-5f5b-11ed-9b6a-0242ac120002",
   "Qonto": "f7c0b910-5f66-11ed-9b6a-0242ac120002",
   "Qualaroo": "b08e4776-d1de-4e80-ab5c-1e51dad934a2",
-  "QuickBooks": "29b409d9-30a5-4cc8-ad50-886eb846fea3",
+  "QuickBooks": "cf9c4355-b171-4477-8f2d-6c5cc5fc8b7e",
   "Recharge": "45d2e135-2ede-49e1-939f-3e3ec357a65e",
   "Recreation": "25d7535d-91e0-466a-aa7f-af81578be277",
   "Recruitee": "3b046ac7-d8d3-4eb3-b122-f96b2a16d8a8",

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/AuthButton.tsx

@@ -10,6 +10,7 @@ import { ConnectorIds } from "utils/connectors";
 
 import styles from "./AuthButton.module.scss";
 import GoogleAuthButton from "./GoogleAuthButton";
+import QuickBooksAuthButton from "./QuickBooksAuthButton";
 import { useFormikOauthAdapter } from "./useOauthFlowAdapter";
 import { useConnectorForm } from "../../../connectorFormContext";
 import { useAuthentication } from "../../../useAuthentication";
@@ -36,6 +37,9 @@ function getButtonComponent(connectorDefinitionId: string) {
   if (isGoogleConnector(connectorDefinitionId)) {
     return GoogleAuthButton;
   }
+  if (connectorDefinitionId === ConnectorIds.Sources.QuickBooks) {
+    return QuickBooksAuthButton;
+  }
   return Button;
 }
 

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/QuickBooksAuthButton.module.scss

@@ -0,0 +1,3 @@
+.qbAuthButton {
+  padding: 0 !important;
+}

airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/QuickBooksAuthButton.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+import { Button, ButtonProps } from "components/ui/Button";
+import { Text } from "components/ui/Text";
+
+import styles from "./QuickBooksAuthButton.module.scss";
+import quickBooksAuthButton from "./quickbooksAuthButton.svg";
+import quickBooksAuthButtonHover from "./quickbooksAuthButtonHover.svg";
+import { FlexContainer } from "../../../../../../components/ui/Flex";
+
+const QuickBooksAuthButton: React.FC<React.PropsWithChildren<ButtonProps>> = (props) => {
+  const [isActive, setIsActive] = useState(false);
+  return (
+    <FlexContainer direction="column" alignItems="center">
+      <Button className={styles.qbAuthButton} {...props}>
+        <img
+          src={isActive ? quickBooksAuthButtonHover : quickBooksAuthButton}
+          alt="Connect to QuickBook"
+          onMouseOver={() => setIsActive(true)}
+          onMouseOut={() => setIsActive(false)}
+          onFocus={() => setIsActive(true)}
+          onBlur={() => setIsActive(false)}
+        />
+      </Button>
+      <Text size="sm" color="grey300">
+        {props.children}
+      </Text>
+    </FlexContainer>
+  );
+};
+
+export default QuickBooksAuthButton;