Update to Bootstrap ^5.3.3 and better mobile support

Update Bootstrap to v5 and update components Update components with new Bootstrap 5 class New badge class Update CreateItemModal with new classes Update CreateCollectionModal with new classes Update CreateEquipmentModal with new classes Update QRScannerModal with new classes Update CreateEquipmentModal with new classes Update BatchCreateItemModal with new classes Update EditAccountSettingsModal and Modal close btn More updates More updates More components updates More components updates Update cypress test Fix cypress e2e editPage Fix cypress e2e batchSample Fix modelValue warnings in console Update for better mobile support Update CompactConstituentTable for better mobile support Edit EditPage Navbar to better mobile support Edit DynamicDataTableButtons to better mobile support Fix FileList with Bootstrap5 Update CollectionInformation and CollectionPage for better mobile support Update bokeh_plots to fit on mobile Fix cypress tests
datalab-org · Jan 27, 2025 · 3c10d26 · 3c10d26
1 parent cab4149
commit 3c10d26
Show file tree

Hide file tree

Showing 56 changed files with 802 additions and 629 deletions.
diff --git a/pydatalab/src/pydatalab/bokeh_plots.py b/pydatalab/src/pydatalab/bokeh_plots.py
@@ -340,7 +340,7 @@ def selectable_axes_plot(
         save_data.js_on_click(save_data_callback)
         plot_columns = [save_data] + plot_columns
 
-    layout = column(*plot_columns)
+    layout = column(*plot_columns, sizing_mode="scale_width", align="center")
 
     p.js_on_event(DoubleTap, CustomJS(args=dict(p=p), code="p.reset.emit()"))
     return layout
@@ -578,4 +578,8 @@ def double_axes_echem_plot(
     else:
         grid = [[p1], [xaxis_select], [yaxis_select]]
 
-    return gridplot(grid, sizing_mode="scale_width", toolbar_location="below")
+    return gridplot(
+        grid,
+        sizing_mode="scale_width",
+        toolbar_location="above",
+    )
diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -25,7 +25,7 @@ function getBatchTemplateCell(column, additionalSelectors = "") {
 
 function getBatchAddError(row, additionalSelectors = "") {
   return cy.get(
-    `[data-testid=batch-add-table] > tbody > tr:nth-of-type(${row}) + td ${additionalSelectors}`,
+    `[data-testid=batch-add-table] > tbody > td:nth-of-type(${row}) ${additionalSelectors}`,
   );
 }
 
@@ -84,7 +84,7 @@ describe("Batch sample creation", () => {
     cy.visit("/");
   });
   it("Adds 3 valid samples", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getSubmitButton().should("be.disabled");
     getBatchAddCell(1, 1).type("testA");
     getBatchAddCell(2, 1).type("testB");
@@ -107,7 +107,7 @@ describe("Batch sample creation", () => {
   });
 
   it("adds two valid samples", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.findByLabelText("Number of rows:").clear().type(2);
 
     cy.get('[data-testid="batch-modal-container"]').findByText("Submit").should("be.disabled");
@@ -126,7 +126,7 @@ describe("Batch sample creation", () => {
   });
 
   it("adds four base samples", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.findByLabelText("Number of rows:").clear().type(4);
 
     cy.get('[data-testid="batch-modal-container"]').findByText("Submit").should("be.disabled");
@@ -189,7 +189,7 @@ describe("Batch sample creation", () => {
   });
 
   it("makes samples copied from others", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getBatchAddCell(1, 1).type("baseA_copy");
     getBatchAddCell(1, 2).type("a copied sample");
     getBatchAddCell(1, 4, ".vs__search").type("BaseA");
@@ -253,7 +253,7 @@ describe("Batch sample creation", () => {
   });
 
   it("creates samples using components", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.findByLabelText("Number of rows:").clear().type(4);
 
     // sample with two components
@@ -416,7 +416,7 @@ describe("Batch sample creation", () => {
   });
 
   it("uses the template id", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getBatchTemplateCell(1).type("test_{{}#{}}");
 
     // manually type names and a date
@@ -441,7 +441,7 @@ describe("Batch sample creation", () => {
   });
 
   it("uses the template id, name, and date", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getBatchTemplateCell(1).type("test_{{}#{}}");
     getBatchTemplateCell(2).type("this is the test sample #{{}#{}}");
     getBatchTemplateCell(3).type("1980-02-01T05:35");
@@ -464,7 +464,7 @@ describe("Batch sample creation", () => {
   });
 
   it("uses the template id, name, date, copyFrom, and components", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getBatchTemplateCell(1).type("test_{{}#{}}");
     getBatchTemplateCell(2).type("this is the test sample #{{}#{}}");
     getBatchTemplateCell(3).type("1980-02-01T23:59");
@@ -545,7 +545,7 @@ describe("Batch sample creation", () => {
   });
 
   it("plays with the number of rows", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.findByLabelText("Number of rows:").clear().type(3);
     cy.get("[data-testid=batch-add-table] > tbody > tr").should("have.length", 3);
 
@@ -653,7 +653,7 @@ describe("Batch sample creation", () => {
   });
 
   it("checks errors on the row", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     getBatchTemplateCell("1").type("test10{{}#{}}");
     cy.wait(100);
     getSubmitButton().should("be.disabled");
@@ -667,17 +667,17 @@ describe("Batch sample creation", () => {
 
     getBatchAddCell(1, 1).type("_unique");
     getBatchTemplateCell(1, "input").should("have.value", ""); // test_id template should be cleared by modifying an item_id
-    getBatchAddError(1).invoke("text").invoke("trim").should("equal", ""); // expect no error for this row
+    getBatchAddError(1).should("have.text", ""); // expect no error for this row
     getSubmitButton().should("be.disabled"); // but submit is still disabled because there are still errors
 
-    getBatchAddCell(3, 1).type("_unique");
-    getBatchAddError(1).invoke("text").invoke("trim").should("equal", ""); // expect no error
-    getBatchAddError(3).invoke("text").invoke("trim").should("equal", ""); // expect no error
-
     getBatchAddCell(2, 1).type("_unique");
-    getBatchAddError(1).invoke("text").invoke("trim").should("equal", ""); // expect no error
-    getBatchAddError(2).invoke("text").invoke("trim").should("equal", ""); // expect no error
-    getBatchAddError(3).invoke("text").invoke("trim").should("equal", ""); // expect no error
+    getBatchAddError(1).should("have.text", ""); // expect no error for this row
+    getBatchAddError(2).should("have.text", ""); // expect no error for this row
+
+    getBatchAddCell(3, 1).type("_unique");
+    getBatchAddError(1).should("have.text", ""); // expect no error for this row
+    getBatchAddError(2).should("have.text", ""); // expect no error for this row
+    getBatchAddError(3).should("have.text", ""); // expect no error for this row
 
     getBatchAddCell(2, 3).type("2000-01-01T10:05");
 
@@ -690,7 +690,7 @@ describe("Batch sample creation", () => {
     getSubmitButton().should("be.disabled");
 
     getBatchAddCell(4, 1).type("2");
-    getBatchAddError(4).invoke("text").invoke("trim").should("equal", ""); // expect no error
+    getBatchAddError(4).should("have.text", ""); // expect no error for this row
 
     getSubmitButton().should("not.be.disabled"); // now all errors are fixed so submit is enabled
     getSubmitButton().click();
@@ -716,7 +716,7 @@ describe("Batch cell creation", () => {
   });
 
   it("creates a simple batch of cells", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.get("[data-testid=batch-modal-container]").findByLabelText("Type:").select("cell");
     cy.findByLabelText("Number of rows:").clear().type(4);
     cy.get("[data-testid=batch-add-table] > tbody > tr").should("have.length", 4);
@@ -744,7 +744,7 @@ describe("Batch cell creation", () => {
   });
 
   it("adds some component samples to be used for the next tests", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
     cy.findByLabelText("Number of rows:").clear().type(2);
 
     getBatchAddCell(1, 1).type("comp1");
@@ -757,7 +757,7 @@ describe("Batch cell creation", () => {
   });
 
   it("creates a batch of cells using the template id, name, date, copyFrom, and components", () => {
-    cy.contains("Add batch of items").click();
+    cy.findByTestId("batch-item-button").click();
 
     cy.get("[data-testid=batch-modal-container]").findByLabelText("Type:").select("cell");
 

diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
@@ -26,7 +26,7 @@ describe("Edit Page", () => {
   it("Loads the main page without any errors", () => {
     cy.findByText("About").should("exist");
     cy.findByText("Samples").should("exist");
-    cy.findByText("Add an item").should("exist");
+    cy.findByTestId("add-item-button").should("exist");
     cy.findByText("# of blocks").should("exist");
 
     cy.contains("Server Error. Sample list could not be retreived.").should("not.exist");
@@ -127,7 +127,7 @@ describe("Edit Page", () => {
   it("deletes synthesis components and re-adds them", () => {
     cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
-    cy.get("#synthesis-information tbody > tr:nth-of-type(1) .close").click();
+    cy.get("#synthesis-information tbody > tr:nth-of-type(1) .btn-close").click();
     cy.get("#synthesis-information tbody > tr").should("have.length", 2);
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) td:nth-of-type(2) input").should(
       "have.value",
@@ -138,13 +138,14 @@ describe("Edit Page", () => {
       "pints",
     );
 
-    cy.get("#synthesis-information tbody > tr:nth-of-type(1) .close").click();
-    cy.get("#synthesis-information tbody > tr").should("have.length", 1);
-
     cy.get("svg.add-row-button").click();
     cy.get("#synthesis-information .vs__search").first().type("component2");
     cy.get(".vs__dropdown-menu").contains(".badge", "component2").click();
+    cy.get("#synthesis-information tbody > tr").should("have.length", 3);
+
+    cy.get("#synthesis-information tbody > tr:nth-of-type(1) .btn-close").click();
     cy.get("#synthesis-information tbody > tr").should("have.length", 2);
+
     cy.get("#synthesis-information").contains("component2");
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) td:nth-of-type(2) input").should(
       "have.value",
@@ -270,7 +271,7 @@ describe("Edit Page", () => {
     cy.get('[data-testid="add-block-dropdown"]').findByText("Powder XRD").click();
 
     cy.findByText("Select a file:").should("exist");
-    cy.get("select.file-select-dropdown").select("example_data_XRD_example_bmb.xye");
+    cy.get('[data-testid="file-select-dropdown"]').select("example_data_XRD_example_bmb.xye");
     cy.contains("label", "X axis").should("exist");
     cy.contains("label", "Y axis").should("exist");
   });
@@ -286,7 +287,7 @@ describe("Edit Page", () => {
     cy.findByText("Add a block").click();
     cy.get('[data-testid="add-block-dropdown"]').findByText("Media").click();
     cy.findAllByText("Select a file:").eq(1).should("exist");
-    cy.get("select.file-select-dropdown").eq(1).select(test_fname);
+    cy.get('[data-testid="file-select-dropdown"]').eq(1).select(test_fname);
 
     // Check that the img with id "media-block-img" is present
     cy.get('img[data-testid="media-block-img"]').should("exist");

diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
@@ -32,7 +32,7 @@ describe("Equipment table page", () => {
   it("Loads the equipment page without any errors", () => {
     cy.findByText("About").should("exist");
     cy.findByText("Equipment").should("exist");
-    cy.findByText("Add an item").should("exist");
+    cy.findByTestId("add-equipment-button").should("exist");
     cy.findByText("Maintainers").should("exist");
 
     // Ensure no error messages or console errors. The wait is necessary so that
@@ -72,7 +72,7 @@ describe("Equipment table page", () => {
   });
 
   it("Attempts to Add an item with the same name", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-equipment-button").click();
     cy.get('[data-testid="create-equipment-form"]').within(() => {
       cy.findByText("Add equipment").should("exist");
       cy.findByLabelText("ID:").type("test_e3");
@@ -97,7 +97,7 @@ describe("Equipment table page", () => {
   });
 
   it("copies an equipment entry", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-equipment-button").click();
 
     cy.get('[data-testid="create-equipment-form"]').within(() => {
       cy.findByLabelText("ID:").type("test_e3_copy");

diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js
@@ -53,7 +53,7 @@ describe("Sample table page", () => {
   it("Loads the main page without any errors", () => {
     cy.findByText("About").should("exist");
     cy.findByText("Samples").should("exist");
-    cy.findByText("Add an item").should("exist");
+    cy.findByTestId("add-item-button").should("exist");
     cy.findByText("# of blocks").should("exist");
 
     cy.contains("Server Error. Sample list could not be retreived.").should("not.exist");
@@ -77,7 +77,7 @@ describe("Sample table page", () => {
   });
 
   it("Attempts to add an item with the same name", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-item-button").click();
     cy.get('[data-testid="create-item-form"]').within(() => {
       cy.findByLabelText("ID:").type("12345678910");
       cy.contains("already in use").should("exist");
@@ -195,7 +195,7 @@ describe.only("Advanced sample creation features", () => {
   });
 
   it("Adds a third sample copied from the first", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-item-button").click();
     cy.get('[data-testid="create-item-form"]').within(() => {
       cy.findByLabelText("ID:").type("testAcopy");
       cy.findByLabelText("(Optional) Copy from existing sample:").type("testA");
@@ -243,7 +243,7 @@ describe.only("Advanced sample creation features", () => {
   });
 
   it("copies the second sample", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-item-button").click();
     cy.get('[data-testid="create-item-form"]').within(() => {
       cy.findByLabelText("ID:").type("testBcopy");
       cy.findByLabelText("(Optional) Copy from existing sample:").type("testB");
@@ -268,7 +268,7 @@ describe.only("Advanced sample creation features", () => {
   });
 
   it("copies the copied sample, this time with additional components", () => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-item-button").click();
     cy.get('[data-testid="create-item-form"]').within(() => {
       cy.findByLabelText("ID:").type("testBcopy_copy");
       cy.findByLabelText("(Optional) Copy from existing sample:").type("testBcopy");

diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
@@ -34,7 +34,7 @@ const API_URL = Cypress.config("apiUrl");
 Cypress.Commands.add(
   "createSample",
   (item_id, name = null, date = null, generate_id_automatically = false) => {
-    cy.findByText("Add an item").click();
+    cy.findByTestId("add-item-button").click();
     cy.get('[data-testid="create-item-form"]').within(() => {
       cy.findByText("Add new item").should("exist");
       cy.findByLabelText("ID:").type(item_id);
@@ -151,7 +151,7 @@ Cypress.Commands.add("searchAndSelectItem", (search_text, selector, clickPlus =
 });
 
 Cypress.Commands.add("createEquipment", (item_id, name = null, date = null) => {
-  cy.findByText("Add an item").click();
+  cy.findByTestId("add-equipment-button").click();
 
   cy.get('[data-testid="create-equipment-form"]').within(() => {
     cy.findByText("Add equipment").should("exist");

diff --git a/webapp/package.json b/webapp/package.json
@@ -23,7 +23,8 @@
     "@uppy/webcam": "^1.8.4",
     "@uppy/xhr-upload": "^1.6.10",
     "@vueuse/components": "^10.7.2",
-    "bootstrap": "^4.5.3",
+    "boostrap": "^2.0.0",
+    "bootstrap": "^5.3.3",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "cytoscape": "^3.23.0",

diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
@@ -3,8 +3,8 @@
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header> Add to collections </template>
       <template #body>
-        <div class="form-row">
-          <div class="form-group col-md-8">
+        <div class="row">
+          <div class="col-md-8 mb-3">
             <label for="items-selected" class="col-form-label">Items Selected:</label>
             <div id="items-selected" class="dynamic-input">
               <FormattedItemName
@@ -17,8 +17,8 @@
             </div>
           </div>
         </div>
-        <div class="form-row">
-          <div class="col-md-12 form-group">
+        <div class="row">
+          <div class="col-md-12 mb-3">
             <label id="addToCollectionLabel">Insert into collection:</label>
             <CollectionSelect
               id="collection-select"