fix some navigation styling #153

Unleash · Feb 20, 2020 · dc328f2 · dc328f2
1 parent cd6fde6
commit dc328f2
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/packages/unleash-frontend-next/src/Navigation.jsx b/packages/unleash-frontend-next/src/Navigation.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';
+import style from './style';
 
 export default class UnleashNav extends Component {
  static contextTypes = {
@@ -9,10 +10,10 @@ export default class UnleashNav extends Component {
  render () {
  const createListItem = (path, caption) =>
  <ListItem to={this.context.router.createHref(path)} caption={caption}
- className={this.context.router.isActive(path) ? 'active' : 'inactive'} />;
+ className={this.context.router.isActive(path) ? style.active : ''} />;
 
  return (
- <List selectable ripple>
+ <List selectable ripple className={style.navigation}>
  {createListItem('/features', 'Feature Toggles')}
  {createListItem('/strategies', 'Strategies')}
  {createListItem('/history', 'Event History')}

diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
@@ -16,14 +16,19 @@ class AddFeatureToggle extends React.Component {
  };
  }
 
+ static contextTypes = {
+ router: React.PropTypes.object,
+ }
+
  onSubmit = (evt) => {
  evt.preventDefault();
- this.props.dispatch(addFeatureToggle(this.state.name, this.state.enabled));
+ this.props.dispatch(addFeatureToggle(this.state.name));
+ this.context.router.push('/features');
  };
 
  handleChange = (key, value) => {
  const change = {};
- change[name] = value;
+ change[key] = value;
 
  const newState = Object.assign({}, this.state, change);
  this.setState(newState);

diff --git a/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx b/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
@@ -15,7 +15,10 @@ export default class FeatureList extends React.Component {
  }
 
  componentDidMount () {
- this.props.fetchFeatureToggles();
+ // TODO: only fetch from server if we don't know about any toggles.
+ if (this.props.features.length === 0) {
+ this.props.fetchFeatureToggles();
+ }
  }
 
  render () {

diff --git a/packages/unleash-frontend-next/src/store/actions.js b/packages/unleash-frontend-next/src/store/actions.js
@@ -5,12 +5,12 @@ export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
 export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
 
 export const addFeatureToggle = (featureName) => ({
- type: 'ADD_FEATURE_TOGGLE',
+ type: ADD_FEATURE_TOGGLE,
  name: featureName,
 });
 
 export const toggleFeature = (featureName) => ({
- type: 'TOGGLE_FEATURE_TOGGLE',
+ type: TOGGLE_FEATURE_TOGGLE,
  name: featureName,
 });
 

diff --git a/packages/unleash-frontend-next/src/style.scss b/packages/unleash-frontend-next/src/style.scss
@@ -6,3 +6,9 @@
  top: 0;
  bottom: 0;
 }
+
+.navigation {
+ .active {
+ background-color: #EEE;
+ }
+}