fix run button menu open state behavior

frontend/__test_support__/fake_designer_state.ts

@@ -1,5 +1,6 @@
 import { DesignerState } from "../farm_designer/interfaces";
 import { HelpState } from "../help/reducer";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export const fakeDesignerState = (): DesignerState => ({
   selectedPoints: undefined,
@@ -56,3 +57,8 @@ export const fakeHelpState = (): HelpState => ({
   currentTour: undefined,
   currentTourStep: undefined,
 });
+
+export const fakeMenuOpenState = (): RunButtonMenuOpen => ({
+  component: undefined,
+  uuid: undefined,
+});

frontend/__tests__/app_test.tsx

@@ -29,7 +29,9 @@ import { fakeTimeSettings } from "../__test_support__/fake_time_settings";
 import { error, warning } from "../toast/toast";
 import { fakePings } from "../__test_support__/fake_state/pings";
 import { auth } from "../__test_support__/fake_state/token";
-import { fakeHelpState } from "../__test_support__/fake_designer_state";
+import {
+  fakeHelpState, fakeMenuOpenState,
+} from "../__test_support__/fake_designer_state";
 import { Path } from "../internal_urls";
 import { push } from "../history";
 import { app } from "../__test_support__/fake_state/app";
@@ -65,7 +67,7 @@ const fakeProps = (): AppProps => ({
   feeds: [],
   peripherals: [],
   sequences: [],
-  menuOpen: undefined,
+  menuOpen: fakeMenuOpenState(),
 });
 
 describe("<App />: Loading", () => {

frontend/app.tsx

@@ -37,7 +37,7 @@ import { FirmwareConfig } from "farmbot/dist/resources/configs/firmware";
 import { getFirmwareConfig, getFbosConfig } from "./resources/getters";
 import { intersection, isString, uniq } from "lodash";
 import { t } from "./i18next_wrapper";
-import { ResourceIndex, UUID } from "./resources/interfaces";
+import { ResourceIndex } from "./resources/interfaces";
 import { getAllAlerts } from "./messages/state_to_props";
 import { PingDictionary } from "./devices/connectivity/qos";
 import { getEnv } from "./farmware/state_to_props";
@@ -55,6 +55,7 @@ import { AppState } from "./reducer";
 import {
   sourceFbosConfigValue, sourceFwConfigValue,
 } from "./settings/source_config_value";
+import { RunButtonMenuOpen } from "./sequences/interfaces";
 
 export interface AppProps {
   dispatch: Function;
@@ -83,7 +84,7 @@ export interface AppProps {
   feeds: TaggedWebcamFeed[];
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   appState: AppState;
   children?: React.ReactNode;
 }

frontend/controls/__tests__/controls_test.tsx

@@ -11,6 +11,7 @@ import { DesignerControlsProps } from "../interfaces";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
 import { app } from "../../__test_support__/fake_state/app";
 import { Actions } from "../../constants";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 describe("<DesignerControls />", () => {
   const fakeProps = (): DesignerControlsProps => ({
@@ -20,7 +21,7 @@ describe("<DesignerControls />", () => {
     peripherals: [],
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     firmwareSettings: bot.hardware.mcu_params,
     getConfigValue: jest.fn(),
     sourceFwConfig: () => ({ value: 0, consistent: true }),
@@ -54,7 +55,7 @@ describe("<ControlsPanel />", () => {
     peripherals: [],
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     firmwareSettings: bot.hardware.mcu_params,
   });
 

frontend/controls/__tests__/pinned_sequence_list_test.tsx

@@ -4,13 +4,14 @@ import { PinnedSequences } from "../pinned_sequence_list";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import { PinnedSequencesProps } from "../interfaces";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 describe("<PinnedSequences />", () => {
   const fakeProps = (): PinnedSequencesProps => ({
     syncStatus: undefined,
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     dispatch: jest.fn(),
   });
 

frontend/controls/controls.tsx

@@ -18,10 +18,11 @@ import {
   FirmwareHardware, McuParams, TaggedLog, TaggedPeripheral, TaggedSequence,
   TaggedWebcamFeed,
 } from "farmbot";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { t } from "../i18next_wrapper";
 import { push } from "../history";
 import { Path } from "../internal_urls";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export class RawDesignerControls
   extends React.Component<DesignerControlsProps, {}> {
@@ -52,7 +53,7 @@ export interface ControlsPanelProps {
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   firmwareSettings: McuParams;
 }
 

frontend/controls/interfaces.ts

@@ -5,10 +5,11 @@ import {
   Vector3, McuParams, Xyz, AxisState, SyncStatus, TaggedSequence,
   FirmwareHardware, TaggedPeripheral, TaggedWebcamFeed, TaggedLog,
 } from "farmbot";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { GetWebAppConfigValue } from "../config_storage/actions";
 import { MovementState } from "../interfaces";
 import { PinBindingListItems } from "../settings/pin_bindings/interfaces";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface AxisDisplayGroupProps {
   position: BotPosition;
@@ -58,7 +59,7 @@ export interface PinnedSequencesProps {
   syncStatus: SyncStatus | undefined;
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   dispatch: Function;
 }
 
@@ -69,7 +70,7 @@ export interface DesignerControlsProps {
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   firmwareSettings: McuParams;
   getConfigValue: GetWebAppConfigValue;
   sourceFwConfig: SourceFwConfig;

frontend/controls/pinned_sequence_list.tsx

@@ -22,7 +22,7 @@ export const PinnedSequences = (props: PinnedSequencesProps) => {
                 </label>
               </Col>
               <Col xs={4}>
-                <TestButton
+                <TestButton component={"pinned"}
                   syncStatus={props.syncStatus}
                   sequence={sequence}
                   resources={props.resources}

frontend/css/global.scss

@@ -179,9 +179,11 @@ fieldset {
   margin-bottom: 0;
   .tabs {
     display: flex;
-    position: sticky;
-    top: 0;
+    position: absolute;
+    top: 1rem;
+    left: 0;
     z-index: 3;
+    width: 100%;
     background: $white;
     padding-bottom: 0.5rem;
     :first-child {
@@ -205,7 +207,7 @@ fieldset {
       color: $medium_gray;
       width: 50%;
       text-align: center;
-      margin-top: -1rem;
+      margin-top: 0;
       cursor: pointer;
       &.selected {
         background: $medium_gray;

frontend/folders/__tests__/component_test.tsx

@@ -73,6 +73,7 @@ import { SearchField } from "../../ui/search_field";
 import { Path } from "../../internal_urls";
 import { copySequence } from "../../sequences/actions";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 const fakeRootFolder = (): FolderNodeInitial => ({
   kind: "initial",
@@ -111,7 +112,7 @@ describe("<Folders />", () => {
     sequenceMetas: {},
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
   });
 
@@ -258,7 +259,7 @@ describe("<FolderListItem />", () => {
     inUse: false,
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
     searchTerm: undefined,
   });
@@ -523,7 +524,7 @@ describe("<FolderNameEditor />", () => {
     sequenceMetas: {},
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
     searchTerm: undefined,
     dragging: false,

frontend/folders/component.tsx

@@ -51,7 +51,7 @@ import {
 } from "../sequences/sequence_editor_middle_active";
 import { Path } from "../internal_urls";
 import { copySequence } from "../sequences/actions";
-import { TestButton } from "../sequences/test_button";
+import { TestButton, isMenuOpen } from "../sequences/test_button";
 import { TaggedSequence } from "farmbot";
 
 export const FolderListItem = (props: FolderItemProps) => {
@@ -63,7 +63,9 @@ export const FolderListItem = (props: FolderItemProps) => {
   const active = Path.lastChunkEquals(urlFriendly(seqName)) ? "active" : "";
   const [settingsOpen, setSettingsOpen] = React.useState(false);
   const [descriptionOpen, setDescriptionOpen] = React.useState(false);
-  const hovered = props.menuOpen == sequence.uuid || settingsOpen || descriptionOpen
+  const menuOpen = isMenuOpen(props.menuOpen,
+    { component: "list", uuid: sequence.uuid });
+  const hovered = menuOpen || settingsOpen || descriptionOpen
     ? "hovered"
     : "";
   const matched = (props.searchTerm &&
@@ -93,7 +95,7 @@ export const FolderListItem = (props: FolderItemProps) => {
         draggable={false}>
         <p>{nameWithSaveIndicator}</p>
       </Link>
-      <TestButton
+      <TestButton component={"list"}
         syncStatus={props.syncStatus}
         sequence={sequence}
         resources={props.resources}

frontend/folders/interfaces.ts

@@ -2,6 +2,7 @@ import { Color } from "farmbot/dist/corpus";
 import { SyncStatus, TaggedSequence } from "farmbot";
 import { VariableNameSet, UUID, ResourceIndex } from "../resources/interfaces";
 import { GetWebAppConfigValue } from "../config_storage/actions";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface FolderMeta {
   open: boolean;
@@ -65,7 +66,7 @@ export interface FolderProps {
   sequenceMetas: Record<UUID, VariableNameSet | undefined>;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
 }
 
@@ -95,7 +96,7 @@ export interface FolderNodeProps {
   sequenceMetas: Record<UUID, VariableNameSet | undefined>;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
   searchTerm: string | undefined;
 }
@@ -127,7 +128,7 @@ export interface FolderItemProps {
   inUse: boolean;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
   searchTerm: string | undefined;
 }

frontend/nav/__tests__/index_test.tsx

@@ -23,7 +23,9 @@ import { fakePings } from "../../__test_support__/fake_state/pings";
 import { Link } from "../../link";
 import { refresh } from "../../api/crud";
 import { push } from "../../history";
-import { fakeHelpState } from "../../__test_support__/fake_designer_state";
+import {
+  fakeHelpState, fakeMenuOpenState,
+} from "../../__test_support__/fake_designer_state";
 import { Path } from "../../internal_urls";
 import { fakePercentJob } from "../../__test_support__/fake_bot_data";
 import {
@@ -55,7 +57,7 @@ describe("<NavBar />", () => {
     sourceFbosConfig: jest.fn(),
     firmwareConfig: fakeFirmwareConfig().body,
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     env: {},
     feeds: [],
     peripherals: [],

frontend/nav/interfaces.ts

@@ -14,8 +14,9 @@ import { TimeSettings } from "../interfaces";
 import { PingDictionary } from "../devices/connectivity/qos";
 import { HelpState } from "../help/reducer";
 import { AppState } from "../reducer";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { FirmwareConfig } from "farmbot/dist/resources/configs/firmware";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface NavBarProps {
   logs: TaggedLog[];
@@ -38,7 +39,7 @@ export interface NavBarProps {
   helpState: HelpState;
   telemetry: TaggedTelemetry[];
   appState: AppState;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   env: UserEnv;
   feeds: TaggedWebcamFeed[];
   peripherals: TaggedPeripheral[];

frontend/sequences/__tests__/test_button_test.tsx

@@ -27,15 +27,17 @@ import { fakeVariableNameSet } from "../../__test_support__/fake_variables";
 import { SequenceMeta } from "../../resources/sequence_meta";
 import { clickButton } from "../../__test_support__/helpers";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
-describe("<TestButton/>", () => {
+describe("<TestButton />", () => {
 
   const fakeProps = (): TestBtnProps => ({
     sequence: fakeSequence(),
     syncStatus: "synced",
     resources: buildResourceIndex().index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     dispatch: jest.fn(),
+    component: "list",
   });
 
   it("doesn't fire if unsaved", () => {
@@ -88,13 +90,16 @@ describe("<TestButton/>", () => {
     expect(btn.hasClass("orange")).toBeTruthy();
     expect(warning).not.toHaveBeenCalled();
     expect(mockDevice.execSequence).not.toHaveBeenCalled();
-    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(props.sequence.uuid));
+    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen({
+      component: "list", uuid: props.sequence.uuid,
+    }));
   });
 
   it("has open parameter assignment menu", () => {
     const props = fakeProps();
     mockHasParameters = true;
-    props.menuOpen = props.sequence.uuid;
+    props.menuOpen.component = "list";
+    props.menuOpen.uuid = props.sequence.uuid;
     const result = mount(<TestButton {...props} />);
     const btn = result.find("button").first();
     expect(btn.hasClass("gray")).toBeTruthy();
@@ -104,7 +109,8 @@ describe("<TestButton/>", () => {
 
   it("closes parameter assignment menu", () => {
     const p = fakeProps();
-    p.menuOpen = p.sequence.uuid;
+    p.menuOpen.component = "list";
+    p.menuOpen.uuid = p.sequence.uuid;
     p.syncStatus = "synced";
     p.sequence.specialStatus = SpecialStatus.SAVED;
     p.sequence.body.id = 1;
@@ -115,7 +121,7 @@ describe("<TestButton/>", () => {
     expect(btn.hasClass("gray")).toBeTruthy();
     expect(warning).not.toHaveBeenCalled();
     expect(mockDevice.execSequence).not.toHaveBeenCalled();
-    expect(p.dispatch).toHaveBeenCalledWith(setMenuOpen(undefined));
+    expect(p.dispatch).toHaveBeenCalledWith(setMenuOpen(fakeMenuOpenState()));
   });
 
   it("edits body variables", () => {
@@ -185,6 +191,6 @@ describe("<TestButton/>", () => {
     const props = fakeProps();
     const wrapper = mount(<TestButton {...props} />);
     wrapper.unmount();
-    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(undefined));
+    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(fakeMenuOpenState()));
   });
 });