Skip to content

Commit 7f17c00

Browse files
jvorcakjvorcak
authored
Merge pull request #880 from redpanda-data/feature/migrate-empty-component-to-chakra
Migrated Empty component to Chakra
2 parents 826db4d + 84da4c2 commit 7f17c00

File tree

10 files changed

+82
-128
lines changed

10 files changed

+82
-128
lines changed

‎frontend/src/components/pages/acls/Acl.List.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
* the Business Source License, use of this software will be governed
99
* by the Apache License, Version 2.0
1010
*/
11-
/* eslint-disable */
1211

1312
import { observer } from 'mobx-react';
14-
import { Empty, Input } from 'antd';
13+
import { Input } from 'antd';
1514
import { PageComponent, PageInitHelper } from '../Page';
1615
import { api } from '../../../state/backendApi';
1716
import { uiSettings } from '../../../state/ui';
@@ -22,7 +21,7 @@ import { appGlobal } from '../../../state/appGlobal';
2221
import { Code, DefaultSkeleton } from '../../../utils/tsxUtils';
2322
import { clone, toJson } from '../../../utils/jsonUtils';
2423
import { KowlColumnType, KowlTable } from '../../misc/KowlTable';
25-
import { LockIcon, QuestionIcon } from '@primer/octicons-react';
24+
import { QuestionIcon } from '@primer/octicons-react';
2625
import { TrashIcon } from '@heroicons/react/outline';
2726
import { AclFlat, AclPrincipalGroup, collectClusterAcls, collectConsumerGroupAcls, collectTopicAcls, collectTransactionalIdAcls, createEmptyClusterAcl, createEmptyConsumerGroupAcl, createEmptyTopicAcl, createEmptyTransactionalIdAcl } from './Models';
2827
import { AclPrincipalGroupEditor } from './PrincipalGroupEditor';
@@ -31,7 +30,7 @@ import PageContent from '../../misc/PageContent';
3130
import createAutoModal from '../../../utils/createAutoModal';
3231
import { CreateServiceAccountEditor, generatePassword } from './CreateServiceAccountEditor';
3332
import { Features } from '../../../state/supportedFeatures';
34-
import { Alert, AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, Badge, Button, createStandaloneToast, Icon, redpandaToastOptions, SearchField, Tooltip, Text, redpandaTheme, Menu, MenuButton, MenuItem, MenuList } from '@redpanda-data/ui';
33+
import { Alert, AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, Badge, Button, createStandaloneToast, Icon, redpandaToastOptions, SearchField, Tooltip, Text, redpandaTheme, Menu, MenuButton, MenuItem, MenuList, Result } from '@redpanda-data/ui';
3534
import React, { FC, useRef } from 'react';
3635

3736
// TODO - once AclList is migrated to FC, we could should move this code to use useToast()
@@ -287,6 +286,7 @@ class AclList extends PageComponent {
287286

288287
{this.edittingPrincipalGroup &&
289288
<AclPrincipalGroupEditor
289+
// @ts-ignore
290290
principalGroup={this.edittingPrincipalGroup}
291291
type={this.editorType}
292292
onClose={() => {
@@ -509,20 +509,19 @@ const AlertDeleteFailed: FC<{ aclFailed: { err: unknown } | null, onClose: () =>
509509
const PermissionDenied = <>
510510
<PageContent key="aclNoPerms">
511511
<Section>
512-
<Empty description={null}>
513-
<div style={{ marginBottom: '1.5rem' }}>
514-
<h2><span><LockIcon verticalAlign="middle" size={20} /></span> Permission Denied</h2>
515-
<p>
516-
You are not allowed to view this page.
517-
<br />
518-
Contact the administrator if you think this is an error.
519-
</p>
520-
</div>
521-
522-
<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
512+
<Result
513+
title="Permission Denied"
514+
status={403}
515+
userMessage={<Text>
516+
You are not allowed to view this page.
517+
<br/>
518+
Contact the administrator if you think this is an error.
519+
</Text>
520+
}
521+
extra={<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
523522
<Button>Redpanda Console documentation</Button>
524-
</a>
525-
</Empty>
523+
</a>}
524+
/>
526525
</Section>
527526
</PageContent>
528527
</>

‎frontend/src/components/pages/connect/helper.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*/
1111

1212

13-
import { Alert, Empty } from 'antd';
13+
import { Alert } from 'antd';
1414
import { observer, useLocalObservable } from 'mobx-react';
1515
import React, { CSSProperties, useRef, useState } from 'react';
1616
import { api } from '../../../state/backendApi';
@@ -45,7 +45,7 @@ import { CheckCircleTwoTone, ExclamationCircleTwoTone, HourglassTwoTone, PauseCi
4545
import Section from '../../misc/Section';
4646
import PageContent from '../../misc/PageContent';
4747
import { isEmbedded } from '../../../config';
48-
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, useToast } from '@redpanda-data/ui';
48+
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, useToast, VStack, Text, Empty } from '@redpanda-data/ui';
4949
import { Statistic } from '../../misc/Statistic';
5050

5151
interface ConnectorMetadata {
@@ -481,21 +481,17 @@ export function NotConfigured() {
481481
return (
482482
<PageContent key="b">
483483
<Section>
484-
<Empty description={null}>
485-
<div style={{ marginBottom: '1.5rem' }}>
486-
<h2>Not Configured</h2>
487-
488-
<p>
489-
Kafka Connect is not configured in Redpanda Console.
490-
<br />
491-
Setup the connection details to your Kafka Connect cluster in your Redpanda Console config, to view and control all your connectors and tasks.
492-
</p>
493-
</div>
494-
484+
<VStack gap={4}>
485+
<Empty description="Not Configured" />
486+
<Text textAlign="center">
487+
Kafka Connect is not configured in Redpanda Console.
488+
<br />
489+
Setup the connection details to your Kafka Connect cluster in your Redpanda Console config, to view and control all your connectors and tasks.
490+
</Text>
495491
<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
496492
<Button variant="solid">Redpanda Console Config Documentation</Button>
497493
</a>
498-
</Empty>
494+
</VStack>
499495
</Section>
500496
</PageContent>
501497
);

‎frontend/src/components/pages/consumers/Group.Details.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*/
1111

1212
import React, { Component } from 'react';
13-
import { Table, Empty } from 'antd';
13+
import { Table } from 'antd';
1414
import { observer } from 'mobx-react';
1515

1616
import { api } from '../../../state/backendApi';
@@ -28,7 +28,7 @@ import { EditOffsetsModal, GroupOffset, DeleteOffsetsModal, GroupDeletingMode }
2828
import { ShortNum } from '../../misc/ShortNum';
2929
import AclList from '../topics/Tab.Acl/AclList';
3030
import { SkipIcon } from '@primer/octicons-react';
31-
import { Flex, Section, Tabs, Tag, Tooltip, Popover, Accordion, Text } from '@redpanda-data/ui';
31+
import { Flex, Section, Tabs, Tag, Tooltip, Popover, Accordion, Text, Empty } from '@redpanda-data/ui';
3232
import PageContent from '../../misc/PageContent';
3333
import { Features } from '../../../state/supportedFeatures';
3434
import { Statistic } from '../../misc/Statistic';
@@ -365,18 +365,11 @@ class GroupByTopics extends Component<{
365365
: undefined; // more than one -> collapse
366366

367367
const nullEntries = topicEntries.filter(e => e == null).length;
368-
if (topicEntries.length == 0 || topicEntries.length == nullEntries)
368+
if (topicEntries.length == 0 || topicEntries.length == nullEntries) {
369369
return (
370-
<Empty
371-
style={{
372-
background: 'radial-gradient(hsl(0deg 0% 100%) 40%, hsl(0deg 0% 97%) 90%)',
373-
borderRadius: '5px',
374-
padding: '1.5em'
375-
}}
376-
>
377-
{p.onlyShowPartitionsWithLag ? <span>All {topicEntries.length} topics have been filtered (no lag on any partition).</span> : null}
378-
</Empty>
370+
<Empty description={p.onlyShowPartitionsWithLag ? <span>All {topicEntries.length} topics have been filtered (no lag on any partition).</span> : 'No data found'}/>
379371
);
372+
}
380373

381374

382375
return (
@@ -472,17 +465,9 @@ class GroupByMembers extends Component<{ group: GroupDescription; onlyShowPartit
472465
: undefined; // more than one -> collapse
473466

474467
const nullEntries = memberEntries.filter(e => e == null).length;
475-
if (memberEntries.length == 0 || memberEntries.length == nullEntries)
476-
return (
477-
<Empty
478-
style={{
479-
background: 'radial-gradient(hsl(0deg 0% 100%) 40%, hsl(0deg 0% 97%) 90%)',
480-
borderRadius: '5px',
481-
padding: '1.5em'
482-
}}
483-
>
484-
{p.onlyShowPartitionsWithLag ? <span>All {memberEntries.length} members have been filtered (no lag on any partition).</span> : null} </Empty>
485-
);
468+
if (memberEntries.length == 0 || memberEntries.length == nullEntries) {
469+
return <Empty description={p.onlyShowPartitionsWithLag ? <span>All {memberEntries.length} members have been filtered (no lag on any partition).</span> : 'No data found'}/>
470+
}
486471

487472

488473
return (

‎frontend/src/components/pages/quotas/Quotas.List.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
*/
1111

1212
import { observer } from 'mobx-react';
13-
import { Empty } from 'antd';
1413
import { PageComponent, PageInitHelper } from '../Page';
1514
import { api } from '../../../state/backendApi';
1615
import { uiSettings } from '../../../state/ui';
@@ -19,13 +18,13 @@ import { computed, makeObservable } from 'mobx';
1918
import { appGlobal } from '../../../state/appGlobal';
2019
import { DefaultSkeleton } from '../../../utils/tsxUtils';
2120
import { KowlColumnType, KowlTable } from '../../misc/KowlTable';
22-
import { LockIcon, SkipIcon } from '@primer/octicons-react';
21+
import { SkipIcon } from '@primer/octicons-react';
2322
import { toJson } from '../../../utils/jsonUtils';
2423
import { prettyBytes, prettyNumber } from '../../../utils/utils';
2524
import { QuotaType } from '../../../state/restInterfaces';
2625
import Section from '../../misc/Section';
2726
import PageContent from '../../misc/PageContent';
28-
import { Alert, AlertIcon, Button } from '@redpanda-data/ui';
27+
import { Alert, AlertIcon, Button, Result } from '@redpanda-data/ui';
2928

3029
@observer
3130
class QuotasList extends PageComponent {
@@ -102,20 +101,17 @@ class QuotasList extends PageComponent {
102101
const PermissionDenied = <>
103102
<PageContent key="quotasNoPerms">
104103
<Section>
105-
<Empty description={null}>
106-
<div style={{ marginBottom: '1.5rem' }}>
107-
<h2><span><LockIcon verticalAlign="middle" size={20} /></span> Permission Denied</h2>
108-
<p>
109-
You are not allowed to view this page.
110-
<br />
111-
Contact the administrator if you think this is an error.
112-
</p>
113-
</div>
114-
115-
<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
104+
<Result
105+
title="Forbidden"
106+
status={403}
107+
userMessage={<p>You are not allowed to view this page.
108+
<br/>
109+
Contact the administrator if you think this is an error.</p>
110+
}
111+
extra={<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
116112
<Button variant="solid">Redpanda Console documentation for roles and permissions</Button>
117-
</a>
118-
</Empty>
113+
</a>}
114+
/>
119115
</Section>
120116
</PageContent>
121117
</>

‎frontend/src/components/pages/reassign-partitions/Step3.Review.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
import { Component } from 'react';
1313
import { observer } from 'mobx-react';
14-
import { Empty, Table } from 'antd';
14+
import { Table } from 'antd';
1515
import { ColumnProps } from 'antd/lib/table';
1616
import { api } from '../../../state/backendApi';
1717
import { makePaginationConfig } from '../../misc/common';
@@ -23,6 +23,7 @@ import { BrokerList } from '../../misc/BrokerList';
2323
import ReassignPartitions, { PartitionSelection, } from './ReassignPartitions';
2424
import { uiSettings } from '../../../state/ui';
2525
import { BandwidthSlider } from './components/BandwidthSlider';
26+
import { Empty } from '@redpanda-data/ui';
2627

2728
export type PartitionWithMoves = Partition & {
2829
brokersBefore: number[],

‎frontend/src/components/pages/schemas/EditCompatibility.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,12 @@ import { useState } from 'react';
1313
import { observer } from 'mobx-react';
1414
import { PageComponent, PageInitHelper } from '../Page';
1515
import { api } from '../../../state/backendApi';
16-
import { Empty, } from 'antd';
1716
import { appGlobal } from '../../../state/appGlobal';
1817
import { DefaultSkeleton, Button } from '../../../utils/tsxUtils';
1918
import './Schema.List.scss';
2019
import Section from '../../misc/Section';
2120
import PageContent from '../../misc/PageContent';
22-
import { Box, CodeBlock, Flex, Grid, GridItem, Link, Stack, useToast } from '@redpanda-data/ui';
23-
import { Text } from '@redpanda-data/ui';
21+
import { Box, CodeBlock, Empty, Flex, Grid, GridItem, Link, Stack, useToast, VStack, Text } from '@redpanda-data/ui';
2422
import { Radio, RadioGroup } from '@chakra-ui/react';
2523
import { SchemaRegistryCompatibilityMode } from '../../../state/restInterfaces';
2624
import { getFormattedSchemaText, schemaTypeToCodeBlockLanguage } from './Schema.Details';
@@ -29,22 +27,20 @@ function renderNotConfigured() {
2927
return (
3028
<PageContent>
3129
<Section>
32-
<Empty description={null}>
33-
<div style={{ marginBottom: '1.5rem' }}>
34-
<h2>Not Configured</h2>
35-
36-
<p>
37-
Schema Registry is not configured in Redpanda Console.
38-
<br />
39-
To view all registered schemas, their documentation and their versioned history simply provide the connection credentials in the Redpanda Console config.
40-
</p>
41-
</div>
42-
30+
<VStack gap={4}>
31+
<Empty
32+
description="Not Configured"
33+
/>
34+
<Text textAlign="center">
35+
Schema Registry is not configured in Redpanda Console.
36+
<br />
37+
To view all registered schemas, their documentation and their versioned history simply provide the connection credentials in the Redpanda Console config.
38+
</Text>
4339
{/* todo: fix link once we have a better guide */}
4440
<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
4541
<Button variant="solid">Redpanda Console Config Documentation</Button>
4642
</a>
47-
</Empty>
43+
</VStack>
4844
</Section>
4945
</PageContent>
5046
);

‎frontend/src/components/pages/schemas/Schema.List.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import React, { RefObject } from 'react';
1313
import { observer } from 'mobx-react';
1414
import { PageComponent, PageInitHelper } from '../Page';
1515
import { api } from '../../../state/backendApi';
16-
import { Empty, } from 'antd';
1716
import { appGlobal } from '../../../state/appGlobal';
1817
import { sortField } from '../../misc/common';
1918
import { DefaultSkeleton, InlineSkeleton, Button } from '../../../utils/tsxUtils';
@@ -25,7 +24,7 @@ import { makeObservable, observable } from 'mobx';
2524
import { KowlTable } from '../../misc/KowlTable';
2625
import Section from '../../misc/Section';
2726
import PageContent from '../../misc/PageContent';
28-
import { Alert, AlertIcon, Checkbox, Divider, Flex, Skeleton } from '@redpanda-data/ui';
27+
import { Alert, AlertIcon, Checkbox, Divider, Empty, Flex, Skeleton, VStack, Text } from '@redpanda-data/ui';
2928
import { SmallStat } from '../../misc/SmallStat';
3029
import { TrashIcon } from '@heroicons/react/outline';
3130
import { openDeleteModal, openPermanentDeleteModal } from './modals';
@@ -56,22 +55,19 @@ function renderNotConfigured() {
5655
return (
5756
<PageContent>
5857
<Section>
59-
<Empty description={null}>
60-
<div style={{ marginBottom: '1.5rem' }}>
61-
<h2>Not Configured</h2>
62-
63-
<p>
64-
Schema Registry is not configured in Redpanda Console.
65-
<br />
66-
To view all registered schemas, their documentation and their versioned history simply provide the connection credentials in the Redpanda Console config.
67-
</p>
68-
</div>
58+
<VStack gap={4}>
59+
<Empty description="Not Configured" />
60+
<Text textAlign="center">
61+
Schema Registry is not configured in Redpanda Console.
62+
<br/>
63+
To view all registered schemas, their documentation and their versioned history simply provide the connection credentials in the Redpanda Console config.
64+
</Text>
6965

7066
{/* todo: fix link once we have a better guide */}
7167
<a target="_blank" rel="noopener noreferrer" href="https://docs.redpanda.com/docs/manage/console/">
7268
<Button variant="solid">Redpanda Console Config Documentation</Button>
7369
</a>
74-
</Empty>
70+
</VStack>
7571
</Section>
7672
</PageContent>
7773
);

‎frontend/src/components/pages/topics/Tab.Config.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111

1212
import { Component } from 'react';
1313
import { ConfigEntryExtended, KafkaError, Topic } from '../../../state/restInterfaces';
14-
import { Empty, Typography } from 'antd';
1514
import { observer } from 'mobx-react';
1615
import { uiSettings } from '../../../state/ui';
1716
import '../../../utils/arrayExtensions';
@@ -24,9 +23,7 @@ import { computed, makeObservable } from 'mobx';
2423
import { formatConfigValue } from '../../../utils/formatters/ConfigValueFormatter';
2524
import colors from '../../../colors';
2625
import TopicConfigurationEditor from './TopicConfiguration';
27-
import { Box, Button, Code, CodeBlock, Flex, Result, Tooltip } from '@redpanda-data/ui';
28-
29-
const { Text } = Typography;
26+
import { Box, Button, Code, CodeBlock, Empty, Flex, Result, Tooltip } from '@redpanda-data/ui';
3027

3128
// todo: can we assume that config values for time and bytes will always be provided in the smallest units?
3229
// or is it possible we'll get something like 'segment.hours' instead of 'segment.ms'?
@@ -90,15 +87,7 @@ export class TopicConfiguration extends Component<{
9087

9188
if (config === null || config.configEntries.length == 0) {
9289
// config===null should never happen, so we catch it together with empty
93-
const desc = (
94-
<>
95-
<Text type="secondary" strong style={{ fontSize: '125%' }}>
96-
No config entries
97-
</Text>
98-
<br />
99-
</>
100-
);
101-
return <Empty description={desc} />;
90+
return <Empty description="No config entries" />;
10291
}
10392
return null;
10493
}

0 commit comments

Comments
 (0)