Add update button (#4809)

Author: jamakase

airbyte-webapp/src/config/index.ts

@@ -16,6 +16,7 @@ declare global {
 type Config = {
   ui: {
     helpLink: string;
+    updateLink: string;
     slackLink: string;
     docsLink: string;
     configurationArchiveLink: string;
@@ -44,6 +45,7 @@ const config: Config = {
   ui: {
     technicalSupport: `${BASE_DOCS_LINK}/troubleshooting/on-deploying`,
     helpLink: "https://airbyte.io/community",
+    updateLink: "https://docs.airbyte.io/upgrading-airbyte",
     slackLink: "https://slack.airbyte.io",
     docsLink: "https://docs.airbyte.io",
     configurationArchiveLink: `${BASE_DOCS_LINK}/tutorials/upgrading-airbyte`,

airbyte-webapp/src/locales/en.json

@@ -10,6 +10,7 @@
   "sidebar.slack": "Slack",
   "sidebar.connections": "Connections",
   "sidebar.settings": "Settings",
+  "sidebar.update": "Update",
 
   "form.continue": "Continue",
   "form.yourEmail": "Your email",

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLifeRing, faBook, faCog } from "@fortawesome/free-solid-svg-icons";
+import { faRocket, faBook, faCog } from "@fortawesome/free-solid-svg-icons";
 import { faSlack } from "@fortawesome/free-brands-svg-icons";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
@@ -161,19 +161,19 @@ const SideBar: React.FC = () => {
       </div>
       <Menu>
         <li>
-          <MenuLinkItem href={config.ui.slackLink} target="_blank">
-            {/*@ts-ignore slack icon fails here*/}
-            <HelpIcon icon={faSlack} />
+          <MenuLinkItem href={config.ui.updateLink} target="_blank">
+            <HelpIcon icon={faRocket} />
             <Text>
-              <FormattedMessage id="sidebar.slack" />
+              <FormattedMessage id="sidebar.update" />
             </Text>
           </MenuLinkItem>
         </li>
         <li>
-          <MenuLinkItem href={config.ui.helpLink} target="_blank">
-            <HelpIcon icon={faLifeRing} />
+          <MenuLinkItem href={config.ui.slackLink} target="_blank">
+            {/*@ts-ignore slack icon fails here*/}
+            <HelpIcon icon={faSlack} />
             <Text>
-              <FormattedMessage id="sidebar.help" />
+              <FormattedMessage id="sidebar.slack" />
             </Text>
           </MenuLinkItem>
         </li>