Skip to content

Commit

Permalink
Migrates remaining Alert components
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvorcak
jvorcak committed Oct 26, 2023
1 parent 89d2a21 commit 9611b0c
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 46 deletions.
88 changes: 49 additions & 39 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,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;
Expand Down Expand Up @@ -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>
Expand All @@ -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'}
Expand All @@ -628,10 +638,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 as="p">{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 9611b0c

Please sign in to comment.