Validation error for missing API key label

frontend/scenes/Settings/Settings.js

@@ -15,8 +15,8 @@ import SettingsStore from './SettingsStore';
 @observer class Settings extends React.Component {
   store = SettingsStore;
 
-  constructor(props) {
+  constructor() {
-    super(props);
+    super();
     this.store = new SettingsStore();
   }
 
@@ -99,41 +99,59 @@ import SettingsStore from './SettingsStore';
   }
 }
 
-const InlineForm = ({
+class InlineForm extends React.Component {
-  placeholder,
+  props: {
-  buttonLabel,
+    placeholder: string,
-  name,
+    buttonLabel: string,
-  value,
+    name: string,
-  onChange,
+    value: string,
-  onSubmit,
+    onChange: Function,
-  disabled,
+    onSubmit: Function,
-}: {
+    disabled?: boolean,
-  placeholder: string,
-  buttonLabel: string,
-  name: string,
-  value: string,
-  onChange: Function,
-  onSubmit: Function,
-  disabled?: boolean,
-}) => {
-  const handleSubmit = event => {
-    event.preventDefault();
-    onSubmit();
   };
-  return (
+
-    <form onSubmit={handleSubmit}>
+  state = {
-      <Flex auto>
+    validationError: false,
-        <TextInput
+  };
-          type="text"
+
-          placeholder={placeholder}
+  handleSubmit = event => {
-          value={value || ''}
+    event.preventDefault();
-          onChange={onChange}
+    if (this.props.value) {
-        />
+      this.props.onSubmit();
-        <Button type="submit" value={buttonLabel} />
+    } else {
-      </Flex>
+      this.setState({
-    </form>
+        validationError: true,
-  );
+      });
-};
+      setTimeout(
+        () =>
+          this.setState({
+            validationError: false,
+          }),
+        2500
+      );
+    }
+  };
+
+  render() {
+    const { placeholder, value, onChange, buttonLabel } = this.props;
+    const { validationError } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Flex auto>
+          <TextInput
+            type="text"
+            placeholder={validationError ? 'Please add a label' : placeholder}
+            value={value || ''}
+            onChange={onChange}
+            validationError={validationError}
+          />
+          <Button type="submit" value={buttonLabel} />
+        </Flex>
+      </form>
+    );
+  }
+}
 
 const TextInput = styled.input`
   display:flex;
@@ -143,10 +161,10 @@ const TextInput = styled.input`
   padding-left:8px;
   padding-right:8px;
   color:inherit;
-  background-color:rgba(255, 255, 255, .25);
+  background-color: rgba(255, 255, 255, .25);
   border-width:1px;
   border-style:solid;
-  border-color:rgba(0, 0, 0, .25);
+  border-color: ${props => (props.validationError ? 'red' : 'rgba(0, 0, 0, .25)')};
   border-radius:2px 0 0 2px;
 `;