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

[eledobleefe]

Although we added new layout components, such as Box and Stack, there are many places in our code where we can find these deprecated components. The aim here is to list them all and increasingly change Layout, HorizontalGroup and VerticalGroup into Stack or the most appropriate new layout component for each case.

Teams, owners of affected code:

1. Alerting Frontend:
   Alerting: Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86841
2. Dashboards Squad:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86831
3. Dataviz Squad:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86844
4. Explore squad:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86839
5. App Platform Squad:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86863
6. Frontend Platform
7. Identity Access Team:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86864
8. Observability Logs:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86869
9. Observability Metrics:
   Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86872
10. Observability Traces and Profiling:
    Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86874
11. Partner Datasources:
    Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86876
12. Plugins Platform Frontend:
    Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86878
13. Sharing Squad:
    Deprecated layout components: get rid of Layout.tsx including HorizontalGroup and VerticalGroup  #86880

There is also code to modify in grafana-enterprise:
Deprecated layout component: get rid of HorizontalGroup

---

Frontend Platform

Remove HorizontalGroup and VerticalGroup

• packages/grafana-ui/src/components/Button/Button.story.tsx
• packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
• packages/grafana-ui/src/components/Table/FilterPopup.tsx
• packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
• packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx

Remove HorizontalGroup

• packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
• packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
• packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
• [ ] packages/grafana-ui/src/components/Forms/FieldArray.story.tsx (Deprecated component)
• packages/grafana-ui/src/components/Modal/Modal.tsx
• packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
• packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
• packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
• packages/grafana-ui/src/components/Table/CellActions.tsx
• [ ] packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx(Deprecated component)
• packages/grafana-ui/src/options/builder/hideSeries.tsx
• packages/grafana-ui/src/options/builder/stacking.tsx
• packages/grafana-runtime/src/components/DataSourcePicker.tsx
• public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
• public/app/core/components/Login/LoginPage.tsx
• public/app/core/components/RolePicker/RolePickerMenu.tsx
• public/app/core/components/RolePicker/RolePickerSubMenu.tsx
• public/app/features/sandbox/TestStuffPage.tsx
• public/app/features/org/SelectOrgPage.tsx
• public/app/features/search/page/components/ActionRow.tsx
• public/app/features/profile/ChangePasswordForm.tsx
• public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx

Remove VerticalGroup

• packages/grafana-ui/src/components/Alert/Alert.mdx
• packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
• packages/grafana-ui/src/components/Alert/Toast.story.tsx
• packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx
• packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
• [ ] packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx (Deprecated component)
• packages/grafana-ui/src/components/Link/TextLink.story.tsx
• packages/grafana-ui/src/components/Menu/Menu.story.tsx
• packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx
• packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
• packages/grafana-ui/src/components/Text/Text.story.tsx
• packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
• public/app/core/components/AppNotifications/AppNotificationList.tsx
• public/app/core/components/ForgottenPassword/ChangePassword.tsx
• public/app/core/components/Login/LoginServiceButtons.tsx
• public/app/core/components/Login/UserSignup.tsx
• public/app/features/org/OrgDetailsPage.tsx
• public/app/features/profile/UserProfileEditPage.tsx
• public/app/features/sandbox/BenchmarksPage.tsx