diff --git a/packages/unleash-api/lib/helper/legacy-feature-mapper.js b/packages/unleash-api/lib/helper/legacy-feature-mapper.js
index 35f93237c5..36d25a0659 100644
--- a/packages/unleash-api/lib/helper/legacy-feature-mapper.js
+++ b/packages/unleash-api/lib/helper/legacy-feature-mapper.js
@@ -2,6 +2,10 @@
function addOldFields (feature) {
const modifiedFeature = Object.assign({}, feature);
+ if (!feature.strategies) {
+ modifiedFeature.strategies = [];
+ return modifiedFeature;
+ }
modifiedFeature.strategy = feature.strategies[0].name;
modifiedFeature.parameters = Object.assign({}, feature.strategies[0].parameters);
return modifiedFeature;
diff --git a/packages/unleash-frontend-next/src/App.jsx b/packages/unleash-frontend-next/src/App.jsx
index 961a98d855..a44938c947 100644
--- a/packages/unleash-frontend-next/src/App.jsx
+++ b/packages/unleash-frontend-next/src/App.jsx
@@ -14,21 +14,24 @@ export default class App extends Component {
};
}
+ onOverlayClick = () => this.setState({ drawerActive: false });
+
render () {
return (
-
-
-
-
-
-
-
- {this.props.children}
-
-
-
-
+
+
+
+
+
+
+
+
+ {this.props.children}
+
+
+
+
);
}
diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
index 3417df7660..25fa78fd5b 100644
--- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
@@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Input, Switch, Button } from 'react-toolbox';
-import { addFeatureToggle } from '../../store/actions';
+import { createFeatureToggles } from '../../store/featureToggleActions';
class AddFeatureToggle extends React.Component {
@@ -32,7 +32,7 @@ class AddFeatureToggle extends React.Component {
onSubmit = (evt) => {
evt.preventDefault();
- this.props.dispatch(addFeatureToggle(this.state.featureToggle));
+ this.props.dispatch(createFeatureToggles(this.state.featureToggle));
this.context.router.push('/features');
};
diff --git a/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx b/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx
index 951a9514e0..94f0cd5275 100644
--- a/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx
@@ -1,5 +1,5 @@
import { connect } from 'react-redux';
-import { toggleFeature, fetchFeatureToggles } from '../../store/actions';
+import { toggleFeature, fetchFeatureToggles } from '../../store/featureToggleActions';
import FeatureList from './FeatureList';
const mapStateToProps = (state) => ({
diff --git a/packages/unleash-frontend-next/src/store/actions.js b/packages/unleash-frontend-next/src/store/featureToggleActions.js
similarity index 57%
rename from packages/unleash-frontend-next/src/store/actions.js
rename to packages/unleash-frontend-next/src/store/featureToggleActions.js
index 523a3302fd..e980c770c1 100644
--- a/packages/unleash-frontend-next/src/store/actions.js
+++ b/packages/unleash-frontend-next/src/store/featureToggleActions.js
@@ -3,11 +3,22 @@ export const TOGGLE_FEATURE_TOGGLE = 'TOGGLE_FEATURE_TOGGLE';
export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES';
export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
+export const ERROR_CREATING_FEATURE_TOGGLE = 'ERROR_CREATING_FEATURE_TOGGLE';
-export const addFeatureToggle = (featureToggle) => ({
- type: ADD_FEATURE_TOGGLE,
- featureToggle,
-});
+function addFeatureToggle (featureToggle) {
+ return {
+ type: ADD_FEATURE_TOGGLE,
+ featureToggle,
+ };
+};
+
+function errorCreatingFeatureToggle (statusCode) {
+ return {
+ type: ERROR_CREATING_FEATURE_TOGGLE,
+ statusCode,
+ receivedAt: Date.now(),
+ };
+}
export const toggleFeature = (featureName) => ({
type: TOGGLE_FEATURE_TOGGLE,
@@ -54,3 +65,27 @@ export function fetchFeatureToggles () {
.catch(error => dispatch(errorReceiveFeatureToggles(error)));
};
}
+
+
+export function createFeatureToggles (featureToggle) {
+ return dispatch => {
+ dispatch(requestFeatureToggles());
+ return fetch('/features', {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(featureToggle),
+ })
+ .then(response => {
+ if (!response.ok) {
+ let error = new Error('failed fetching');
+ error.status = response.status;
+ throw error;
+ }
+ })
+ .then(() => dispatch(addFeatureToggle(featureToggle)))
+ .catch(error => dispatch(errorCreatingFeatureToggle(error)));
+ };
+}
diff --git a/packages/unleash-frontend-next/src/store/features.js b/packages/unleash-frontend-next/src/store/features.js
index 2c0797c03a..915a144385 100644
--- a/packages/unleash-frontend-next/src/store/features.js
+++ b/packages/unleash-frontend-next/src/store/features.js
@@ -2,7 +2,7 @@ import {
ADD_FEATURE_TOGGLE,
TOGGLE_FEATURE_TOGGLE,
RECEIVE_FEATURE_TOGGLES,
-} from './actions';
+} from './featureToggleActions';
const feature = (state = {}, action) => {
switch (action.type) {
diff --git a/packages/unleash-frontend-next/src/style.scss b/packages/unleash-frontend-next/src/style.scss
index 06eaa15467..2bb912f3e9 100644
--- a/packages/unleash-frontend-next/src/style.scss
+++ b/packages/unleash-frontend-next/src/style.scss
@@ -1,14 +1,17 @@
.container {
- height: auto;
position: absolute;
- left: 0;
- right: 0;
top: 0;
bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: auto;
+ overflow-y: auto;
}
.navigation {
.active {
background-color: #EEE;
}
-}
\ No newline at end of file
+}
+
diff --git a/packages/unleash-frontend-next/src/theme/_config.scss b/packages/unleash-frontend-next/src/theme/_config.scss
index 2b301c05f3..23243086ea 100644
--- a/packages/unleash-frontend-next/src/theme/_config.scss
+++ b/packages/unleash-frontend-next/src/theme/_config.scss
@@ -3,15 +3,11 @@
@import "~react-toolbox/lib/mixins";
@import "~react-toolbox/lib/commons";
-
$color-primary:$palette-blue-400;
$color-primary-dark: $palette-blue-700;
-$appbar-height-m-portrait: 5.6 * $unit !default;
-$appbar-height-m-landscape: 4.8 * $unit !default;
-
-$navigation-drawer-desktop-width: 3 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width: 40 * $unit !default;
+$navigation-drawer-desktop-width: 4 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 70 * $unit !default;
// Mobile:
// Width = Screen width − 56 dp
@@ -19,4 +15,17 @@ $navigation-drawer-max-desktop-width: 40 * $unit !default;
$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
-$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
\ No newline at end of file
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
+
+.appBar {
+ .leftIcon {
+ transition-timing-function: $animation-curve-default;
+ transition-duration: $animation-duration;
+ transition-property: width, min-width;
+ }
+ @media screen and (min-width: $layout-breakpoint-sm) {
+ .leftIcon {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/unleash-frontend-next/webpack.config.js b/packages/unleash-frontend-next/webpack.config.js
index a159e39a86..df10d40f28 100644
--- a/packages/unleash-frontend-next/webpack.config.js
+++ b/packages/unleash-frontend-next/webpack.config.js
@@ -59,7 +59,7 @@ module.exports = {
devServer: {
proxy: {
'/features': {
- target: 'http://localhost:3001/',
+ target: 'http://localhost:4242',
secure: false,
},
},