🪟🎨 Connector form: Improve logs look and feel (#20951)

* improve logs look and feel in connector form * add button to toggle * lokk and feel
airbytehq · Jan 9, 2023 · f12262c · f12262c
1 parent c92fbee
commit f12262c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 23 deletions.
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -584,6 +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.testLogs": "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
@@ -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
@@ -1,7 +1,10 @@
+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";
 
-import { JobItem } from "components/JobItem/JobItem";
+import JobLogs from "components/JobItem/components/JobLogs";
+import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 import { Spinner } from "components/ui/Spinner";
 
@@ -14,9 +17,13 @@ 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, 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";
@@ -81,7 +88,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 {
@@ -132,6 +139,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;
@@ -215,16 +227,28 @@ 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)}
               successMessage={saved && props.isEditMode && <FormattedMessage id="form.changesSaved" />}
               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 && (advancedMode || !job.succeeded) && <JobItem job={job} />}
+          {job && (
+            <div className={styles.connectionTestLogs}>
+              <Button
+                variant="clear"
+                icon={<FontAwesomeIcon icon={logsVisible ? faChevronDown : faChevronRight} />}
+                onClick={() => {
+                  setLogsVisible(!logsVisible);
+                }}
+              >
+                <FormattedMessage id="connector.testLogs" />
+              </Button>
+              {logsVisible && <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
@@ -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
@@ -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()}
     </>
   );
 };