From 7139f7a60b6169356732391a09df675780271455 Mon Sep 17 00:00:00 2001 From: Ethan McElroy Date: Mon, 1 Jul 2024 14:00:17 -0400 Subject: [PATCH] fix: Issue with combining data card stacks via drag and drop (PT-187848992) [#187848992](https://www.pivotaltracker.com/story/show/187848992) --- .../tile_tests/datacard_merge_spec.js | 114 +++--------------- src/plugins/data-card/data-card-tile.tsx | 87 +------------ 2 files changed, 22 insertions(+), 179 deletions(-) diff --git a/cypress/e2e/functional/tile_tests/datacard_merge_spec.js b/cypress/e2e/functional/tile_tests/datacard_merge_spec.js index 4cbada98b6..1ed259093a 100644 --- a/cypress/e2e/functional/tile_tests/datacard_merge_spec.js +++ b/cypress/e2e/functional/tile_tests/datacard_merge_spec.js @@ -1,12 +1,8 @@ import ClueCanvas from '../../../support/elements/common/cCanvas'; -import Canvas from '../../../support/elements/common/Canvas'; import DataCardToolTile from '../../../support/elements/tile/DataCardToolTile'; let clueCanvas = new ClueCanvas; let dc = new DataCardToolTile; -let canvas = new Canvas; -let studentWorkspace = 'SAS 1.1 Solving a Mystery with Proportional Reasoning'; -const dataTransfer = new DataTransfer; function beforeTest() { const queryParams = `${Cypress.config("qaUnitStudent5")}`; @@ -15,14 +11,6 @@ function beforeTest() { cy.waitForLoad(); } -function openMyWork() { - cy.wait(2000); - clueCanvas.getInvestigationCanvasTitle().text().then((investigationTitle) => { - cy.openTopTab('my-work'); - cy.openDocumentThumbnail('my-work', 'workspaces', investigationTitle); - }); -} - context('Merge Data Card Tool Tile', function () { it("Merge Data Card Tool Tile", () => { beforeTest(); @@ -64,12 +52,9 @@ context('Merge Data Card Tool Tile', function () { dc.getTile(1).should("exist"); dc.getTileTitle(1).should("have.text", "Card Deck Data 2"); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getAttrs(0).should("have.length", 1); dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 1"); @@ -98,12 +83,9 @@ context('Merge Data Card Tool Tile', function () { dc.getTile(1).should("exist"); dc.getTileTitle(1).should("have.text", "Card Deck Data 2"); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getAttrs(0).should("have.length", 1); dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 1"); @@ -140,12 +122,9 @@ context('Merge Data Card Tool Tile', function () { dc.getAttrName(1).contains("Attr1 Name"); dc.getAttrValue(1).click().type("Attr1 Value{enter}"); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getAttrs(0).should("have.length", 1); dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 1"); @@ -186,12 +165,9 @@ context('Merge Data Card Tool Tile', function () { dc.getAttrName(1).contains("Attr2 Name"); dc.getAttrValue(1).click().type("Attr2 Value{enter}"); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getAttrs(0).should("have.length", 1); dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 1"); @@ -232,12 +208,9 @@ context('Merge Data Card Tool Tile', function () { dc.getAttrName(1).contains("Attr1 Name"); dc.getAttrValue(1).click().type("Attr2 Value{enter}"); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getAttrs(1).should("have.length", 1); dc.getCardNofTotalListing(1).should("have.text", "Card 1 of 2"); @@ -275,12 +248,9 @@ context('Merge Data Card Tool Tile', function () { dc.getSortSelect(1).select("Attr2 Name"); dc.getSortView(1).should('exist'); - dc.getTile(0).find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(1).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); + dc.getMergeDataButton(1).click(); + dc.getMergeDataModalSelect().select("Card Deck Data 1"); + dc.getMergeDataModalAddDataButton().click(); dc.getSortSelect(1).select("None"); dc.getSingleCardView(1).should('exist'); @@ -301,52 +271,4 @@ context('Merge Data Card Tool Tile', function () { dc.getPreviousCardButton(1).click(); dc.getCardNofTotalListing(1).should("have.text", "Card 1 of 2"); }); - - it("merge Data card tool tile across documents", () => { - beforeTest(); - openMyWork(); - clueCanvas.addTile("datacard"); - dc.getTile(0).should("exist"); - dc.getTileTitle(0).should("have.text", "Card Deck Data 1"); - - dc.getAttrName(0).dblclick().type("Attr1 Name{enter}"); - dc.getAttrName(0).contains("Attr1 Name"); - dc.getAttrValue(0).click().type("Attr1 Value{enter}"); - - cy.log("opens document in main doc on the left"); - canvas.createNewExtraDocumentFromFileMenu(studentWorkspace, "my-work"); - - cy.log("creates a Data Card tool tile in new personal workspace"); - clueCanvas.addTile("datacard"); - dc.getTile(0).should("exist"); - dc.getTileTitle(0).should("have.text", "Card Deck Data 1"); - - dc.getAttrName(0).dblclick().type("Attr2 Name{enter}"); - dc.getAttrName(0).contains("Attr2 Name"); - dc.getAttrValue(0).click().type("Attr2 Value{enter}"); - - cy.log("merge Data card tool tile from left to right"); - dc.getTile(0, "[data-test=\"subtab-workspaces\"] .editable-document-content").find(".data-card-tool") - .trigger('dragstart', { dataTransfer }).then(() => { - dc.getTile(0).find(".data-card-tool .data-card-header-row") - .trigger('drop', { dataTransfer, force: true }) - .trigger('dragend', { dataTransfer, force: true }); - }); - - dc.getAttrs(0).should("have.length", 2); - dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 2"); - dc.getAttrName(0).eq(0).should("have.text", "Attr2 Name"); - dc.getAttrValue(0).eq(0).invoke("val").should("contain", "Attr2 Value"); - dc.getAttrName(0).eq(1).should("have.text", "Attr1 Name"); - dc.getAttrValue(0).eq(1).invoke("val").should("be.empty"); - dc.getNextCardButton(0).click(); - dc.getCardNofTotalListing(0).should("have.text", "Card 2 of 2"); - dc.getAttrs(0).should("have.length", 2); - dc.getAttrName(0).eq(0).should("have.text", "Attr2 Name"); - dc.getAttrValue(0).eq(0).invoke("val").should("be.empty"); - dc.getAttrName(0).eq(1).should("have.text", "Attr1 Name"); - dc.getAttrValue(0).eq(1).invoke("val").should("contain", "Attr1 Value"); - dc.getPreviousCardButton(0).click(); - dc.getCardNofTotalListing(0).should("have.text", "Card 1 of 2"); - }); }); diff --git a/src/plugins/data-card/data-card-tile.tsx b/src/plugins/data-card/data-card-tile.tsx index 96c8f9d6ee..c07afb1c92 100644 --- a/src/plugins/data-card/data-card-tile.tsx +++ b/src/plugins/data-card/data-card-tile.tsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import { observer } from "mobx-react"; import React, { useEffect, useRef, useState } from "react"; -import { ITileProps, extractDragTileType, kDragTiles } from "../../components/tiles/tile-component"; +import { ITileProps } from "../../components/tiles/tile-component"; import { useUIStore } from "../../hooks/use-stores"; import { DataCardContentModelType } from "./data-card-content"; import { DataCardRows } from "./components/data-card-rows"; @@ -13,8 +13,6 @@ import { AddIconButton, RemoveIconButton } from "./components/add-remove-icons"; import { useCautionAlert } from "../../components/utilities/use-caution-alert"; import { EditFacet } from "./data-card-types"; import { DataCardSortArea } from "./components/sort-area"; -import { safeJsonParse } from "../../utilities/js-utils"; -import { mergeTwoDataSets } from "../../models/data/data-set-utils"; import { CustomEditableTileTitle } from "../../components/tiles/custom-editable-tile-title"; import { DataCardToolbarContext } from "./data-card-toolbar-context"; import { CasesCountDisplay } from "./components/cases-count-display"; @@ -23,9 +21,8 @@ import { useDataCardTileHeight } from "./use-data-card-tile-height"; import "./data-card-tile.scss"; export const DataCardToolComponent: React.FC = observer(function DataCardToolComponent(props) { - const { documentId, model, readOnly, documentContent, tileElt, onSetCanAcceptDrop, onRegisterTileApi, - scale, onUnregisterTileApi, - height, onRequestRowHeight } = props; + const { documentId, model, readOnly, documentContent, tileElt, onRegisterTileApi, + scale, onUnregisterTileApi, height, onRequestRowHeight } = props; const backgroundRef = useRef(null); const content = model.content as DataCardContentModelType; @@ -38,7 +35,6 @@ export const DataCardToolComponent: React.FC = observer(function Dat const [currEditAttrId, setCurrEditAttrId] = useState(""); const [currEditFacet, setCurrEditFacet] = useState(""); const [imageUrlToAdd, setImageUrlToAdd] = useState(""); - const [highlightDataCard, setHighlightDataCard] = useState(false); const shouldShowAddCase = !readOnly && isTileSelected; const shouldShowDeleteCase = !readOnly && isTileSelected && dataSet.cases.length > 1; @@ -67,79 +63,6 @@ export const DataCardToolComponent: React.FC = observer(function Dat isSingleView: displaySingle }); - /* ==[ Drag and Drop ] == */ - - const handleDragOver = (e: React.DragEvent) => { - const isAcceptableDrag = isAcceptableDataCardDrag(e); - onSetCanAcceptDrop(isAcceptableDrag ? model.id : undefined); //this turns off highlighting outer edge - }; - - const isAcceptableDataCardDrag = (e: React.DragEvent) => { - const draggingWithinItself = ui?.selectedTileIds.includes(model.id); - if (draggingWithinItself){ - setHighlightDataCard(false); - return false; - } - const tileTypeDragged = extractDragTileType(e.dataTransfer); - const isDraggedTileDataCard = tileTypeDragged === "datacard"; //if two cards dragged, tileTypeDragged is undefined - if (!readOnly && isDraggedTileDataCard) { - const kImgDropMarginPct = 0.1; - const eltBounds = e.currentTarget.getBoundingClientRect(); - const kImgDropMarginX = eltBounds.width * kImgDropMarginPct; - const kImgDropMarginY = eltBounds.height * kImgDropMarginPct; - if ((e.clientX > eltBounds.left + kImgDropMarginX) && - (e.clientX < eltBounds.right - kImgDropMarginX) && - (e.clientY > eltBounds.top + kImgDropMarginY) && - (e.clientY < ((eltBounds.bottom - kImgDropMarginY) * 0.95))){ - setHighlightDataCard(true); //within bounds - return true; - } else { - setHighlightDataCard(false); //out of bounds - return false; - } - } - else { //not of type Datacard - setHighlightDataCard(false); - return false; - } - }; - - const highlightContainerClasses = classNames( - "data-card-container", - {"highlight": highlightDataCard}, - {"no-highlight": !highlightDataCard} - ); - - const handleDrop = (e: React.DragEvent) => { - - if (isAcceptableDataCardDrag(e)) { - if (highlightDataCard) { - setHighlightDataCard(false); //after you drop turn off highlighting - } - - /* ==[ Merge dragged tile -> dropped tile ] == */ - const getDataDraggedTile = e.dataTransfer.getData(kDragTiles); - const parsedDataDraggedTile = safeJsonParse(getDataDraggedTile); - const contentOfDraggedTile= safeJsonParse(parsedDataDraggedTile.sharedModels[0].content); - const dataSetOfDraggedTile = contentOfDraggedTile.dataSet; - - mergeTwoDataSets(dataSetOfDraggedTile, dataSet); - e.preventDefault(); - e.stopPropagation(); //prevents calling document-content > handleDrop - - /* ==[ Delete tile (if within same document) ] == */ - const sourceDocIdDraggedTile = parsedDataDraggedTile.sourceDocId; - const docIdDroppedTile = props.docId; - const idDraggedTile = parsedDataDraggedTile.tiles[0].tileId; - if (sourceDocIdDraggedTile === docIdDroppedTile){ - ui.removeTileIdFromSelection(idDraggedTile); - // document.deleteTile(idDraggedTile); - //TODO - document cannot be accessed, this would require a refactor - //https://www.pivotaltracker.com/n/projects/2441242/stories/185129553 - } - } - }; - function nextCase() { if (content.caseIndex < content.totalCases - 1) { content.setCaseIndex(content.caseIndex + 1); @@ -261,11 +184,9 @@ export const DataCardToolComponent: React.FC = observer(function Dat
backgroundRef.current = element} > -
+