Chore: Update deprecated layout components HorizontalGroup and VerticalGroup in dashboard scene code (#87447)

* Chore: update deprecated layout components in scene code

* Add missing css for missing selectionOptionsForm

.betterer.results

@@ -1507,9 +1507,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
     ],
-    "public/app/features/dashboard-scene/inspect/HelpWizard/HelpWizard.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/dashboard-scene/inspect/HelpWizard/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -1521,9 +1518,6 @@ exports[`better eslint`] = {
     "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/dashboard-scene/saving/getDashboardChanges.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -1567,19 +1561,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "7"],
       [0, 0, 0, "Do not use any type assertions.", "8"]
     ],
-    "public/app/features/dashboard-scene/settings/VersionsEditView.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/features/dashboard-scene/settings/annotations/AnnotationSettingsEdit.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/dashboard-scene/settings/annotations/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./AnnotationSettingsEdit\`)", "0"],
       [0, 0, 0, "Do not re-export imported variable (\`./AnnotationSettingsList\`)", "1"]
     ],
-    "public/app/features/dashboard-scene/settings/variables/components/SelectionOptionsForm.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/dashboard-scene/settings/variables/components/VariableSelectField.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1593,9 +1578,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not re-export imported variable (\`./VersionHistoryButtons\`)", "3"],
       [0, 0, 0, "Do not re-export imported variable (\`./VersionHistoryComparison\`)", "4"]
     ],
-    "public/app/features/dashboard-scene/sharing/ShareExportTab.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/dashboard-scene/utils/DashboardModelCompatibilityWrapper.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],

public/app/features/dashboard-scene/inspect/HelpWizard/HelpWizard.tsx

@@ -12,7 +12,6 @@ import {
   CodeEditor,
   useStyles2,
   Field,
-  HorizontalGroup,
   InlineSwitch,
   Button,
   Spinner,
@@ -153,7 +152,7 @@ export function HelpWizard({ panel, onClose }: Props) {
             label="Randomize data"
             description="Modify the original data to hide sensitve information.  Note the lengths will stay the same, and duplicate values will be equal."
           >
-            <HorizontalGroup>
+            <Stack>
               <InlineSwitch
                 label="Labels"
                 id="randomize-labels"
@@ -175,7 +174,7 @@ export function HelpWizard({ panel, onClose }: Props) {
                 value={Boolean(randomize.values)}
                 onChange={() => service.onToggleRandomize('values')}
               />
-            </HorizontalGroup>
+            </Stack>
           </Field>
 
           <Field label="Support snapshot" description={`Panel: ${panelTitle}`}>

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx

@@ -5,7 +5,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { config, getDataSourceSrv } from '@grafana/runtime';
 import { SceneObjectBase, SceneComponentProps, sceneGraph, SceneQueryRunner } from '@grafana/scenes';
 import { DataQuery } from '@grafana/schema';
-import { Button, HorizontalGroup, Tab } from '@grafana/ui';
+import { Button, Stack, Tab } from '@grafana/ui';
 import { addQuery } from 'app/core/utils/query';
 import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
 import { GroupActionComponents } from 'app/features/query/components/QueryActionComponent';
@@ -209,7 +209,7 @@ export function PanelDataQueriesTabRendered({ model }: SceneComponentProps<Panel
         onRunQueries={model.onRunQueries}
       />
 
-      <HorizontalGroup spacing="md" align="flex-start">
+      <Stack gap={2}>
         {showAddButton && (
           <Button
             icon="plus"
@@ -231,7 +231,7 @@ export function PanelDataQueriesTabRendered({ model }: SceneComponentProps<Panel
           </Button>
         )}
         {model.renderExtraActions()}
-      </HorizontalGroup>
+      </Stack>
     </>
   );
 }

public/app/features/dashboard-scene/settings/VersionsEditView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { PageLayoutType, dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, sceneGraph } from '@grafana/scenes';
-import { HorizontalGroup, Spinner } from '@grafana/ui';
+import { Spinner, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 import { DashboardScene } from '../scene/DashboardScene';
@@ -245,8 +245,8 @@ function VersionsEditorSettingsListView({ model }: SceneComponentProps<VersionsE
 }
 
 const VersionsHistorySpinner = ({ msg }: { msg: string }) => (
-  <HorizontalGroup>
+  <Stack>
     <Spinner />
     <em>{msg}</em>
-  </HorizontalGroup>
+  </Stack>
 );

public/app/features/dashboard-scene/settings/annotations/AnnotationSettingsEdit.tsx

@@ -13,18 +13,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { config, getDataSourceSrv } from '@grafana/runtime';
 import { VizPanel } from '@grafana/scenes';
 import { AnnotationPanelFilter } from '@grafana/schema/src/raw/dashboard/x/dashboard_types.gen';
-import {
-  Button,
-  Checkbox,
-  Field,
-  FieldSet,
-  HorizontalGroup,
-  Input,
-  MultiSelect,
-  Select,
-  useStyles2,
-  Stack,
-} from '@grafana/ui';
+import { Button, Checkbox, Field, FieldSet, Input, MultiSelect, Select, useStyles2, Stack } from '@grafana/ui';
 import { ColorValueEditor } from 'app/core/components/OptionsUI/color';
 import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
@@ -215,9 +204,9 @@ export const AnnotationSettingsEdit = ({ annotation, editIndex, panels, onUpdate
           />
         </Field>
         <Field label="Color" description="Color to use for the annotation event markers">
-          <HorizontalGroup>
+          <Stack>
             <ColorValueEditor value={annotation?.iconColor} onChange={onColorChange} />
-          </HorizontalGroup>
+          </Stack>
         </Field>
         <Field label="Show in" data-testid={selectors.pages.Dashboard.Settings.Annotations.NewAnnotation.showInLabel}>
           <>

public/app/features/dashboard-scene/settings/variables/components/SelectionOptionsForm.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FormEvent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { VerticalGroup } from '@grafana/ui';
+import { Stack } from '@grafana/ui';
 import { VariableCheckboxField } from 'app/features/dashboard-scene/settings/variables/components/VariableCheckboxField';
 import { VariableTextField } from 'app/features/dashboard-scene/settings/variables/components/VariableTextField';
 
@@ -23,7 +23,7 @@ export function SelectionOptionsForm({
   onAllValueChange,
 }: SelectionOptionsFormProps) {
   return (
-    <VerticalGroup spacing="md" height="inherit">
+    <Stack direction="column" gap={2} height="inherit" alignItems="start">
       <VariableCheckboxField
         value={multi}
         name="Multi-value"
@@ -47,6 +47,6 @@ export function SelectionOptionsForm({
           testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput}
         />
       )}
-    </VerticalGroup>
+    </Stack>
   );
 }

public/app/features/dashboard-scene/sharing/ShareExportTab.tsx

@@ -4,7 +4,7 @@ import { useAsync } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { SceneComponentProps, SceneObjectBase } from '@grafana/scenes';
-import { Button, ClipboardButton, CodeEditor, Field, Modal, Switch, VerticalGroup } from '@grafana/ui';
+import { Button, ClipboardButton, CodeEditor, Field, Modal, Stack, Switch } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal';
 import { shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
@@ -114,7 +114,7 @@ function ShareExportTabRenderer({ model }: SceneComponentProps<ShareExportTab>)
           <p className="share-modal-info-text">
             <Trans i18nKey="share-modal.export.info-text">Export this dashboard.</Trans>
           </p>
-          <VerticalGroup spacing="md">
+          <Stack gap={2} direction="column">
             <Field label={exportExternallyTranslation}>
               <Switch
                 id="share-externally-toggle"
@@ -122,7 +122,7 @@ function ShareExportTabRenderer({ model }: SceneComponentProps<ShareExportTab>)
                 onChange={model.onShareExternallyChange}
               />
             </Field>
-          </VerticalGroup>
+          </Stack>
 
           <Modal.ButtonRow>
             <Button