Allow normal click to open items in same tab from table (#1468)

Author: BenjaminCharmes

webapp/cypress/component/FormattedItemNameTest.cy.jsx

@@ -13,6 +13,12 @@ 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");
+    });
+  });
+
   it("should display item details and apply correct color based on item type", () => {
     itemType.forEach((type) => {
       cy.mount(FormattedItemName, {
@@ -63,42 +69,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,28 @@ 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) {
+          window.open(`/${this.editPageRoutePrefix}/${row_id}`, "_blank");
+        } 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 +738,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,6 +57,10 @@ 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");

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"
     >
@@ -69,8 +69,18 @@ export default {
     },
   },
   methods: {
+    openEditPageInSameTab() {
+      this.$emit("itemIdClicked");
+      if (window.Cypress && window.location.href.includes("__cypress")) {
+        return;
+      }
+      window.location.href = `/edit/${this.item_id}`;
+    },
     openEditPageInNewTab() {
       this.$emit("itemIdClicked");
+      if (window.Cypress && window.location.href.includes("__cypress")) {
+        return;
+      }
       window.open(`/edit/${this.item_id}`, "_blank");
     },
   },