From 4dfddd6615fb5b61745e81c7738140bb000c6b40 Mon Sep 17 00:00:00 2001
From: Corinne Krych <corinnekrych@gmail.com>
Date: Mon, 12 Feb 2018 09:23:50 +0100
Subject: [PATCH] fix(feature): get rid of the regression, create feature can
 have a name

---
 frontend/src/component/feature/form/index.jsx | 29 ++++++++++++++++++-
 .../src/component/feature/view-component.jsx  |  2 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 07217e4550..1d2c249f22 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/frontend/src/component/feature/form/index.jsx
@@ -5,6 +5,14 @@ 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
@@ -17,6 +25,7 @@ class AddFeatureToggleComponent extends Component {
         const {
             input,
             setValue,
+            validateName,
             addStrategy,
             removeStrategy,
             updateStrategy,
@@ -26,12 +35,30 @@ class AddFeatureToggleComponent extends Component {
             editmode = false,
         } = this.props;
 
-        const { description, enabled } = input;
+        const {
+            name, // eslint-disable-line
+            nameError,
+            description,
+            enabled,
+        } = input;
         const configuredStrategies = input.strategies || [];
 
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
+                    {!editmode && (
+                        <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))}
+                        />
+                    )}
                     <Textfield
                         floatingLabel
                         style={{ width: '100%' }}
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 54c5a88898..b9a0ee1931 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardText, CardActions, Switch } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardActions, Switch } from 'react-mdl';
 import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';