fix(feature): display strategies tab as default

frontend/src/component/feature/feature-list-item-component.jsx

@@ -52,7 +52,7 @@ const Feature = ({
             </span>
             <span className={['mdl-list__item-primary-content', styles.listItemLink].join(' ')}>
                 <Link
-                    to={`/features/view/${name}`}
+                    to={`/features/strategies/${name}`}
                     className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
                 >
                     {name}

frontend/src/component/feature/form-edit-container.jsx

@@ -37,7 +37,7 @@ const prepare = (methods, dispatch) => {
         // TODO: should add error handling
         requestUpdateFeatureToggle(input)(dispatch)
             .then(() => methods.clear())
-            .then(() => hashHistory.push(`/features/view/${input.name}`));
+            .then(() => hashHistory.push(`/features/strategies/${input.name}`));
     };
 
     methods.onCancel = evt => {

frontend/src/component/feature/form/index.jsx

@@ -5,14 +5,6 @@ import StrategiesSection from './strategies-section-container';
 
 import { FormButtons } from '../../common';
 
-const trim = value => {
-    if (value && value.trim) {
-        return value.trim();
-    } else {
-        return value;
-    }
-};
-
 class AddFeatureToggleComponent extends Component {
     componentWillMount() {
         // TODO unwind this stuff
@@ -25,7 +17,6 @@ class AddFeatureToggleComponent extends Component {
         const {
             input,
             setValue,
-            validateName,
             addStrategy,
             removeStrategy,
             updateStrategy,
@@ -35,29 +26,12 @@ class AddFeatureToggleComponent extends Component {
             editmode = false,
         } = this.props;
 
-        const {
+        const { description, enabled } = input;
-            name, // eslint-disable-line
-            nameError,
-            description,
-            enabled,
-        } = input;
         const configuredStrategies = input.strategies || [];
 
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
-                    <Textfield
-                        floatingLabel
-                        label="Name"
-                        name="name"
-                        disabled={editmode}
-                        required
-                        value={name}
-                        error={nameError}
-                        onBlur={v => validateName(v.target.value)}
-                        onChange={v => setValue('name', trim(v.target.value))}
-                    />
-                    <br />
                     <Textfield
                         floatingLabel
                         style={{ width: '100%' }}

frontend/src/component/feature/view-component.jsx

@@ -9,8 +9,8 @@ import EditFeatureToggle from './form-edit-container.jsx';
 import { styles as commonStyles } from '../common';
 
 const TABS = {
-    view: 0,
+    strategies: 0,
-    edit: 1,
+    view: 1,
     history: 2,
 };
 
@@ -40,7 +40,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
 
         if (TABS[activeTab] === TABS.history) {
             return <HistoryComponent toggleName={featureToggleName} />;
-        } else if (TABS[activeTab] === TABS.edit) {
+        } else if (TABS[activeTab] === TABS.strategies) {
             return <EditFeatureToggle featureToggle={featureToggle} />;
         } else {
             return <MetricComponent featureToggle={featureToggle} />;
@@ -80,7 +80,7 @@ export default class ViewFeatureToggleComponent extends React.Component {
             );
         }
 
-        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
+        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
         const tabContent = this.getTabContent(activeTab);
 
         const removeToggle = () => {
@@ -125,8 +125,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
                     tabBarProps={{ style: { width: '100%' } }}
                     className="mdl-color--grey-100"
                 >
+                    <Tab onClick={() => this.goToTab('strategies', featureToggleName)}>Strategies</Tab>
                     <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
-                    <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
                     <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
                 </Tabs>
                 {tabContent}

frontend/src/component/strategies/strategy-details-component.jsx

@@ -54,7 +54,7 @@ export default class StrategyDetails extends Component {
     }
 
     render() {
-        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.view;
+        const activeTabId = TABS[this.props.activeTab] ? TABS[this.props.activeTab] : TABS.strategies;
         const strategy = this.props.strategy;
         if (!strategy) {
             return <ProgressBar indeterminate />;