Table: various minor fixes (alpha panel) #17258
Conversation
| Object.assign(props, propOverrides); | ||
|
|
||
| const tree = renderer.create(<Table {...props} />); | ||
| const instance = (tree.getInstance() as unknown) as Table; |
There was a problem hiding this comment.
That is an interesting Typescript going on here:)
There was a problem hiding this comment.
The enzyme version lets you simply cast... but it does not actually render:
https://github.com/grafana/grafana/blob/master/public/app/features/teams/TeamMembers.test.tsx#L28
There was a problem hiding this comment.
I gotcha. Was just confused with that syntax ;)
| { | ||
| ...this.props /** Force MultiGrid to update when data changes */ | ||
| } | ||
| {...refreshKeys} |
There was a problem hiding this comment.
Not sure about this approach as it's sort of hacky to push props to a component that are not handled by it. Shouldn't we use key instead that would be an outcome of the changed properties? You could generate it in getDerivedStateFromProps and pass it to MultiGrid in render.
There was a problem hiding this comment.
I can't find it in the docs right now... but this was their recommendation on how do get things to update when the data changes. key alone does not work because MultiGrid includes 4 Grids that don't have any context to know what changed besides the ...rest parameters.
This whole file needs to be revisited. It was my first attempt at anything non-trivial in react and blindly copied over a lot of angular code :(
There was a problem hiding this comment.
Check:
https://github.com/bvaughn/react-virtualized#pure-components
Essentially to get MultiGrid to update the inner Grids, you either add pass-through props, or call forceUpdateGrids directly
| // | ||
| console.log('COLUMN', column.name, theme); | ||
| } | ||
| ) {} |
There was a problem hiding this comment.
Let's remove this empty constructor
There was a problem hiding this comment.
Can't remove it because it sets all the private properties that get used below
private mapper: ValueMapper,
private style: ColumnStyle,
private theme: GrafanaTheme,
private column: Field,
private replaceVariables: InterpolateFunction,
private fmt?: ValueFormatter
There was a problem hiding this comment.
Oh, I didn't know you can set properties this way, that's very cool!
* grafana/master: Singlestat: fixes issue with value placement and line wraps (grafana#17249) Devenv: Update Graphite port in dev datasources (grafana#17255)
| @@ -283,8 +283,9 @@ export class Table extends Component<Props, State> { | |||
| } | |||
|
|
|||
| // Force MultiGrid to rerender if these options change | |||
| // See: https://github.com/bvaughn/react-virtualized#pass-thru-props | |||
* master: (28 commits) Feature: do dev environment via makefile (#17136) devenv: adds auth proxy load test (#17271) Table: various minor fixes (alpha panel) (#17258) Singlestat: fixes issue with value placement and line wraps (#17249) Devenv: Update Graphite port in dev datasources (#17255) Chore: bump grafana-ui version (#17256) Release: Updated latest.json Auth: Logout disabled user (#17166) docs: fixes typo in provisioning docs (#17248) CloudWatch: Made region visible for AWS Cloudwatch Expressions (#17243) Panel: Pass transparency prop down to React panels. (#17235) Build: Fix filter for building msi during release (#17236) DataSourcePlugin: Avoid anuglar injector if only one parameter (#17239) Alerting: Support for configuring content field for Discord alert notifier (#17017) Explore: Update the way Loki retrieve log context (#17204) Docs: Fix grammar in docs (#17233) LDAP: consistently name the LDAP entities (#17203) Panels: Show Drilldown links in top-left corner of custom React panels (#17142) Build: Fix final prompt for @grafana/ui npm publish confirmation Docs: Updated versions selector ...
Since we added
idto the PanelProps, the react table has thrown errors. This PR fixes:overflow:hiddento cell properties