updated panel_state to ts gridData i vs id

[rshen91]

• panel_state.js migrated to panel_state.ts
• GridData in selectors/types.ts file had id versus i - let me know if I'm misunderstanding but kept this to i instead of id to avoid confusion. In panel_state if I changed line 127 to id it ended up breaking my local setup so I believe changing this to I across the files will keep this consistent.
• There was a test file panel_header_container.test.tsx that had id that I changed to i

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[stacey-gammon]

Build failures look related:

:00 
19:23:00 ERROR kibana failed
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/embeddables.test.ts:39:28 - error TS2345: Argument of type '{ foo1: { embeddableConfig: {}; gridData: { h: number; id: string; w: number; x: number; y: numbe...' is not assignable to parameter of type 'PanelsMap'.
19:23:00         Property 'foo1' is incompatible with index signature.
19:23:00           Type '{ embeddableConfig: {}; gridData: { h: number; id: string; w: number; x: number; y: number; }; id...' is not assignable to type 'PanelState'.
19:23:00             Types of property 'gridData' are incompatible.
19:23:00               Type '{ h: number; id: string; w: number; x: number; y: number; }' is not assignable to type 'GridData'.
19:23:00                 Property 'i' is missing in type '{ h: number; id: string; w: number; x: number; y: number; }'.
19:23:00 
19:23:00       39   store.dispatch(setPanels({ foo1: panelData }));
19:23:00                                     ~~~~~~~~~~~~~~~~~~~
19:23:00 
19:23:00 
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts:41:31 - error TS2345: Argument of type '{ '1': { embeddableConfig: {}; gridData: { h: number; id: string; w: number; x: number; y: number...' is not assignable to parameter of type 'PanelsMap'.
19:23:00         Property ''1'' is incompatible with index signature.
19:23:00           Type '{ embeddableConfig: {}; gridData: { h: number; id: string; w: number; x: number; y: number; }; id...' is not assignable to type 'PanelState'.
19:23:00             Types of property 'gridData' are incompatible.
19:23:00               Type '{ h: number; id: string; w: number; x: number; y: number; }' is not assignable to type 'GridData'.
19:23:00                 Property 'i' is missing in type '{ h: number; id: string; w: number; x: number; y: number; }'.
19:23:00 
19:23:00       41   store.dispatch(updatePanels({ '1': originalPanelData }));
19:23:00                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
19:23:00 
19:23:00 
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts:56:32 - error TS2345: Argument of type '{ gridData: { h: number; id: string; w: number; x: number; y: number; }; embeddableConfig: {}; id...' is not assignable to parameter of type 'PanelState'.
19:23:00         Types of property 'gridData' are incompatible.
19:23:00           Type '{ h: number; id: string; w: number; x: number; y: number; }' is not assignable to type 'GridData'.
19:23:00             Property 'i' is missing in type '{ h: number; id: string; w: number; x: number; y: number; }'.
19:23:00 
19:23:00       56     store.dispatch(updatePanel(newPanelData));
19:23:00                                         ~~~~~~~~~~~~
19:23:00 
19:23:00 
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts:63:27 - error TS2339: Property 'id' does not exist on type 'GridData'.
19:23:00 
19:23:00       63     expect(panel.gridData.id).toBe('1');
19:23:00                                    ~~
19:23:00 
19:23:00 
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts:73:33 - error TS2345: Argument of type '{ '1': { embeddableConfig: { columns: string[]; }; gridData: { h: number; id: string; w: number; ...' is not assignable to parameter of type 'PanelsMap'.
19:23:00         Property ''1'' is incompatible with index signature.
19:23:00           Type '{ embeddableConfig: { columns: string[]; }; gridData: { h: number; id: string; w: number; x: numb...' is not assignable to type 'PanelState'.
19:23:00             Types of property 'gridData' are incompatible.
19:23:00               Type '{ h: number; id: string; w: number; x: number; y: number; }' is not assignable to type 'GridData'.
19:23:00 
19:23:00       73     store.dispatch(updatePanels({ '1': panelData }));
19:23:00                                          ~~~~~~~~~~~~~~~~~~
19:23:00 
19:23:00 
19:23:00       src/core_plugins/kibana/public/dashboard/reducers/panels.test.ts:80:32 - error TS2345: Argument of type '{ embeddableConfig: { columns: string[]; }; gridData: { h: number; id: string; w: number; x: numb...' is not assignable to parameter of type 'PanelState'.
19:23:00         Types of property 'gridData' are incompatible.
19:23:00           Type '{ h: number; id: string; w: number; x: number; y: number; }' is not assignable to type 'GridData'.
19:23:00 
19:23:00       80     store.dispatch(updatePanel(newPanelData));
19:23:00                                         ~~~~~~~~~~~~
19:23:00 

[stacey-gammon]

Looks great, awesome how switching to typescript can expose inconsistencies like that! I think that was a bug that it was i in some places, id in others. I think you made the right call using i, because that is what react-grid-layout package expects. Though eventually we should decouple these two things - so how we store data is not dependent on a third party library (and then we can use id which is much clearer than i!)

I think the tests just need to get migrated over to use i instead of of id then it should all work!

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[stacey-gammon]

LGTM! code review only. ci should have caught any issues.

[stacey-gammon]

fyi, the labels I just applied should generally get applied to all these typescript PRs.

[stacey-gammon]

Hey @rshen91 - just fyi, looks like this still needs to be backported.