feat: add feedback option to help menu

kubeshop · Jul 12, 2022 · 520204e · 520204e
1 parent f13457b
commit 520204e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/src/components/organisms/PageHeader/HelpMenu.styled.tsx b/src/components/organisms/PageHeader/HelpMenu.styled.tsx
@@ -2,6 +2,7 @@ import {Button as RawButton} from 'antd';
 
 import {
   ApiOutlined as RawApiOutlined,
+  CommentOutlined as RawCommentOutlined,
   QuestionCircleOutlined as RawQuestionCircleOutlined,
   SettingOutlined as RawSettingOutlined,
 } from '@ant-design/icons';
@@ -10,6 +11,20 @@ import styled from 'styled-components';
 
 import Colors from '@styles/Colors';
 
+export const ApiOutlined = styled(RawApiOutlined)`
+  font-size: 14px;
+  cursor: pointer;
+`;
+
+export const CommentOutlined = styled(RawCommentOutlined)`
+  font-size: 14px;
+  cursor: pointer;
+`;
+
+export const HelpLink = styled(RawButton)`
+  color: ${Colors.grey9};
+`;
+
 export const MenuContainer = styled.div`
   background-color: ${Colors.grey4000};
 `;
@@ -33,13 +48,6 @@ export const MenuItem = styled.div`
   }
 `;
 
-export const MenuItemIcon = styled.span`
-  width: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
 export const MenuItemLabel = styled.span`
   display: flex;
   justify-content: center;
@@ -54,23 +62,22 @@ export const MenuItemLinks = styled.div`
   padding-left: 40px;
   padding-bottom: 0.5rem;
   margin-top: -0.5rem;
+  border-bottom: 1px solid ${Colors.grey5b};
 `;
 
-export const HelpLink = styled(RawButton)`
-  color: ${Colors.grey9};
+export const MenuItemIcon = styled.span`
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
-export const SettingsOutlined = styled(RawSettingOutlined)`
-  font-size: 14px;
+export const QuestionCircleOutlined = styled(RawQuestionCircleOutlined)`
   cursor: pointer;
-`;
-
-export const ApiOutlined = styled(RawApiOutlined)`
   font-size: 14px;
-  cursor: pointer;
 `;
 
-export const QuestionCircleOutlined = styled(RawQuestionCircleOutlined)`
-  cursor: pointer;
+export const SettingsOutlined = styled(RawSettingOutlined)`
   font-size: 14px;
+  cursor: pointer;
 `;
diff --git a/src/components/organisms/PageHeader/HelpMenu.tsx b/src/components/organisms/PageHeader/HelpMenu.tsx
@@ -1,11 +1,13 @@
+import {shell} from 'electron';
+
 import {useMemo} from 'react';
 
 import {Tooltip} from 'antd';
 
 import semver from 'semver';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
-import {PluginDrawerTooltip, SettingsTooltip} from '@constants/tooltips';
+import {FeedbackTooltip, PluginDrawerTooltip, SettingsTooltip} from '@constants/tooltips';
 
 import {useAppDispatch} from '@redux/hooks';
 import {openPluginsDrawer} from '@redux/reducers/extension';
@@ -75,6 +77,7 @@ export const HelpMenu = ({onMenuClose}: {onMenuClose?: Function}) => {
           <S.MenuItemLabel>Settings</S.MenuItemLabel>
         </S.MenuItem>
       </Tooltip>
+
       <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={PluginDrawerTooltip}>
         <S.MenuItem
           onClick={() => {
@@ -88,12 +91,14 @@ export const HelpMenu = ({onMenuClose}: {onMenuClose?: Function}) => {
           <S.MenuItemLabel>Plugins Manager</S.MenuItemLabel>
         </S.MenuItem>
       </Tooltip>
+
       <S.MenuItem style={{borderBottom: 'none'}}>
         <S.MenuItemIcon>
           <S.QuestionCircleOutlined />
         </S.MenuItemIcon>
         <S.MenuItemLabel>Help</S.MenuItemLabel>
       </S.MenuItem>
+
       <S.MenuItemLinks>
         <S.HelpLink
           type="link"
@@ -167,6 +172,20 @@ export const HelpMenu = ({onMenuClose}: {onMenuClose?: Function}) => {
           About Monokle
         </S.HelpLink>
       </S.MenuItemLinks>
+
+      <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={FeedbackTooltip}>
+        <S.MenuItem
+          onClick={() => {
+            shell.openExternal('https://49x902y6r6t.typeform.com/to/vkFBEYYt');
+            handleMenuClose();
+          }}
+        >
+          <S.MenuItemIcon>
+            <S.CommentOutlined />
+          </S.MenuItemIcon>
+          <S.MenuItemLabel>Feedback</S.MenuItemLabel>
+        </S.MenuItem>
+      </Tooltip>
     </S.MenuContainer>
   );
 };
diff --git a/src/constants/tooltips.tsx b/src/constants/tooltips.tsx
@@ -25,6 +25,7 @@ export const EnableHelmWithKustomizeTooltip = 'Enable helm-related functionality
 export const ExitHelmPreviewTooltip = 'Exit Helm Chart preview (Escape)';
 export const ExitKustomizationPreviewTooltip = 'Exit Kustomize preview (Escape)';
 export const ExpandTreeTooltip = 'Expand all folders';
+export const FeedbackTooltip = 'Give Feedback';
 export const FileExplorerChanged = 'File Explorer has some changes. Reload it to see them.';
 export const HelmPreviewModeTooltip = 'Set which Helm command to use when generating Helm previews';
 export const HelmPreviewTooltip = 'Preview the Helm Chart with this values file';