TeselaGen · tnrich · Jul 2, 2024 · Jun 25, 2024 · Jun 28, 2024
diff --git a/example-demos/oveViteDemo/src/index.jsx b/example-demos/oveViteDemo/src/index.jsx
@@ -1,6 +1,6 @@
 import "./shimGlobal";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { Loading } from "@teselagen/ui";
 
@@ -10,14 +10,16 @@ import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <Loading />
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx b/example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx
@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
diff --git a/helperUtils/renderDemo.js b/helperUtils/renderDemo.js
diff --git a/helperUtils/renderDemo.jsx b/helperUtils/renderDemo.jsx
@@ -0,0 +1,3 @@
+import { createRoot } from "react-dom/client";
+const root = createRoot(document.querySelector("#demo"));
+export default Demo => root.render(<Demo />);
diff --git a/packages/ui/cypress/e2e/EditableCellTable.spec.js b/packages/ui/cypress/e2e/EditableCellTable.spec.js
@@ -29,8 +29,6 @@ describe("EditableCellTable.spec", () => {
     cy.get(".cellDragHandle");
     cy.get(`[data-test="tgCell_name"]:first`).dblclick();
     cy.get(".cellDragHandle").should("not.exist");
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(0);
     cy.focused().type("_zonk{enter}");
     cy.get(
       `[data-tip="Must include the letter 'a'"] [data-test="tgCell_name"]:first`
@@ -39,8 +37,6 @@ describe("EditableCellTable.spec", () => {
   });
   it(`typing a letter should start edit`, () => {
     cy.visit("#/DataTable%20-%20EditableCellTable");
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(0);
     cy.get(`[data-test="tgCell_name"]:first`).type("zonk{enter}");
     cy.get(`[data-test="tgCell_name"]:first`).should("contain", "zonk");
   });
@@ -126,8 +122,6 @@ describe("EditableCellTable.spec", () => {
       `[data-tip="Must be a number"] [data-test="tgCell_howMany"]:first`
     ).should("contain", "NaN"); //should lowercase "Tom"
     cy.get(`[data-test="tgCell_howMany"]:first`).dblclick();
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(0);
     cy.focused().type("11{enter}");
     cy.get(`[data-test="tgCell_howMany"]:first`).should("contain", "12"); //should have 12 post format
     cy.get(
@@ -166,10 +160,10 @@ describe("EditableCellTable.spec", () => {
   //   cy.get(
   //     `.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`
   //   ).should("not.exist");
-  //   cy.get(`[data-test="tgCell_name"]`).eq(3).click({ force: true });
+  //   cy.get(`[data-test="tgCell_name"]`).eq(3).click();
   //   cy.get(`.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`);
-  //   cy.focused().type(`{enter}`)
-  //   cy.focused().type(`haha{enter}`)
+  //   cy.focused().type(`{enter}`);
+  //   cy.focused().type(`haha{enter}`);
   //   cy.get(
   //     `.rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_name"]`
   //   ).should("not.exist");
@@ -231,9 +225,7 @@ describe("EditableCellTable.spec", () => {
     cy.get(
       `[data-index="1"] .rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_type"]`
     );
-    cy.get(`[data-index="49"] [data-test="tgCell_isProtein"]`).click({
-      force: true
-    });
+    cy.get(`[data-index="49"] [data-test="tgCell_isProtein"]`).click();
     cy.get(
       `[data-index="49"] .rt-td.isSelectedCell.isPrimarySelected [data-test="tgCell_isProtein"]`
     );
@@ -253,12 +245,8 @@ describe("EditableCellTable.spec", () => {
     const redoCmd = IS_LINUX ? `{alt}{shift}z` : "{meta}{shift}z";
     cy.visit("#/DataTable%20-%20EditableCellTable");
     cy.get(`.rt-td:contains(tom88)`).dblclick();
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(0);
     cy.focused().type("{selectall}tasty55{enter}");
     cy.get(`.rt-td:contains(tasty55)`).dblclick();
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(0);
     cy.focused().type("{selectall}delishhh{enter}");
     cy.get(`.rt-td:contains(delishhh)`);
     cy.focused().type(undoCmd);

diff --git a/packages/ui/cypress/e2e/UploadCsvWizard.spec.js b/packages/ui/cypress/e2e/UploadCsvWizard.spec.js
@@ -147,17 +147,6 @@ describe("UploadCsvWizard.spec", () => {
   });
   it(`messed up headers should trigger the wizard. editing the added file should work`, () => {
     cy.visit("#/UploadCsvWizard");
-    // cy.contains("Build CSV File").click();
-    // cy.get(`.rt-td [data-test="tgCell_description"]`)
-    //   .eq(1)
-    //   .click({ force: true });
-    // cy.focused().type("description{enter}");
-
-    // cy.get(
-    //   `.hasCellError[data-tip="Please enter a value here"] [data-test="tgCell_name"]:first`
-    // ).dblclick({ force: true });
-    // cy.focused().type("a{enter}");
-    // cy.contains(`.bp3-dialog button`, "Cancel").click();
     cy.uploadFile(
       ".tg-dropzone",
       "testUploadWizard_messedUpHeaders.csv",
@@ -177,27 +166,29 @@ describe("UploadCsvWizard.spec", () => {
     );
 
     cy.get(`.tg-test-is-regex`).click();
-    cy.contains(".tg-select-option", "typo").click({ force: true });
+    cy.contains(".tg-select-option", "typo").click();
     cy.contains(".bp3-dialog", `zonk`).should("exist"); //the data from the file should be previewed
 
     cy.contains("Review and Edit Data").click();
 
     cy.get(
       `.hasCellError[data-tip="Please enter a value here"] [data-test="tgCell_name"]:first`
-    ).dblclick({ force: true });
-    cy.focused().type("a{enter}");
+    )
+      .parent()
+      .type("a{enter}");
     cy.get(
       `.hasCellError[data-tip="Please enter a value here"] [data-test="tgCell_sequence"]:first`
-    ).dblclick({ force: true });
-    cy.focused().type("g{enter}");
+    )
+      .parent()
+      .type("g{enter}");
     cy.dragBetween(`.cellDragHandle`, `.rt-tr-last-row`);
     cy.contains("Add File").click();
     cy.contains(`testUploadWizard_messedUpHeaders.csv`);
     cy.contains(`Added Fixed Up File`);
     cy.get(`.tg-upload-file-list-item-edit`).click();
     cy.contains(`Edit your data here.`);
     cy.get(
-      `[data-index="4"] [data-test="tgCell_sequence"]:contains(g)`
+      `[data-index="4"] [data-test="tgCell_sequence"]:contains(g):last`
     ).click();
     cy.focused().type(`{backspace}`);
     cy.get(`.bp3-disabled:contains(Edit Data)`);
@@ -646,13 +637,7 @@ a,,desc,,false,dna,misc_feature
     cy.contains(".bp3-dialog", `DEscription`); //the matched headers should show up
     cy.contains(".bp3-dialog", `Description`); //the expected headers should show up
     cy.contains("Review and Edit Data").click();
-    cy.get(`[data-tip="Please enter a value here"]`);
-    cy.get(`.hasCellError:last [data-test="tgCell_name"]`);
-    cy.get(`button:contains(Next File).bp3-disabled`);
-    cy.get(`.hasCellError:last [data-test="tgCell_name"]`).click({
-      force: true
-    });
-    cy.focused().type("haha{enter}");
+    cy.get(`.hasCellError`).type("haha{enter}");
     // cy.get(`.hasCellError:last [data-test="tgCell_name"]`).type("haha{enter}", {force: true});
     cy.get(`button:contains(Next File):first`).click();
     cy.get(
@@ -676,9 +661,7 @@ a,,desc,,false,dna,misc_feature
     cy.get(
       `.tg-upload-file-list-item:contains(testUploadWizard_invalidDataNonUnique.csv) .tg-upload-file-list-item-edit`
     ).click();
-    cy.get(`[data-index="0"] [data-test="tgCell_sequence"]`).click({
-      force: true
-    });
+    cy.get(`[data-index="0"] [data-test="tgCell_sequence"]:last`).click();
     cy.focused().type(`tom{enter}`);
     cy.get(`.bp3-button:contains(Edit Data)`).click();
     cy.contains(`File Updated`);
@@ -687,9 +670,7 @@ a,,desc,,false,dna,misc_feature
     cy.get(
       `.tg-upload-file-list-item:contains(testUploadWizard_invalidData.csv) .tg-upload-file-list-item-edit`
     ).click();
-    cy.get(`[data-index="0"] [data-test="tgCell_sequence"]`).click({
-      force: true
-    });
+    cy.get(`[data-index="0"] [data-test="tgCell_sequence"]`).click();
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(200);
     cy.focused().type(`robbin{enter}`, { delay: 100 });
@@ -1065,14 +1046,14 @@ thomas,,g,false,dna,misc_feature`,
     cy.visit("#/UploadCsvWizard");
     cy.tgToggle("allowMultipleFiles");
     cy.contains("Build CSV File").click();
-    cy.get(`[data-test="tgCell_name"]:first`).click({ force: true });
+    cy.get(`.rt-tbody [role="gridcell"]:first`).click();
     cy.focused().paste(`Thomas	Wee	agagag	False	dna	misc_feature`);
     cy.contains(".bp3-button", "Add File").click();
     cy.contains("manual_data_entry.csv");
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(200);
     cy.contains("Build CSV File").click();
-    cy.get(`[data-test="tgCell_name"]:first`).click({ force: true });
+    cy.get(`.rt-tbody [role="gridcell"]:first`).click();
     cy.focused().paste(`Thomas	Wee	agagag	False	dna	misc_feature`);
     cy.contains(".bp3-button", "Add File").click();
     cy.contains("manual_data_entry(1).csv");
@@ -1081,13 +1062,11 @@ thomas,,g,false,dna,misc_feature`,
     ).click();
     cy.contains(`Edit your data here.`);
     cy.contains(`Add 10 Rows`).click();
-    cy.get(`[data-index="4"] [data-test="tgCell_sequence"]`).click({
-      force: true
-    });
+    cy.get(`[data-index="4"] [role="gridcell"]`).eq(2).click();
     cy.focused().type(`{backspace}`);
     cy.get(`.bp3-disabled:contains(Edit Data)`).should("not.exist");
     cy.focused().type(`tom{enter}`);
-    cy.get(`[data-index="4"] [data-test="tgCell_name"]`).click({ force: true });
+    cy.get(`[data-index="4"] [role="gridcell"]:first`).click();
     cy.focused().type(`taoh{enter}`);
     cy.get(`.bp3-button:contains(Edit Data)`).click();
     cy.contains(`File Updated`);
@@ -1096,9 +1075,7 @@ thomas,,g,false,dna,misc_feature`,
     cy.get(
       `.tg-upload-file-list-item:contains(manual_data_entry(1).csv) .tg-upload-file-list-item-edit`
     ).click();
-    cy.get(`[data-index="0"] [data-test="tgCell_sequence"]`).click({
-      force: true
-    });
+    cy.get(`[data-index="0"] [role="gridcell"]`).eq(2).click();
     cy.focused().type(`tom{enter}`);
     cy.get(`.bp3-button:contains(Edit Data)`).click();
     cy.contains(`File Updated`);
@@ -1213,23 +1190,14 @@ thomas,,g,false,dna,misc_feature`,
     cy.contains(
       `Input your data here. Hover table headers for additional instructions`
     );
-    cy.get(`.rt-td [data-test="tgCell_description"]`)
-      .eq(1)
-      .click({ force: true });
-    cy.focused().type("description{enter}");
+    cy.get(".rt-td").eq(1).type("description{enter}");
 
     //there should be a checkbox in the isRegex boolean column
     cy.get(`[data-test="Is Regex"] .bp3-checkbox`);
 
     //should be able to edit and then drag to continue that edit further down
-    cy.get(
-      `.hasCellError[data-tip="Please enter a value here"] [data-test="tgCell_name"]:first`
-    ).dblclick({ force: true });
-    cy.focused().type("a{enter}");
-    cy.get(
-      `.hasCellError[data-tip="Please enter a value here"] [data-test="tgCell_sequence"]:first`
-    ).dblclick({ force: true });
-    cy.focused().type("g{enter}");
+    cy.get(".rt-td").eq(0).type("a{enter}");
+    cy.get(".rt-td").eq(2).type("g{enter}");
 
     cy.contains(".bp3-button", "Add File").click();
     cy.contains("File Added");

diff --git a/packages/ui/cypress/e2e/dataTable.spec.js b/packages/ui/cypress/e2e/dataTable.spec.js
@@ -9,8 +9,7 @@ describe("dataTable.spec", () => {
     cy.tgToggle("getRowClassName");
     cy.get(".rt-tr-group.custom-getRowClassName").should("exist");
   });
-  //TODO THIS IS BREAKING!
-  it.skip(`it can select entities across pages`, () => {
+  it(`it can select entities across pages`, () => {
     cy.visit("#/DataTable");
     cy.contains("0 Selected");
     //select first entity
@@ -162,7 +161,7 @@ describe("dataTable.spec", () => {
     checkIndices("greaterThan");
   });
 
-  it.skip("page size will persist on reload", () => {
+  it("page size will persist on reload", () => {
     cy.visit("#/DataTable");
     cy.get(".data-table-container .paging-page-size").should("have.value", "5");
     cy.get(".data-table-container .paging-page-size").select("50");

diff --git a/packages/ui/cypress/e2e/upload.spec.js b/packages/ui/cypress/e2e/upload.spec.js
@@ -59,7 +59,7 @@ describe("upload", () => {
       true
     );
 
-    cy.contains("type must be .json");
+    cy.contains("type must be .zip, .json");
     cy.uploadBlobFiles(
       ".fileUploadLimitAndType.tg-dropzone",
       [

diff --git a/packages/ui/cypress/support/index.js b/packages/ui/cypress/support/index.js
@@ -46,9 +46,7 @@ Cypress.Commands.add("dragBetween", (dragSelector, dropSelector) => {
   getOrWrap(dragSelector)
     .trigger("mousedown")
     .trigger("mousemove", 10, 10, { force: true });
-  getOrWrap(dropSelector)
-    .trigger("mousemove", { force: true })
-    .trigger("mouseup", { force: true });
+  getOrWrap(dropSelector).trigger("mousemove").trigger("mouseup");
 });
 
 Cypress.Commands.add(

diff --git a/packages/ui/demo/src/examples/UploadCsvWizard.js b/packages/ui/demo/src/examples/UploadCsvWizard.js
@@ -6,7 +6,7 @@ import { FileUploadField } from "../../../src";
 import DemoWrapper from "../DemoWrapper";
 import { reduxForm } from "redux-form";
 import { useToggle } from "../useToggle";
-import getIdOrCodeOrIndex from "../../../src/DataTable/utils/getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "../../../src/DataTable/utils";
 
 const simpleValidateAgainst = {
   fields: [{ path: "name" }, { path: "description" }, { path: "sequence" }]

diff --git a/packages/ui/demo/src/examples/UploaderDemo.js b/packages/ui/demo/src/examples/UploaderDemo.js
@@ -21,10 +21,6 @@ export default function UploaderDemo() {
   const [autoUnzip, autoUnzipToggleComp] = useToggle({
     type: "autoUnzip"
   });
-  // const [advancedAccept, advancedAcceptToggleComp] = useToggle({
-  //   type: "accept",
-  //   label: "Toggle Advance Accept"
-  // });
   return (
     <div>
       <OptionsSection>

diff --git a/packages/ui/demo/src/index.js b/packages/ui/demo/src/index.js
@@ -25,14 +25,14 @@ import ScrollToTopDemo from "./examples/ScrollToTop";
 import showAppSpinnerDemo from "./examples/showAppSpinnerDemo";
 import EditableCellTable from "./examples/EditableCellTable";
 import React from "react";
-import { render } from "react-dom";
 import { Provider } from "react-redux";
 import store from "./store";
 import { FocusStyleManager } from "@blueprintjs/core";
 import AdvancedOptionsDemo from "./examples/AdvancedOptionsDemo";
 import FormComponents from "./examples/FormComponents";
 import UploadCsvWizard from "./examples/UploadCsvWizard";
 import TagSelectDemo from "./examples/TagSelectDemo";
+import { createRoot } from "react-dom/client";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -261,4 +261,5 @@ const Demo = () => {
   );
 };
 
-render(<Demo />, document.querySelector("#demo"));
+const root = createRoot(document.querySelector("#demo"));
+root.render(<Demo />);