STABLE, but coverage is -0.61

frontend/folders/__tests__/data_transfer_test.ts

@@ -26,7 +26,6 @@ describe("climb()", () => {
     let count = 0;
     climb(TREE, (node, halt) => {
       count += 1;
-      console.log(node.name);
       if (count == 3) { halt(); }
     });
     expect(count).toEqual(3);

frontend/folders/component.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { BlurableInput, ColorPicker, Row, Col } from "../ui";
 import { FolderUnion, RootFolderNode } from "./constants";
 import { Everything } from "../interfaces";
-import { connect } from "react-redux";
 import {
   createFolder,
   deleteFolder,
@@ -21,8 +20,10 @@ import { Link } from "../link";
 import { urlFriendly } from "../util";
 import { setActiveSequenceByName } from "../sequences/set_active_sequence_by_name";
 import { Position } from "@blueprintjs/core";
+import { t } from "../i18next_wrapper";
 
-interface Props extends RootFolderNode {
+interface Props {
+  rootFolder: RootFolderNode;
   sequences: Record<string, TaggedSequence>;
   searchTerm: string | undefined;
 }
@@ -143,12 +144,13 @@ const FolderNode = (props: FolderNodeProps) => {
   </div>;
 };
 
-export class RawFolders extends React.Component<Props, State> {
+export class Folders extends React.Component<Props, State> {
   state: State = { toggleDirection: true };
 
   Graph = (_props: {}) => {
+
     return <div>
-      {this.props.folders.map(grandparent => {
+      {this.props.rootFolder.folders.map(grandparent => {
         return <FolderNode
           node={grandparent}
           key={grandparent.id}
@@ -177,6 +179,7 @@ export class RawFolders extends React.Component<Props, State> {
   render() {
     const rootSequences = this
       .props
+      .rootFolder
       .noFolder
       .map(x => <FolderItem
         key={x}
@@ -185,6 +188,7 @@ export class RawFolders extends React.Component<Props, State> {
         isMoveTarget={this.state.movedSequenceUuid === x} />);
 
     return <div>
+      <h1>{t("Sequences")}</h1>
       <input
         placeholder={"Search sequences and subfolders..."}
         value={this.props.searchTerm || ""}
@@ -201,9 +205,10 @@ export class RawFolders extends React.Component<Props, State> {
   }
 }
 
-export function mapStateToProps(props: Everything): Props {
-  type Reducer = (a: Props["sequences"], b: TaggedSequence) =>
-    Record<string, TaggedSequence>;
+type Reducer =
+  (a: Props["sequences"], b: TaggedSequence) => Record<string, TaggedSequence>;
+
+export function mapStateToFolderProps(props: Everything): Props {
 
   const reduce: Reducer = (a, b) => {
     a[b.uuid] = b;
@@ -211,18 +216,10 @@ export function mapStateToProps(props: Everything): Props {
   };
 
   const x = props.resources.index.sequenceFolders;
-  let noFolder: string[];
-  if (x.filteredFolders) {
-    noFolder = x.filteredFolders.noFolder;
-  } else {
-    noFolder = x.folders.noFolder;
-  }
+
   return {
-    folders: x.filteredFolders ? x.filteredFolders.folders : x.folders.folders,
-    noFolder,
+    rootFolder: x.filteredFolders ? x.filteredFolders : x.folders,
     sequences: selectAllSequences(props.resources.index).reduce(reduce, {}),
     searchTerm: x.searchTerm
   };
 }
-
-export const Folders = connect(mapStateToProps)(RawFolders);

frontend/sequences/__tests__/sequences_test.tsx

@@ -18,6 +18,8 @@ import {
   fakeHardwareFlags
 } from "../../__test_support__/sequence_hardware_settings";
 import { push } from "../../history";
+import { mapStateToFolderProps } from "../../folders/component";
+import { fakeState } from "../../__test_support__/fake_state";
 
 describe("<Sequences/>", () => {
   const fakeProps = (): Props => ({
@@ -37,10 +39,12 @@ describe("<Sequences/>", () => {
     getWebAppConfigValue: jest.fn(),
     menuOpen: false,
     stepIndex: undefined,
+    folderData: mapStateToFolderProps(fakeState())
   });
 
   it("renders", () => {
     const wrapper = shallow(<Sequences {...fakeProps()} />);
+    debugger;
     expect(wrapper.html()).toContain("Sequences");
     expect(wrapper.html()).toContain("Edit Sequence");
     expect(wrapper.html()).toContain(ToolTips.SEQUENCE_EDITOR);

frontend/sequences/interfaces.ts

@@ -15,6 +15,7 @@ import { TaggedSequence } from "farmbot";
 import { ResourceIndex, VariableNameSet, UUID } from "../resources/interfaces";
 import { ShouldDisplay } from "../devices/interfaces";
 import { GetWebAppConfigValue } from "../config_storage/actions";
+import { Folders } from "../folders/component";
 
 export interface HardwareFlags {
   findHomeEnabled: Record<Xyz, boolean>;
@@ -48,6 +49,7 @@ export interface Props {
   getWebAppConfigValue: GetWebAppConfigValue;
   menuOpen: boolean;
   stepIndex: number | undefined;
+  folderData: Folders["props"];
 }
 
 export interface SequenceEditorMiddleProps {

frontend/sequences/sequences.tsx

@@ -42,7 +42,7 @@ export class RawSequences extends React.Component<Props, {}> {
     return <Page className="sequence-page">
       <Row>
         <Col sm={3}>
-          <Folders />
+          <Folders {...this.props.folderData} />
         </Col>
         <CenterPanel
           className={`sequence-editor-panel ${activeClasses}`}

frontend/sequences/state_to_props.ts

@@ -16,6 +16,7 @@ import { Farmwares } from "../farmware/interfaces";
 import { manifestInfo } from "../farmware/generate_manifest_info";
 import { DevSettings } from "../account/dev/dev_support";
 import { calculateAxialLengths } from "../controls/move/direction_axes_props";
+import { mapStateToFolderProps } from "../folders/component";
 
 export function mapStateToProps(props: Everything): Props {
   const uuid = props.resources.consumers.sequences.current;
@@ -88,5 +89,6 @@ export function mapStateToProps(props: Everything): Props {
     getWebAppConfigValue: getConfig,
     menuOpen: props.resources.consumers.sequences.menuOpen,
     stepIndex: props.resources.consumers.sequences.stepIndex,
+    folderData: mapStateToFolderProps(props)
   };
 }