Skip to content

Commit

Permalink
Merge pull request #906 from redpanda-data/feature/migrate-remaining-…
Browse files Browse the repository at this point in the history 
…alert-component

Migrates remaining Alert components
  • Loading branch information
@jvorcak
jvorcak authored Nov 2, 2023
2 parents 09430d6 + 410b49e commit 0d32871
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 45 deletions.
89 changes: 51 additions & 38 deletions frontend/src/components/pages/connect/CreateConnector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@ import { api } from '../../../state/backendApi';
import { uiState } from '../../../state/uiState';
import { appGlobal } from '../../../state/appGlobal';
import { ClusterConnectors, ConnectorValidationResult } from '../../../state/restInterfaces';
import { Alert, Table } from 'antd';
import { 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 {
Alert,
AlertDescription,
AlertIcon,
Box,
Flex,
Heading,
Expand Down Expand Up @@ -550,41 +553,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>{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>{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>{String(genericFailure)}</Text>
</Box>
</AlertDescription>
</Alert>
) : null}

<Heading as="h2" mt="4" fontSize="1.4em" fontWeight="500">Connector Properties</Heading>
Expand All @@ -610,12 +622,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'}
Expand All @@ -639,10 +652,10 @@ function ValidationDisplay({ validationResult }: { validationResult: ConnectorVa
]}
rowKey={(record) => record.name}
/>
</>
}
/>
);
</Box>
</AlertDescription>
</Alert>
)
}

export default CreateConnector;
22 changes: 15 additions & 7 deletions frontend/src/components/pages/connect/helper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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>{err.content}</Text>
</Box>
</AlertDescription>
</Alert>
</Box>}
</AlertDialogBody>
<AlertDialogFooter gap={2}>
<Button onClick={cancel} ref={cancelRef} variant="outline">No</Button>
Expand Down

0 comments on commit 0d32871

Please sign in to comment.