Fix lint errors

public/app/features/provisioning/Setup/SetupModal.tsx

@@ -1,13 +1,16 @@
-import { useState } from 'react';
-import { Modal, Button, useStyles2, Stack, Text } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
-import { Feature } from './types';
+import { useState } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Modal, Button, useStyles2, Stack, Text } from '@grafana/ui';
+
 import { SetupStep } from './SetupStep';
 import { Sidebar } from './Sidebar';
+import { Feature } from './types';
 
 export interface Props {
   feature: Feature;
+
   isOpen: boolean;
   onDismiss: () => void;
 }
@@ -26,20 +29,20 @@ export const SetupModal = ({ feature, isOpen, onDismiss }: Props) => {
 
   return (
     <Modal isOpen={isOpen} title={`Setup ${feature.title}`} onDismiss={onDismiss} className={styles.modal}>
-      <div style={{ marginTop: '-16px', marginBottom: '20px' }}>
+      <Stack direction={'column'} gap={4}>
         <Text variant="body" color="secondary">
           {feature.description}
         </Text>
-      </div>
-      <Stack direction="row" height="100%">
-        <Sidebar steps={stepTitles} currentStep={currentStep} onStepClick={setCurrentStep} />
+        <Stack direction="row" height="100%">
+          <Sidebar steps={stepTitles} currentStep={currentStep} onStepClick={setCurrentStep} />
 
-        <div className={styles.contentWrapper}>
-          <SetupStep step={feature.setupSteps[currentStep]} />
-        </div>
+          <div className={styles.contentWrapper}>
+            <SetupStep step={feature.setupSteps[currentStep]} />
+          </div>
+        </Stack>
       </Stack>
 
-      <div className={styles.footer}>
+      <Modal.ButtonRow>
         <Stack direction="row" justifyContent="flex-end" gap={2}>
           <Button variant="secondary" onClick={handlePrevious} disabled={isFirstStep}>
             Previous
@@ -55,30 +58,30 @@ export const SetupModal = ({ feature, isOpen, onDismiss }: Props) => {
             </Button>
           )}
         </Stack>
-      </div>
+      </Modal.ButtonRow>
     </Modal>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  modal: css`
-    width: 1100px;
-    max-width: 95%;
-  `,
-  description: css`
-    margin-bottom: ${theme.spacing(3)};
-    padding: 0 ${theme.spacing(1)};
-  `,
-  contentWrapper: css`
-    flex: 1;
-    overflow-y: auto;
-    min-width: 0;
-    padding: ${theme.spacing(2)};
-    border-left: 1px solid ${theme.colors.border.weak};
-  `,
-  footer: css`
-    padding: ${theme.spacing(2)};
-    border-top: 1px solid ${theme.colors.border.weak};
-    margin-top: ${theme.spacing(2)};
-  `,
+  modal: css({
+    width: '1100px',
+    maxWidth: '95%',
+  }),
+  description: css({
+    marginBottom: theme.spacing(3),
+    padding: theme.spacing(0, 1),
+  }),
+  contentWrapper: css({
+    flex: 1,
+    overflowY: 'auto',
+    minWidth: 0,
+    padding: theme.spacing(2),
+    borderLeft: `1px solid ${theme.colors.border.weak}`,
+  }),
+  footer: css({
+    padding: theme.spacing(2),
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    marginTop: theme.spacing(2),
+  }),
 });

public/app/features/provisioning/Setup/Sidebar.tsx

@@ -1,6 +1,5 @@
-import { useStyles2, Stack } from '@grafana/ui';
-import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, Stack, Box } from '@grafana/ui';
+
 import { SidebarItem, getStyles as getStepItemStyles } from './SidebarItem';
 
 interface Props {
@@ -14,11 +13,10 @@ export const Sidebar = ({ steps, currentStep, onStepClick }: Props) => {
     return null;
   }
 
-  const styles = useStyles2(getStyles);
   const stepItemStyles = useStyles2(getStepItemStyles);
 
   return (
-    <div className={styles.sidebar}>
+    <Box width={'260px'} padding={1}>
       <Stack direction="column" gap={1}>
         {steps.map((step, index) => (
           <SidebarItem
@@ -31,14 +29,6 @@ export const Sidebar = ({ steps, currentStep, onStepClick }: Props) => {
           />
         ))}
       </Stack>
-    </div>
+    </Box>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  sidebar: css`
-    width: 260px;
-    padding: ${theme.spacing(1)};
-    overflow-y: auto;
-  `,
-});

public/app/features/provisioning/components/CodeBlock.tsx

@@ -1,35 +1,17 @@
-import { CodeEditor, ClipboardButton, useTheme2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
+import { GrafanaTheme2 } from '@grafana/data';
+import { ClipboardButton, useStyles2, CodeEditor } from '@grafana/ui';
+
 interface Props {
   code: string;
   copyCode?: boolean;
 }
 
 export const CodeBlock = ({ code, copyCode = true }: Props) => {
-  const theme = useTheme2();
-
-  // Calculate content size
   const lineCount = code.split('\n').length;
-  const estimatedHeight = lineCount * 24; // 24px per line
-  const minHeight = 42; // Minimum height for one line
-  const useMinHeight = estimatedHeight <= minHeight;
-  const height = useMinHeight ? `${minHeight}px` : `${Math.min(estimatedHeight, 300)}px`;
-
-  const styles = {
-    container: css`
-      position: relative;
-      margin: ${theme.spacing(2)} 0;
-      border: 1px solid ${theme.colors.border.medium};
-      min-height: ${minHeight}px;
-    `,
-    copyButton: css`
-      position: absolute;
-      top: ${theme.spacing(1)};
-      right: ${theme.spacing(1)};
-      z-index: 1;
-    `,
-  };
+  const useMinHeight = lineCount * 24 <= 42; // 24px per line, 42px minimum
+  const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.container}>
@@ -41,7 +23,7 @@ export const CodeBlock = ({ code, copyCode = true }: Props) => {
         language="ini"
         showLineNumbers={false}
         showMiniMap={false}
-        height={height}
+        height={useMinHeight ? '42px' : `${Math.min(lineCount * 24, 300)}px`}
         readOnly={true}
         monacoOptions={{
           scrollBeyondLastLine: false,
@@ -54,3 +36,17 @@ export const CodeBlock = ({ code, copyCode = true }: Props) => {
     </div>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    position: 'relative',
+    margin: `${theme.spacing(2)} 0`,
+    border: `1px solid ${theme.colors.border.medium}`,
+  }),
+  copyButton: css({
+    position: 'absolute',
+    top: theme.spacing(1),
+    right: theme.spacing(1),
+    zIndex: 1,
+  }),
+});