From 9611b0ce535ab0982375c2545ebe9c92816b62e9 Mon Sep 17 00:00:00 2001
From: Jan Vorcak <jan.vorcak@redpanda.com>
Date: Thu, 26 Oct 2023 21:05:54 +0200
Subject: [PATCH] Migrates remaining Alert components

---
 .../pages/connect/CreateConnector.tsx         | 88 +++++++++++--------
 .../src/components/pages/connect/helper.tsx   | 22 +++--
 2 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/pages/connect/CreateConnector.tsx b/frontend/src/components/pages/connect/CreateConnector.tsx
index 6dfd05581..b2075d2ce 100644
--- a/frontend/src/components/pages/connect/CreateConnector.tsx
+++ b/frontend/src/components/pages/connect/CreateConnector.tsx
@@ -19,14 +19,14 @@ import { api } from '../../../state/backendApi';
 import { uiState } from '../../../state/uiState';
 import { appGlobal } from '../../../state/appGlobal';
 import { ClusterConnectors, ConnectorValidationResult } from '../../../state/restInterfaces';
-import { Alert, Select, Skeleton, Table } from 'antd';
+import { Select, Skeleton, Table } from 'antd';
 import { HiddenRadioList } from '../../misc/HiddenRadioList';
 import { ConnectorBoxCard, ConnectorPlugin, getConnectorFriendlyName } from './ConnectorBoxCard';
 import { ConfigPage } from './dynamic-ui/components';
 import KowlEditor from '../../misc/KowlEditor';
 import PageContent from '../../misc/PageContent';
 import { ConnectClusterStore, ConnectorValidationError } from '../../../state/connect/state';
-import { Flex, Text, Tabs, Link, SearchField, Box, Heading, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, Spinner, useToast, useDisclosure } from '@redpanda-data/ui';
+import { Flex, Text, Tabs, Link, SearchField, Box, Heading, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, Spinner, useToast, useDisclosure, Alert, AlertDescription, AlertIcon } from '@redpanda-data/ui';
 import { findConnectorMetadata } from './helper';
 import { containsIgnoreCase, delay, TimeSince } from '../../../utils/utils';
 const { Option } = Select;
@@ -539,41 +539,50 @@ function Review({
 
                     {validationFailure ? (
                         <Alert
-                            style={{ marginTop: '2rem' }}
-                            type="error"
-                            message={
-                                <>
-                                    <strong>Validation attempt failed</strong>
-                                    <p>{String(validationFailure)}</p>
-                                </>
-                            }
-                        />
+                            status="error"
+                            variant="left-accent"
+                            my={4}
+                        >
+                            <AlertIcon />
+                            <AlertDescription>
+                                <Box>
+                                    <Text as="h3">Validation attempt failed</Text>
+                                    <Text as="p">{String(validationFailure)}</Text>
+                                </Box>
+                            </AlertDescription>
+                        </Alert>
                     ) : null}
 
                     {creationFailure ? (
                         <Alert
-                            style={{ marginTop: '2rem' }}
-                            type="error"
-                            message={
-                                <>
-                                    <strong>Creation attempt failed</strong>
-                                    <p>{String(creationFailure)}</p>
-                                </>
-                            }
-                        />
+                            status="error"
+                            variant="left-accent"
+                            my={4}
+                        >
+                            <AlertIcon/>
+                            <AlertDescription>
+                                <Box>
+                                    <Text as="h3">Creation attempt failed</Text>
+                                    <Text as="p">{String(creationFailure)}</Text>
+                                </Box>
+                            </AlertDescription>
+                        </Alert>
                     ) : null}
 
                     {genericFailure ? (
                         <Alert
-                            style={{ marginTop: '2rem' }}
-                            type="error"
-                            message={
-                                <>
-                                    <strong>An error occurred</strong>
-                                    <p>{String(genericFailure)}</p>
-                                </>
-                            }
-                        />
+                            status="error"
+                            variant="left-accent"
+                            my={4}
+                        >
+                            <AlertIcon/>
+                            <AlertDescription>
+                                <Box>
+                                    <Text as="h3">An error occurred</Text>
+                                    <Text as="p">{String(genericFailure)}</Text>
+                                </Box>
+                            </AlertDescription>
+                        </Alert>
                     ) : null}
 
                     <Heading as="h2" mt="4" fontSize="1.4em" fontWeight="500">Connector Properties</Heading>
@@ -599,12 +608,13 @@ function getDataSource(validationResult: ConnectorValidationResult) {
 function ValidationDisplay({ validationResult }: { validationResult: ConnectorValidationResult }) {
     return (
         <Alert
-            style={{ marginTop: '2rem' }}
-            type="warning"
-            message={
-                <>
-                    <h3>Submitted configuration is invalid</h3>
-
+            status="warning"
+            variant="left-accent"
+            my={4}
+        >
+            <AlertDescription>
+                <Box>
+                    <Text as="h3" mb={4}>Submitted configuration is invalid</Text>
                     <Table
                         pagination={false}
                         size={'small'}
@@ -628,10 +638,10 @@ function ValidationDisplay({ validationResult }: { validationResult: ConnectorVa
                         ]}
                         rowKey={(record) => record.name}
                     />
-                </>
-            }
-        />
-    );
+                </Box>
+            </AlertDescription>
+        </Alert>
+    )
 }
 
 export default CreateConnector;
diff --git a/frontend/src/components/pages/connect/helper.tsx b/frontend/src/components/pages/connect/helper.tsx
index 1d13ec02a..fb9b94821 100644
--- a/frontend/src/components/pages/connect/helper.tsx
+++ b/frontend/src/components/pages/connect/helper.tsx
@@ -10,7 +10,6 @@
  */
 
 
-import { Alert } from 'antd';
 import { observer, useLocalObservable } from 'mobx-react';
 import React, { CSSProperties, useRef, useState } from 'react';
 import { api } from '../../../state/backendApi';
@@ -45,7 +44,7 @@ import { CheckCircleTwoTone, ExclamationCircleTwoTone, HourglassTwoTone, PauseCi
 import Section from '../../misc/Section';
 import PageContent from '../../misc/PageContent';
 import { isEmbedded } from '../../../config';
-import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, useToast, VStack, Text, Empty } from '@redpanda-data/ui';
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, useToast, VStack, Text, Empty, AlertDescription, AlertIcon, Alert } from '@redpanda-data/ui';
 import { Statistic } from '../../misc/Statistic';
 
 interface ConnectorMetadata {
@@ -594,11 +593,20 @@ export const ConfirmModal = observer(<T,>(props: ConfirmModalProps<T>) => {
             <AlertDialogHeader>Confirm</AlertDialogHeader>
             <AlertDialogBody>
                 {content}
-                {err && <Box mt={4}><Alert
-                    type="error"
-                    message={err.title}
-                    description={err.content}
-                /></Box>}
+                {err && <Box mt={4}>
+                     <Alert
+                         status="error"
+                         variant="left-accent"
+                     >
+                         <AlertIcon />
+                         <AlertDescription>
+                             <Box>
+                                 <Text as="h3">{err.title}</Text>
+                                 <Text as="p">{err.content}</Text>
+                             </Box>
+                         </AlertDescription>
+                     </Alert>
+                 </Box>}
             </AlertDialogBody>
             <AlertDialogFooter gap={2}>
                 <Button onClick={cancel} ref={cancelRef} variant="outline">No</Button>