Move Docs link from sidebar to top of page

.eslintrc

@@ -27,7 +27,8 @@
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/ban-ts-comment": 0,
         "import/no-named-as-default": 0,
-        "@typescript-eslint/switch-exhaustiveness-check": "error"
+        "@typescript-eslint/switch-exhaustiveness-check": "error",
+        "import/no-unresolved": 0
     },
     "ignorePatterns": "rpc",
     "parserOptions": {

ui/App.tsx

@@ -96,15 +96,6 @@ const navItems: NavItem[] = [
     link: { value: V2Routes.Notifications },
     icon: IconType.NotificationsIcon,
   },
-  {
-    label: "Docs",
-    link: {
-      value: "docs",
-      href: "https://docs.gitops.weave.works/",
-      newTab: true,
-    },
-    icon: IconType.DocsIcon,
-  },
 ];
 
 const App = () => {

ui/components/Icon.tsx

@@ -13,6 +13,7 @@ import ErrorIcon from "@material-ui/icons/Error";
 import LogoutIcon from "@material-ui/icons/ExitToApp";
 import FileCopyIcon from "@material-ui/icons/FileCopyOutlined";
 import FilterIcon from "@material-ui/icons/FilterList";
+import FindInPage from "@material-ui/icons/FindInPage";
 import HourglassFullIcon from "@material-ui/icons/HourglassFull";
 import InfoIcon from "@material-ui/icons/Info";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
@@ -116,6 +117,7 @@ export enum IconType {
   EditIcon,
   VerifiedUser,
   Policy,
+  FindInPage,
 }
 
 type Props = {
@@ -298,6 +300,9 @@ function getIcon(i: IconType) {
     case IconType.EditIcon:
       return EditIcon;
 
+    case IconType.FindInPage:
+      return FindInPage;
+
     default:
       break;
   }

ui/components/InfoList.tsx

@@ -9,8 +9,8 @@ const InfoList = styled(
   ({ items }: { className?: string; items: InfoField[] }) => {
     return (
       <Flex column wide gap="8">
-        {items.map(([k, v]) => (
-          <RowHeader rowkey={k} value={v} key={k} />
+        {items.map(([k, v], index) => (
+          <RowHeader rowkey={k} value={v} key={index} />
         ))}
       </Flex>
     );

ui/components/UserSettings.tsx

@@ -11,7 +11,9 @@ import styled from "styled-components";
 import { Auth } from "../contexts/AuthContext";
 import { V2Routes } from "../lib/types";
 import DarkModeSwitch from "./DarkModeSwitch";
+import Flex from "./Flex";
 import Icon, { IconType } from "./Icon";
+import Link from "./Link";
 
 const SettingsMenu = styled(Menu)`
   .MuiPaper-root {
@@ -32,10 +34,9 @@ const SettingsMenu = styled(Menu)`
   }
 `;
 
-const PersonButton = styled(IconButton)<{ open: boolean }>`
-  height: 40px;
-  width: 40px;
+const PersonButton = styled(IconButton)<{ open?: boolean }>`
   &.MuiIconButton-root {
+    padding: ${(props) => props.theme.spacing.xs};
     background-color: ${(props) => props.theme.colors.neutralGray};
     color: ${(props) => props.theme.colors.neutral30};
     :hover {
@@ -64,8 +65,13 @@ function UserSettings({ className, darkModeEnabled = true }: Props) {
   };
 
   return (
-    <div className={className}>
+    <Flex className={className} gap="8" align>
       <DarkModeSwitch darkModeEnabled={darkModeEnabled} />
+      <Tooltip title="Docs" enterDelay={500} enterNextDelay={500}>
+        <Link as={PersonButton} href="https://docs.gitops.weave.works/" newTab>
+          <Icon size="medium" type={IconType.FindInPage} />
+        </Link>
+      </Tooltip>
       <Tooltip title="Account settings" enterDelay={500} enterNextDelay={500}>
         <PersonButton
           onClick={handleClick}
@@ -95,7 +101,7 @@ function UserSettings({ className, darkModeEnabled = true }: Props) {
           Logout
         </MenuItem>
       </SettingsMenu>
-    </div>
+    </Flex>
   );
 }
 

ui/components/__tests__/__snapshots__/Page.test.tsx.snap

@@ -54,7 +54,22 @@ exports[`Page snapshots default 1`] = `
   align-items: center;
 }
 
-.c12 {
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -73,7 +88,7 @@ exports[`Page snapshots default 1`] = `
   justify-content: space-between;
 }
 
-.c15 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,90 +117,91 @@ exports[`Page snapshots default 1`] = `
   color: #1a1a1a;
 }
 
-.c10 svg {
+.c12 svg {
   height: 24px;
   width: 24px;
 }
 
-.c10 svg path.path-fill,
-.c10 svg line.path-fill,
-.c10 svg polygon.path-fill,
-.c10 svg rect.path-fill,
-.c10 svg circle.path-fill,
-.c10 svg polyline.path-fill {
+.c12 svg path.path-fill,
+.c12 svg line.path-fill,
+.c12 svg polygon.path-fill,
+.c12 svg rect.path-fill,
+.c12 svg circle.path-fill,
+.c12 svg polyline.path-fill {
   fill: !important;
   -webkit-transition: fill 200ms cubic-bezier(0.4,0,0.2,1) 0ms;
   transition: fill 200ms cubic-bezier(0.4,0,0.2,1) 0ms;
 }
 
-.c10 svg path.stroke-fill,
-.c10 svg line.stroke-fill,
-.c10 svg polygon.stroke-fill,
-.c10 svg rect.stroke-fill,
-.c10 svg circle.stroke-fill,
-.c10 svg polyline.stroke-fill {
+.c12 svg path.stroke-fill,
+.c12 svg line.stroke-fill,
+.c12 svg polygon.stroke-fill,
+.c12 svg rect.stroke-fill,
+.c12 svg circle.stroke-fill,
+.c12 svg polyline.stroke-fill {
   stroke: !important;
   -webkit-transition: stroke 200ms cubic-bezier(0.4,0,0.2,1) 0ms;
   transition: stroke 200ms cubic-bezier(0.4,0,0.2,1) 0ms;
 }
 
-.c10 svg rect.rect-height {
+.c12 svg rect.rect-height {
   height: 24px;
   width: 24px;
 }
 
-.c10.downward {
+.c12.downward {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.c10.upward {
+.c12.upward {
   -webkit-transform: initial;
   -ms-transform: initial;
   transform: initial;
 }
 
-.c10 .c5 {
+.c12 .c5 {
   margin-left: 4px;
 }
 
-.c10 img {
+.c12 img {
   width: 24px;
 }
 
+.c11 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .c7 {
   max-width: 400px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c8 .MuiSwitch-thumb {
+.c9 .MuiSwitch-thumb {
   color: #fff;
   background-image: url();
 }
 
-.c8 .MuiSwitch-track {
+.c9 .MuiSwitch-track {
   background-color: #00b3ec;
 }
 
-.c9 {
-  height: 40px;
-  width: 40px;
-}
-
-.c9.MuiIconButton-root {
+.c10.MuiIconButton-root {
+  padding: 8px;
   background-color: #F6F7F9;
   color: #737373;
 }
 
-.c9.MuiIconButton-root:hover {
+.c10.MuiIconButton-root:hover {
   background-color: #fff;
   color: #009CCC;
 }
 
-.c11 {
+.c13 {
   height: 100%;
   width: calc(100% - 48px);
   padding: 0 24px;
@@ -204,15 +220,15 @@ exports[`Page snapshots default 1`] = `
   overflow: hidden;
 }
 
-.c13 {
+.c15 {
   background-color: #fff;
   border-radius: 10px;
   box-sizing: border-box;
   margin: 0 auto;
   min-height: 100%;
 }
 
-.c16 {
+.c18 {
   width: calc(100% - 48px);
   padding: 24px;
   height: 100%;
@@ -227,7 +243,7 @@ exports[`Page snapshots default 1`] = `
   padding: 0 32px;
 }
 
-.c14 .MuiAlert-root {
+.c16 .MuiAlert-root {
   width: 100%;
 }
 
@@ -262,10 +278,10 @@ exports[`Page snapshots default 1`] = `
       </div>
     </div>
     <div
-      className=""
+      className="c8 "
     >
       <span
-        className="MuiSwitch-root c8 DarkModeSwitch"
+        className="MuiSwitch-root c9 DarkModeSwitch"
       >
         <span
           aria-disabled={false}
@@ -304,10 +320,53 @@ exports[`Page snapshots default 1`] = `
           className="MuiSwitch-track"
         />
       </span>
+      <a
+        aria-describedby={null}
+        aria-disabled={false}
+        className="MuiButtonBase-root MuiIconButton-root c10 c11 Link"
+        href="https://docs.gitops.weave.works/"
+        newTab={true}
+        onBlur={[Function]}
+        onDragLeave={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseOver={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        title="Docs"
+      >
+        <span
+          className="MuiIconButton-label"
+        >
+          <div
+            className="c4 c12"
+          >
+            <svg
+              aria-hidden={true}
+              className="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20 19.59V8l-6-6H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c.45 0 .85-.15 1.19-.4l-4.43-4.43c-.8.52-1.74.83-2.76.83-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z"
+              />
+            </svg>
+          </div>
+        </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
+      </a>
       <button
         aria-describedby={null}
         aria-haspopup="true"
-        className="MuiButtonBase-root MuiIconButton-root c9"
+        className="MuiButtonBase-root MuiIconButton-root c10"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -331,7 +390,7 @@ exports[`Page snapshots default 1`] = `
           className="MuiIconButton-label"
         >
           <div
-            className="c4 c10"
+            className="c4 c12"
           >
             <svg
               aria-hidden={true}
@@ -352,13 +411,13 @@ exports[`Page snapshots default 1`] = `
     </div>
   </div>
   <div
-    className="c11"
+    className="c13"
   >
     <div
-      className="c12 c13 c14"
+      className="c14 c15 c16"
     >
       <div
-        className="c15 c16"
+        className="c17 c18"
       />
     </div>
   </div>