Merge pull request #1409 from porter-dev/help-button

help tab

dashboard/src/index.html

@@ -39,6 +39,18 @@
       window.Cohere.init("_A-2HNgriISqaQq4yzTxM8V-");
     </script>
 
+    <script>
+      window.intercomSettings = {
+        app_id: "gq56g49i",
+        custom_launcher_selector: '#intercom_help'
+      };
+    </script>
+
+    <script>
+    // We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/gq56g49i'
+    (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/gq56g49i';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+    </script>
+
     <script>
       !(function () {
         var analytics = (window.analytics = window.analytics || []);

dashboard/src/main/home/navbar/Help.tsx

@@ -0,0 +1,211 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+import { Context } from "shared/Context";
+import discordLogo from "../../../assets/discord.svg";
+
+type PropsType = {
+};
+
+type StateType = {
+  showHelpDropdown: boolean;
+};
+
+export default class Help extends Component<PropsType, StateType> {
+  state = {
+      showHelpDropdown: false,
+  };
+
+  renderHelpDropdown = () => {
+    if (this.state.showHelpDropdown) {
+      return (
+        <>
+          <CloseOverlay
+            onClick={() =>
+              this.setState({
+                showHelpDropdown: false,
+              })
+            }
+          />
+          <Dropdown
+            dropdownWidth="155px"
+            dropdownMaxHeight="300px"
+          >
+            <Option onClick={()=> {
+                window.open('https://docs.porter.run', '_blank').focus();}
+            }>
+            <i className="material-icons-outlined">book</i>
+                Documentation
+            </Option>
+            <Line/>
+            <Option onClick={() => {
+              window.open('https://discord.gg/Vbse9vJtPU', '_blank').focus();
+            }}>
+            <Icon src={discordLogo} />
+              Community
+            </Option>
+            <Line/>
+            <Option id={'intercom_help'}>
+            <i className="material-icons-outlined">message</i>
+                Message us
+            </Option>            
+          </Dropdown>
+        </>
+      );
+    }
+  };
+
+  render() {
+    return (
+      <FeedbackButton selected={this.state.showHelpDropdown === true}>
+        <Flex
+          onClick={() =>
+            this.setState({
+              showHelpDropdown: !this.state.showHelpDropdown,
+            })
+          }
+        >
+          <i className="material-icons-outlined">help_outline</i>
+          Help
+        </Flex>
+        {this.renderHelpDropdown()}
+      </FeedbackButton>
+    );
+  }
+}
+
+Help.contextType = Context;
+
+const Option = styled.div`
+    margin-left: 15px;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 120px;
+    height: 40px;
+    color: #ffffff88;
+    cursor: pointer;
+    > i {
+        opacity: 50%;
+        color: white;
+        margin-right: 7px;
+        font-size: 20px;
+        cursor: pointer;
+    }
+`
+
+const Line = styled.div`
+    height: 1px;
+    z-index: 0;
+    left: 0;
+    background: #aaaabb55;
+    width: 100%;
+`
+
+const CloseOverlay = styled.div`
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  cursor: default;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const Dropdown = styled.div`
+  position: absolute;
+  right: 0;
+  top: calc(100% + 5px);
+  background: #26282f;
+  width: ${(props: {
+    dropdownWidth: string;
+    dropdownMaxHeight: string;
+    feedbackSent?: boolean;
+  }) => props.dropdownWidth};
+  max-height: ${(props: {
+    dropdownWidth: string;
+    dropdownMaxHeight: string;
+    feedbackSent?: boolean;
+  }) => (props.dropdownMaxHeight ? props.dropdownMaxHeight : "300px")};
+  border-radius: 10px;
+  z-index: 999;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  box-shadow: 0 8px 20px 0px #00000088;
+  animation: ${(props: {
+    dropdownWidth: string;
+    dropdownMaxHeight: string;
+    feedbackSent?: boolean;
+  }) => (props.feedbackSent ? "flyOff 0.3s 0.05s" : "")};
+  animation-fill-mode: forwards;
+  @keyframes flyOff {
+    from {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100px);
+    }
+  }
+`;
+
+const NavButton = styled.a`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  :hover {
+    > i {
+      color: #ffffff;
+    }
+  }
+
+  > i {
+    cursor: pointer;
+    color: ${(props: { selected?: boolean }) =>
+      props.selected ? "#ffffff" : "#ffffff88"};
+    font-size: 24px;
+  }
+`;
+
+const FeedbackButton = styled(NavButton)`
+  color: ${(props: { selected?: boolean }) =>
+    props.selected ? "#ffffff" : "#ffffff88"};
+  font-family: "Work Sans", sans-serif;
+  font-size: 14px;
+  margin-right: 20px;
+  :hover {
+    color: #ffffff;
+    > div {
+      > i {
+        color: #ffffff;
+      }
+    }
+  }
+
+  > div {
+    > i {
+      color: ${(props: { selected?: boolean }) =>
+        props.selected ? "#ffffff" : "#ffffff88"};
+      font-size: 22px;
+      margin-right: 6px;
+    }
+  }
+`;
+
+const Icon = styled.img`
+    margin-left: -2px;
+    height: 25px;
+    width: 25px;
+    opacity: 50%;
+    margin-right: 5px;
+`

dashboard/src/main/home/navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { Context } from "shared/Context";
 
 import Feedback from "./Feedback";
+import Help from "./Help";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 import { Select } from "@material-ui/core";
 
@@ -55,14 +56,13 @@ class Navbar extends Component<PropsType, StateType> {
   };
 
   renderFeedbackButton = () => {
-    if (this.context?.capabilities?.provisioner) {
-      return <Feedback currentView={this.props.currentView} />;
-    }
+    return <Feedback currentView={this.props.currentView} />;
   };
 
   render() {
     return (
       <StyledNavbar>
+        <Help/>
         {this.renderFeedbackButton()}
         <NavButton
           selected={this.state.showDropdown}
@@ -244,6 +244,20 @@ const StyledNavbar = styled.div`
   z-index: 1;
 `;
 
+const HelpIcon = styled.div`
+> a {
+  > i {
+    font-size: 18px;
+    margin-left: 8px;
+    margin-top: 2px;
+    color: #8590ff;
+    :hover {
+      color: #aaaabb;
+    }
+  }
+}
+`
+
 const NavButton = styled.a`
   display: flex;
   position: relative;