Loki: update HorizontalGroup deprecation (#86995)

* Loki: update HorizontalGroup deprecation * Update betterer
grafana · Apr 29, 2024 · f1e8d26 · f1e8d26
1 parent c151a97
commit f1e8d26
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/.betterer.results b/.betterer.results
@@ -5262,7 +5262,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "10"]
     ],
     "public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"],
       [0, 0, 0, "Styles should be written using objects.", "3"],
@@ -5275,8 +5275,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "10"],
       [0, 0, 0, "Styles should be written using objects.", "11"],
       [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"]
+      [0, 0, 0, "Styles should be written using objects.", "13"]
     ],
     "public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
@@ -5313,10 +5312,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
     "public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],

diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
@@ -8,13 +8,13 @@ import { reportInteraction } from '@grafana/runtime';
 import {
   Button,
   HighlightPart,
-  HorizontalGroup,
   Input,
   Label,
   LoadingPlaceholder,
   withTheme2,
   BrowserLabel as LokiLabel,
   fuzzyMatch,
+  Stack,
 } from '@grafana/ui';
 
 import LokiLanguageProvider from '../LanguageProvider';
@@ -533,7 +533,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
           <div className={cx(styles.status, (status || error) && styles.statusShowing)}>
             <span className={error ? styles.error : ''}>{error || status}</span>
           </div>
-          <HorizontalGroup>
+          <Stack gap={1}>
             <Button aria-label="Use selector as logs button" disabled={empty} onClick={this.onClickRunLogsQuery}>
               Show logs
             </Button>
@@ -556,7 +556,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
             <Button aria-label="Selector clear button" variant="secondary" onClick={this.onClickClear}>
               Clear
             </Button>
-          </HorizontalGroup>
+          </Stack>
         </div>
       </>
     );

diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { useStyles2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
+import { useStyles2, IconButton, Tooltip, Icon, Stack } from '@grafana/ui';
 
 import { testIds } from '../../components/LokiQueryEditor';
 import { LokiQueryField } from '../../components/LokiQueryField';
@@ -49,7 +49,7 @@ export function LokiQueryCodeEditor({
             {lokiFormatQuery && (
               <div className={styles.buttonGroup}>
                 <div>
-                  <HorizontalGroup spacing="sm">
+                  <Stack gap={1}>
                     <IconButton
                       onClick={onClickFormatQueryButton}
                       name="brackets-curly"
@@ -59,7 +59,7 @@ export function LokiQueryCodeEditor({
                     <Tooltip content={`Use ctrl/cmd + z to undo`}>
                       <Icon className={styles.hint} name="keyboard" />
                     </Tooltip>
-                  </HorizontalGroup>
+                  </Stack>
                 </div>
               </div>
             )}