diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 2fedfe1ca52b..4e6739a69aa1 100644 --- 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 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 9058ad193b10..fceec58f6fd9 100644 --- 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(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 { + setErrorStatusRequest(null); + return testConnector(v); + }; + const onHandleSubmit = async (values: ConnectorFormValues) => { if (!selectedConnectorDefinition) { return; @@ -215,7 +227,7 @@ export const ConnectorCard: React.FC )} - {/* 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 && ( +
+ + {logsVisible && } +
+ )} 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 = ({ return ( <> - {renderStatusMessage()} - +
)} - +
+ {renderStatusMessage()} ); };