Merge branch 'staging' of github.com:FarmBot/Farmbot-Web-App into final_groups_stuff

frontend/constants.ts

@@ -185,9 +185,6 @@ export namespace ToolTips {
   export const FARMWARE_LIST =
     trim(`View, select, and install new Farmware.`);
 
-  export const FARMWARE_INFO =
-    trim(`Farmware (plugin) details and management.`);
-
   export const PHOTOS =
     trim(`Take and view photos with your FarmBot's camera.`);
 

frontend/css/global.scss

@@ -1268,7 +1268,7 @@ ul {
   }
 }
 
-.documentation-widget {
+.input-line-widget {
   .fa-external-link {
     margin-left: 1rem;
   }
@@ -1432,6 +1432,19 @@ ul {
   }
 }
 
+.dynamic-column{
+  display: flex;
+  .location-form, .expandable-header{
+    padding-left: 15px;
+  }
+  .expandable-header{
+    padding-right: 15px;
+  }
+  .input-line{
+    width: -webkit-fill-available;
+  }
+}
+
 textarea {
   border: 0;
   padding: 6px 8px;

frontend/css/image_flipper.scss

@@ -1,5 +1,4 @@
 .image-flipper {
-  display: inline-block;
   position: relative;
   margin-top: 1rem;
 }
@@ -92,7 +91,7 @@
 .photos{
   .farmware-button{
     position: relative!important;
-    bottom: 2rem;
+    bottom: 3rem;
     height: 0px;
     float: right!important;
   }

frontend/css/sequences.scss

@@ -107,7 +107,7 @@
   >.location-form {
     margin: auto;
     margin-top: 1rem;
-    width: 80%;
+    width: 100%;
     max-width: 40rem;
     background: $off_white;
     label {
@@ -129,6 +129,15 @@
   }
 }
 
+.execute-sequence{
+  position:relative;
+  padding: 0 15px 0 15px;
+  width: 50%;
+  @media screen and (max-width: 1075px){
+    width: 100%;
+  }
+}
+
 .sequence,
 .regimen {
   width: 100%;

frontend/farmware/index.tsx

@@ -236,10 +236,7 @@ export class RawFarmwarePage extends React.Component<FarmwareProps, {}> {
         <CenterPanel
           className={`farmware-input-panel ${activeClasses}`}
           backButton={<this.FarmwareBackButton className={activeClasses} />}
-          title={getFormattedFarmwareName(this.current || "Photos")}
-          helpText={getToolTipByFarmware(this.props.farmwares, this.current)
-            || ToolTips.PHOTOS}
-          docPage={getDocLinkByFarmware(this.current)}>
+          title={getFormattedFarmwareName(this.current || "Photos")}>
           {<div className="farmware-input-panel-contents">
             <this.FarmwareInfoButton className={activeClasses} online={online} />
             {this.getPanelByFarmware(this.current ? this.current : "photos")}
@@ -249,7 +246,9 @@ export class RawFarmwarePage extends React.Component<FarmwareProps, {}> {
           className={`farmware-info-panel ${activeClasses}`}
           backButton={<this.FarmwareBackButton className={activeClasses} />}
           title={t("Information")}
-          helpText={ToolTips.FARMWARE_INFO}
+          helpText={getToolTipByFarmware(this.props.farmwares, this.current)
+            || ToolTips.PHOTOS}
+          docPage={getDocLinkByFarmware(this.current)}
           show={!!farmware}>
           <FarmwareInfo
             dispatch={this.props.dispatch}

frontend/sequences/step_tiles/__tests__/tile_move_absolute_test.tsx

@@ -84,6 +84,26 @@ describe("<TileMoveAbsolute/>", () => {
     expect(mock.mock.calls[0][0].location.args.x).toBe(23.456);
   });
 
+  it("Options visible on greater screen width", () => {
+    const p = fakeProps();
+    Object.defineProperty(window, "innerWidth", {
+      value: 800,
+      configurable: true
+    });
+    const wrapper = mount<TileMoveAbsolute>(<TileMoveAbsolute {...p} />);
+    expect(wrapper.find("h4").text()).toEqual("Options  []");
+  });
+
+  it("Options not visible on small screen width like mobile", () => {
+    const p = fakeProps();
+    Object.defineProperty(window, "innerWidth", {
+      value: 360,
+      configurable: true
+    });
+    const wrapper = mount<TileMoveAbsolute>(<TileMoveAbsolute {...p} />);
+    expect(wrapper.find("h4").text()).toEqual("[]");
+  });
+
   it("expands form", () => {
     const p = fakeProps();
     p.expandStepOptions = false;

frontend/sequences/step_tiles/tile_execute.tsx

@@ -100,7 +100,7 @@ export class RefactoredExecuteBlock
         confirmStepDeletion={this.props.confirmStepDeletion} />
       <StepContent className={className}>
         <Row>
-          <Col xs={6}>
+          <Col className="execute-sequence">
             <SequenceSelectBox
               onChange={this.changeSelection}
               resources={resources}
@@ -109,7 +109,7 @@ export class RefactoredExecuteBlock
         </Row>
         <Row>
           {!!calledSequenceVariableData &&
-            <Col xs={6}>
+            <Col className="execute-sequence">
               <LocalsList
                 bodyVariables={currentStep.body}
                 variableData={calledSequenceVariableData}

frontend/sequences/step_tiles/tile_move_absolute.tsx

@@ -134,7 +134,7 @@ export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState>
     if (currentSequence && !isTaggedSequence(currentSequence)) {
       throw new Error("WHOOPS!");
     }
-
+    const isMobile = window.innerWidth < 660;
     const className = "move-absolute-step";
     return <StepWrapper>
       <StepHeader
@@ -152,15 +152,17 @@ export class TileMoveAbsolute extends React.Component<StepParams, MoveAbsState>
       </StepHeader>
       <StepContent className={className}>
         <Row>
-          <Col xs={10}>
-            <this.LocationForm />
-          </Col>
-          <Col xs={2}>
-            <ExpandableHeader
-              expanded={this.state.more}
-              title={t("Options")}
-              onClick={() => this.setState({ more: !this.state.more })} />
-          </Col>
+          <div className={"dynamic-column"}>
+            <Col className="input-line">
+              <this.LocationForm />
+            </Col>
+            <Col>
+              <ExpandableHeader
+                expanded={this.state.more}
+                title={isMobile ? "" : t("Options")}
+                onClick={() => this.setState({ more: !this.state.more })} />
+            </Col>
+          </div>
         </Row>
         <Collapse isOpen={this.state.more}>
           <this.OptionsForm />

frontend/ui/__tests__/tooltip_test.tsx

@@ -5,7 +5,8 @@ import React from "react";
 describe("<ToolTip />", () => {
   const fakeProps = (): ToolTipProps => {
     return {
-      helpText: "such help"
+      helpText: "such help",
+      docPage: "weed-detection"
     };
   };
   const p = fakeProps();
@@ -31,4 +32,9 @@ describe("<ToolTip />", () => {
     expect(wrapper.find(".title-help-text.open").length).toEqual(1);
   });
 
+  it("renders doc link", () => {
+    expect(wrapper.text()).toContain("Documentation");
+    expect(wrapper.find("i").at(2).html()).toContain("fa-external-link");
+    expect(wrapper.find("a").html()).toContain("https://software.farm.bot/docs/weed-detection");
+  });
 });

frontend/ui/center_panel.tsx

@@ -6,7 +6,7 @@ interface CenterProps {
   children?: React.ReactNode;
   className: string;
   title: string;
-  helpText: string;
+  helpText?: string;
   width?: number;
   docPage?: DocSlug;
   backButton?: React.ReactNode;
@@ -19,7 +19,9 @@ export function CenterPanel(props: CenterProps) {
       <h3>
         <i>{t(props.title)}</i>
       </h3>
-      <ToolTip helpText={t(props.helpText)} docPage={props.docPage} />
+      {props.helpText &&
+        <ToolTip helpText={t(props.helpText)} docPage={props.docPage} />
+      }
       {props.children}
     </div>
   </Col>;

frontend/ui/expandable_header.tsx

@@ -10,10 +10,14 @@ interface Props {
 export let ExpandableHeader = (props: Props) => {
   const { onClick, title, expanded } = props;
   const icon_string = expanded ? "minus" : "plus";
+  const nbwhitespace = title != "";
   return <h4 className="expandable-header" onClick={onClick}>
     {t(title)}
+    {nbwhitespace &&
+      "\u00A0\u00A0"
+    }
     <span className="icon-toggle">
-      &nbsp;&nbsp;[<i className={`fa fa-${icon_string}`} />]
+      [<i className={`fa fa-${icon_string}`} />]
     </span>
   </h4>;
 };

frontend/ui/right_panel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Col, ToolTip } from ".";
+import { Col, ToolTip, DocSlug } from ".";
 import { t } from "../i18next_wrapper";
 
 interface RightPanelProps {
@@ -7,6 +7,7 @@ interface RightPanelProps {
   className: string;
   title: string;
   helpText: string;
+  docPage?: DocSlug;
   show: Boolean | undefined;
   width?: number;
   backButton?: React.ReactNode;
@@ -20,7 +21,7 @@ export function RightPanel(props: RightPanelProps) {
         <h3>
           <i>{t(props.title)}</i>
         </h3>
-        <ToolTip helpText={props.helpText} />
+        <ToolTip helpText={props.helpText} docPage={props.docPage} />
         {props.children}
       </div>}
   </Col>;