Allow normal click to open items in same tab from DataTable

Allow normal click to open items in same tab from DataTable

Allow normal click to open items in same tab from DataTable

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Don't let cypress open new tab

Author: BenjaminCharmes

webapp/cypress/component/FormattedItemNameTest.cy.jsx

@@ -13,6 +13,14 @@ describe("FormattedItemName.vue", () => {
   const item_id = "Test";
   const itemType = ["samples", "cells", "starting_materials", "equipment"];
 
+  beforeEach(() => {
+    cy.window().then((win) => {
+      cy.stub(win, "open").as("windowOpen");
+      const locationStub = { href: win.location.href };
+      cy.stub(win, "location").value(locationStub);
+    });
+  });
+
   it("should display item details and apply correct color based on item type", () => {
     itemType.forEach((type) => {
       cy.mount(FormattedItemName, {
@@ -63,42 +71,38 @@ describe("FormattedItemName.vue", () => {
 
   it("should emit 'itemIdClicked' event when item_id is clicked", () => {
     const item_id = "Test";
-
-    cy.window().then((win) => {
-      cy.spy(win, "open").as("windowOpen");
-    });
+    const onItemIdClicked = cy.spy().as("itemIdClickedSpy");
 
     cy.mount(FormattedItemName, {
       props: {
         item_id,
         itemType: "samples",
         enableClick: true,
+        onItemIdClicked,
       },
     });
 
     cy.get(".formatted-item-name").click();
 
-    cy.get("@windowOpen").should("have.been.calledWith", `/edit/${item_id}`, "_blank");
+    cy.get("@itemIdClickedSpy").should("have.been.calledOnce");
   });
 
   it("should emit 'itemIdClicked' event when clicked with Ctrl or Meta key", () => {
     const item_id = "Test";
-
-    cy.window().then((win) => {
-      cy.spy(win, "open").as("windowOpen");
-    });
+    const onItemIdClicked = cy.spy().as("itemIdClickedSpy");
 
     cy.mount(FormattedItemName, {
       props: {
         item_id,
         itemType: "samples",
         enableModifiedClick: true,
+        onItemIdClicked,
       },
     });
 
     cy.get(".formatted-item-name").click({ ctrlKey: true });
 
-    cy.get("@windowOpen").should("have.been.calledWith", `/edit/${item_id}`, "_blank");
+    cy.get("@itemIdClickedSpy").should("have.been.calledOnce");
   });
 
   it("should display chemical formula when chemform is provided", () => {

webapp/src/components/DynamicDataTable.vue

@@ -703,17 +703,29 @@ export default {
         return null;
       }
 
+      const clickedElement = event.originalEvent.target;
+      const isFormattedCollectionName = clickedElement.closest(" .formatted-collection-name");
+      if (isFormattedCollectionName && isFormattedCollectionName.classList.contains("clickable")) {
+        return null;
+      }
+
       if (window.Cypress) {
         window.location.href = `/${this.editPageRoutePrefix}/${row_id}`;
       } else {
-        window.open(`/${this.editPageRoutePrefix}/${row_id}`, "_blank");
+        if (event.originalEvent.ctrlKey || event.originalEvent.metaKey) {
+          const newWindow = window.open(`/${this.editPageRoutePrefix}/${row_id}`, "_blank");
+          if (newWindow) newWindow.focus();
+        } else {
+          window.location.href = `/${this.editPageRoutePrefix}/${row_id}`;
+        }
       }
     },
     getComponentProps(componentName, data) {
       const propsConfig = {
         FormattedItemName: {
           item_id: "item_id",
           itemType: "type",
+          enableClick: true,
           enableModifiedClick: true,
         },
         FormattedRefcode: {
@@ -727,6 +739,7 @@ export default {
         },
         FormattedCollectionName: {
           collection_id: "collection_id",
+          enableClick: true,
           enableModifiedClick: true,
         },
         ChemicalFormula: {

webapp/src/components/FormattedCollectionName.vue

@@ -3,7 +3,7 @@
     class="formatted-collection-name badge badge-light"
     :class="{ clickable: enableClick || enableModifiedClick }"
     :style="{ 'border-color': badgeColor, color: badgeColor }"
-    @click.exact="enableClick ? openEditPageInNewTab() : null"
+    @click.exact="enableClick ? openEditPageInSameTab() : null"
     @click.meta.stop="enableModifiedClick ? openEditPageInNewTab() : null"
     @click.ctrl.stop="enableModifiedClick ? openEditPageInNewTab() : null"
   >
@@ -57,9 +57,14 @@ export default {
     },
   },
   methods: {
+    openEditPageInSameTab() {
+      this.$emit("collectionIdClicked");
+      window.location.href = `/collections/${this.collection_id}`;
+    },
     openEditPageInNewTab() {
       this.$emit("collectionIdClicked");
-      window.open(`/collections/${this.collection_id}`, "_blank");
+      const newWindow = window.open(`/collections/${this.collection_id}`, "_blank");
+      if (newWindow) newWindow.focus();
     },
   },
 };

webapp/src/components/FormattedItemName.vue

@@ -4,7 +4,7 @@
       class="formatted-item-name badge badge-light"
       :class="{ clickable: enableClick || enableModifiedClick }"
       :style="{ backgroundColor: badgeColor }"
-      @click.exact="enableClick ? openEditPageInNewTab() : null"
+      @click.exact="enableClick ? openEditPageInSameTab() : null"
       @click.meta.stop="enableModifiedClick ? openEditPageInNewTab() : null"
       @click.ctrl.stop="enableModifiedClick ? openEditPageInNewTab() : null"
     >
@@ -68,11 +68,14 @@ export default {
       return safeName;
     },
   },
-  methods: {
-    openEditPageInNewTab() {
-      this.$emit("itemIdClicked");
-      window.open(`/edit/${this.item_id}`, "_blank");
-    },
+  openEditPageInSameTab() {
+    this.$emit("itemIdClicked");
+    window.location.href = `/edit/${this.item_id}`;
+  },
+  openEditPageInNewTab() {
+    this.$emit("itemIdClicked");
+    const newWindow = window.open(`/edit/${this.item_id}`, "_blank");
+    if (newWindow) newWindow.focus();
   },
 };
 </script>