Skip to content

Commit

Permalink
Merge pull request #1 from ansible/nav
Browse files Browse the repository at this point in the history
wip - one way of approaching nav
  • Loading branch information
jakemcdermott authored Oct 12, 2018
2 parents b2ebbc6 + b31edef commit 13f6e63
Show file tree
Hide file tree
Showing 32 changed files with 4,290 additions and 2,339 deletions.
3 changes: 3 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"window": true,
},
"rules": {
"camelcase": "off",
"arrow-parens": "off",
"comma-dangle": "off",
"indent": ["error", 2, {
Expand All @@ -45,5 +46,7 @@
"object-curly-newline": "off",
"space-before-function-paren": ["error", "always"],
"no-trailing-spaces": ["error"],
"react/prefer-stateless-function": "off",
"react/prop-types": "off",
}
}
5,835 changes: 3,532 additions & 2,303 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,17 @@
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"eslint": "^5.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"node-sass": "^4.9.3",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
Expand All @@ -36,6 +41,6 @@
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"@patternfly/patternfly-next": "^1.0.41",
"@patternfly/react-core": "1.11.0"
"@patternfly/react-core": "1.19.1"
}
}
162 changes: 147 additions & 15 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,49 @@ import {
HashRouter as Router,
Route,
Link,
Redirect
Redirect,
Switch,
} from 'react-router-dom';
import {
Brand,
Nav,
NavList,
NavGroup,
NavItem,
Page,
PageHeader,
PageSidebar,
Title,
Toolbar,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';

import api from './api';

import About from './components/About';
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import Organizations from './components/Organizations';
import TowerLogo from './components/TowerLogo';

import Applications from './pages/Applications';
import Credentials from './pages/Credentials';
import CredentialTypes from './pages/CredentialTypes';
import Dashboard from './pages/Dashboard';
import InstanceGroups from './pages/InstanceGroups';
import Inventories from './pages/Inventories';
import InventoryScripts from './pages/InventoryScripts';
import Jobs from './pages/Jobs';
import Login from './pages/Login';
import ManagementJobs from './pages/ManagementJobs';
import NotificationTemplates from './pages/NotificationTemplates';
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 Teams from './pages/Teams';
import Templates from './pages/Templates';
import Users from './pages/Users';


const AuthenticatedRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
Expand All @@ -25,19 +59,117 @@ const AuthenticatedRoute = ({ component: Component, ...rest }) => (
}}/>
)
)}/>
)

const App = () => (
<Router>
<div>
<Route path="/login" component={Login} />
<AuthenticatedRoute exact path="/" component={Dashboard} />
<AuthenticatedRoute exact path="/about" component={About} />
<AuthenticatedRoute exact path="/organizations" component={Organizations} />
</div>
</Router>
);

class App extends React.Component {
constructor(props) {
super(props);

this.state = { activeItem: 'dashboard', isNavOpen: true };
}

onNavToggle = () => {
const { isNavOpen } = this.state;

this.setState({ isNavOpen: !isNavOpen });
};

onNavSelect = ({ itemId }) => {
this.setState({ activeItem: itemId });
};

render() {
const { activeItem, isNavOpen } = this.state;

return (
<Router>
<Switch>
<Route path="/login" component={Login} />
<AuthenticatedRoute component={() => (
<Page
header={(
<PageHeader
logo={<TowerLogo />}
toolbar={(
<Toolbar>
<ToolbarGroup>
<ToolbarItem>Item 1</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarItem>Item 2</ToolbarItem>
<ToolbarItem>Item 3</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
avatar="| avatar"
showNavToggle
onNavToggle={this.onNavToggle}
/>
)}
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
<NavGroup title="Views">
<NavItem to="#/home" itemId="dashboard" isActive={activeItem === 'dashboard'}>Dashboard</NavItem>
<NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
<NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
<NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
</NavGroup>
<NavGroup title="Resources">
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
<NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
<NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
</NavGroup>
<NavGroup title="Access">
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
</NavGroup>
<NavGroup title="Administration">
<NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem>
<NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem>
<NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem>
<NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem>
<NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
<NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
</NavGroup>
</Nav>
)}
/>
)}>
<Switch>
<Route exact path="/" component={() => (<Redirect to="/home" />)} />
<Route path="/home" component={Dashboard} />
<Route path="/jobs" component={Jobs} />
<Route path="/schedules" component={Schedules} />
<Route path="/portal" component={Portal} />
<Route path="/templates" component={Templates} />
<Route path="/credentials" component={Credentials} />
<Route path="/projects" component={Projects} />
<Route path="/inventories" component={Inventories} />
<Route path="/inventory_scripts" component={InventoryScripts} />
<Route path="/organizations" component={Organizations} />
<Route path="/users" component={Users} />
<Route path="/teams" component={Teams} />
<Route path="/credential_types" component={CredentialTypes} />
<Route path="/notification_templates" component={NotificationTemplates} />
<Route path="/management_jobs" component={ManagementJobs} />
<Route path="/instance_groups" component={InstanceGroups} />
<Route path="/applications" component={Applications} />
<Route path="/settings" component={Settings} />
</Switch>
</Page>
)} />
</Switch>
</Router>
);
}
}

const el = document.getElementById('app');

render(<App />, el);
34 changes: 34 additions & 0 deletions src/app.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.pf-l-page__header {
--pf-l-page__header--MinHeight: 0px;
display: flex;
align-items: center;
height: 60px;
background-color: #030303;

}

.pf-l-page__header-brand {
--pf-l-page__header-brand--PaddingBottom: 0px;
}

.pf-l-page__main-section {
--pf-l-page__main-section--PaddingTop: 11px;
--pf-l-page__main-section--PaddingLeft: 11px;
}

.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--MarginTop: 16px;
}

.pf-l-page__header-brand-toggle {
padding-bottom: 4px;
padding-right: 0px;
}

.pf-l-page__header-brand-link {
transform: scale(0.75, 0.75);
}

.pf-l-page__sidebar{
--pf-l-page__sidebar--Width--lg: 200px;
}
9 changes: 0 additions & 9 deletions src/components/Dashboard.jsx

This file was deleted.

31 changes: 31 additions & 0 deletions src/components/OrganizationCard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { Component } from 'react';
import {
Card,
CardHeader,
CardBody,
} from '@patternfly/react-core';

class OrganizationCard extends Component {
static title = 'Organization Card';

constructor (props) {
super(props);

const { name } = props.organization;

this.state = { name };
}

render () {
const { name } = this.state;

return (
<Card>
<CardHeader>{name}</CardHeader>
<CardBody>Card Body</CardBody>
</Card>
);
}
}

export default OrganizationCard;
9 changes: 0 additions & 9 deletions src/components/Organizations.jsx

This file was deleted.

50 changes: 50 additions & 0 deletions src/components/TowerLogo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Brand } from '@patternfly/react-core';

import TowerLogoHeader from './tower-logo-header.svg';
import TowerLogoHeaderHover from './tower-logo-header-hover.svg';

class TowerLogo extends Component {
constructor (props) {
super(props);

this.state = { hover: false };
}

onClick = () => {
const { history } = this.props;

history.push('/');
};

onHover = () => {
const { hover } = this.state;

this.setState({ hover: !hover });
};

render () {
const { hover } = this.state;

let src = TowerLogoHeader;

if (hover) {
src = TowerLogoHeaderHover;
}

return (
<Brand
src={src}
alt="Tower Brand Image"
onMouseOut={this.onHover}
onMouseOver={this.onHover}
onBlur={this.onHover}
onFocus={this.onHover}
onClick={this.onClick}
/>
);
}
}

export default withRouter(TowerLogo);
25 changes: 25 additions & 0 deletions src/components/tower-logo-header-hover.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 13f6e63

Please sign in to comment.