187810613 ruler add attribute (#1359)

* Change add new attribute function to use V3 code. This fixes a bug where user could not add a value to the new attribute in the case card, which also meant evaluated formulas were could not be added as values.

Adds ability add a formula to an attribute in the case card, using V3 modal.

* Adds ability to hide attributes in case card.
Case card hides attributes that were hidden in case table.

* Fixes adding new attribute in case card again

* Moves the loop for adding values to the attr before the logic of where to place the new attr

* Moves card case attribute menu functionality to the DG data context utilities.

* Moves SharedCaseMetDataPropType declaration to case-card.v2

Cleans up unused imports

* Fizes broken jest test

* Adds ability to add new attribute from case table ruler menu.

* merge from main cleanup

* Adds a new attribute in the proper collection from the ruler menu in the table inspector panel

* Fixes Cypress for adding attributes throught the table inspector

* Force a re-run of tests

* Removes caseMetaData from case card. Remnants of old code when branch was created.

* Merges changes from main and makes some adjustments.

Fixes flaky cypress table test

* PR Fixes

v3/cypress/e2e/table.spec.ts

@@ -296,8 +296,7 @@ context("case table ui", () => {
 
       // verify new attribute exists
       table.getColumnHeaders().should("have.length.be.within", 10, 11)
-      table.getAttribute("newAttr").should("exist")
-      table.getAttribute("newAttr").click()
+      table.getAttributeInput().last().should("exist").and("have.value", "newAttr").type("{enter}")
       table.getAttribute("newAttr").should("have.text", "newAttr")
 
       cy.log("check undo/redo after add new attribute")
@@ -925,7 +924,7 @@ context("case table ui", () => {
       // verify that cell shows color swatch of appropriate color
       table.verifyCellSwatchColor(2, 2, "rgb(255, 0, 255)")
       // double-click to begin editing cell
-      table.getGridCell(2, 2).dblclick()
+      table.getGridCell(2, 2).click().dblclick()
       // click color swatch to bring up color palette
       table.getGridCell(2, 2).get(".cell-edit-color-swatch").click()
       // click hue bar to change color

v3/cypress/support/commands.ts

@@ -130,7 +130,7 @@ Cypress.Commands.add("dragAttributeToTarget", (source, attribute, target, target
         })
       })
     })
-  cy.wait(5000)
+  cy.wait(4000)
 })
 
 Cypress.Commands.add("clickToUnselect", (subject, options?: { delay: number }) => {

v3/cypress/support/elements/table-tile.ts

@@ -89,6 +89,9 @@ export const TableTileElements = {
   getAttribute(name, collectionIndex = 1) {
     return this.getCollection(collectionIndex).find(`[data-testid^="codap-attribute-button ${name}"]`)
   },
+  getAttributeInput(collectionIndex = 1) {
+    return this.getCollection(collectionIndex).find("[data-testid=column-name-input]")
+  },
   getCasetableAttribute(name) {
     return this.getTableTile().find(`[data-testid^="codap-attribute-button ${name}"]`)
   },

v3/src/components/case-card/case-card.tsx

@@ -2,7 +2,7 @@ import { useMergeRefs } from "@chakra-ui/react"
 import { observer } from "mobx-react-lite"
 import React, { useRef } from "react"
 import { useResizeDetector } from "react-resize-detector"
-import { useDataSetContext } from "../../hooks/use-data-set-context"
+import { useDataSet } from "../../hooks/use-data-set"
 import { useCaseCardModel } from "./use-case-card-model"
 import { prf } from "../../utilities/profiler"
 
@@ -22,7 +22,7 @@ export const CaseCard = observer(function CaseCard({ setNodeRef }: IProps) {
   const { active } = useDndContext()
   const instanceId = useInstanceIdContext() || "case-card"
 */
-  const data = useDataSetContext()
+  const {data} = useDataSet()
   const cardModel = useCaseCardModel()
   const containerRef = useRef<HTMLDivElement>(null)
   const mergeRefs = useMergeRefs<HTMLDivElement>(containerRef, setNodeRef)

v3/src/components/case-card/case-card.v2.test.tsx

@@ -7,6 +7,7 @@ import { createDataSet } from "../../models/data/data-set-conversion"
 import { DGDataContext } from "../../models/v2/dg-data-context"
 import { t } from "../../utilities/translation/translate"
 import "./case-card.v2"
+import { SharedCaseMetadata } from "../../models/shared/shared-case-metadata"
 const { CaseCard } = DG.React as any
 
 describe("CaseCard component", () => {
@@ -27,13 +28,15 @@ describe("CaseCard component", () => {
     })
     data.addCases([{ __id__: "Case1", AttrId: "foo" }, { __id__: "Case2", AttrId: "bar" }])
     const context = new DGDataContext(data)
+    const metadata = SharedCaseMetadata.create()
     const columnWidthMap: Record<string, number> = {}
     const mockIsSelected = jest.fn()
     const mockOnResizeColumn = jest.fn()
     const { container, rerender } = render(
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -49,6 +52,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -63,6 +67,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -75,6 +80,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -88,6 +94,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -100,6 +107,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -113,6 +121,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -128,6 +137,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -159,6 +169,7 @@ describe("CaseCard component", () => {
         { id: "Attr2Id", name: "Attr2Name" }
       ]
     })
+    const metadata = SharedCaseMetadata.create()
     data.addCases([
       { __id__: "Case1", Attr1Id: "foo", Attr2Id: 1 },
       { __id__: "Case2", Attr1Id: "foo", Attr2Id: 2 },
@@ -173,6 +184,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -188,6 +200,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -201,6 +214,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -214,6 +228,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -226,6 +241,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}
@@ -239,6 +255,7 @@ describe("CaseCard component", () => {
       <CaseCard
         size={{ width: 400, height: 300 }}
         context={context}
+        caseMetaData={metadata}
         columnWidthMap={columnWidthMap}
         onResizeColumn={() => mockOnResizeColumn()}
         isSelectedCallback={() => mockIsSelected()}

v3/src/components/case-table/collection-table.tsx

@@ -126,6 +126,13 @@ export const CollectionTable = observer(function CollectionTable(props: IProps)
       caseTableModel)
   }, [caseTableModel, columns, forceUpdate])
 
+  useEffect(() => {
+    if (collectionTableModel?.attrIdToEdit !== undefined) {
+      const newAttrIdx = columns.findIndex(column => column.key === collectionTableModel.attrIdToEdit)
+      gridRef.current?.selectCell({idx: columns.length, rowIdx: newAttrIdx})
+    }
+  }, [collectionTableModel?.attrIdToEdit, columns])
+
   // respond to column width changes from RDG
   const handleColumnResize = useCallback(
     function handleColumnResize(idx: number, width: number, isComplete?: boolean) {
@@ -156,7 +163,6 @@ export const CollectionTable = observer(function CollectionTable(props: IProps)
       undoStringKey: "DG.Undo.caseTable.createAttribute",
       redoStringKey: "DG.Redo.caseTable.createAttribute"
     })
-    gridRef.current?.selectCell({idx: columns.length, rowIdx: -1})
   }
 
   const showInputRow = !preventCollectionReorg(data, collectionId)

v3/src/components/case-table/inspector-panel/ruler-menu-list.tsx

@@ -2,14 +2,15 @@ import { MenuItem, MenuList, useToast } from "@chakra-ui/react"
 import React from "react"
 import { useDataSetContext } from "../../../hooks/use-data-set-context"
 import { IAttribute } from "../../../models/data/attribute"
-import { ICollectionModel } from "../../../models/data/collection"
 import { createAttributesNotification } from "../../../models/data/data-set-notifications"
 import { uniqueName } from "../../../utilities/js-utils"
 import { preventCollectionReorg } from "../../../utilities/plugin-utils"
 import { t } from "../../../utilities/translation/translate"
+import { useCaseTableModel } from "../use-case-table-model"
 
 export const RulerMenuList = () => {
   const data = useDataSetContext()
+  const tableModel = useCaseTableModel()
   const toast = useToast()
   const handleMenuItemClick = (menuItem: string) => {
     toast({
@@ -21,13 +22,17 @@ export const RulerMenuList = () => {
     })
   }
 
-  const handleAddNewAttribute = (collection: ICollectionModel) => () => {
+  const handleAddNewAttribute = (collectionId: string) => () => {
     let attribute: IAttribute | undefined
+    const collectionTableModel = tableModel?.getCollectionTableModel(collectionId)
     data?.applyModelChange(() => {
       const newAttrName = uniqueName("newAttr",
         (aName: string) => !data.attributes.find(attr => aName === attr.name)
       )
-      attribute = data.addAttribute({name: newAttrName}, { collection: collection.id })
+      attribute = data.addAttribute({name: newAttrName}, { collection: collectionId })
+      if (attribute) {
+        collectionTableModel?.setAttrIdToEdit(attribute.id)
+      }
     }, {
       notifications: () => createAttributesNotification(attribute ? [attribute] : [], data),
       undoStringKey: "DG.Undo.caseTable.createAttribute",
@@ -40,7 +45,7 @@ export const RulerMenuList = () => {
       <MenuItem
         isDisabled={preventCollectionReorg(data, collection.id)}
         key={`menu-add-attribute-button-${collection.id}`}
-        onClick={handleAddNewAttribute(collection)}
+        onClick={handleAddNewAttribute(collection.id)}
       >
         {t("DG.Inspector.newAttribute", { vars: [collection.title] })}
       </MenuItem>