From dcce9edc348ef980a3677991371dfaad74677dbd Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Sat, 20 Jul 2019 11:27:38 -0600
Subject: [PATCH] Add tooltip for why you can't run a section

---
 client/components/RunSectionForm.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/components/RunSectionForm.tsx b/client/components/RunSectionForm.tsx
index fe73005..76fcfe9 100644
--- a/client/components/RunSectionForm.tsx
+++ b/client/components/RunSectionForm.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Form, Header, Icon, Segment } from "semantic-ui-react";
+import { Form, Header, Icon, Segment, Popup } from "semantic-ui-react";
 
 import { DurationView, SectionChooser } from "@client/components";
 import { UiStore } from "@client/state";
@@ -30,8 +30,14 @@ export default class RunSectionForm extends React.Component<
 
   render() {
     const { sectionId, duration } = this.state;
+    const runButton = (
+      <Form.Button primary onClick={this.run} disabled={!this.isValid} className="runSectionForm-runButton">
+        <Icon name="play" />
+        Run
+      </Form.Button>
+    );
     return (
-      <Segment>
+      <Segment className="runSectionForm">
         <Header>Run Section</Header>
         <Form>
           <SectionChooser
@@ -45,10 +51,14 @@ export default class RunSectionForm extends React.Component<
             duration={duration}
             onDurationChange={this.onDurationChange}
           />
-          <Form.Button primary onClick={this.run} disabled={!this.isValid}>
-            <Icon name="play" />
-            Run
-          </Form.Button>
+          {
+            this.isValid ? runButton :
+            <Popup trigger={runButton} on={["click", "hover"]} position="right center">
+              <Popup.Content>
+                Select a section to run and a duration
+              </Popup.Content>
+            </Popup>
+          }
         </Form>
       </Segment>
     );