From 0d86323541dda28f483939567091ec60ffb66660 Mon Sep 17 00:00:00 2001 From: gabrielburnworth Date: Tue, 21 Nov 2023 12:03:48 -0800 Subject: [PATCH 1/4] increase xterm terminal width --- frontend/terminal/__tests__/support_test.ts | 3 ++- frontend/terminal/support.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/terminal/__tests__/support_test.ts b/frontend/terminal/__tests__/support_test.ts index 0a24e687cb..c18a5fa7d1 100644 --- a/frontend/terminal/__tests__/support_test.ts +++ b/frontend/terminal/__tests__/support_test.ts @@ -1,5 +1,6 @@ -const mockTerminal: Pick = { +const mockTerminal: Pick = { open: jest.fn(), + resize: jest.fn(), }; jest.mock("xterm", () => { diff --git a/frontend/terminal/support.ts b/frontend/terminal/support.ts index ff27a82573..de675c6631 100644 --- a/frontend/terminal/support.ts +++ b/frontend/terminal/support.ts @@ -6,6 +6,7 @@ export const attachTerminal = () => { const terminal = new Terminal({}); if (node) { terminal.open(node); + terminal.resize(84, 24); } return terminal; }; From e849b9d71e18f1e01b23a473b155fd942981f5bd Mon Sep 17 00:00:00 2001 From: gabrielburnworth Date: Tue, 21 Nov 2023 14:31:22 -0800 Subject: [PATCH 2/4] upgrade deps --- Gemfile.lock | 14 +++++++------- lib/tasks/fe.rake | 10 ++++++++++ package.json | 30 +++++++++++++++--------------- 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index e0e25bfa2a..2ead3bdfbe 100644 --- 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/lib/tasks/fe.rake b/lib/tasks/fe.rake index 7ef02130b1..83fbf458f1 100644 --- a/lib/tasks/fe.rake +++ b/lib/tasks/fe.rake @@ -7,6 +7,16 @@ EXCLUDE = [ reason: "@types/react", version: "3.10.12 (latest working)", }, + { + packages: ["punycode"], + reason: "dependency needs", + version: "1.4.1", + }, + { + packages: ["mqtt"], + reason: "import error", + version: "5.3.0", + }, ] # Load package.json as JSON. diff --git a/package.json b/package.json index f7c2f123fb..4549a8f5a2 100644 --- a/package.json +++ b/package.json @@ -31,19 +31,19 @@ "author": "farmbot.io", "license": "MIT", "dependencies": { - "@blueprintjs/core": "5.6.0", - "@blueprintjs/select": "5.0.17", + "@blueprintjs/core": "5.7.1", + "@blueprintjs/select": "5.0.19", "@monaco-editor/react": "4.6.0", "@parcel/transformer-sass": "2.10.3", "@parcel/transformer-typescript-tsc": "2.10.3", - "@types/lodash": "4.14.201", - "@types/markdown-it": "13.0.6", - "@types/node": "20.9.0", + "@types/lodash": "4.14.202", + "@types/markdown-it": "13.0.7", + "@types/node": "20.9.3", "@types/promise-timeout": "1.3.3", - "@types/react": "18.2.37", + "@types/react": "18.2.38", "@types/react-color": "3.0.10", - "@types/react-dom": "18.2.15", - "@types/ws": "8.5.9", + "@types/react-dom": "18.2.16", + "@types/ws": "8.5.10", "axios": "1.6.2", "bowser": "2.11.0", "browser-speech": "1.1.1", @@ -60,7 +60,7 @@ "parcel": "2.10.3", "process": "0.11.10", "promise-timeout": "1.3.0", - "punycode": "2.3.1", + "punycode": "1.4.1", "querystring-es3": "0.2.1", "react": "18.2.0", "react-color": "2.19.3", @@ -70,20 +70,20 @@ "redux-immutable-state-invariant": "2.1.0", "redux-thunk": "2.4.2", "takeme": "0.12.0", - "typescript": "5.2.2", + "typescript": "5.3.2", "url": "0.11.3", "xterm": "5.3.0" }, "devDependencies": { "@types/enzyme": "3.10.12", - "@types/jest": "29.5.8", - "@types/readable-stream": "4.0.5", - "@typescript-eslint/eslint-plugin": "6.11.0", - "@typescript-eslint/parser": "6.11.0", + "@types/jest": "29.5.9", + "@types/readable-stream": "4.0.8", + "@typescript-eslint/eslint-plugin": "6.12.0", + "@typescript-eslint/parser": "6.12.0", "@wojtekmaj/enzyme-adapter-react-17": "0.8.0", "coveralls": "3.1.1", "enzyme": "3.11.0", - "eslint": "8.53.0", + "eslint": "8.54.0", "eslint-plugin-eslint-comments": "3.2.0", "eslint-plugin-import": "2.29.0", "eslint-plugin-jest": "27.6.0", From c7ceb92f1239901a97153d443eb025f33721cb62 Mon Sep 17 00:00:00 2001 From: gabrielburnworth Date: Wed, 22 Nov 2023 10:06:00 -0800 Subject: [PATCH 3/4] change icon button style part I --- frontend/css/buttons.scss | 33 ++++++++++++ .../farm_designer/farm_designer_panels.scss | 20 ++------ frontend/css/global.scss | 15 ++---- frontend/css/sequences.scss | 18 +++---- frontend/curves/edit_curve.tsx | 4 +- frontend/point_groups/group_detail.tsx | 4 +- .../sequence_editor_middle_active_test.tsx | 25 +++++---- .../sequences/panel/__tests__/editor_test.tsx | 13 +++-- frontend/sequences/panel/editor.tsx | 28 ++++++---- frontend/sequences/panel/preview_support.tsx | 7 +-- .../sequence_editor_middle_active.tsx | 51 ++++++++++++------- 11 files changed, 128 insertions(+), 90 deletions(-) diff --git a/frontend/css/buttons.scss b/frontend/css/buttons.scss index 0099de4a45..0d9681dd6d 100644 --- 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 index 858cf10d6e..a67af2caf7 100644 --- 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 index 5580d59ee9..605759e0c4 100644 --- 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 { diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss index bca0fd8393..2eeef2c7d3 100644 --- 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; @@ -625,6 +621,9 @@ &.page { i { color: $white; + &.inactive { + color: $gray; + } } .publish-button { span { @@ -646,6 +645,9 @@ i, .title { color: $dark_gray; + &.inactive { + color: $placeholder_gray; + } } } &.blue { @@ -681,14 +683,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 index d8e113ded3..b50a4325f9 100644 --- a/frontend/curves/edit_curve.tsx +++ b/frontend/curves/edit_curve.tsx @@ -148,11 +148,11 @@ export class RawEditCurve extends React.Component
{curve && - } {curve && - 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 index 4b63642406..c048299828 100644 --- a/frontend/point_groups/group_detail.tsx +++ b/frontend/point_groups/group_detail.tsx @@ -115,14 +115,14 @@ export class RawGroupDetail extends React.Component {
{group && } content={ } />} {group && - this.props.dispatch(destroy(group.uuid))} />}
diff --git a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx index e9735db7b7..da8e388e06 100644 --- 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) =>
{target}{content}
, +})); + import React from "react"; import { SequenceEditorMiddleActive, onDrop, SequenceName, AddCommandButton, @@ -141,7 +146,7 @@ describe("", () => { p.sequence.body.sequence_versions = []; p.sequence.body.forked = false; const wrapper = mount(); - expect(wrapper.text().toLowerCase()).toContain("upgrade"); + expect(wrapper.text().toLowerCase()).toContain("upgrade to latest"); }); it("shows revert available", () => { @@ -151,8 +156,8 @@ describe("", () => { p.sequence.body.sequence_versions = [1]; p.sequence.body.forked = true; const wrapper = mount(); - 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("", () => { 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("", () => { 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("", () => { mockPath = Path.mock(Path.sequences("1")); const p = fakeProps(); const wrapper = mount(); - expect(wrapper.find("Popover").length).toEqual(4); + expect(wrapper.find("Popover").length).toEqual(10); }); it("opens add variable menu", () => { @@ -573,12 +578,12 @@ describe("", () => { it("edits color", () => { mockPath = Path.mock(Path.sequencePage("1")); const p = fakeProps(); - const wrapper = shallow(); - wrapper.find("ColorPicker").simulate("change", "red"); + const wrapper = mount(); + 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", () => { @@ -586,7 +591,7 @@ describe("", () => { p.getWebAppConfigValue = () => true; p.viewCeleryScript = true; const wrapper = shallow(); - expect(wrapper.find(".fa-code").hasClass("enabled")).toBeTruthy(); + expect(wrapper.find(".fa-code").hasClass("inactive")).toBeFalsy(); }); it("shows publish menu", () => { diff --git a/frontend/sequences/panel/__tests__/editor_test.tsx b/frontend/sequences/panel/__tests__/editor_test.tsx index 5681e06c9a..7e2373af55 100644 --- a/frontend/sequences/panel/__tests__/editor_test.tsx +++ b/frontend/sequences/panel/__tests__/editor_test.tsx @@ -15,8 +15,13 @@ jest.mock("../../../folders/actions", () => ({ addNewSequenceToFolder: jest.fn(), })); +import { PopoverProps } from "../../../ui/popover"; +jest.mock("../../../ui/popover", () => ({ + Popover: ({ target, content }: PopoverProps) =>
{target}{content}
, +})); + import React from "react"; -import { mount, shallow } from "enzyme"; +import { mount } from "enzyme"; import { RawDesignerSequenceEditor as DesignerSequenceEditor, ResourceTitle, ResourceTitleProps, @@ -83,9 +88,9 @@ describe("", () => { const sequence = fakeSequence(); sequence.body.color = "" as Color; p.sequence = sequence; - const wrapper = shallow(); - wrapper.find("ColorPicker").simulate("change", "red"); - expect(edit).toHaveBeenCalledWith(p.sequence, { color: "red" }); + const wrapper = mount(); + wrapper.find(".color-picker-item-wrapper").first().simulate("click"); + expect(edit).toHaveBeenCalledWith(p.sequence, { color: "blue" }); }); it("generates name and color", () => { diff --git a/frontend/sequences/panel/editor.tsx b/frontend/sequences/panel/editor.tsx index bbd61bedb9..4a8fc441ab 100644 --- a/frontend/sequences/panel/editor.tsx +++ b/frontend/sequences/panel/editor.tsx @@ -7,7 +7,9 @@ import { Panel } from "../../farm_designer/panel_header"; import { mapStateToProps } from "../state_to_props"; import { SequencesProps } from "../interfaces"; import { t } from "../../i18next_wrapper"; -import { EmptyStateWrapper, EmptyStateGraphic, ColorPicker } from "../../ui"; +import { + EmptyStateWrapper, EmptyStateGraphic, Popover, ColorPickerCluster, +} from "../../ui"; import { SequenceEditorMiddleActive, } from "../sequence_editor_middle_active"; @@ -29,6 +31,7 @@ import { requestAutoGeneration } from "../request_auto_generation"; import { error } from "../../toast/toast"; import { noop } from "lodash"; import { addNewSequenceToFolder } from "../../folders/actions"; +import { Position } from "@blueprintjs/core"; interface SequencesState { processingTitle: boolean; @@ -74,13 +77,16 @@ export class RawDesignerSequenceEditor this.setState({ processingTitle })} setColorProcessing={processingColor => this.setState({ processingColor })} />} - {sequence && } - onChange={color => this.props.dispatch(edit(sequence, { color }))} />} + {sequence && } + content={ this.props.dispatch(edit(sequence, { color }))} + current={sequence.body.color} />} />} {sequence && window.innerWidth > 450 && - push(Path.sequencePage(urlFriendly(sequence.body.name)))} />} @@ -166,9 +172,11 @@ export const AutoGenerateButton = (props: AutoGenerateButtonProps) => { dispatch, sequence, isProcessing, setTitleProcessing, setColorProcessing, } = props; return { if (!sequence.body.id) { error(t("Save sequence first.")); diff --git a/frontend/sequences/panel/preview_support.tsx b/frontend/sequences/panel/preview_support.tsx index 3833ae430f..a6ce8dae26 100644 --- a/frontend/sequences/panel/preview_support.tsx +++ b/frontend/sequences/panel/preview_support.tsx @@ -173,9 +173,10 @@ const PreviewToolbar = (props: PreviewToolbarProps) =>
diff --git a/frontend/sequences/sequence_editor_middle_active.tsx b/frontend/sequences/sequence_editor_middle_active.tsx index 1d7f13f1f0..c30f85778b 100644 --- a/frontend/sequences/sequence_editor_middle_active.tsx +++ b/frontend/sequences/sequence_editor_middle_active.tsx @@ -14,10 +14,11 @@ import { import { splice, move, stringifySequenceData } from "./step_tiles"; import { push } from "../history"; import { - BlurableInput, Row, Col, SaveBtn, ColorPicker, Help, ToggleButton, Popover, + BlurableInput, Row, Col, SaveBtn, Help, ToggleButton, Popover, Markdown, FBSelect, DropDownItem, + ColorPickerCluster, } from "../ui"; import { DropArea } from "../draggable/drop_area"; import { stepGet } from "../draggable/actions"; @@ -284,31 +285,41 @@ export const SequenceBtnGroup = ({ dispatch={dispatch} />
} + target={} content={} />
{getWebAppConfigValue(BooleanSetting.view_celery_script) && - } dispatch(pinSequenceToggle(sequence))} /> {Path.inDesigner() && - dispatch(visualizeInMap(visualized ? undefined : sequence.uuid))} />} - dispatch(copySequence(sequence))} /> -
} + target={} content={isSequencePublished(sequence) ? : } />
- {!Path.inDesigner() && } - current={sequence.body.color} - onChange={color => - editCurrentSequence(dispatch, sequence, { color })} />} + {!Path.inDesigner() && + } + content={ + editCurrentSequence(dispatch, sequence, { color })} + current={sequence.body.color} />} />} {!Path.inDesigner() && { {props.showName &&

{props.sequencePreview?.body.name}

} {props.viewCeleryScript && }