Show GA icon next to source/destination type (#12252)

* Show GA icon next to source/destination type * Add GA icon svg * Consolidate values in locales related to connector stage * Wrap one line if statement in curly braces Co-authored-by: Krishna Glick <krishna@airbyte.io>
airbytehq · Apr 22, 2022 · e846743 · e846743
1 parent 1123bf0
commit e846743
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 22 deletions.
diff --git a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
@@ -1,6 +1,7 @@
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
+import { GAIcon } from "components/icons/GAIcon";
 import ToolTip from "components/ToolTip";
 
 import { ReleaseStage } from "core/domain/connector";
@@ -26,19 +27,22 @@ interface Props {
 }
 
 export const ReleaseStageBadge: React.FC<Props> = ({ stage, small, tooltip = true }) => {
-  if (!stage || stage === ReleaseStage.GENERALLY_AVAILABLE || stage === ReleaseStage.CUSTOM) {
+  if (!stage || stage === ReleaseStage.CUSTOM) {
     return null;
   }
 
-  const badge = (
-    <Stage $small={!!small}>
-      <FormattedMessage id={`component.releaseStageBadge.${stage}.title`} />
-    </Stage>
-  );
+  const badge =
+    stage === ReleaseStage.GENERALLY_AVAILABLE ? (
+      <GAIcon />
+    ) : (
+      <Stage $small={!!small}>
+        <FormattedMessage id={`connector.releaseStage.${stage}`} />
+      </Stage>
+    );
 
   return tooltip ? (
     <ToolTip control={badge} cursor="help">
-      <FormattedMessage id={`component.releaseStageBadge.${stage}.tooltip`} />
+      <FormattedMessage id={`connector.releaseStage.${stage}.description`} />
     </ToolTip>
   ) : (
     badge

diff --git a/airbyte-webapp/src/components/icons/GAIcon.tsx b/airbyte-webapp/src/components/icons/GAIcon.tsx
@@ -0,0 +1,20 @@
+import { theme } from "theme";
+
+interface Props {
+  color?: string;
+}
+
+export const GAIcon = ({ color = theme.greyColor20 }: Props) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      d="M9 0L10.6262 1.87523L12.905 0.89128L13.5565 3.28638L16.0365 3.38859L15.5843 5.82918L17.7744 6.99731L16.308 9L17.7744 11.0027L15.5843 12.1708L16.0365 14.6114L13.5565 14.7136L12.905 17.1087L10.6262 16.1248L9 18L7.37382 16.1248L5.09505 17.1087L4.44354 14.7136L1.96352 14.6114L2.41572 12.1708L0.225649 11.0027L1.692 9L0.225649 6.99731L2.41572 5.82918L1.96352 3.38859L4.44354 3.28638L5.09505 0.89128L7.37382 1.87523L9 0Z"
+      fill={color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.56983 12.3106L4.73486 9.47559L5.63534 8.57511L8.02007 10.9598L12.5855 6.39437L13.486 7.29484L8.4703 12.3106C8.22164 12.5592 7.81849 12.5592 7.56983 12.3106Z"
+      fill="white"
+    />
+  </svg>
+);
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -2,11 +2,6 @@
   "webapp.cannotReachServer": "Cannot reach server. The server may still be starting up.",
   "notifications.error.health": "Cannot reach server",
 
-  "component.releaseStageBadge.beta.title": "Beta",
-  "component.releaseStageBadge.beta.tooltip": "<b>Beta connectors</b> are in development but stable and reliable and support is provided.",
-  "component.releaseStageBadge.alpha.title": "Alpha",
-  "component.releaseStageBadge.alpha.tooltip": "<b>Alpha connectors</b> are in development and support is not provided.",
-
   "sidebar.sources": "Sources",
   "sidebar.destinations": "Destinations",
   "sidebar.admin": "Admin",
@@ -467,12 +462,14 @@
   "connector.email.placeholder": "richard@piedpiper.com",
   "connector.source": "Source",
   "connector.destination": "Destination",
-  "connector.releaseStage.alpha": "alpha",
-  "connector.releaseStage.beta": "beta",
-  "connector.releaseStage.custom": "custom",
-  "connector.releaseStage.generally_available": "generally available",
-  "connector.connectorsInDevelopment.alpha": "<b>Alpha connectors</b> are in development and support is not provided. See our <lnk>documentation</lnk> for more details.",
-  "connector.connectorsInDevelopment.beta": "<b>Beta connectors</b> are in development but stable and reliable and support is provided. See our <lnk>documentation</lnk> for more details.",
+  "connector.releaseStage.alpha": "Alpha",
+  "connector.releaseStage.beta": "Beta",
+  "connector.releaseStage.custom": "Custom",
+  "connector.releaseStage.generally_available": "GA",
+  "connector.releaseStage.alpha.description": "<b>Alpha connectors</b> are in development and support is not provided.",
+  "connector.releaseStage.beta.description": "<b>Beta connectors</b> are in development but stable and reliable and support is provided.",
+  "component.releaseStage.generally_available.description": "<b>Generally Available (GA) connectors</b> have been deemed ready for use in a production environment and is officially supported by Airbyte. Their documentation is considered sufficient to support widespread adoption.",
+  "connector.connectorsInDevelopment.docLink": "See our <lnk>documentation</lnk> for more details.",
   "credits.credits": "Credits",
   "credits.whatAreCredits": "What are credits?",
   "credits.buyCredits": "Buy credits",

diff --git a/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -13,6 +13,7 @@ import {
   ItemView as SingleValueView,
 } from "components/base/DropDown/components/SingleValue";
 import { ConnectorIcon } from "components/ConnectorIcon";
+import { GAIcon } from "components/icons/GAIcon";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { FormBaseItem } from "core/form/types";
@@ -111,12 +112,21 @@ const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({ children, ...prop
   </>
 );
 
-const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({ releaseStage }) =>
-  releaseStage && releaseStage !== ReleaseStage.GENERALLY_AVAILABLE ? (
+const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({ releaseStage }) => {
+  if (!releaseStage) {
+    return null;
+  }
+
+  if (releaseStage === ReleaseStage.GENERALLY_AVAILABLE) {
+    return <GAIcon />;
+  }
+
+  return (
     <Stage>
       <FormattedMessage id={`connector.releaseStage.${releaseStage}`} defaultMessage={releaseStage} />
     </Stage>
-  ) : null;
+  );
+};
 
 const Option: React.FC<OptionProps> = (props) => {
   return (

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/WarningMessage.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/WarningMessage.tsx
@@ -31,8 +31,9 @@ const WarningMessage: React.FC<WarningMessageProps> = ({ stage }) => {
   const config = useConfig();
   return (
     <Content>
+      <FormattedMessage id={`connector.releaseStage.${stage}.description`} />{" "}
       <FormattedMessage
-        id={`connector.connectorsInDevelopment.${stage}`}
+        id={`connector.docsLink`}
         values={{
           lnk: (node: React.ReactNode) => (
             <Link href={config.ui.productReleaseStages} target="_blank" rel="noreferrer">