Show warning for Alpha and Beta connectors

airbyte-webapp/src/components/LabeledToggle/LabeledToggle.tsx

@@ -35,7 +35,7 @@ const AdditionMessage = styled.span`
 `;
 
 const LabeledToggle: React.FC<IProps> = (props) => (
-  <ToggleContainer>
+  <ToggleContainer className={props.className}>
     {props.checkbox ? (
       <CheckBox {...props} id={`toggle-${props.name}`} />
     ) : (

airbyte-webapp/src/locales/en.json

@@ -436,6 +436,9 @@
   "connector.releaseStage.beta": "beta",
   "connector.releaseStage.custom": "custom",
   "connector.releaseStage.generally_available": "generally available",
+  "connector.acknowledgeTerms": "I acknowledge these terms",
+  "connector.termsModal.text": "<b>Alpha</b> connectors are in active development. The release may not be feature complete and breaking changes may be introduced. \n\nOn occasion, we will reach out to users to gather feedbacks so that we can improve the connector.",
+  "connector.connectorsInDevelopment": "<b>Alpha connectors</b> are in active development. The release may not be feature complete and breaking changes may be introduced.\nOn occasion, we will reach out to users to gather feedbacks so that we can improve the connector.",
 
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",

airbyte-webapp/src/views/Connector/ServiceForm/components/AcknowledgementOfTermsModal.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
+
+import { Modal, Button, LabeledToggle } from "components";
+import { getIcon } from "utils/imageUtils";
+
+type ConnectorItem = {
+  name?: string;
+  stage?: string;
+  icon?: string;
+};
+
+type AcknowledgementOfTermsModalProps = {
+  onClose: () => void;
+  onSubmit: () => void;
+  connector: ConnectorItem;
+};
+
+const Content = styled.div`
+  max-width: 430px;
+  padding: 15px 20px 21px;
+  font-style: normal;
+  font-size: 14px;
+  line-height: 17px;
+  white-space: break-spaces;
+`;
+
+const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const CheckBoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 21px;
+`;
+
+const Agreement = styled(LabeledToggle)`
+  & label {
+    font-size: 11px;
+    line-height: 16px;
+  }
+`;
+
+const Footer = styled.div`
+  padding: 15px 20px;
+  border-top: 1px solid ${({ theme }) => theme.greyColor30};
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const CancelButton = styled(Button)`
+  margin-right: 10px;
+`;
+
+const Stage = styled.div`
+  padding: 2px 6px;
+  height: 14px;
+  background: ${({ theme }) => theme.greyColor20};
+  border-radius: 25px;
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 8px;
+  line-height: 10px;
+  color: ${({ theme }) => theme.textColor};
+`;
+
+const Icon = styled.div`
+  width: 27px;
+  margin-right: 12px;
+  display: inline-block;
+
+  & img {
+    vertical-align: middle;
+  }
+`;
+
+const ModalTitle: React.FC<ConnectorItem> = (props) => {
+  return (
+    <Title>
+      <div>
+        {props.icon && <Icon>{getIcon(props.icon)}</Icon>}
+        {props.name}
+      </div>
+      <Stage>{props.stage}</Stage>
+    </Title>
+  );
+};
+
+const AcknowledgementOfTermsModal: React.FC<AcknowledgementOfTermsModalProps> = ({
+  onClose,
+  onSubmit,
+  connector,
+}) => {
+  const [agreed, setAgreed] = useState(false);
+
+  return (
+    <Modal
+      title={
+        <ModalTitle
+          name={connector.name}
+          stage={connector.stage}
+          icon={connector.icon}
+        />
+      }
+      onClose={onClose}
+    >
+      <>
+        <Content>
+          <FormattedMessage
+            id="connector.termsModal.text"
+            values={{
+              b: (...b: React.ReactNode[]) => <strong>{b}</strong>,
+            }}
+          />
+
+          <CheckBoxContainer>
+            <Agreement
+              checkbox
+              checked={agreed}
+              onChange={() => setAgreed(!agreed)}
+              label={<FormattedMessage id="connector.acknowledgeTerms" />}
+            />
+          </CheckBoxContainer>
+        </Content>
+        <Footer>
+          <CancelButton secondary onClick={onClose}>
+            <FormattedMessage id="form.cancel" />
+          </CancelButton>
+          <Button onClick={onSubmit} disabled={!agreed}>
+            <FormattedMessage id="form.continue" />
+          </Button>
+        </Footer>
+      </>
+    </Modal>
+  );
+};
+
+export default AcknowledgementOfTermsModal;

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx

@@ -1,9 +1,11 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useField } from "formik";
 import { components } from "react-select";
 import { MenuListComponentProps } from "react-select/src/components/Menu";
 import styled from "styled-components";
+import AcknowledgementOfTermsModal from "../AcknowledgementOfTermsModal";
+import WarningMessage from "../WarningMessage";
 
 import {
   ControlLabels,
@@ -70,6 +72,10 @@ const Stage = styled.div`
 `;
 
 type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false>;
+type ConnectorOption = DropDownRow.IDataItem & {
+  icon: string;
+  releaseStage: string;
+};
 
 const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({
   children,
@@ -134,6 +140,10 @@ const ConnectorServiceTypeControl: React.FC<{
 }) => {
   const formatMessage = useIntl().formatMessage;
   const [field, fieldMeta, { setValue }] = useField(property.path);
+  const [
+    selectedConnector,
+    setSelectedConnector,
+  ] = useState<ConnectorOption | null>(null);
 
   // TODO Begin hack
   // During the Cloud private beta, we let users pick any connector in our catalog.
@@ -161,6 +171,7 @@ const ConnectorServiceTypeControl: React.FC<{
           label: item.name,
           value: Connector.id(item),
           img: <ImageBlock img={item.icon} />,
+          icon: item.icon,
           releaseStage: item.releaseStage,
         }))
         .sort(defaultDataItemSort),
@@ -172,7 +183,7 @@ const ConnectorServiceTypeControl: React.FC<{
     [field.value, availableServices]
   );
 
-  const handleSelect = useCallback(
+  const handleContinueSelect = useCallback(
     (item: DropDownRow.IDataItem | null) => {
       if (item) {
         setValue(item.value);
@@ -184,6 +195,17 @@ const ConnectorServiceTypeControl: React.FC<{
     [setValue, onChangeServiceType]
   );
 
+  const handleSelect = useCallback(
+    (item: ConnectorOption | null) => {
+      if (item && item.releaseStage === ReleaseStage.ALPHA) {
+        setSelectedConnector(item);
+      } else {
+        handleContinueSelect(item);
+      }
+    },
+    [handleContinueSelect]
+  );
+
   return (
     <>
       <ControlLabels
@@ -207,13 +229,31 @@ const ConnectorServiceTypeControl: React.FC<{
           options={sortedDropDownData}
           onChange={handleSelect}
         />
+        {selectedConnector ? (
+          <AcknowledgementOfTermsModal
+            onClose={() => setSelectedConnector(null)}
+            onSubmit={() => {
+              handleContinueSelect(selectedConnector);
+              setSelectedConnector(null);
+            }}
+            connector={{
+              name: selectedConnector.label,
+              icon: selectedConnector.icon,
+              stage: selectedConnector.releaseStage,
+            }}
+          />
+        ) : null}
       </ControlLabels>
       {selectedService && documentationUrl && (
         <Instruction
           selectedService={selectedService}
           documentationUrl={documentationUrl}
         />
       )}
+      {selectedService &&
+        selectedService.releaseStage === ReleaseStage.ALPHA && (
+          <WarningMessage />
+        )}
     </>
   );
 };

airbyte-webapp/src/views/Connector/ServiceForm/components/WarningMessage.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 13px 20px;
+  border: 1px solid ${({ theme }) => theme.redColor};
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  white-space: break-spaces;
+  margin-top: 16px;
+`;
+
+const Sign = styled.img`
+  height: 20px;
+  width: 20px;
+  min-width: 20px;
+  margin-right: 12px;
+  display: inline-block;
+`;
+
+const WarningMessage: React.FC = () => {
+  return (
+    <Content>
+      <Sign src="/exclamationPoint.svg" />
+      <div>
+        <FormattedMessage
+          id="connector.connectorsInDevelopment"
+          values={{
+            b: (...b: React.ReactNode[]) => <strong>{b}</strong>,
+          }}
+        />
+      </div>
+    </Content>
+  );
+};
+
+export default WarningMessage;