diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 4e6739a69aa1..3afc56ce0fc0 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -507,10 +507,12 @@ "admin.connectorName": "Connector display name", "admin.connectorName.placeholder": "Connector name", "admin.dockerRepository": "Docker repository name", + "admin.dockerFullImageName": "Docker full image name", "admin.dockerRepository.placeholder": "airbytehq/postgres", + "admin.dockerFullImageName.placeholder": "customer-name/customer-image", "admin.dockerImageTag": "Docker image tag", "admin.dockerImageTag.placeholder": "12.3", - "admin.documentationUrl": "Connector Documentation URL", + "admin.documentationUrl": "Connector documentation URL", "admin.reloadAfterSuccess": "Note: The app will be reloaded after success submit", "admin.documentationUrl.placeholder": "https://hub.docker.com/r/airbyte/integration-singer-postgres-source", "admin.learnMore": "Learn more from our documentation to understand how to fill these fields.", diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss index f0d3ef319bce..c1e94076bed6 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss @@ -1,4 +1,4 @@ -@use "src/scss/variables"; +@use "scss/variables"; .buttonWithMargin { margin: 0 variables.$spacing-md; diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx index cd6692b0e83b..dcb33b8787ed 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx @@ -8,12 +8,14 @@ import { LabeledInput, Link } from "components"; import { Button } from "components/ui/Button"; import { Modal } from "components/ui/Modal"; import { StatusIcon } from "components/ui/StatusIcon"; +import { Text } from "components/ui/Text"; +import { isCloudApp } from "utils/app"; import { links } from "utils/links"; import styles from "./CreateConnectorModal.module.scss"; -export interface IProps { +export interface CreateConnectorModalProps { errorMessage?: string; onClose: () => void; onSubmit: (sourceDefinition: { @@ -36,12 +38,6 @@ const ButtonContent = styled.div` min-height: 40px; `; -const Label = styled.div` - font-weight: bold; - color: ${({ theme }) => theme.darkPrimaryColor}; - margin-bottom: 8px; -`; - const FieldContainer = styled.div` margin-bottom: 21px; `; @@ -84,13 +80,21 @@ const ErrorText = styled.div` max-width: 400px; `; const validationSchema = yup.object().shape({ - name: yup.string().required("form.empty.error"), - documentationUrl: yup.string().required("form.empty.error"), - dockerImageTag: yup.string().required("form.empty.error"), - dockerRepository: yup.string().required("form.empty.error"), + name: yup.string().trim().required("form.empty.error"), + documentationUrl: yup.string().trim().url("form.url.error").notRequired(), + dockerImageTag: yup.string().trim().required("form.empty.error"), + dockerRepository: yup.string().trim().required("form.empty.error"), }); -const CreateConnectorModal: React.FC = ({ onClose, onSubmit, errorMessage }) => { +const Label: React.FC> = ({ children }) => { + return ( + + {children} + + ); +}; + +const CreateConnectorModal: React.FC = ({ onClose, onSubmit, errorMessage }) => { const { formatMessage } = useIntl(); return ( @@ -115,19 +119,17 @@ const CreateConnectorModal: React.FC = ({ onClose, onSubmit, errorMessag dockerImageTag: "", dockerRepository: "", }} - validateOnBlur - validateOnChange validationSchema={validationSchema} onSubmit={async (values, { setSubmitting }) => { await onSubmit(values); setSubmitting(false); }} > - {({ isSubmitting, dirty, isValid }) => ( + {({ isSubmitting, isValid, dirty }) => (
- {({ field }: FieldProps) => ( + {({ field, meta }: FieldProps) => ( = ({ onClose, onSubmit, errorMessag } + error={meta.touched && !!meta.error} + message={ + meta.touched && meta.error ? ( + + ) : ( + + ) + } /> )} - {({ field }: FieldProps) => ( + {({ field, meta }: FieldProps) => ( = ({ onClose, onSubmit, errorMessag })} label={ } + error={meta.touched && !!meta.error} + message={ + meta.touched && meta.error ? ( + + ) : ( + + ) + } /> )} - {({ field }: FieldProps) => ( + {({ field, meta }: FieldProps) => ( = ({ onClose, onSubmit, errorMessag } + error={!!meta.error && meta.touched} + message={ + meta.touched && meta.error ? ( + + ) : ( + + ) + } /> )} - {({ field }: FieldProps) => ( + {({ field, meta }: FieldProps) => ( = ({ onClose, onSubmit, errorMessag } + error={meta.touched && !!meta.error} + message={meta.error && } /> )} diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.module.scss new file mode 100644 index 000000000000..ab2489061de1 --- /dev/null +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.module.scss @@ -0,0 +1,13 @@ +@use "scss/_variables"; +@use "scss/_colors"; + +.imageNameText { + margin-right: variables.$spacing-md; +} + +.linkText { + &:hover, + &:active { + color: colors.$blue; + } +} diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.tsx index c2a7fbcaaff5..52fe3a057a58 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ImageCell.tsx @@ -1,27 +1,30 @@ -import React from "react"; -import styled from "styled-components"; +import classNames from "classnames"; +import React, { PropsWithChildren } from "react"; + +import { Text } from "components/ui/Text"; + +import styles from "./ImageCell.module.scss"; interface ImageCellProps { imageName: string; link: string | undefined; } -const Link = styled.a` - height: 17px; - margin-right: 9px; - color: ${({ theme }) => theme.darkPrimaryColor}; +const ImageCellText: React.FC> = ({ children, className }) => ( + + {children} + +); - &:hover, - &:active { - color: ${({ theme }) => theme.primaryColor}; +const ImageCell: React.FC = ({ imageName, link }) => { + if (!link || !link.length) { + return {imageName}; } -`; -const ImageCell: React.FC = ({ imageName, link }) => { return ( - - {imageName} - + + {imageName} + ); }; diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx index 4420be887bc6..9e26e64fea0f 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx @@ -14,9 +14,10 @@ const LazyDocumentationPanel = lazy(() => export const ConnectorDocumentationLayout: React.FC> = ({ children }) => { const { formatMessage } = useIntl(); - const { documentationPanelOpen } = useDocumentationPanelContext(); + const { documentationPanelOpen, documentationUrl } = useDocumentationPanelContext(); const screenWidth = useWindowSize().width; - const showDocumentationPanel = screenWidth > 500 && documentationPanelOpen; + const isOfficialDocumentation = documentationUrl.includes("docs.airbyte.com"); + const showDocumentationPanel = screenWidth > 500 && documentationPanelOpen && isOfficialDocumentation; const documentationPanel = ( }>