Navigation and avatar changes (#942)

* documentation link position fix * Navigation and PF Avatar Changes * Nav and Avatar pr changes * clean lint * snapping update and clean up Co-authored-by: Alexander Rivera <hq@aleriver@redhat.com-mac> Co-authored-by: Ryan Long <rlong@redhat.com>
RedHatInsights · Sep 10, 2020 · 79c79fe · 79c79fe
1 parent 13c30ad
commit 79c79fe
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 35 deletions.
diff --git a/src/js/App/Header/HeaderTests/__snapshots__/Tools.test.js.snap b/src/js/App/Header/HeaderTests/__snapshots__/Tools.test.js.snap
@@ -105,6 +105,5 @@ exports[`Tools should render correctly 1`] = `
       />
     </PageHeaderToolsItem>
   </PageHeaderToolsGroup>
-  <Connect(UserIcon) />
 </PageHeaderTools>
 `;
diff --git a/src/js/App/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap b/src/js/App/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap
@@ -75,6 +75,7 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
         toggle={
           <DropdownToggle
             className="ins-c-toolbar__menu-user"
+            icon={<Memo(Connect(UserIcon)) />}
             id="UserMenu"
             onToggle={[Function]}
             widget-type="UserMenu"
@@ -137,6 +138,7 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
           toggle={
             <DropdownToggle
               className="ins-c-toolbar__menu-user"
+              icon={<Memo(Connect(UserIcon)) />}
               id="UserMenu"
               onToggle={[Function]}
               widget-type="UserMenu"
@@ -158,6 +160,7 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
               aria-haspopup={true}
               className="ins-c-toolbar__menu-user"
               getMenuRef={[Function]}
+              icon={<Memo(Connect(UserIcon)) />}
               id="UserMenu"
               isOpen={false}
               isPlain={true}
@@ -182,6 +185,15 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
                       type="button"
                       widget-type="UserMenu"
                     >
+                      <span
+                        class="pf-c-dropdown__toggle-image"
+                      >
+                        <img
+                          alt="User Avatar"
+                          class="pf-c-avatar"
+                          src="apps/chrome/assets/images/img_avatar.svg"
+                        />
+                      </span>
                       <span
                         class="pf-c-dropdown__toggle-text"
                       >
@@ -243,6 +255,15 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
                         type="button"
                         widget-type="UserMenu"
                       >
+                        <span
+                          class="pf-c-dropdown__toggle-image"
+                        >
+                          <img
+                            alt="User Avatar"
+                            class="pf-c-avatar"
+                            src="apps/chrome/assets/images/img_avatar.svg"
+                          />
+                        </span>
                         <span
                           class="pf-c-dropdown__toggle-text"
                         >
@@ -283,6 +304,31 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = `
                   type="button"
                   widget-type="UserMenu"
                 >
+                  <span
+                    className="pf-c-dropdown__toggle-image"
+                  >
+                    <Connect(UserIcon)>
+                      <UserIcon
+                        account={
+                          Object {
+                            "username": "someUsername",
+                          }
+                        }
+                        dispatch={[Function]}
+                      >
+                        <Avatar
+                          alt="User Avatar"
+                          src="apps/chrome/assets/images/img_avatar.svg"
+                        >
+                          <img
+                            alt="User Avatar"
+                            className="pf-c-avatar"
+                            src="apps/chrome/assets/images/img_avatar.svg"
+                          />
+                        </Avatar>
+                      </UserIcon>
+                    </Connect(UserIcon)>
+                  </span>
                   <span
                     className="pf-c-dropdown__toggle-text"
                   >
@@ -408,6 +454,7 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
         toggle={
           <DropdownToggle
             className="ins-c-toolbar__menu-user"
+            icon={<Memo(Connect(UserIcon)) />}
             id="UserMenu"
             onToggle={[Function]}
             widget-type="UserMenu"
@@ -475,6 +522,7 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
           toggle={
             <DropdownToggle
               className="ins-c-toolbar__menu-user"
+              icon={<Memo(Connect(UserIcon)) />}
               id="UserMenu"
               onToggle={[Function]}
               widget-type="UserMenu"
@@ -496,6 +544,7 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
               aria-haspopup={true}
               className="ins-c-toolbar__menu-user"
               getMenuRef={[Function]}
+              icon={<Memo(Connect(UserIcon)) />}
               id="UserMenu"
               isOpen={false}
               isPlain={true}
@@ -520,6 +569,15 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
                       type="button"
                       widget-type="UserMenu"
                     >
+                      <span
+                        class="pf-c-dropdown__toggle-image"
+                      >
+                        <img
+                          alt="User Avatar"
+                          class="pf-c-avatar"
+                          src="apps/chrome/assets/images/img_avatar.svg"
+                        />
+                      </span>
                       <span
                         class="pf-c-dropdown__toggle-text"
                       >
@@ -581,6 +639,15 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
                         type="button"
                         widget-type="UserMenu"
                       >
+                        <span
+                          class="pf-c-dropdown__toggle-image"
+                        >
+                          <img
+                            alt="User Avatar"
+                            class="pf-c-avatar"
+                            src="apps/chrome/assets/images/img_avatar.svg"
+                          />
+                        </span>
                         <span
                           class="pf-c-dropdown__toggle-text"
                         >
@@ -621,6 +688,31 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = `
                   type="button"
                   widget-type="UserMenu"
                 >
+                  <span
+                    className="pf-c-dropdown__toggle-image"
+                  >
+                    <Connect(UserIcon)>
+                      <UserIcon
+                        account={
+                          Object {
+                            "username": "someUsername",
+                          }
+                        }
+                        dispatch={[Function]}
+                      >
+                        <Avatar
+                          alt="User Avatar"
+                          src="apps/chrome/assets/images/img_avatar.svg"
+                        >
+                          <img
+                            alt="User Avatar"
+                            className="pf-c-avatar"
+                            src="apps/chrome/assets/images/img_avatar.svg"
+                          />
+                        </Avatar>
+                      </UserIcon>
+                    </Connect(UserIcon)>
+                  </span>
                   <span
                     className="pf-c-dropdown__toggle-text"
                   >
@@ -713,6 +805,7 @@ exports[`UserToggle should render correctly with isSmall false 1`] = `
   toggle={
     <DropdownToggle
       className="ins-c-toolbar__menu-user"
+      icon={<Memo(Connect(UserIcon)) />}
       id="UserMenu"
       onToggle={[Function]}
       widget-type="UserMenu"

diff --git a/src/js/App/Header/Tools.js b/src/js/App/Header/Tools.js
@@ -1,17 +1,13 @@
 import React, { useState, useEffect } from 'react';
-
 import { Button } from '@patternfly/react-core/dist/js/components/Button/Button';
 import { DropdownItem } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem';
 import { PageHeaderTools } from '@patternfly/react-core/dist/js/components/Page/PageHeaderTools';
 import { PageHeaderToolsGroup } from '@patternfly/react-core/dist/js/components/Page/PageHeaderToolsGroup';
 import { PageHeaderToolsItem } from '@patternfly/react-core/dist/js/components/Page/PageHeaderToolsItem';
 import { Divider } from '@patternfly/react-core/dist/js/components/Divider/Divider';
-
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
-
 import UserToggle from './UserToggle';
-import UserIcon from './UserIcon';
 import ToolbarToggle from './ToolbarToggle';
 import InsightsAbout from './InsightsAbout';
 
@@ -131,9 +127,6 @@ const Tools = () => {
                 </PageHeaderToolsItem>
             </PageHeaderToolsGroup>
 
-            {/* User icon always visible */}
-            <UserIcon/>
-
             {/* Render About Modal */}
             { isModalOpen && <InsightsAbout isModalOpen={isModalOpen} onClose={() => setIsModalOpen(!isModalOpen)} /> }
         </PageHeaderTools>

diff --git a/src/js/App/Header/UserIcon.js b/src/js/App/Header/UserIcon.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Avatar } from '@patternfly/react-core/dist/js/components/Avatar/Avatar';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-
+import './UserIcon.scss';
 export class UserIcon extends Component {
 
     constructor(props) {

diff --git a/src/js/App/Header/UserIcon.scss b/src/js/App/Header/UserIcon.scss
@@ -0,0 +1,4 @@
+.ins-c-dropdown-icon {
+    height: 36px;
+    width: 36px;
+}
diff --git a/src/js/App/Header/UserToggle.js b/src/js/App/Header/UserToggle.js
@@ -5,6 +5,7 @@ import { KebabToggle } from '@patternfly/react-core/dist/js/components/Dropdown/
 import { DropdownItem } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownItem';
 import { DropdownSeparator } from '@patternfly/react-core/dist/js/components/Dropdown/DropdownSeparator';
 import { DropdownPosition } from '@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants';
+import UserIcon from './UserIcon';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
@@ -83,6 +84,7 @@ export class UserToggle extends Component {
             <KebabToggle onToggle={this.onToggle} /> :
             <DropdownToggle
                 id='UserMenu'
+                icon={<UserIcon />}
                 className='ins-c-toolbar__menu-user'
                 widget-type='UserMenu'
                 onToggle={this.onToggle}>

diff --git a/src/js/App/Sidenav/Navigation.js b/src/js/App/Sidenav/Navigation.js
@@ -152,16 +152,6 @@ export class Navigation extends Component {
                             }
                         )
                     }
-                    { documentation &&
-                        <React.Fragment>
-                            <NavItem
-                                className="ins-c-page__documentation"
-                                to={documentation}
-                                rel='noopener noreferrer'
-                                target='_blank'>Documentation
-                            </NavItem>
-                        </React.Fragment>
-                    }
                     { activeLocation === 'openshift' &&
                         Object.entries(openshiftLinks).map(
                             ([key, value]) => {
@@ -175,6 +165,16 @@ export class Navigation extends Component {
                             }
                         )
                     }
+                    { documentation &&
+                        <React.Fragment>
+                            <NavItem
+                                className="ins-c-page__documentation"
+                                to={documentation}
+                                rel='noopener noreferrer'
+                                target='_blank'>Documentation
+                            </NavItem>
+                        </React.Fragment>
+                    }
                 </NavList>
             </Nav>
         );

diff --git a/src/js/App/Sidenav/__snapshots__/Navigation.test.js.snap b/src/js/App/Sidenav/__snapshots__/Navigation.test.js.snap
@@ -301,14 +301,6 @@ exports[`Navigation should render corectly 1`] = `
       parent="openshift"
       title="Remediations"
     />
-    <NavItem
-      className="ins-c-page__documentation"
-      rel="noopener noreferrer"
-      target="_blank"
-      to="someDocs"
-    >
-      Documentation
-    </NavItem>
     <NavItem
       key="supportcases"
       rel="noopener noreferrer"
@@ -333,6 +325,14 @@ exports[`Navigation should render corectly 1`] = `
     >
       Red Hat Marketplace
     </NavItem>
+    <NavItem
+      className="ins-c-page__documentation"
+      rel="noopener noreferrer"
+      target="_blank"
+      to="someDocs"
+    >
+      Documentation
+    </NavItem>
   </NavList>
 </Nav>
 `;
@@ -408,14 +408,6 @@ exports[`Navigation should render correctly 2 1`] = `
       parent="openshift"
       title="Remediations"
     />
-    <NavItem
-      className="ins-c-page__documentation"
-      rel="noopener noreferrer"
-      target="_blank"
-      to="someDocs"
-    >
-      Documentation
-    </NavItem>
     <NavItem
       key="supportcases"
       rel="noopener noreferrer"
@@ -440,6 +432,14 @@ exports[`Navigation should render correctly 2 1`] = `
     >
       Red Hat Marketplace
     </NavItem>
+    <NavItem
+      className="ins-c-page__documentation"
+      rel="noopener noreferrer"
+      target="_blank"
+      to="someDocs"
+    >
+      Documentation
+    </NavItem>
   </NavList>
 </Nav>
 `;