From 22d33bd35471d4f3985beb3a30cc09d76477493b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Wed, 10 Apr 2024 13:41:02 +0200
Subject: [PATCH] Grafana UI: `SecretTextArea` - Replace `HorizontalGroup` with
 `Stack` and `Box` (#85849)

---
 .betterer.results                             |  3 ---
 .../SecretTextArea/SecretTextArea.tsx         | 23 +++++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 02285a8b13cb..adceefd5cfe2 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -880,9 +880,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/PanelChrome/index.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "packages/grafana-ui/src/components/Segment/SegmentSelect.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
diff --git a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
index e76b4ffce0d2..e38edf11a5d5 100644
--- a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
+++ b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx
@@ -5,7 +5,8 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { Button } from '../Button';
-import { HorizontalGroup } from '../Layout/Layout';
+import { Box } from '../Layout/Box/Box';
+import { Stack } from '../Layout/Stack/Stack';
 import { TextArea } from '../TextArea/TextArea';
 
 export type Props = React.ComponentProps<typeof TextArea> & {
@@ -35,16 +36,24 @@ const getStyles = (theme: GrafanaTheme2) => {
 export const SecretTextArea = ({ isConfigured, onReset, ...props }: Props) => {
   const styles = useStyles2(getStyles);
   return (
-    <HorizontalGroup>
-      {!isConfigured && <TextArea {...props} />}
-      {isConfigured && (
-        <TextArea {...props} rows={1} disabled={true} value={CONFIGURED_TEXT} className={cx(styles.configuredStyle)} />
-      )}
+    <Stack>
+      <Box>
+        {!isConfigured && <TextArea {...props} />}
+        {isConfigured && (
+          <TextArea
+            {...props}
+            rows={1}
+            disabled={true}
+            value={CONFIGURED_TEXT}
+            className={cx(styles.configuredStyle)}
+          />
+        )}
+      </Box>
       {isConfigured && (
         <Button onClick={onReset} variant="secondary">
           {RESET_BUTTON_TEXT}
         </Button>
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };