Adjusted layout #153

- fill full screen
- be more responsive (don't show hamburger on desktop)

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;

packages/unleash-frontend-next/src/App.jsx

@@ -14,21 +14,24 @@ export default class App extends Component {
         };
     }
 
+    onOverlayClick = () => this.setState({ drawerActive: false });
+
     render () {
         return (
             <div className={style.container}>
-                <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} />
+                <AppBar title="Unleash Admin" leftIcon="menu" onLeftIconClick={this.toggleDrawerActive} className={style.appBar} />
-                <Layout>
+                <div className={style.container} style={{ top: '6.4rem' }}>
-                    <NavDrawer active={this.state.drawerActive} permanentAt="sm" style={{ width: '200px' }}>
+                    <Layout>
-                        <Navigation />
+                        <NavDrawer active={this.state.drawerActive} permanentAt="sm" onOverlayClick={this.onOverlayClick} >
-                    </NavDrawer>
+                            <Navigation />
-                    <Panel scrollY={false}>
+                        </NavDrawer>
-                        <div style={{ padding: '1.8em' }}>
+                        <Panel scrollY>
-                            {this.props.children}
+                            <div style={{ padding: '1.8rem' }}>
-                        </div>
+                                {this.props.children}
-
+                            </div>
-                    </Panel>
+                        </Panel>
-                </Layout>
+                    </Layout>
+                </div>
             </div>
         );
     }

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');
     };
 

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) => ({

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) => ({
+function addFeatureToggle (featureToggle) {
-    type: ADD_FEATURE_TOGGLE,
+    return {
-    featureToggle,
+        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)));
+    };
+}

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) {

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;
     }
-}
+}
+

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;
+$navigation-drawer-desktop-width: 4 * $standard-increment-desktop !default;
-$appbar-height-m-landscape: 4.8 * $unit !default;
+$navigation-drawer-max-desktop-width: 70 * $unit !default;
-
-$navigation-drawer-desktop-width: 3 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width: 40 * $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;
+$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;
+        }
+    }
+}

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,
             },
         },