Add Sidebar Popout for Support Links

airbyte-webapp/src/config/uiConfig.ts

@@ -9,6 +9,7 @@ const uiConfig = {
   updateLink: `${BASE_DOCS_LINK}/upgrading-airbyte`,
   productReleaseStages: `${BASE_DOCS_LINK}/project-overview/product-release-stages`,
   slackLink: "https://slack.airbyte.com",
+  supportTicketLink: "https://airbyte.com/contact-support",
   docsLink: BASE_DOCS_LINK,
   configurationArchiveLink: `${BASE_DOCS_LINK}/tutorials/upgrading-airbyte`,
   normalizationLink: `${BASE_DOCS_LINK}/understanding-airbyte/connections#airbyte-basic-normalization`,

airbyte-webapp/src/locales/en.json

@@ -22,6 +22,8 @@
   "sidebar.joinSlack": "Join our Slack",
   "sidebar.status": "Airbyte status",
   "sidebar.chat": "Chat with us",
+  "sidebar.support": "Support",
+  "sidebar.supportTicket": "Submit a Ticket",
   "sidebar.recipes": "Tutorials - Use cases",
 
   "form.continue": "Continue",

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 
 import { Link } from "components";
 
@@ -20,7 +21,7 @@ import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
 import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService";
 import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
-import ResourcesPopup, { Icon, Item } from "views/layout/SideBar/components/ResourcesPopup";
+import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout";
 import { FeatureItem, WithFeature } from "hooks/services/Feature";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
@@ -157,11 +158,21 @@ const SideBar: React.FC = () => {
           </MenuItem>
         </li>
         <li>
-          <ResourcesPopup
+          <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
+            {({ onOpen }) => (
+              <MenuItem onClick={onOpen} as="div">
+                <DocsIcon />
+                <Text>
+                  <FormattedMessage id="sidebar.resources" />
+                </Text>
+              </MenuItem>
+            )}
+          </SidebarPopout>
+        </li>
+        <li>
+          <SidebarPopout
             options={[
-              { value: "docs" },
-              { value: "slack" },
-              { value: "status" },
+              { value: "ticket" },
               {
                 value: "chat",
                 label: (
@@ -173,18 +184,17 @@ const SideBar: React.FC = () => {
                   </Item>
                 ),
               },
-              { value: "recipes" },
             ]}
           >
             {({ onOpen }) => (
               <MenuItem onClick={onOpen} as="div">
-                <DocsIcon />
+                <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
                 <Text>
-                  <FormattedMessage id="sidebar.resources" />
+                  <FormattedMessage id="sidebar.support" />
                 </Text>
               </MenuItem>
             )}
-          </ResourcesPopup>
+          </SidebarPopout>
         </li>
         <li>
           <MenuItem to={RoutePaths.Settings}>

airbyte-webapp/src/views/layout/SideBar/SideBar.tsx

@@ -18,7 +18,7 @@ import DocsIcon from "./components/DocsIcon";
 import OnboardingIcon from "./components/OnboardingIcon";
 import SettingsIcon from "./components/SettingsIcon";
 import SourceIcon from "./components/SourceIcon";
-import ResourcesPopup from "./components/ResourcesPopup";
+import SidebarPopout from "./components/SidebarPopout";
 import { NotificationIndicator } from "./NotificationIndicator";
 
 const Bar = styled.nav`
@@ -146,7 +146,7 @@ const SideBar: React.FC = () => {
           </MenuLinkItem>
         </li>
         <li>
-          <ResourcesPopup options={[{ value: "docs" }, { value: "slack" }, { value: "recipes" }]}>
+          <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "recipes" }]}>
             {({ onOpen }) => (
               <MenuItem onClick={onOpen} as="div">
                 <DocsIcon />
@@ -155,7 +155,7 @@ const SideBar: React.FC = () => {
                 </Text>
               </MenuItem>
             )}
-          </ResourcesPopup>
+          </SidebarPopout>
         </li>
 
         <li>

airbyte-webapp/src/views/layout/SideBar/components/ResourcesPopup.tsx → airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 
 import { Popout } from "components";
 
@@ -27,7 +28,7 @@ export const Icon = styled.div`
   font-size: 22px;
 `;
 
-const ResourcesPopup: React.FC<{
+const SidebarPopout: React.FC<{
   children: (props: { onOpen: () => void }) => React.ReactNode;
   options: { value: string; label?: React.ReactNode }[];
 }> = ({ children, options }) => {
@@ -86,6 +87,18 @@ const ResourcesPopup: React.FC<{
                 </Item>
               ),
             };
+          case "ticket":
+            return {
+              value: "ticket",
+              label: (
+                <Item href={config.ui.supportTicketLink} target="_blank">
+                  <Icon>
+                    <FontAwesomeIcon icon={faEnvelope} />
+                  </Icon>
+                  <FormattedMessage id="sidebar.supportTicket" />
+                </Item>
+              ),
+            };
           default:
             return {
               value: item.value,
@@ -103,7 +116,7 @@ const ResourcesPopup: React.FC<{
         menuPortal: (base) => ({
           ...base,
           // TODO: temporary dirty hack
-          transform: "translate3D(100px, -200px, 0px)",
+          transform: "translate3D(100px, -100px, 0px)",
         }),
       }}
       isSearchable={false}
@@ -112,4 +125,4 @@ const ResourcesPopup: React.FC<{
   );
 };
 
-export default ResourcesPopup;
+export default SidebarPopout;