Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

186182704 formula column background #1529

Merged
merged 4 commits into from
Oct 2, 2024
Merged

186182704 formula column background #1529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8896666
Adds formula column background color
eireland Oct 2, 2024
49e3e54
Adds formula background styling to case card value cell.
eireland Oct 2, 2024
e65b0d9
Adds Cypress test to verify background color when attribute is a formula
eireland Oct 2, 2024
d094202
PR fix
eireland Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 35 additions & 8 deletions v3/cypress/e2e/case-card.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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()
Expand All @@ -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)")
})
})
})
2 changes: 2 additions & 0 deletions v3/cypress/e2e/table.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion v3/src/components/case-card/case-attr-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.case-card-attr {
height: 25px;

&:nth-child(2) {
.case-card-attr-value {
border-top: solid 1px #b2b2b2;
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions v3/src/components/case-card/case-attr-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
const { caseId, collection, attrId, unit, value, getDividerBounds, onSetContentElt } = props
const cardModel = useCaseCardModel()
const data = cardModel?.data
const attr = collection.getAttribute(attrId)

Check warning on line 32 in v3/src/components/case-card/case-attr-view.tsx

View check run for this annotation

Codecov / codecov/patch

v3/src/components/case-card/case-attr-view.tsx#L32 

Added line #L32 was not covered by tests
const isCollectionSummarized = !!cardModel?.summarizedCollections.includes(collection.id)
const displayValue = value ? String(value) : ""
const showUnitWithValue = isFiniteNumber(Number(value)) && unit
Expand Down Expand Up @@ -63,16 +64,17 @@
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)}
Expand Down
4 changes: 4 additions & 0 deletions v3/src/components/case-table/case-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
8 changes: 5 additions & 3 deletions v3/src/components/case-table/use-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import CellTextEditor from "./cell-text-editor"
import ColorCellTextEditor from "./color-cell-text-editor"
import { ColumnHeader } from "./column-header"
import clsx from "clsx"

Check warning on line 15 in v3/src/components/case-table/use-columns.tsx

View workflow job for this annotation

GitHub Actions / S3 Deploy 

Using exported name 'clsx' as identifier for default export

interface IUseColumnsProps {
data?: IDataSet
Expand All @@ -30,15 +31,16 @@
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",
Expand All @@ -47,7 +49,7 @@
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
Expand Down
Loading