Deprecated layout components: get rid of `Layout.tsx` including `HorizontalGroup` and `VerticalGroup`

[eledobleefe]

What is the chore?: The grafana-frontend-platform squad has created a 'non-roadmap' epic to remove the usage of the deprecated layout components: Layout, HorizontalGroup and VerticalGroup.

Is there anything else we need to know?:

• This is a side project. No prioritization. Just keep in mind when there are downtimes, or you need a break and work on something less complicated.
• In most cases, you just will need to:

Replace HorizontalGroup

<HorizontalGroup spacing="lg">
...
</HorizontalGroup>

with Stack

<Stack gap={3}>
...
</Stack>

or replace VerticalGroup

<VerticalGroup spacing="md">
...
</VerticalGroup>

with Stack using direction

<Stack direction="column" gap={2}>
...
</Stack>

• To change spacing to gap you can take a look at the equivalences in the Layout component.

List of issues

Remove HorizontalGroup and VerticalGroup

• [ ] public/app/features/transformers/editors/EnumMappingEditor.tsx
• [ ] public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx
• [ ] public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx
• [ ] public/app/plugins/panel/canvas/editor/panZoomHelp.tsx

  Remove HorizontalGroup

• [ ] public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx
• [ ] public/app/features/geo/editor/locationModeEditor.tsx
• [ ] public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx
• [ ] public/app/features/transformers/editors/CalculateFieldTransformerEditor/ReduceRowOptionsEditor.tsx
• [ ] public/app/features/transformers/editors/EnumMappingRow.tsx
• [ ] public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
• [ ] public/app/features/transformers/joinByLabels/JoinByLabelsTransformerEditor.tsx
• [ ] public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx
• [ ] public/app/plugins/panel/barchart/TickSpacingEditor.tsx
• [ ] public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx
• [ ] public/app/plugins/panel/geomap/editor/StyleEditor.tsx
• [ ] public/app/plugins/panel/timeseries/InsertNullsEditor.tsx
• [ ] public/app/plugins/panel/timeseries/LineStyleEditor.tsx
• [ ] public/app/plugins/panel/timeseries/SpanNullsEditor.tsx
• [ ] public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx

  Remove VerticalGroup

• [ ] public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx
• [ ] public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor.tsx
• [ ] public/app/plugins/panel/canvas/components/CanvasTooltip.tsx
• [ ] public/app/plugins/panel/geomap/editor/MapViewEditor.tsx
• [ ] public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx

Thanks in advance for your collab! 🙌

[grafanabot]

@eledobleefe please add one or more appropriate labels. Here are some tips:

• if you are making an issue, TODO, or reminder for yourself or your team, please add one label that best describes the product or feature area. Please also add the issue to your project board. :rocket:

• if you are making an issue for any other reason (docs typo, you found a bug, etc), please add at least one label that best describes the product or feature that you are discussing (e.g. area/alerting, datasource/loki, type/docs, type/bug, etc). Our issue triage doc also provides additional guidance on labeling. :rocket:

  Thank you! :heart: