186182704 formula column background (#1529)

* Adds formula column background color * Adds formula background styling to case card value cell. Disables value editing when attribute has a formula * Adds Cypress test to verify background color when attribute is a formula Splits case card test to 2 context so mouseSensor does not interfere with attribute menu clicks * PR fix
concord-consortium · Oct 2, 2024 · e9dfa69 · e9dfa69
1 parent 55f14e3
commit e9dfa69
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 14 deletions.
diff --git a/v3/cypress/e2e/case-card.spec.ts b/v3/cypress/e2e/case-card.spec.ts
@@ -287,6 +287,19 @@ context("case card", () => {
       cy.get('[data-testid="case-card-view"]').should("have.length", 2)
       cy.get('[data-testid="case-card-view-title"]').first().should("have.text", "Diets")
     })
+  })
+})
+
+context("case card inspector panel", () => {
+  beforeEach(() => {
+    // cy.scrollTo() doesn't work as expected with `scroll-behavior: smooth`
+    const queryParams = "?sample=mammals&scrollBehavior=auto"
+    const url = `${Cypress.config("index")}${queryParams}`
+    cy.visit(url)
+    cy.wait(2000)
+  })
+
+  describe("case card inspector panel", () => {
     it("displays inspector panel when in focus", () => {
       table.toggleCaseView()
       cy.wait(500)
@@ -378,14 +391,14 @@ context("case card", () => {
       cy.wait(500)
       card.getShowAllHiddenAttributesButton().should("be.disabled")
       // FIXME: Reinstate the below after figuring out why clicking attribute buttons does nothing in Cypress
-      // cy.get('[data-testid="case-card-attr-name"]').eq(8).click()
-      // cy.get('[data-testid="attribute-menu-list"]').should("be.visible")
-      // cy.get('[data-testid="attribute-menu-list"]').find("button").contains("Hide Attribute").click()
-      // cy.get('[data-testid="case-card-attr"]').should("have.length", 8)
-      // card.getHideShowButton().click()
-      // cy.get('[data-testid="hide-show-menu-list"]').should("be.visible")
-      // cy.get('[data-testid="hide-show-menu-show-all-hidden-attributes"]').should("not.be.disabled").click()
-      // cy.get('[data-testid="case-card-attr"]').should("have.length", 9)
+      cy.get('[data-testid="case-card-attr-name"]').eq(8).click()
+      cy.get('[data-testid="attribute-menu-list"]').should("be.visible")
+      cy.get('[data-testid="attribute-menu-list"]').find("button").contains("Hide Attribute").click()
+      cy.get('[data-testid="case-card-attr"]').should("have.length", 8)
+      card.getHideShowButton().click()
+      cy.get('[data-testid="hide-show-menu-list"]').should("be.visible")
+      cy.get('[data-testid="hide-show-menu-show-all-hidden-attributes"]').should("not.be.disabled").click()
+      cy.get('[data-testid="case-card-attr"]').should("have.length", 9)
     })
     it("allows user to add an attribute from inspector panel", () => {
       table.toggleCaseView()
@@ -397,6 +410,20 @@ context("case card", () => {
       cy.wait(500)
       cy.get('[data-testid="column-name-input"]').should("exist").type("Friendliness{enter}")
       cy.get('[data-testid="case-card-attr"]').should("have.length", 10)
+
+      cy.log("add a formula to the new attribute")
+      cy.get('[data-testid="case-card-attr-name"]').eq(9).click()
+      cy.wait(500)
+      cy.get('[data-testid="attribute-menu-list"]').should("be.visible")
+      cy.get("[data-testid=attribute-menu-list] button").contains("Edit Formula...").click()
+      cy.get('[data-testid="attr-formula-input"]').should("be.visible")
+      cy.get('[data-testid="attr-formula-input"]')
+        .type("if(LifeSpan>20, \"Friendly\", \"Unfriendly\")", {force:true})
+      cy.get("[data-testid=Apply-button]").click()
+      cy.get('[data-testid="attr-formula-input"]').should("not.exist")
+      cy.get('[data-testid="case-card-attr-value"]').eq(9).should("have.text", "Friendly, Unfriendly")
+      cy.get('[data-testid="case-card-attr-value"] .formula-attr-value')
+          .should("have.css", "background-color", "rgba(255, 255, 0, 0.2)")
     })
   })
 })
diff --git a/v3/cypress/e2e/table.spec.ts b/v3/cypress/e2e/table.spec.ts
@@ -431,6 +431,8 @@ context("case table ui", () => {
         random1 = +cell.text()
         expect(random1 >= 0).to.eq(true)
         expect(random1 < 1).to.eq(true)
+        // verify cell background color is not white
+        cy.wrap(cell).should("have.css", "background-color", "rgba(255, 255, 0, 0.2)")
       })
       // Rerandomize
       let random2 = 0

diff --git a/v3/src/components/case-card/case-attr-view.scss b/v3/src/components/case-card/case-attr-view.scss
@@ -2,7 +2,7 @@
 
 .case-card-attr {
   height: 25px;
-  
+
   &:nth-child(2) {
     .case-card-attr-value {
       border-top: solid 1px #b2b2b2;
@@ -45,6 +45,11 @@
         text-align: left;
       }
 
+      &.formula-attr-value {
+        background-color: rgba(255, 255, 0, 0.2);
+        font-style: italic;
+      }
+
       span {
         border-radius: 0;
         display: inline-block;

diff --git a/v3/src/components/case-card/case-attr-view.tsx b/v3/src/components/case-card/case-attr-view.tsx
@@ -29,6 +29,7 @@ export const CaseAttrView = observer(function CaseAttrView (props: ICaseAttrView
   const { caseId, collection, attrId, unit, value, getDividerBounds, onSetContentElt } = props
   const cardModel = useCaseCardModel()
   const data = cardModel?.data
+  const attr = collection.getAttribute(attrId)
   const isCollectionSummarized = !!cardModel?.summarizedCollections.includes(collection.id)
   const displayValue = value ? String(value) : ""
   const showUnitWithValue = isFiniteNumber(Number(value)) && unit
@@ -63,16 +64,17 @@ export const CaseAttrView = observer(function CaseAttrView (props: ICaseAttrView
   const renderEditableOrSummaryValue = () => {
     if (isCollectionSummarized) {
       return (
-        <div className="case-card-attr-value-text static-summary">
+        <div className={clsx("case-card-attr-value-text", "static-summary", {"formula-attr-value": attr?.hasFormula})}>
           {displayValue}
         </div>
       )
     }
 
     return (
       <Editable
-        className="case-card-attr-value-text"
+        className={clsx("case-card-attr-value-text", {"formula-attr-value": attr?.hasFormula})}
         isPreviewFocusable={true}
+        isDisabled={attr?.hasFormula}
         onCancel={handleCancel}
         onChange={handleChangeValue}
         onEdit={() => setIsEditing(true)}

diff --git a/v3/src/components/case-table/case-table.scss b/v3/src/components/case-table/case-table.scss
@@ -303,6 +303,10 @@ $table-body-font-size: 8pt;
         }
       }
 
+      &.formula-column {
+        background-color: rgba(255, 255, 0, 0.2);
+      }
+
       .cell-color-swatch {
         width: 100%;
         height: 100%;

diff --git a/v3/src/components/case-table/use-columns.tsx b/v3/src/components/case-table/use-columns.tsx
@@ -12,6 +12,7 @@ import { kDefaultColumnWidth, TColumn } from "./case-table-types"
 import CellTextEditor from "./cell-text-editor"
 import ColorCellTextEditor from "./color-cell-text-editor"
 import { ColumnHeader } from "./column-header"
+import clsx from "clsx"
 
 interface IUseColumnsProps {
   data?: IDataSet
@@ -30,15 +31,16 @@ export const useColumns = ({ data, indexColumn }: IUseColumnsProps) => {
         const collection = data?.getCollection(collectionId)
         const attrs: IAttribute[] = collection ? getCollectionAttrs(collection, data) : []
         const visible: IAttribute[] = attrs.filter(attr => attr && !caseMetadata?.isHidden(attr.id))
-        return visible.map(({ id, name, type, userType, isEditable }) => ({ id, name, type, userType, isEditable }))
+        return visible.map(({ id, name, type, userType, isEditable, hasFormula }) =>
+                  ({ id, name, type, userType, isEditable, hasFormula }))
       },
       entries => {
         // column definitions
         const _columns: TColumn[] = data
           ? [
               ...(indexColumn ? [indexColumn] : []),
               // attribute column definitions
-              ...entries.map(({ id, name, userType, isEditable }): TColumn => ({
+              ...entries.map(({ id, name, userType, isEditable, hasFormula }): TColumn => ({
                 key: id,
                 name,
                 // If a default column width isn't supplied, RDG defaults to "auto",
@@ -47,7 +49,7 @@ export const useColumns = ({ data, indexColumn }: IUseColumnsProps) => {
                 resizable: true,
                 headerCellClass: `codap-column-header`,
                 renderHeaderCell: ColumnHeader,
-                cellClass: "codap-data-cell",
+                cellClass: clsx("codap-data-cell", {"formula-column": hasFormula}),
                 renderCell: AttributeValueCell,
                 editable: row => isCaseEditable(data, row.__id__),
                 renderEditCell: isEditable