Merge pull request #2450 from FarmBot/staging

v15.8.10
FarmBot · Nov 29, 2023 · 2ec973b · 2ec973b
2 parents 338ad7f + 28ac503
commit 2ec973b
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 116 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -74,7 +74,7 @@ GEM
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     amq-protocol (2.3.2)
-    bcrypt (3.1.19)
+    bcrypt (3.1.20)
     builder (3.2.4)
     bunny (2.22.0)
       amq-protocol (~> 2.3, >= 2.3.1)
@@ -230,12 +230,12 @@ GEM
       timeout
     net-smtp (0.4.0)
       net-protocol
-    nio4r (2.6.0)
-    nokogiri (1.15.4-x86_64-linux)
+    nio4r (2.6.1)
+    nokogiri (1.15.5-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
     os (1.1.4)
-    passenger (6.0.18)
+    passenger (6.0.19)
       rack
       rake (>= 0.8.1)
     pg (1.5.4)
@@ -244,7 +244,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (5.0.3)
+    public_suffix (5.0.4)
     rabbitmq_http_api_client (2.2.0)
       addressable (~> 2.7)
       faraday (~> 1.3)
@@ -319,7 +319,7 @@ GEM
     rspec-mocks (3.12.6)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-rails (6.0.3)
+    rspec-rails (6.1.0)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
@@ -432,4 +432,4 @@ RUBY VERSION
    ruby 3.1.4p223
 
 BUNDLED WITH
-   2.4.19
+   2.4.22
diff --git a/frontend/css/buttons.scss b/frontend/css/buttons.scss
@@ -298,3 +298,36 @@
   font-size: "1.2rem";
   border-bottom: "none";
 }
+
+.fb-icon-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  font-size: 1.25rem;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: $dark_gray;
+  text-align: center;
+  &.light {
+    color: $off_white;
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.12);
+    }
+    &:disabled {
+      color: $off_white;
+      filter: brightness(0.8);
+    }
+  }
+  &:hover {
+    background: rgba(0, 0, 0, 0.08);
+  }
+  &:active:not(:disabled) {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    filter: brightness(0.95);
+  }
+  &:disabled {
+    filter: invert(0.5);
+    cursor: not-allowed;
+  }
+}
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -1251,13 +1251,13 @@ li {
     }
   }
   .grid-planting-toggle {
+    margin: 0.5rem;
+    margin-left: 0;
     label {
       margin-top: 0.5rem;
     }
     button {
       float: right;
-      margin-right: 0.5rem;
-      margin-top: 0.5rem;
     }
   }
   .fb-toggle-button {
@@ -2073,26 +2073,16 @@ li {
   padding: 1.5rem;
   .fa-copy,
   .fa-sort {
-    margin-top: 0.25rem;
     color: $white;
   }
   .fa-trash {
-    margin-top: 0.25rem;
-    margin-left: 2rem;
     color: $white;
   }
-  .color-picker {
-    margin-right: 0.5rem;
-  }
   .fa-expand {
-    margin-top: 0.25rem;
     color: $dark_gray;
   }
   .fa-magic,
   .fa-spinner {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    margin-right: 2rem;
     color: $dark_gray;
   }
 }
@@ -3224,11 +3214,7 @@ li {
   .green,
   .red {
     .panel-title {
-      .color-picker {
-        .icon-saucer {
-          color: $white;
-        }
-      }
+      .fa-paint-brush,
       .fa-expand,
       .fa-magic,
       .fa-spinner {

diff --git a/frontend/css/global.scss b/frontend/css/global.scss
@@ -1066,13 +1066,12 @@ ul {
   }
   .settings-menu-button {
     margin-top: 0.15rem;
+    margin-right: 0.5rem;
     .bp5-popover-wrapper {
       margin-left: 0;
     }
   }
   .fa {
-    margin: 0 0.75rem;
-    line-height: 2rem;
     float: right;
   }
   .fa-code {
@@ -1082,21 +1081,13 @@ ul {
       color: $dark_gray;
     }
   }
-  .fa-trash {
-    color: $darkest_red;
-  }
-  .fa-clone,
-  .fa-copy {
-    color: $yellow;
-  }
-  .fa-eye {
-    color: $orange;
+  .inactive {
+    color: $gray;
   }
   .fa-eye-slash {
     color: $gray;
   }
   .color-picker {
-    margin: 0 0.5rem;
     float: right;
     vertical-align: middle;
     .saucer {
@@ -1106,6 +1097,14 @@ ul {
   }
 }
 
+.button-group,
+.panel-header-icon-group {
+  .fa-spinner {
+    background: none !important;
+    box-shadow: none !important;
+  }
+}
+
 .fb-button-popover-wrapper {
   float: right;
   margin-right: 1rem;

diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss
@@ -23,10 +23,6 @@
   h3 {
     margin-top: 1rem;
   }
-  .bp5-popover-wrapper {
-    display: inline;
-    margin-left: 1rem;
-  }
   .sequence-editor-tools {
     .row {
       flex: 1;
@@ -495,11 +491,10 @@
 .sequence-editor-sections {
   .sequence-section-header {
     position: relative;
-    line-height: 3rem;
     cursor: pointer;
     padding-left: 1.5rem;
     height: 4rem;
-    line-height: 3.75rem !important;
+    line-height: 3.75rem;
     &:hover {
       background: $light_gray;
     }
@@ -547,11 +542,11 @@
         align-content: center;
         .add-variable-options {
           text-align: center;
+          line-height: 0;
         }
         .fb-button {
           float: none;
           height: 2rem;
-          line-height: 2rem;
         }
       }
     }
@@ -625,6 +620,9 @@
   &.page {
     i {
       color: $white;
+      &.inactive {
+        color: $gray;
+      }
     }
     .publish-button {
       span {
@@ -646,6 +644,9 @@
       i,
       .title {
         color: $dark_gray;
+        &.inactive {
+          color: $placeholder_gray;
+        }
       }
     }
     &.blue {
@@ -681,14 +682,6 @@
   @media screen and (max-width: 767px) {
     margin-right: 10px;
   }
-  .fa-thumb-tack {
-    color: $placeholder_gray;
-    line-height: 2rem;
-    transform: rotate(45deg);
-    &.pinned {
-      transform: rotate(0deg);
-    }
-  }
   hr {
     margin: 0.5rem 0;
   }

diff --git a/frontend/curves/edit_curve.tsx b/frontend/curves/edit_curve.tsx
@@ -148,11 +148,11 @@ export class RawEditCurve extends React.Component<EditCurveProps, EditCurveState
         backTo={curvesPath}>
         <div className={"panel-header-icon-group"}>
           {curve &&
-            <i className={"fa fa-copy"}
+            <i className={"fa fa-copy fb-icon-button"}
               title={t("Copy curve")}
               onClick={dispatch(copyCurve(this.props.curves, curve))} />}
           {curve &&
-            <i className={"fa fa-trash"}
+            <i className={"fa fa-trash fb-icon-button"}
               title={t("Delete curve")}
               onClick={() => this.props.resourceUsage[curve.uuid]
                 ? error(t("Curve in use."))

diff --git a/frontend/point_groups/group_detail.tsx b/frontend/point_groups/group_detail.tsx
@@ -115,14 +115,14 @@ export class RawGroupDetail extends React.Component<GroupDetailProps, {}> {
         <div className={"panel-header-icon-group"}>
           {group &&
             <Popover
-              target={<i className={"fa fa-sort"}
+              target={<i className={"fa fa-sort fb-icon-button"}
                 title={t("Sort by")} />}
               content={
                 <GroupSortSelection group={group} dispatch={this.props.dispatch}
                   pointsSelectedByGroup={pointsSelectedByGroup(
                     group, this.props.allPoints)} />} />}
           {group &&
-            <i className={"fa fa-trash"}
+            <i className={"fa fa-trash fb-icon-button"}
               title={t("Delete group")}
               onClick={() => this.props.dispatch(destroy(group.uuid))} />}
         </div>

diff --git a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
@@ -55,6 +55,11 @@ jest.mock("../request_auto_generation", () => ({
   requestAutoGeneration: jest.fn(),
 }));
 
+import { PopoverProps } from "../../ui/popover";
+jest.mock("../../ui/popover", () => ({
+  Popover: ({ target, content }: PopoverProps) => <div>{target}{content}</div>,
+}));
+
 import React from "react";
 import {
   SequenceEditorMiddleActive, onDrop, SequenceName, AddCommandButton,
@@ -141,7 +146,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     p.sequence.body.sequence_versions = [];
     p.sequence.body.forked = false;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    expect(wrapper.text().toLowerCase()).toContain("upgrade");
+    expect(wrapper.text().toLowerCase()).toContain("upgrade to latest");
   });
 
   it("shows revert available", () => {
@@ -151,8 +156,8 @@ describe("<SequenceEditorMiddleActive />", () => {
     p.sequence.body.sequence_versions = [1];
     p.sequence.body.forked = true;
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    expect(wrapper.text().toLowerCase()).not.toContain("upgrade");
-    expect(wrapper.text().toLowerCase()).toContain("revert");
+    expect(wrapper.text().toLowerCase()).not.toContain("upgrade to latest");
+    expect(wrapper.text().toLowerCase()).toContain("revert changes");
   });
 
   it("upgrades sequence", () => {
@@ -412,7 +417,7 @@ describe("<SequenceEditorMiddleActive />", () => {
       view: "public", sequencePreview: previewSequence,
       viewSequenceCeleryScript: true,
     });
-    expect(wrapper.find(".fa-code").hasClass("enabled")).toBeTruthy();
+    expect(wrapper.find(".fa-code").hasClass("inactive")).toBeFalsy();
     expect(wrapper.text()).toContain("upgrade");
   });
 
@@ -427,7 +432,7 @@ describe("<SequenceEditorMiddleActive />", () => {
       view: "public", sequencePreview: previewSequence,
       viewSequenceCeleryScript: false,
     });
-    expect(wrapper.find(".fa-code").hasClass("enabled")).toBeFalsy();
+    expect(wrapper.find(".fa-code").hasClass("inactive")).toBeTruthy();
   });
 
   it("makes selections", () => {
@@ -497,7 +502,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     mockPath = Path.mock(Path.sequences("1"));
     const p = fakeProps();
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    expect(wrapper.find("Popover").length).toEqual(4);
+    expect(wrapper.find("Popover").length).toEqual(10);
   });
 
   it("opens add variable menu", () => {
@@ -573,20 +578,20 @@ describe("<SequenceBtnGroup />", () => {
   it("edits color", () => {
     mockPath = Path.mock(Path.sequencePage("1"));
     const p = fakeProps();
-    const wrapper = shallow(<SequenceBtnGroup {...p} />);
-    wrapper.find("ColorPicker").simulate("change", "red");
+    const wrapper = mount(<SequenceBtnGroup {...p} />);
+    wrapper.find(".color-picker-item-wrapper").first().simulate("click");
     expect(editCurrentSequence).toHaveBeenCalledWith(
       expect.any(Function),
       expect.objectContaining({ uuid: p.sequence.uuid }),
-      { color: "red" });
+      { color: "blue" });
   });
 
   it("shows view celery script enabled", () => {
     const p = fakeProps();
     p.getWebAppConfigValue = () => true;
     p.viewCeleryScript = true;
     const wrapper = shallow(<SequenceBtnGroup {...p} />);
-    expect(wrapper.find(".fa-code").hasClass("enabled")).toBeTruthy();
+    expect(wrapper.find(".fa-code").hasClass("inactive")).toBeFalsy();
   });
 
   it("shows publish menu", () => {