🪟 🎉 Add link to public slack channel in builder sidebar (#6551)

airbytehq · May 15, 2023 · 0e752de · 0e752de
1 parent 5d02e4a
commit 0e752de
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 10 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.module.scss
@@ -83,3 +83,25 @@
 .emptyStreamViewText {
   color: colors.$grey-300;
 }
+
+.slackLink {
+  color: colors.$dark-blue;
+
+  &:hover {
+    color: colors.$blue;
+  }
+
+  & a {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
+.slackIcon {
+  height: 14px;
+  width: 14px;
+}
+
+.cdkVersion {
+  color: colors.$grey-300;
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx
@@ -9,6 +9,7 @@ import Indicator from "components/Indicator";
 import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { Action, Namespace } from "core/services/analytics";
 import { useAnalyticsService } from "core/services/analytics";
@@ -17,6 +18,7 @@ import { BuilderView, useConnectorBuilderFormState } from "services/connectorBui
 import { AddStreamButton } from "./AddStreamButton";
 import styles from "./BuilderSidebar.module.scss";
 import { SavingIndicator } from "./SavingIndicator";
+import { ReactComponent as SlackIcon } from "./slack-icon.svg";
 import { UiYamlToggleButton } from "./UiYamlToggleButton";
 import { CDK_VERSION } from "../cdk";
 import { ConnectorImage } from "../ConnectorImage";
@@ -130,7 +132,7 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = React.memo(({ class
         </ViewSelectButton>
       </FlexContainer>
 
-      <FlexContainer direction="column" alignItems="stretch" gap="none" className={styles.streamListContainer}>
+      <FlexContainer direction="column" alignItems="stretch" gap="sm" className={styles.streamListContainer}>
         <div className={styles.streamsHeader}>
           <Text className={styles.streamsHeading} size="xs" bold>
             <FormattedMessage id="connectorBuilder.streamsHeading" values={{ number: values.streams.length }} />
@@ -173,14 +175,31 @@ export const BuilderSidebar: React.FC<BuilderSidebarProps> = React.memo(({ class
         <DownloadYamlButton yamlIsValid yaml={yamlManifest} />
         <PublishButton />
       </FlexContainer>
-      <Text size="sm" color="grey" align="center">
-        <FormattedMessage
-          id="connectorBuilder.cdkVersion"
-          values={{
-            version: CDK_VERSION,
-          }}
-        />
-      </Text>
+      <FlexContainer direction="column" gap="lg">
+        <Tooltip
+          placement="top"
+          control={
+            <Text size="sm" className={styles.slackLink}>
+              <a href="https://airbytehq.slack.com/archives/C027KKE4BCZ" target="_blank" rel="noreferrer">
+                <FlexContainer gap="sm" justifyContent="center" alignItems="flex-start">
+                  <SlackIcon className={styles.slackIcon} />
+                  <FormattedMessage id="connectorBuilder.slackChannel" />
+                </FlexContainer>
+              </a>
+            </Text>
+          }
+        >
+          <FormattedMessage id="connectorBuilder.slackChannelTooltip" />
+        </Tooltip>
+        <Text size="sm" color="grey" align="center" className={styles.cdkVersion}>
+          <FormattedMessage
+            id="connectorBuilder.cdkVersion"
+            values={{
+              version: CDK_VERSION,
+            }}
+          />
+        </Text>
+      </FlexContainer>
     </FlexContainer>
   );
 });

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/slack-icon.svg b/airbyte-webapp/src/components/connectorBuilder/Builder/slack-icon.svg
diff --git a/airbyte-webapp/src/components/connectorBuilder/builderVariables.scss b/airbyte-webapp/src/components/connectorBuilder/builderVariables.scss
@@ -1,2 +1,2 @@
-$sideBarWidth: 220px;
+$sideBarWidth: 225px;
 $toggleButtonWidth: 100px;
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -910,6 +910,8 @@
   "connectorBuilder.documentationLink": "Open documentation in separate tab",
   "connectorBuilder.interpolationHeading": "Variables available for interpolation",
   "connectorBuilder.maxLength": "Must be at most 256 characters",
+  "connectorBuilder.slackChannel": "#help-connector-development",
+  "connectorBuilder.slackChannelTooltip": "Ask any questions or provide feedback in our public slack channel",
 
   "jobs.noAttemptsFailure": "Failed to start job.",