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,7 +436,8 @@
   "connector.releaseStage.beta": "beta",
   "connector.releaseStage.custom": "custom",
   "connector.releaseStage.generally_available": "generally available",
-
+  "connector.connectorsInDevelopment.alpha": "<b>Alpha connectors</b> are in development. We strongly discourage production use cases and do not offer support SLAs. The release may not be feature complete and breaking changes may be introduced.",
+  "connector.connectorsInDevelopment.beta": "<b>Beta connectors</b> are considered stable and reliable with no backwards incompatible changes but has yet to be used by a larger group of users so we expect there to be some small issues and bugs to iron out.",
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",
   "credits.buyCredits": "+ Buy credits",

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

@@ -4,6 +4,7 @@ import { useField } from "formik";
 import { components } from "react-select";
 import { MenuListComponentProps } from "react-select/src/components/Menu";
 import styled from "styled-components";
+import WarningMessage from "../WarningMessage";
 
 import {
   ControlLabels,
@@ -214,6 +215,11 @@ const ConnectorServiceTypeControl: React.FC<{
           documentationUrl={documentationUrl}
         />
       )}
+      {selectedService &&
+        (selectedService.releaseStage === ReleaseStage.ALPHA ||
+          selectedService.releaseStage === ReleaseStage.BETA) && (
+          <WarningMessage stage={selectedService.releaseStage} />
+        )}
     </>
   );
 };

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { FormattedHTMLMessage } from "react-intl";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+
+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 Exclamation = styled(FontAwesomeIcon)`
+  font-size: 20px;
+  margin-right: 12px;
+  color: ${({ theme }) => theme.redColor};
+`;
+
+type WarningMessageProps = {
+  stage: string;
+};
+
+const WarningMessage: React.FC<WarningMessageProps> = ({ stage }) => {
+  return (
+    <Content>
+      <Exclamation icon={faExclamationCircle} />
+      <div>
+        <FormattedHTMLMessage
+          id={`connector.connectorsInDevelopment.${stage}`}
+        />
+      </div>
+    </Content>
+  );
+};
+
+export default WarningMessage;