diff --git a/frontend/src/components/core/Block/Block.tsx b/frontend/src/components/core/Block/Block.tsx index ab6734fcf55e..3f4b566a8b2c 100644 --- a/frontend/src/components/core/Block/Block.tsx +++ b/frontend/src/components/core/Block/Block.tsx @@ -198,9 +198,7 @@ class Block extends PureComponent { return true } if (this.props.reportRunState === ReportRunState.RUNNING) { - return ( - node instanceof ElementNode && node.reportId !== this.props.reportId - ) + return node.reportId !== this.props.reportId } return false } @@ -213,10 +211,13 @@ class Block extends PureComponent { const BlockType = node.deltaBlock.expandable ? Block.WithExpandableBlock : Block + const enable = this.shouldComponentBeEnabled(false) + const isStale = this.isComponentStale(enable, node) const optionalProps = node.deltaBlock.expandable ? { empty: node.isEmpty, + isStale, ...node.deltaBlock.expandable, } : {} diff --git a/frontend/src/hocs/withExpandable/styled-components.ts b/frontend/src/hocs/withExpandable/styled-components.ts index 611930e93511..2fae56e16500 100644 --- a/frontend/src/hocs/withExpandable/styled-components.ts +++ b/frontend/src/hocs/withExpandable/styled-components.ts @@ -14,7 +14,7 @@ export const StyledExpandableContainer = styled.div(({ theme }) => ({ paddingTop: theme.spacing.lg, "&:before": { - content: "empty", + content: '"empty"', }, }, }, diff --git a/frontend/src/hocs/withExpandable/withExpandable.test.tsx b/frontend/src/hocs/withExpandable/withExpandable.test.tsx index ee30592a5cfb..5c2a6f8a22b7 100644 --- a/frontend/src/hocs/withExpandable/withExpandable.test.tsx +++ b/frontend/src/hocs/withExpandable/withExpandable.test.tsx @@ -60,4 +60,18 @@ describe("withExpandable HOC", () => { expect(accordion.prop("expanded").length).toBe(0) }) + + it("should become stale", () => { + const props = getProps({ + isStale: true, + }) + const WithHoc = withExpandable(testComponent) + // @ts-ignore + const wrapper = shallow() + const accordion = wrapper.find(StatelessAccordion) + const overrides = accordion.prop("overrides") + + // @ts-ignore + expect(overrides.Header.props.className).toContain("stale-element") + }) }) diff --git a/frontend/src/hocs/withExpandable/withExpandable.tsx b/frontend/src/hocs/withExpandable/withExpandable.tsx index ff4682a36c6b..8fa41f5918ea 100644 --- a/frontend/src/hocs/withExpandable/withExpandable.tsx +++ b/frontend/src/hocs/withExpandable/withExpandable.tsx @@ -28,6 +28,7 @@ export interface Props { expanded: boolean empty: boolean widgetsDisabled: boolean + isStale: boolean } function withExpandable( @@ -39,6 +40,7 @@ function withExpandable( expanded: initialExpanded, empty, widgetsDisabled, + isStale, ...componentProps } = props @@ -107,7 +109,11 @@ function withExpandable( borderBottomColor: colors.primary, }, }), - props: { className: "streamlit-expanderHeader" }, + props: { + className: classNames("streamlit-expanderHeader", { + "stale-element": isStale, + }), + }, }, ToggleIcon: { style: ({ $disabled }) => ({