feat: Add button that links to docs to header

docs/dashboard.md

@@ -11,4 +11,4 @@ Then visit `localhost:3100` to view the user interface.
 
 ## Individual Rollout view
 
-![Rollouts List](dashboard/rollouts-ui.png)
+![Rollouts List](dashboard/rollout-ui.png)

ui/src/app/components/action-button/action-button.scss

@@ -21,6 +21,7 @@
     @mixin dark-background {
         border: 1px solid $silver-lining;
         background-color: $fog;
+        color: $silver-lining;
     }
 
     &--dark > &__background {
@@ -31,6 +32,7 @@
         border-radius: 20px;
         border: 1px solid $argo-color-gray-6;
         background-color: $argo-color-gray-6;
+        color: $argo-color-gray-6;
 
         &--dark {
             @include dark-background;
@@ -41,11 +43,13 @@
     &--selected > &__background {
         background-color: $sherbert;
         border-color: $sherbert;
+        color: $sherbert;
         transform: scale(1.02);
     }
 
     &--dark:hover > &__background,
     &--selected#{&}--dark > &__background {
+        color: $sherbert;
         background-color: $spray-tan;
         border-color: $sherbert;
     }

ui/src/app/components/header/header.tsx

@@ -1,4 +1,4 @@
-import {faQuestion} from '@fortawesome/free-solid-svg-icons';
+import {faBook, faKeyboard} from '@fortawesome/free-solid-svg-icons';
 import * as React from 'react';
 import {Link, useParams} from 'react-router-dom';
 import {RolloutNamespaceInfo, RolloutServiceApi} from '../../../models/rollout/generated';
@@ -7,6 +7,7 @@ import {useServerData} from '../../shared/utils/utils';
 import {ActionButton} from '../action-button/action-button';
 import {InfoItemRow} from '../info-item/info-item';
 import {ThemeToggle} from '../theme-toggle/theme-toggle';
+import {Tooltip} from '../tooltip/tooltip';
 
 import './header.scss';
 
@@ -36,7 +37,7 @@ const Brand = (props: {path?: string}) => {
 
 export const Header = (props: {pageHasShortcuts: boolean; showHelp: () => void}) => {
     const getNs = React.useCallback(() => new RolloutServiceApi().rolloutServiceGetNamespace(), []);
-    const nsData = useServerData<RolloutNamespaceInfo>(getNs);
+    const namespace = useServerData<RolloutNamespaceInfo>(getNs).namespace || 'Unknown';
     const {name} = useParams<{name: string}>();
     const api = React.useContext(RolloutAPIContext);
     const [version, setVersion] = React.useState('v?');
@@ -51,11 +52,22 @@ export const Header = (props: {pageHasShortcuts: boolean; showHelp: () => void})
         <header className='rollouts-header'>
             <Brand path={name} />
             <div className='rollouts-header__info'>
-                {props.pageHasShortcuts && <ActionButton icon={faQuestion} action={props.showHelp} dark />}
+                {props.pageHasShortcuts && (
+                    <Tooltip content='Keyboard Shortcuts' inverted>
+                        <ActionButton icon={faKeyboard} action={props.showHelp} dark />
+                    </Tooltip>
+                )}
+                <Tooltip content='Documentation' inverted>
+                    <a href='https://argoproj.github.io/argo-rollouts/' target='_blank' rel='noreferrer'>
+                        <ActionButton icon={faBook} dark />
+                    </a>
+                </Tooltip>
                 <span style={{marginRight: '7px'}}>
-                    <ThemeToggle />
+                    <Tooltip content='Toggle Dark Mode' inverted>
+                        <ThemeToggle />
+                    </Tooltip>
                 </span>
-                <InfoItemRow label={'NS:'} items={{content: nsData.namespace}} />
+                <InfoItemRow label={'NS:'} items={{content: namespace}} />
                 <div className='rollouts-header__version'>{version}</div>
             </div>
         </header>

ui/src/app/components/tooltip/tooltip.scss

@@ -9,7 +9,13 @@
     background-color: $slate;
     white-space: nowrap;
     color: white;
+    border: 1px solid $slate;
     &--dark {
         border: 1px solid $dull-shine;
     }
+
+    &--inverted {
+        top: 100%;
+        bottom: auto;
+    }
 }

ui/src/app/components/tooltip/tooltip.tsx

@@ -27,11 +27,11 @@ export const useHover = (): [React.MutableRefObject<any>, boolean] => {
     return [ref, show];
 };
 
-export const Tooltip = (props: {content: React.ReactNode | string} & React.PropsWithRef<any>) => {
+export const Tooltip = (props: {content: React.ReactNode | string; inverted?: boolean} & React.PropsWithRef<any>) => {
     const [tooltip, showTooltip] = useHover();
     return (
         <div style={{position: 'relative'}}>
-            <ThemeDiv hidden={!showTooltip} className='tooltip'>
+            <ThemeDiv hidden={!showTooltip} className={`tooltip ${props.inverted ? 'tooltip--inverted' : ''}`}>
                 {props.content}
             </ThemeDiv>
             <div ref={tooltip}>{props.children}</div>