From 79c79fe28e39b671434dc37c1287d837faa3a5f4 Mon Sep 17 00:00:00 2001 From: Alexander Rivera <56621323+arivepr@users.noreply.github.com> Date: Thu, 10 Sep 2020 14:36:41 -0400 Subject: [PATCH] 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 Co-authored-by: Ryan Long --- .../__snapshots__/Tools.test.js.snap | 1 - .../__snapshots__/UserToggle.test.js.snap | 93 +++++++++++++++++++ src/js/App/Header/Tools.js | 7 -- src/js/App/Header/UserIcon.js | 2 +- src/js/App/Header/UserIcon.scss | 4 + src/js/App/Header/UserToggle.js | 2 + src/js/App/Sidenav/Navigation.js | 20 ++-- .../__snapshots__/Navigation.test.js.snap | 32 +++---- 8 files changed, 126 insertions(+), 35 deletions(-) create mode 100644 src/js/App/Header/UserIcon.scss diff --git a/src/js/App/Header/HeaderTests/__snapshots__/Tools.test.js.snap b/src/js/App/Header/HeaderTests/__snapshots__/Tools.test.js.snap index a147e4183..8cc9198c8 100644 --- 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`] = ` /> - `; diff --git a/src/js/App/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap b/src/js/App/Header/HeaderTests/__snapshots__/UserToggle.test.js.snap index 1b9598aef..fb591c1f3 100644 --- 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={ } id="UserMenu" onToggle={[Function]} widget-type="UserMenu" @@ -137,6 +138,7 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = ` toggle={ } 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={} id="UserMenu" isOpen={false} isPlain={true} @@ -182,6 +185,15 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + User Avatar + @@ -243,6 +255,15 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + User Avatar + @@ -283,6 +304,31 @@ exports[`ConnectedUserToggle -- not org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + + + + User Avatar + + + + @@ -408,6 +454,7 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = ` toggle={ } id="UserMenu" onToggle={[Function]} widget-type="UserMenu" @@ -475,6 +522,7 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = ` toggle={ } 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={} id="UserMenu" isOpen={false} isPlain={true} @@ -520,6 +569,15 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + User Avatar + @@ -581,6 +639,15 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + User Avatar + @@ -621,6 +688,31 @@ exports[`ConnectedUserToggle -- org admin should render correctly 1`] = ` type="button" widget-type="UserMenu" > + + + + + User Avatar + + + + @@ -713,6 +805,7 @@ exports[`UserToggle should render correctly with isSmall false 1`] = ` toggle={ } id="UserMenu" onToggle={[Function]} widget-type="UserMenu" diff --git a/src/js/App/Header/Tools.js b/src/js/App/Header/Tools.js index ac8aec22c..dfba4d5a7 100644 --- 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 = () => { - {/* User icon always visible */} - - {/* Render About Modal */} { isModalOpen && setIsModalOpen(!isModalOpen)} /> } diff --git a/src/js/App/Header/UserIcon.js b/src/js/App/Header/UserIcon.js index c084ef692..521fbb67a 100644 --- 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 new file mode 100644 index 000000000..821515cf4 --- /dev/null +++ b/src/js/App/Header/UserIcon.scss @@ -0,0 +1,4 @@ +.ins-c-dropdown-icon { + height: 36px; + width: 36px; +} \ No newline at end of file diff --git a/src/js/App/Header/UserToggle.js b/src/js/App/Header/UserToggle.js index ab7aa2473..b5b517a4f 100644 --- 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 { : } 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 index 7a82fd7ba..cbd3869dc 100644 --- a/src/js/App/Sidenav/Navigation.js +++ b/src/js/App/Sidenav/Navigation.js @@ -152,16 +152,6 @@ export class Navigation extends Component { } ) } - { documentation && - - Documentation - - - } { activeLocation === 'openshift' && Object.entries(openshiftLinks).map( ([key, value]) => { @@ -175,6 +165,16 @@ export class Navigation extends Component { } ) } + { documentation && + + Documentation + + + } ); diff --git a/src/js/App/Sidenav/__snapshots__/Navigation.test.js.snap b/src/js/App/Sidenav/__snapshots__/Navigation.test.js.snap index 588d181e7..9e7f0d5f3 100644 --- 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" /> - - Documentation - Red Hat Marketplace + + Documentation + `; @@ -408,14 +408,6 @@ exports[`Navigation should render correctly 2 1`] = ` parent="openshift" title="Remediations" /> - - Documentation - Red Hat Marketplace + + Documentation + `;