diff --git a/package.json b/package.json index e469d51bf39..aa045eb0b85 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "dependencies": {}, "devDependencies": { + "babel-eslint": "^7.0.0", "eslint": "^3.4.0", "eslint-config-finn": "1.0.0-alpha.11", "eslint-config-finn-react": "^1.0.0-alpha.2", diff --git a/packages/unleash-frontend-next/index.html b/packages/unleash-frontend-next/index.html index 3ec0888efe5..7c0bb5e22d1 100644 --- a/packages/unleash-frontend-next/index.html +++ b/packages/unleash-frontend-next/index.html @@ -1,7 +1,7 @@ - Unleash UI + Unleash Admin diff --git a/packages/unleash-frontend-next/src/.eslintrc b/packages/unleash-frontend-next/src/.eslintrc index 23031855c4e..d6429d7b45d 100644 --- a/packages/unleash-frontend-next/src/.eslintrc +++ b/packages/unleash-frontend-next/src/.eslintrc @@ -1,4 +1,5 @@ { + "parser": "babel-eslint", "extends": [ "finn", "finn-react", @@ -8,5 +9,14 @@ "browser": true, "commonjs": true, "es6": true + }, + "parserOptions": { + "ecmaVersion": 7, + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "classes":true, + "spread":true, + "restParams": true + } } } diff --git a/packages/unleash-frontend-next/src/App.jsx b/packages/unleash-frontend-next/src/App.jsx index 0457573a275..961a98d8559 100644 --- a/packages/unleash-frontend-next/src/App.jsx +++ b/packages/unleash-frontend-next/src/App.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Layout, Panel, NavDrawer, AppBar, IconButton } from 'react-toolbox'; +import { Layout, Panel, NavDrawer, AppBar } from 'react-toolbox'; import style from './style'; import Navigation from './Navigation'; @@ -17,9 +17,7 @@ export default class App extends Component { render () { return (
- - - + diff --git a/packages/unleash-frontend-next/src/Navigation.jsx b/packages/unleash-frontend-next/src/Navigation.jsx index 3d962735000..ee1e0fe6104 100644 --- a/packages/unleash-frontend-next/src/Navigation.jsx +++ b/packages/unleash-frontend-next/src/Navigation.jsx @@ -1,19 +1,32 @@ import React, { Component } from 'react'; -import { Link } from 'react-router'; import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox'; export default class UnleashNav extends Component { + static contextTypes = { + router: React.PropTypes.object, + } + render () { + const createListItem = (path, caption) => + ; + return ( - - - - + {createListItem('/features', 'Feature Toggles')} + {createListItem('/strategies', 'Strategies')} + {createListItem('/history', 'Event History')} + {createListItem('/archive', 'Archived Toggles')} + + - - + + {createListItem('/docs', 'Documentation')} + + + +

A product by FINN.no

diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx index 2fb060e463b..528c89ecd0a 100644 --- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx +++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx @@ -1,36 +1,65 @@ -import { React, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import { connect } from 'react-redux'; +import { Input, Switch, Button } from 'react-toolbox'; import { addFeatureToggle } from '../../store/actions'; -let AddFeatureToggle = ({ dispatch }) => { - let input; - - return ( -
-
{ - e.preventDefault(); - if (!input.value.trim()) { - return; - } - dispatch(addFeatureToggle(input.value)); - input.value = ''; - }}> - { - input = node; - }} /> - -
-
- ); -}; -AddFeatureToggle = connect()(AddFeatureToggle); - -AddFeatureToggle.propTypes = { - dispatch: PropTypes.func.isRequired, -}; - - -export default AddFeatureToggle; +class AddFeatureToggle extends React.Component { + constructor () { + super(); + this.state = { name: '', description: '', enabled: false }; + } + + static propTypes () { + return { + dispatch: PropTypes.func.isRequired, + }; + } + + onSubmit = (evt) => { + evt.preventDefault(); + this.props.dispatch(addFeatureToggle(this.state.name, this.state.enabled)); + }; + + handleChange = (key, value) => { + const change = {}; + change[name] = value; + + const newState = Object.assign({}, this.state, change); + this.setState(newState); + }; + + render () { + return ( +
+
+ + + +
+ + + +
+ + +
+ ); + } +} + +export default connect()(AddFeatureToggle); diff --git a/packages/unleash-frontend-next/src/index.jsx b/packages/unleash-frontend-next/src/index.jsx index 7b13bbe94d4..27243b0abfe 100644 --- a/packages/unleash-frontend-next/src/index.jsx +++ b/packages/unleash-frontend-next/src/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { Router, Route, IndexRoute, hashHistory } from 'react-router'; +import { Router, Route, IndexRedirect, hashHistory } from 'react-router'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import { createStore, applyMiddleware } from 'redux'; @@ -9,6 +9,7 @@ import store from './store'; import App from './App'; import Features from './page/features'; +import CreateFeatureToggle from './page/features/create'; import Strategies from './page/strategies'; import HistoryPage from './page/history'; import Archive from './page/archive'; @@ -24,7 +25,9 @@ ReactDOM.render( - + + + diff --git a/packages/unleash-frontend-next/src/page/features/create.js b/packages/unleash-frontend-next/src/page/features/create.js new file mode 100644 index 00000000000..e843f069f3d --- /dev/null +++ b/packages/unleash-frontend-next/src/page/features/create.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +import AddFeatureToggle from '../../component/feature/AddFeatureToggle'; + +export default class Features extends Component { + render () { + return ( +
+

Create Feature Toggle

+ +
+ ); + } +}; diff --git a/packages/unleash-frontend-next/src/page/features/index.js b/packages/unleash-frontend-next/src/page/features/index.js index 812e601d9bb..81b8e3a6811 100644 --- a/packages/unleash-frontend-next/src/page/features/index.js +++ b/packages/unleash-frontend-next/src/page/features/index.js @@ -1,17 +1,21 @@ import React, { Component } from 'react'; import FeatureListContainer from '../../component/feature/FeatureListContainer'; -import AddFeatureToggle from '../../component/feature/AddFeatureToggle'; +import { Button } from 'react-toolbox'; + export default class Features extends Component { + static contextTypes = { + router: React.PropTypes.object, + } + render () { + const createHref = this.context.router.createHref('/features/create'); return ( -
-

Feature Toggles

- - - -
- +
+

Feature Toggles

+
); } };