Make blocks stale-able and fix emotion warning

frontend/src/components/core/Block/Block.tsx

@@ -198,9 +198,7 @@ class Block extends PureComponent<Props> {
       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<Props> {
     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,
         }
       : {}

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"',
       },
     },
   },

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(<WithHoc {...props} />)
+    const accordion = wrapper.find(StatelessAccordion)
+    const overrides = accordion.prop("overrides")
+
+    // @ts-ignore
+    expect(overrides.Header.props.className).toContain("stale-element")
+  })
 })

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 }) => ({