From fd28cff4120b74968566ae8913f9d78543b97a48 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 26 Oct 2018 17:23:27 -0400 Subject: [PATCH 1/4] add additional patternfly react packages --- package-lock.json | 13 ++++++------- package.json | 3 +++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd16358da6..d08ba8a044 100644 --- a/package-lock.json +++ b/package-lock.json @@ -270,9 +270,9 @@ } }, "@patternfly/react-icons": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.5.2.tgz", - "integrity": "sha512-xcjvCtd/RmGyc4ZxfyV0C8uI9qAYJ1kJjlR5SU3C2c3/zQDP7V52KWYAUkzaYSLok/sIFyfwwVrOhFc5pZJMBg==" + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.5.4.tgz", + "integrity": "sha512-lwqh0jyURNnD0Sk8GXf0vQ/rWLfAl0QF+ThM0f1ow1STfUNC426U62/cnkvK5u++RWBFG4hMPFfKeIAwtS6WeA==" }, "@patternfly/react-styles": { "version": "2.3.0", @@ -294,10 +294,9 @@ } }, "@patternfly/react-tokens": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.5.4.tgz", - "integrity": "sha512-a2jhVLQXsSRx8CzK45EsziRqiDjdExn7aNJ+nStn5XOHpS9Yry4KFVELAu3ciVu5S8hM76LHuKSudYJQS0aNmA==", - "optional": true + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.5.5.tgz", + "integrity": "sha512-Q7e4NeDA50bGPrSfVBoke4fmDLjaWxc6CHyxw2rpKyVUbF0KiP9JnHzkv1M03+STaWPUNaUnOGMFOwgPuDkmLQ==" }, "@types/node": { "version": "10.12.0", diff --git a/package.json b/package.json index efcb7ab442..84311a125d 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,9 @@ "dependencies": { "@patternfly/patternfly-next": "^1.0.58", "@patternfly/react-core": "1.23.0", + "@patternfly/react-icons": "^2.5.4", + "@patternfly/react-styles": "^2.3.0", + "@patternfly/react-tokens": "^1.5.5", "axios": "^0.18.0", "babel-preset-env": "^1.7.0", "react": "^16.4.1", From 2dfbae79bd0039c2c9b486a789ce277edb34b92f Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 26 Oct 2018 17:23:37 -0400 Subject: [PATCH 2/4] update patternfly style overrides --- src/app.scss | 78 +++++++++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 37 deletions(-) diff --git a/src/app.scss b/src/app.scss index 1f6936f527..21548b6901 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,5 +1,5 @@ // -// Header +// page layout // .pf-l-page__header { @@ -10,9 +10,10 @@ } .pf-l-page__header-brand { + display: flex; align-self: center; height: 60px; - max-width: 190px; + max-width: 255px; padding: 0px; margin: 0px; } @@ -20,7 +21,7 @@ .pf-l-page__header-tools { align-self: center; height: 60px; - padding-left: 190px; + padding-left: 255px; .fa-user:hover { // temporary dev logout @@ -28,12 +29,8 @@ } } -.pf-l-toolbar { - align-self: center; - height: 60px; -} - .pf-l-page__header-brand-link { + max-width: 85px; align-self: center; } @@ -55,41 +52,48 @@ } } -// -// Side Navigation -// - -.pf-c-nav { - overflow-y: auto; -} - -.pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; -} - .pf-l-page__sidebar{ - --pf-l-page__sidebar--Width--lg: 190px; -} + --pf-l-page__sidebar--Width--lg: 255px; -.pf-c-nav__section + .pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; -} + .pf-c-nav { + overflow-y: auto; + + .pf-c-nav__section { + --pf-c-nav__section--MarginTop: 8px; + } + + .pf-c-nav__section + .pf-c-nav__section { + --pf-c-nav__section--MarginTop: 8px; + } + + .pf-c-nav__simple-list .pf-c-nav__link { + --pf-c-nav__simple-list-link--PaddingLeft: 24px; + --pf-c-nav__simple-list-link--PaddingBottom: 6px; + --pf-c-nav__simple-list-link--PaddingTop: 6px; + } + + .pf-c-nav__section-title { + --pf-c-nav__section-title--PaddingLeft: 24px; + } -.pf-c-nav__simple-list .pf-c-nav__link { - --pf-c-nav__simple-list-link--PaddingLeft: 24px; - --pf-c-nav__simple-list-link--PaddingBottom: 6px; - --pf-c-nav__simple-list-link--PaddingTop: 6px; + .pf-c-nav__link { + display: flex; + align-items: center; + padding-right: 64px; + } + } } -.pf-c-nav__section-title { - --pf-c-nav__section-title--PaddingLeft: 24px; -} - -// -// Page -// - .pf-l-page__main-section { --pf-l-page__main-section--PaddingTop: 11px; --pf-l-page__main-section--PaddingLeft: 11px; } + +// +// toolbar layout +// + +.pf-l-toolbar { + align-self: center; + height: 60px; +} \ No newline at end of file From 557e619db600fc5eb00e753c1642f426ed409717 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 26 Oct 2018 17:24:34 -0400 Subject: [PATCH 3/4] update page navigation fix issue with jerky close and expand of nav update nav to use expandle headers separate settings pages out into separate stup page components --- src/App.jsx | 323 ++++++++++++++++++------ src/pages/AuthSettings.jsx | 21 ++ src/pages/JobsSettings.jsx | 21 ++ src/pages/{Settings.jsx => License.jsx} | 6 +- src/pages/SystemSettings.jsx | 21 ++ src/pages/UISettings.jsx | 21 ++ 6 files changed, 332 insertions(+), 81 deletions(-) create mode 100644 src/pages/AuthSettings.jsx create mode 100644 src/pages/JobsSettings.jsx rename src/pages/{Settings.jsx => License.jsx} (68%) create mode 100644 src/pages/SystemSettings.jsx create mode 100644 src/pages/UISettings.jsx diff --git a/src/App.jsx b/src/App.jsx index 6cdbde9023..1d9a3beae9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,6 @@ import React, { Fragment } from 'react'; import { HashRouter as Router, - Route, - Link, Redirect, Switch, } from 'react-router-dom'; @@ -10,30 +8,22 @@ import { import { BackgroundImage, BackgroundImageSrc, - Brand, Button, ButtonVariant, Nav, NavExpandable, - NavGroup, + NavList, NavItem, Page, PageHeader, - PageSection, - PageSectionVariants, - PageSidebar, - TextContent, - Text, - Toolbar, - ToolbarGroup, - ToolbarItem + PageSidebar } from '@patternfly/react-core'; +import { UserIcon } from '@patternfly/react-icons'; import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens'; -import { css } from '@patternfly/react-styles'; import api from './api'; -import About from './components/About'; +// import About from './components/About'; import TowerLogo from './components/TowerLogo'; import ConditionalRedirect from './components/ConditionalRedirect'; @@ -52,63 +42,69 @@ import Organizations from './pages/Organizations'; import Portal from './pages/Portal'; import Projects from './pages/Projects'; import Schedules from './pages/Schedules'; -import Settings from './pages/Settings'; +import AuthSettings from './pages/AuthSettings'; +import JobsSettings from './pages/JobsSettings'; +import SystemSettings from './pages/SystemSettings'; +import UISettings from './pages/UISettings'; +import License from './pages/License'; import Teams from './pages/Teams'; import Templates from './pages/Templates'; import Users from './pages/Users'; class App extends React.Component { - constructor(props) { + constructor (props) { super(props); + const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10); this.state = { - activeItem: window.location.hash.split("#/").pop().split("/").shift(), - isNavOpen: (typeof window !== 'undefined' && - window.innerWidth >= parseInt(breakpointMd.value, 10)), + isNavOpen, + activeGroup: 'views_group', + activeItem: 'views_group_dashboard' }; - - this.state.activeGroup = this.state.activeItem.startsWith("settings_group_") ? "settings": ""; } + onNavSelect = result => { + this.setState({ + activeItem: result.itemId, + activeGroup: result.groupId + }); + }; + onNavToggle = () => { - const { isNavOpen } = this.state; - - this.setState({ isNavOpen: !isNavOpen }); - } - - onNavSelect = ({ groupId, itemId }) => { - this.setState({ activeGroup: groupId || "", activeItem: itemId }); + this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen })); }; onLogoClick = () => { - this.setState({ activeItem: "dashboard" }); + this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); } onDevLogout = () => { api.logout() .then(() => { - this.setState({ activeItem: "dashboard" }); - }) + this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); + }); } - render() { + render () { const { activeItem, activeGroup, isNavOpen } = this.state; const { logo, loginInfo } = this.props; return ( - + api.isAuthenticated()} redirectPath="/" path="/login" component={() => } /> @@ -116,7 +112,7 @@ class App extends React.Component { header={( } - avatar={} + avatar={} showNavToggle onNavToggle={this.onNavToggle} /> @@ -125,50 +121,217 @@ class App extends React.Component { - - Dashboard - Jobs - Schedules - My View - - - Templates - Credentials - Projects - Inventories - Inventory Scripts - - - Organizations - Users - Teams - - - Credential Types - Notifications - Management Jobs - Instance Groups - Applications - - - Authentication + )} /> - )}> + )} + > !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => ()} /> !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} /> !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} /> @@ -187,7 +350,11 @@ class App extends React.Component { !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} /> !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} /> !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} /> - !api.isAuthenticated()} redirectPath="/login" path="/settings" component={Settings} /> + !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} /> diff --git a/src/pages/AuthSettings.jsx b/src/pages/AuthSettings.jsx new file mode 100644 index 0000000000..80da23f545 --- /dev/null +++ b/src/pages/AuthSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class AuthSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + Authentication Settings + + + ); + } +} + +export default AuthSettings; diff --git a/src/pages/JobsSettings.jsx b/src/pages/JobsSettings.jsx new file mode 100644 index 0000000000..cdc2b97ba7 --- /dev/null +++ b/src/pages/JobsSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class JobsSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + Jobs Settings + + + ); + } +} + +export default JobsSettings; diff --git a/src/pages/Settings.jsx b/src/pages/License.jsx similarity index 68% rename from src/pages/Settings.jsx rename to src/pages/License.jsx index 9e5e360db8..b06add756a 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/License.jsx @@ -5,17 +5,17 @@ import { Title, } from '@patternfly/react-core'; -class Settings extends Component { +class License extends Component { render () { const { light, medium } = PageSectionVariants; return ( - Settings + License ); } } -export default Settings; +export default License; diff --git a/src/pages/SystemSettings.jsx b/src/pages/SystemSettings.jsx new file mode 100644 index 0000000000..2ecf2f3289 --- /dev/null +++ b/src/pages/SystemSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class SystemSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + System Settings + + + ); + } +} + +export default SystemSettings; diff --git a/src/pages/UISettings.jsx b/src/pages/UISettings.jsx new file mode 100644 index 0000000000..3753ec77eb --- /dev/null +++ b/src/pages/UISettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class UISettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + User Interface Settings + + + ); + } +} + +export default UISettings; From 74d3e55908bec8910f0380485593ddaa029fdf7c Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 29 Oct 2018 13:58:56 -0400 Subject: [PATCH 4/4] bump patternfly dep versions --- package-lock.json | 65 +++++++++++++++++++++++++++++++++++++---------- package.json | 8 +++--- 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index d08ba8a044..55685fd21b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -254,25 +254,33 @@ "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==" }, "@patternfly/patternfly-next": { - "version": "1.0.62", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.62.tgz", - "integrity": "sha512-w6j0RrzXRpsnwGCgDXIW7Q3p+cOoYb8XKnLqAWIjvoA3AQ1Mh7LVqGeY/7/vyrjg5q1kEZbSN3KWceWhggd9MQ==" + "version": "1.0.64", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.64.tgz", + "integrity": "sha512-Pxug4QU6r5kB1/dSSJJgn8h5tDmzPennJgL9s52ls4TDuDStxgbY4N8ADWEVRuAEh1w9vRo2TdAvJNpUVVoC7w==" }, "@patternfly/react-core": { - "version": "1.23.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.23.0.tgz", - "integrity": "sha512-1AAYdNo2EYdjv6oIglPSde9BWwRXOFw8uL8o9owxCOIhynnMybA/8T0ZvPdbO5DysDsGKHyYHiWvETaEpzUlbg==", + "version": "1.28.1", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.28.1.tgz", + "integrity": "sha512-dx5rI1zaaovN0HS6ttxbGdnvthd3KAr+6Wsn0h2M8bA+sNshTLDIqKErGoFWTCMZAyaxtwhSaute8nD2YbGYrQ==", "requires": { - "@patternfly/react-icons": "^2.5.1", + "@patternfly/react-icons": "^2.6.0", "@patternfly/react-styles": "^2.3.0", "@patternfly/react-tokens": "^1.0.0", - "exenv": "^1.2.2" + "exenv": "^1.2.2", + "focus-trap-react": "^4.0.1" + }, + "dependencies": { + "@patternfly/react-icons": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz", + "integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ==" + } } }, "@patternfly/react-icons": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.5.4.tgz", - "integrity": "sha512-lwqh0jyURNnD0Sk8GXf0vQ/rWLfAl0QF+ThM0f1ow1STfUNC426U62/cnkvK5u++RWBFG4hMPFfKeIAwtS6WeA==" + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.6.0.tgz", + "integrity": "sha512-r731Huakc4bm5RdrFGX1SWN10vXFaSBSyuDfa6lva6njqe3ZxAf9Q0NLBw3b2l8oe6Rpqw0Ru6PCyzuzqkXlcQ==" }, "@patternfly/react-styles": { "version": "2.3.0", @@ -294,9 +302,9 @@ } }, "@patternfly/react-tokens": { - "version": "1.5.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.5.5.tgz", - "integrity": "sha512-Q7e4NeDA50bGPrSfVBoke4fmDLjaWxc6CHyxw2rpKyVUbF0KiP9JnHzkv1M03+STaWPUNaUnOGMFOwgPuDkmLQ==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.6.0.tgz", + "integrity": "sha512-2JSfarzg/OV04SBrEpD7NKvJ27z8gpBcQXoXgdf0VpnvGKceVKOnTm2NLbG4Gm6WJNMtyKGuUw1afTdFoHPl3w==" }, "@types/node": { "version": "10.12.0", @@ -5020,6 +5028,30 @@ } } }, + "focus-trap": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-3.0.0.tgz", + "integrity": "sha512-jTFblf0tLWbleGjj2JZsAKbgtZTdL1uC48L8FcmSDl4c2vDoU4NycN1kgV5vJhuq1mxNFkw7uWZ1JAGlINWvyw==", + "requires": { + "tabbable": "^3.1.0", + "xtend": "^4.0.1" + }, + "dependencies": { + "xtend": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", + "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" + } + } + }, + "focus-trap-react": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-4.0.1.tgz", + "integrity": "sha512-UUZKVEn5cFbF6yUnW7lbXNW0iqN617ShSqYKgxctUvWw1wuylLtyVmC0RmPQNnJ/U+zoKc/djb0tZMs0uN/0QQ==", + "requires": { + "focus-trap": "^3.0.0" + } + }, "follow-redirects": { "version": "1.5.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz", @@ -12496,6 +12528,11 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz", "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=" }, + "tabbable": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.1.tgz", + "integrity": "sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A==" + }, "table": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz", diff --git a/package.json b/package.json index 84311a125d..590c282d67 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,11 @@ "webpack-dev-server": "^3.1.4" }, "dependencies": { - "@patternfly/patternfly-next": "^1.0.58", - "@patternfly/react-core": "1.23.0", - "@patternfly/react-icons": "^2.5.4", + "@patternfly/patternfly-next": "^1.0.64", + "@patternfly/react-core": "^1.28.1", + "@patternfly/react-icons": "^2.6.0", "@patternfly/react-styles": "^2.3.0", - "@patternfly/react-tokens": "^1.5.5", + "@patternfly/react-tokens": "^1.6.0", "axios": "^0.18.0", "babel-preset-env": "^1.7.0", "react": "^16.4.1",