Add link to Coriolis Help page in user drop menu

There's a new Coriolis Help link visible when opening the user dropdown
menu.

src/components/molecules/UserDropdown/UserDropdown.tsx

@@ -25,6 +25,7 @@ import type { User } from '../../../@types/User'
 
 import userImage from './images/user.svg'
 import userWhiteImage from './images/user-white.svg'
+import openInNewImage from './images/openInNewImage'
 import configLoader from '../../../utils/Config'
 
 const Wrapper = styled.div<any>`
@@ -42,6 +43,16 @@ const Icon = styled.div<any>`
     opacity: 0.8;
   }
 `
+const Help = styled.div`
+  display: flex;
+  align-items: center;
+`
+const OpenInNewIcon = styled.div`
+  ${StyleProps.exactSize('16px')}
+  position: relative;
+  top: -2px;
+  transform: scale(0.6);
+`
 const List = styled.div<any>`
   background: ${Palette.grayscale[1]};
   border-radius: ${StyleProps.borderRadius};
@@ -58,13 +69,16 @@ const ListItem = styled.div<any>`
   padding-top: 8px;
 `
 
-const Label = styled.div<any>`
+const Label = styled.div<{selectable?: boolean, hoverColor?: string}>`
   display: inline-block;
   white-space: nowrap;
   ${props => (props.selectable ? css`
     cursor: pointer;
     &:hover {
-      color: ${Palette.primary};
+      color: ${props.hoverColor};
+      svg {
+        fill: ${props.hoverColor};
+      }
     }
   ` : '')}
 `
@@ -101,7 +115,7 @@ const Email = styled.div<any>`
   border-bottom: 1px solid ${Palette.grayscale[3]};
 `
 
-type DictItem = { label: string, value: string }
+type DictItem = { label: React.ReactNode, value: string }
 type Props = {
   onItemClick: (item: DictItem) => void,
   user: User | null | undefined,
@@ -133,6 +147,10 @@ class UserDropdown extends React.Component<Props, State> {
     }
 
     this.setState({ showDropdownList: false })
+
+    if (item.value === 'help') {
+      window.open('https://cloudbase.it/coriolis-overview/', '_blank')
+    }
   }
 
   @autobind
@@ -186,13 +204,25 @@ class UserDropdown extends React.Component<Props, State> {
       return null
     }
 
-    const items = [{
-      label: 'About Coriolis',
-      value: 'about',
-    }, {
-      label: 'Sign Out',
-      value: 'signout',
-    }]
+    const items: DictItem[] = [
+      {
+        label: 'About Coriolis',
+        value: 'about',
+      },
+      {
+        label: (
+          <Help>
+            Help
+            <OpenInNewIcon dangerouslySetInnerHTML={{ __html: openInNewImage() }} />
+          </Help>
+        ),
+        value: 'help',
+      },
+      {
+        label: 'Sign Out',
+        value: 'signout',
+      },
+    ]
     const list = (
       <List>
         <ListHeader>
@@ -205,7 +235,12 @@ class UserDropdown extends React.Component<Props, State> {
             onMouseDown={() => { this.itemMouseDown = true }}
             onMouseUp={() => { this.itemMouseDown = false }}
           >
-            <Label selectable onClick={() => { this.handleItemClick(item) }} data-test-id={`userDropdown-label-${item.value}`}>{item.label}</Label>
+            <Label
+              selectable
+              onClick={() => { this.handleItemClick(item) }}
+              hoverColor={item.value !== 'signout' ? Palette.primary : Palette.alert}
+            >{item.label}
+            </Label>
           </ListItem>
         )) : null}
       </List>

src/components/molecules/UserDropdown/images/openInNewImage.ts

@@ -0,0 +1,11 @@
+export default () => `
+<svg xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="#202134"
+>
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+</svg>
+`

src/components/organisms/DetailsPageHeader/DetailsPageHeader.tsx

@@ -59,7 +59,7 @@ type State = {
 }
 type Props = {
   user?: UserType | null,
-  onUserItemClick: (userItem: { label: string, value: string }) => void,
+  onUserItemClick: (userItem: { label: React.ReactNode, value: string }) => void,
   testMode?: boolean,
 }
 
@@ -90,7 +90,7 @@ class DetailsPageHeader extends React.Component<Props, State> {
     notificationStore.saveSeen()
   }
 
-  handleUserItemClick(item: { label: string, value: string }) {
+  handleUserItemClick(item: { label: React.ReactNode, value: string }) {
     switch (item.value) {
       case 'about':
         this.setState({ showAbout: true })