From b1a6d5c8a8f1248896f6916ed01885f13cd10cf5 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Mon, 2 Jan 2023 17:04:57 +0100
Subject: [PATCH 1/3] improve logs look and feel in connector form

---
 airbyte-webapp/src/locales/en.json            |  1 +
 .../ConnectorCard/ConnectorCard.module.scss   | 14 ++++++----
 .../Connector/ConnectorCard/ConnectorCard.tsx | 26 ++++++++++++++++---
 .../components/EditControls.module.scss       |  9 +++++++
 .../ConnectorForm/components/EditControls.tsx | 14 +++-------
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 3ffb354e663a..fabd98f7e630 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -582,6 +582,7 @@
   "connector.optionsHeader": "Options",
   "connector.exampleValues": "Example {count, plural, one {value} other {values}}",
   "connector.oauthCredentialsMissing": "OAuth login is temporarily unavailable for this connector. Please try again later.",
+  "connector.failedTestLogsHeading": "Connection test logs",
 
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss
index fbc1503e3416..24d8851b643e 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss
@@ -1,21 +1,25 @@
-@use "../../../scss/variables" as vars;
+@use "scss/variables";
 
 .cardForm {
   padding: 22px 27px 23px 24px;
 }
 
 .connectorSelectControl {
-  margin-bottom: vars.$spacing-xl;
+  margin-bottom: variables.$spacing-xl;
 }
 
 .loaderContainer {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: vars.$spacing-2xl 0;
+  padding: variables.$spacing-2xl 0;
 }
 
 .loadingMessage {
-  margin-top: vars.$spacing-md;
-  margin-left: vars.$spacing-lg;
+  margin-top: variables.$spacing-md;
+  margin-left: variables.$spacing-lg;
+}
+
+.connectionTestLogs {
+  margin-top: variables.$spacing-lg;
 }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
index 18b2aeacb8ac..5cfdf8d5a740 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { JobItem } from "components/JobItem/JobItem";
+import JobLogs from "components/JobItem/components/JobLogs";
 import { Card } from "components/ui/Card";
+import { Heading } from "components/ui/Heading";
 import { Spinner } from "components/ui/Spinner";
 
 import {
@@ -16,7 +17,12 @@ import { DestinationRead, SourceRead, SynchronousJobRead } from "core/request/Ai
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { generateMessageFromError } from "utils/errorStatusMessage";
-import { ConnectorCardValues, ConnectorForm, ConnectorFormValues } from "views/Connector/ConnectorForm";
+import {
+  ConnectorCardValues,
+  ConnectorForm,
+  ConnectorFormProps,
+  ConnectorFormValues,
+} from "views/Connector/ConnectorForm";
 
 import { useDocumentationPanelContext } from "../ConnectorDocumentationLayout/DocumentationPanelContext";
 import { ConnectorDefinitionTypeControl } from "../ConnectorForm/components/Controls/ConnectorServiceTypeControl";
@@ -132,6 +138,11 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
     setDocumentationUrl,
   ]);
 
+  const handleTestConnector: ConnectorFormProps["testConnector"] = (v) => {
+    setErrorStatusRequest(null);
+    return testConnector(v);
+  };
+
   const onHandleSubmit = async (values: ConnectorFormValues) => {
     if (!selectedConnectorDefinition) {
       return;
@@ -210,7 +221,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
               isTestConnectionInProgress={isTestConnectionInProgress}
               connectionTestSuccess={connectionTestSuccess}
               onStopTesting={onStopTesting}
-              testConnector={testConnector}
+              testConnector={handleTestConnector}
               onSubmit={onHandleSubmit}
               formValues={formValues}
               errorMessage={error && generateMessageFromError(error)}
@@ -219,7 +230,14 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
             />
           )}
           {/* Show the job log only if advanced mode is turned on or the actual job failed (not the check inside the job) */}
-          {job && (advancedMode || !job.succeeded) && <JobItem job={job} />}
+          {job && (advancedMode || !job.succeeded) && (
+            <div className={styles.connectionTestLogs}>
+              <Heading as="h4">
+                <FormattedMessage id="connector.failedTestLogsHeading" />
+              </Heading>
+              <JobLogs job={job} jobIsFailed />
+            </div>
+          )}
         </div>
       </div>
     </Card>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.module.scss
index 15d8b0337b72..0976e17e7de4 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.module.scss
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.module.scss
@@ -1,3 +1,12 @@
+@use "scss/variables";
+
+.controlsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: variables.$spacing-lg;
+}
+
 .buttonsContainer {
   display: flex;
 }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx
index dcd665062561..ba6bd0246089 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.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";
 
@@ -9,13 +8,6 @@ import { TestingConnectionError } from "./TestingConnectionError";
 import { TestingConnectionSpinner } from "./TestingConnectionSpinner";
 import TestingConnectionSuccess from "./TestingConnectionSuccess";
 
-const Controls = styled.div`
-  margin-top: 34px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 interface IProps {
   formType: "source" | "destination";
   isSubmitting: boolean;
@@ -57,8 +49,7 @@ const EditControls: React.FC<IProps> = ({
 
   return (
     <>
-      {renderStatusMessage()}
-      <Controls>
+      <div className={styles.controlsContainer}>
         <div className={styles.buttonsContainer}>
           <Button type="submit" disabled={isSubmitting || !dirty}>
             <FormattedMessage id="form.saveChangesAndTest" />
@@ -78,7 +69,8 @@ const EditControls: React.FC<IProps> = ({
             <FormattedMessage id={`form.${formType}Retest`} />
           </Button>
         )}
-      </Controls>
+      </div>
+      {renderStatusMessage()}
     </>
   );
 };

From d6d277a55e05cff4745c61cfd9a790d30b96dbe3 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Mon, 2 Jan 2023 17:16:03 +0100
Subject: [PATCH 2/3] add button to toggle

---
 airbyte-webapp/src/locales/en.json            |  3 ++-
 .../Connector/ConnectorCard/ConnectorCard.tsx | 20 +++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index fabd98f7e630..564005489572 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -582,7 +582,8 @@
   "connector.optionsHeader": "Options",
   "connector.exampleValues": "Example {count, plural, one {value} other {values}}",
   "connector.oauthCredentialsMissing": "OAuth login is temporarily unavailable for this connector. Please try again later.",
-  "connector.failedTestLogsHeading": "Connection test logs",
+  "connector.showLogs": "Show connection test logs",
+  "connector.hideLogs": "Hide connection test logs",
 
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
index 5cfdf8d5a740..4389e7b668d9 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import JobLogs from "components/JobItem/components/JobLogs";
+import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
-import { Heading } from "components/ui/Heading";
 import { Spinner } from "components/ui/Spinner";
 
 import {
@@ -15,7 +15,6 @@ import {
 } from "core/domain/connector";
 import { DestinationRead, SourceRead, SynchronousJobRead } from "core/request/AirbyteClient";
 import { LogsRequestError } from "core/request/LogsRequestError";
-import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { generateMessageFromError } from "utils/errorStatusMessage";
 import {
   ConnectorCardValues,
@@ -87,7 +86,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   const [saved, setSaved] = useState(false);
   const [errorStatusRequest, setErrorStatusRequest] = useState<Error | null>(null);
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
-  const [advancedMode] = useAdvancedModeSetting();
+  const [logsVisible, setLogsVisible] = useState(false);
 
   const { setDocumentationUrl, setDocumentationPanelOpen } = useDocumentationPanelContext();
   const {
@@ -230,12 +229,17 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
             />
           )}
           {/* Show the job log only if advanced mode is turned on or the actual job failed (not the check inside the job) */}
-          {job && (advancedMode || !job.succeeded) && (
+          {job && (
             <div className={styles.connectionTestLogs}>
-              <Heading as="h4">
-                <FormattedMessage id="connector.failedTestLogsHeading" />
-              </Heading>
-              <JobLogs job={job} jobIsFailed />
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setLogsVisible(!logsVisible);
+                }}
+              >
+                <FormattedMessage id={logsVisible ? "connector.hideLogs" : "connector.showLogs"} />
+              </Button>
+              {logsVisible && <JobLogs job={job} jobIsFailed />}
             </div>
           )}
         </div>

From 41c0fdaa5d9ae1e3faadd9594c3c05dd78921c12 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Fri, 6 Jan 2023 13:33:05 +0100
Subject: [PATCH 3/3] lokk and feel

---
 airbyte-webapp/src/locales/en.json                        | 3 +--
 .../src/views/Connector/ConnectorCard/ConnectorCard.tsx   | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 0422fe69f891..4e6739a69aa1 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -584,8 +584,7 @@
   "connector.optionsHeader": "Options",
   "connector.exampleValues": "Example {count, plural, one {value} other {values}}",
   "connector.oauthCredentialsMissing": "OAuth login is temporarily unavailable for this connector. Please try again later.",
-  "connector.showLogs": "Show connection test logs",
-  "connector.hideLogs": "Hide connection test logs",
+  "connector.testLogs": "Connection test logs",
 
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
index ab85aba9c95b..fceec58f6fd9 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -1,3 +1,5 @@
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -233,16 +235,16 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
               connectorId={isEditMode ? getConnectorId(props.connector) : undefined}
             />
           )}
-          {/* Show the job log only if advanced mode is turned on or the actual job failed (not the check inside the job) */}
           {job && (
             <div className={styles.connectionTestLogs}>
               <Button
-                variant="secondary"
+                variant="clear"
+                icon={<FontAwesomeIcon icon={logsVisible ? faChevronDown : faChevronRight} />}
                 onClick={() => {
                   setLogsVisible(!logsVisible);
                 }}
               >
-                <FormattedMessage id={logsVisible ? "connector.hideLogs" : "connector.showLogs"} />
+                <FormattedMessage id="connector.testLogs" />
               </Button>
               {logsVisible && <JobLogs job={job} jobIsFailed />}
             </div>